From 1bd2f5614800c4b8450129ce9e15ddd2b3861fae Mon Sep 17 00:00:00 2001 From: SourC Date: Tue, 5 Nov 2024 00:04:09 -0800 Subject: [PATCH] refactor: Update OnchainKit and layout components This commit refactors the code by updating the OnchainKit library to version 0.33.6 and making changes to the layout component. The OnchainProviders component is now imported directly in the layout component, removing the need for dynamic import. The metadata for the app has also been updated to reflect the new app name and description. Additionally, the WagmiProvider component has been updated to use the wagmiAdapter's wagmiConfig. The Providers component has been removed as it is no longer needed. --- src/app/layout.tsx | 26 ++++----- src/components/OnchainProviders.tsx | 91 +++++++++++++++++++++++------ tsconfig.json | 19 ++++-- 3 files changed, 98 insertions(+), 38 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 42dc42b..02b2e3d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,17 +1,9 @@ import type { Metadata } from 'next'; import { NEXT_PUBLIC_URL } from '../config'; - +import OnchainProviders from '../components/OnchainProviders'; 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', @@ -19,22 +11,26 @@ export const viewport = { }; 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 ( - {children} + + {children} + ); diff --git a/src/components/OnchainProviders.tsx b/src/components/OnchainProviders.tsx index 4c6ee7b..be6a442 100644 --- a/src/components/OnchainProviders.tsx +++ b/src/components/OnchainProviders.tsx @@ -1,31 +1,84 @@ '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 }; +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 } 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(); -function OnchainProviders({ children }: Props) { - const wagmiConfig = useWagmiConfig(); +// Define supported networks +const networks = [ + mainnet, + arbitrum, + polygon, + optimism, + base, + solana +]; + +// Create Wagmi Adapter +const wagmiAdapter = new WagmiAdapter({ + networks, + projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || '', + ssr: true, +}); + +// Create Solana adapter +const solanaAdapter = new SolanaAdapter({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}); + +export default function OnchainProviders({ children }: { children: React.ReactNode }): JSX.Element { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + if (typeof window !== 'undefined') { + const 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 ( - + - - - {children} - - + {children} ); } - -export default OnchainProviders; 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" + ] }