-
-
- npm install @coinbase/onchainkit
-
+
+
+ {/* Main Content */}
+
+
+
+ Cross-Chain DeFi Platform
+
+
+ Swap tokens across multiple chains with the best rates and lowest fees
+
+
+ {/* Wallet Info Section */}
+ {isConnected && caipAddress && (
+
+
+
+ Address:
+ {formatAddress(getCurrentAddress())}
+
+ {caipNetwork && (
+
+
Network:
+
+
+ )}
+ {chainId && (
+
+ Chain ID:
+ {chainId}
+
+ )}
+
+
+ )}
+
+ {/* Main Action Section */}
+
+
+
Get Started
+ {!isConnected && (
+
+ )}
+ {isConnected && (
+
+
+
+
+
+ )}
+
+
+
+ {/* Stats/Info Section */}
+
+
+
+
10
+
Supported Chains
+
+
+
1000+
+
Available Tokens
+
+
+
+
);
}
diff --git a/src/components/OnchainProviders.test.tsx b/src/components/OnchainProviders.test.tsx
deleted file mode 100644
index 75f4a76..0000000
--- a/src/components/OnchainProviders.test.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { base } from 'viem/chains';
-import { describe, expect, it, vi } from 'vitest';
-import { http, createConfig } from 'wagmi';
-import { mock } from 'wagmi/connectors';
-import OnchainProviders from './OnchainProviders';
-
-vi.mock('../wagmi', () => ({
- useWagmiConfig: () =>
- createConfig({
- chains: [base],
- connectors: [
- mock({
- accounts: [
- '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
- '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
- '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
- ],
- }),
- ],
- transports: {
- [base.id]: http(),
- },
- }),
-}));
-
-describe('OnchainProviders', () => {
- it('should render', () => {
- render(
-
- Child Component
- ,
- );
- const child = screen.getByTestId('child');
- expect(child).toBeInTheDocument();
- });
-});
diff --git a/src/components/OnchainProviders.tsx b/src/components/OnchainProviders.tsx
deleted file mode 100644
index 4c6ee7b..0000000
--- a/src/components/OnchainProviders.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client';
-import { OnchainKitProvider } from '@coinbase/onchainkit';
-import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { ReactNode } from 'react';
-import { base } from 'viem/chains';
-import { WagmiProvider } from 'wagmi';
-import { NEXT_PUBLIC_CDP_API_KEY } from '../config';
-import { useWagmiConfig } from '../wagmi';
-
-type Props = { children: ReactNode };
-
-const queryClient = new QueryClient();
-
-function OnchainProviders({ children }: Props) {
- const wagmiConfig = useWagmiConfig();
-
- return (
-
-
-
-
- {children}
-
-
-
-
- );
-}
-
-export default OnchainProviders;
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
new file mode 100644
index 0000000..6ade8b9
--- /dev/null
+++ b/src/components/Providers.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { WagmiProvider } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
+import { SolanaAdapter } from '@reown/appkit-adapter-solana';
+import { createAppKit, type AppKitNetwork } from '@reown/appkit/react';
+import { useEffect, useState } from 'react';
+import {
+ solana,
+ mainnet,
+ arbitrum,
+ polygon,
+ optimism,
+ base
+} from '@reown/appkit/networks';
+import { SolflareWalletAdapter, PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';
+import React from 'react';
+
+// Create QueryClient
+const queryClient = new QueryClient();
+
+interface Metadata {
+ name: string;
+ description: string;
+ url: string;
+ icons: string[];
+ verifyUrl?: string;
+ redirect?: {
+ native?: string;
+ universal?: string;
+ };
+}
+
+// Define supported networks with proper typing
+const networks: [AppKitNetwork, ...AppKitNetwork[]] = [
+ mainnet as AppKitNetwork,
+ arbitrum as AppKitNetwork,
+ polygon as AppKitNetwork,
+ optimism as AppKitNetwork,
+ base as AppKitNetwork,
+ solana as AppKitNetwork
+];
+
+// Create Wagmi Adapter
+const wagmiAdapter = new WagmiAdapter({
+ networks: networks.filter(n => n.id !== solana.id),
+ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || '',
+ ssr: true,
+});
+
+// Create Solana adapter with proper configuration
+const solanaAdapter = new SolanaAdapter({
+ wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
+ network: solana.id,
+ rpcUrl: solana.rpcUrls.default.http[0]
+});
+
+export default function Providers({ children }: { children: React.ReactNode }): JSX.Element {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ const metadata: Metadata = {
+ name: 'Chainable Guru',
+ description: 'Cross-Chain DeFi Platform',
+ url: process.env.NEXT_PUBLIC_ENVIRONMENT || '',
+ icons: ['https://avatars.githubusercontent.com/u/179229932']
+ };
+
+ // Initialize AppKit with both adapters
+ createAppKit({
+ adapters: [wagmiAdapter, solanaAdapter],
+ networks,
+ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || '',
+ metadata,
+ features: {
+ onramp: true,
+ swaps: true
+ }
+ });
+
+ setMounted(true);
+ }
+ }, []);
+
+ if (!mounted) {
+ return null;
+ }
+
+ return React.createElement(
+ WagmiProvider,
+ { config: wagmiAdapter.wagmiConfig },
+ React.createElement(
+ QueryClientProvider,
+ { client: queryClient },
+ children
+ )
+ );
+}
\ No newline at end of file
diff --git a/src/components/SignupButton.tsx b/src/components/SignupButton.tsx
deleted file mode 100644
index ded5d8e..0000000
--- a/src/components/SignupButton.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client';
-import WalletWrapper from './WalletWrapper';
-
-export default function SignupButton() {
- return (
-
- );
-}
diff --git a/tsconfig.json b/tsconfig.json
index 697ba86..3835058 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "es2020",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -11,7 +15,7 @@
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "react-jsx",
+ "jsx": "preserve",
"incremental": true,
"plugins": [
{
@@ -20,6 +24,13 @@
],
"baseUrl": "."
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}