Skip to content

Feature/solana evm #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Feature/solana evm #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b59051
chore: Remove unused environment variables and update dependencies
khaosans Nov 5, 2024
460d250
refactor: Update OnchainKit imports and remove unused code
khaosans Nov 5, 2024
9a6f163
add solana
khaosans Nov 5, 2024
26c9bfa
refactor: Update OnchainKit imports and remove unused code
khaosans Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions .env.local.example
View file
Open in desktop

This file was deleted.

19 changes: 14 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,25 @@
},
"dependencies": {
"@coinbase/onchainkit": "^0.33.6",
"next": "^14.2.5",
"@reown/appkit": "^1.2.1",
"@reown/appkit-adapter-solana": "^1.2.1",
"@reown/appkit-adapter-wagmi": "^1.2.1",
"@solana/wallet-adapter-wallets": "^0.19.32",
"@tanstack/react-query": "^5.59.19",
"@uniswap/sdk": "^3.0.3",
"@walletconnect/universal-provider": "^2.17.1",
"next": "^15.0.2",
"permissionless": "^0.1.26",
"react": "^18",
"react-dom": "^18",
"siwe": "^2.3.2"
"siwe": "^2.3.2",
"viem": "^2.21.40",
"wagmi": "^2.12.25"
},
"devDependencies": {
"@biomejs/biome": "^1.8.0",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^14.2.0",
"@types/node": "^20.11.8",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.7",
Expand All @@ -35,14 +46,12 @@
"autoprefixer": "^10.4.19",
"bufferutil": "^4.0.7",
"encoding": "^0.1.13",
"lokijs": "^1.5.12",
"jsdom": "^24.1.0",
"lokijs": "^1.5.12",
"pino-pretty": "^10.2.0",
"postcss": "^8.4.38",
"supports-color": "^9.4.0",
"tailwindcss": "^3.4.0",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^14.2.0",
"typescript": "^5.3.3",
"utf-8-validate": "^6.0.3",
"vitest": "^2.0.1"
Expand Down
15,208 changes: 15,208 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

Binary file removed public/copy-api-key.png
View file
Open in desktop
Binary file not shown.
Binary file modified public/favicon.ico
View file
Open in desktop
Binary file not shown.
26 changes: 12 additions & 14 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,38 @@
import type { Metadata } from 'next';
import { NEXT_PUBLIC_URL } from '../config';
import Providers from '../components/Providers';
import React from 'react';

import './global.css';
import '@coinbase/onchainkit/styles.css';
import '@rainbow-me/rainbowkit/styles.css';
import dynamic from 'next/dynamic';

const OnchainProviders = dynamic(
() => import('src/components/OnchainProviders'),
{
ssr: false,
},
);

export const viewport = {
width: 'device-width',
initialScale: 1.0,
};

export const metadata: Metadata = {
title: 'Onchain App Template',
description: 'Built with OnchainKit',
title: 'Chainable Guru',
description: 'Cross-Chain DeFi Platform',
openGraph: {
title: 'Onchain App Template',
description: 'Built with OnchainKit',
title: 'Chainable Guru',
description: 'Cross-Chain DeFi Platform',
images: [`${NEXT_PUBLIC_URL}/vibes/vibes-19.png`],
},
};

export default function RootLayout({
children,
}: { children: React.ReactNode }) {
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="flex items-center justify-center">
<OnchainProviders>{children}</OnchainProviders>
<Providers>
{children}
</Providers>
</body>
</html>
);
Expand Down
235 changes: 197 additions & 38 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,211 @@
'use client';
import Footer from 'src/components/Footer';
import TransactionWrapper from 'src/components/TransactionWrapper';
import WalletWrapper from 'src/components/WalletWrapper';
import { ONCHAINKIT_LINK } from 'src/links';
import OnchainkitSvg from 'src/svg/OnchainkitSvg';

import { useAccount } from 'wagmi';
import LoginButton from '../components/LoginButton';
import SignupButton from '../components/SignupButton';
import { useAppKit, useAppKitAccount, useAppKitNetwork } from '@reown/appkit/react';
import { useEffect, useState } from 'react';

export default function Page() {
const { address } = useAccount();
const { open } = useAppKit();
const { isConnected, caipAddress } = useAppKitAccount();
const { caipNetwork, chainId } = useAppKitNetwork();
const [mounted, setMounted] = useState(false);

useEffect(() => {
setMounted(true);
}, []);

const openSwapModal = () => {
open();
};

const handleConnect = () => {
open({ view: 'Connect' });
};

const handleNetworkSelect = () => {
open({ view: 'Networks' });
};

// Format the address for display based on network type
const formatAddress = (addr: string) => {
if (!addr) return '';
// Check if it's a Solana address (they're 44 characters long)
if (addr.length === 44) {
return `${addr.slice(0, 4)}...${addr.slice(-4)}`;
}
// For EVM addresses
return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
};

// Get the current address based on network
const getCurrentAddress = () => {
if (!caipAddress) return '';
// Extract the actual address from CAIP format (e.g., eip155:1:0x... or solana:mainnet:...)
const addressParts = caipAddress.split(':');
return addressParts[addressParts.length - 1];
};

if (!mounted) {
return null;
}

return (
<div className="flex h-full w-96 max-w-full flex-col px-1 md:w-[1008px]">
<section className="mt-6 mb-6 flex w-full flex-col md:flex-row">
<div className="flex w-full flex-row items-center justify-between gap-2 md:gap-0">
<a
href={ONCHAINKIT_LINK}
title="onchainkit"
target="_blank"
rel="noreferrer"
>
<OnchainkitSvg />
</a>
<div className="flex items-center gap-3">
<SignupButton />
{!address && <LoginButton />}
<div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-white">
{/* Navigation Bar */}
<nav className="border-b border-gray-700 bg-gray-900/50 backdrop-blur-md">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 items-center justify-between">
<div className="text-xl font-bold text-white">Chainable Guru</div>
<div className="flex items-center space-x-4">
{isConnected ? (
<div className="flex items-center gap-4">
{caipAddress && (
<div className="text-sm text-gray-300 flex items-center gap-2">
<span className="font-medium">{formatAddress(getCurrentAddress())}</span>
<button
onClick={handleNetworkSelect}
className="px-2 py-1 bg-gray-800 rounded-md text-xs hover:bg-gray-700 flex items-center gap-1"
>
{caipNetwork?.name}
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
)}
<button
onClick={() => open({ view: 'Account' })}
className="rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500"
>
Account
</button>
</div>
) : (
<>
<button
onClick={handleNetworkSelect}
className="rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500"
>
Select Network
</button>
<button
onClick={handleConnect}
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500"
>
Connect Wallet
</button>
</>
)}
</div>
</div>
</div>
</section>
<section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 px-2 py-4 md:grow">
<div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
<div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
<p className="font-normal text-indigo-600 text-xl not-italic tracking-[-1.2px]">
npm install @coinbase/onchainkit
</p>
</nav>

{/* Main Content */}
<main className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-transparent">
Cross-Chain DeFi Platform
</h1>
<p className="mt-6 text-lg leading-8 text-gray-300">
Swap tokens across multiple chains with the best rates and lowest fees
</p>

{/* Wallet Info Section */}
{isConnected && caipAddress && (
<div className="mt-8 p-6 rounded-xl bg-gray-800/50 backdrop-blur-sm border border-gray-700 max-w-md mx-auto">
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-400">Address:</span>
<span className="font-medium">{formatAddress(getCurrentAddress())}</span>
</div>
{caipNetwork && (
<div className="flex justify-between items-center">
<span className="text-gray-400">Network:</span>
<button
onClick={handleNetworkSelect}
className="font-medium text-indigo-400 hover:text-indigo-300 flex items-center gap-1"
>
{caipNetwork.name}
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
)}
{chainId && (
<div className="flex justify-between items-center">
<span className="text-gray-400">Chain ID:</span>
<span className="font-medium text-gray-300">{chainId}</span>
</div>
)}
</div>
</div>
)}
</div>

<div className="mt-16 grid gap-8 lg:grid-cols-2">
{/* Main Action Section */}
<div className="rounded-2xl bg-gray-800/50 p-8 backdrop-blur-sm border border-gray-700">
<div className="text-center">
<h2 className="text-2xl font-bold mb-4">Get Started</h2>
{!isConnected && (
<button
onClick={handleConnect}
className="w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500"
>
Connect Wallet to Start
</button>
)}
{isConnected && (
<div className="space-y-4">
<button
onClick={openSwapModal}
className="w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500"
>
Swap Tokens
</button>
<button
onClick={() => open({ view: 'OnRampProviders' })}
className="w-full rounded-md bg-green-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500"
>
Buy Crypto
</button>
<button
onClick={() => open({ view: 'Networks' })}
className="w-full rounded-md bg-gray-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500"
>
Switch Network
</button>
</div>
)}
</div>
</div>

{/* Stats/Info Section */}
<div className="rounded-2xl bg-gray-800/50 p-8 backdrop-blur-sm border border-gray-700">
<div className="grid grid-cols-2 gap-4">
<div className="text-center">
<h3 className="text-2xl font-bold text-indigo-400">10</h3>
<p className="mt-1 text-sm text-gray-400">Supported Chains</p>
</div>
<div className="text-center">
<h3 className="text-2xl font-bold text-cyan-400">1000+</h3>
<p className="mt-1 text-sm text-gray-400">Available Tokens</p>
</div>
<div className="text-center">
<h3 className="text-2xl font-bold text-indigo-400">$0</h3>
<p className="mt-1 text-sm text-gray-400">Platform Fees</p>
</div>
<div className="text-center">
<h3 className="text-2xl font-bold text-cyan-400">24/7</h3>
<p className="mt-1 text-sm text-gray-400">Support</p>
</div>
</div>
</div>
</div>
{address ? (
<TransactionWrapper address={address} />
) : (
<WalletWrapper
className="w-[450px] max-w-full"
text="Sign in to transact"
/>
)}
</section>
<Footer />
</main>
</div>
);
}
37 changes: 0 additions & 37 deletions src/components/OnchainProviders.test.tsx
View file
Open in desktop

This file was deleted.

Loading