diff --git a/package-lock.json b/package-lock.json
index 667dcb9..5046fc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "onchain-app-template",
       "version": "0.0.0",
       "dependencies": {
-        "@coinbase/onchainkit": "^0.32.0",
+        "@coinbase/onchainkit": "^0.35.2",
         "framer-motion": "^11.10.0",
         "lucide": "^0.447.0",
         "lucide-react": "^0.447.0",
@@ -2505,9 +2505,9 @@
       }
     },
     "node_modules/@coinbase/onchainkit": {
-      "version": "0.32.0",
-      "resolved": "https://registry.npmjs.org/@coinbase/onchainkit/-/onchainkit-0.32.0.tgz",
-      "integrity": "sha512-vLOrNDmg7V5vVddiqBDV4OkIMGz2aQoFebSYAbL4CI6kTs/NtdWTYop8AAJyQ615h7VP3pNSQH+qOZX0lAKQNA==",
+      "version": "0.35.2",
+      "resolved": "https://registry.npmjs.org/@coinbase/onchainkit/-/onchainkit-0.35.2.tgz",
+      "integrity": "sha512-bVXmr2nM59DfD0ilj6BKY6d3WmVu9p5oNv9ykIBDlp0g8B95EqpBU3nZRgiq+fnyCd/Wq85imRhzYED06o7H/A==",
       "license": "MIT",
       "dependencies": {
         "@rainbow-me/rainbowkit": "^2.1.3",
diff --git a/package.json b/package.json
index 75b0070..dfc789b 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "^0.32.0",
+    "@coinbase/onchainkit": "^0.35.2",
     "framer-motion": "^11.10.0",
     "lucide": "^0.447.0",
     "lucide-react": "^0.447.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 21d08b4..22d8242 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import { NEXT_PUBLIC_URL } from '../config';
 
 import './global.css';
 import '@coinbase/onchainkit/styles.css';
-import '@rainbow-me/rainbowkit/styles.css';
 import dynamic from 'next/dynamic';
 
 const OnchainProviders = dynamic(
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 833a4c4..fc4fcd8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,13 @@
 'use client';
+import { useAccount } from 'wagmi';
 import Footer from 'src/components/Footer';
 import IdentityWrapper from 'src/components/IdentityWrapper';
 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 WalletWrapper from 'src/components/WalletWrapper';
 
 export default function Page() {
-  const { address } = useAccount();
+  const { isConnected } = useAccount();
 
   return (
     <div className='flex h-full w-96 max-w-full flex-col px-1 font-sans md:w-[1008px]'>
@@ -23,15 +22,18 @@ export default function Page() {
             <OnchainkitSvg />
           </a>
           <div className="flex items-center gap-3">
-            <SignupButton />
-            {!address && <LoginButton />}
+            <WalletWrapper />
           </div>
         </div>
       </section>
-      <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl px-2 py-4 md:grow">
-        <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#140431]">
+      <section className="flex w-full flex-col items-center justify-center gap-4 rounded-xl px-2 py-4 md:grow">
+        {isConnected ? (
           <IdentityWrapper />
-        </div>
+        ) : (
+          <div className="flex h-48 w-full max-w-md items-center justify-center rounded-lg bg-gray-100 p-6 text-center text-gray-600">
+            Please connect your account to see your profile
+          </div>
+        )}
       </section>
       <Footer />
     </div>
diff --git a/src/components/FundComponent.tsx b/src/components/FundComponent.tsx
new file mode 100644
index 0000000..8809415
--- /dev/null
+++ b/src/components/FundComponent.tsx
@@ -0,0 +1,12 @@
+import { FundButton } from '@coinbase/onchainkit/fund';
+ 
+export default function FundComponent() {
+  
+  return <FundButton 
+    className='bg-slate-300 font-sans text-black hover:bg-purple-500' 
+    text={"Buy Crypto"}
+    hideText={false}
+    hideIcon={true}
+    openIn={"tab"}
+    />;
+}
diff --git a/src/components/IdentityWrapper.tsx b/src/components/IdentityWrapper.tsx
index ea9c0cf..104ffa5 100644
--- a/src/components/IdentityWrapper.tsx
+++ b/src/components/IdentityWrapper.tsx
@@ -1,162 +1,15 @@
-'use client';
-
-import { Avatar, Name } from '@coinbase/onchainkit/identity';
-import { getName } from '@coinbase/onchainkit/identity';
-import { Github, Globe, Twitter, ChevronDown } from 'lucide-react'; // Import ChevronDown
-import { useEffect, useState } from 'react';
+import { IdentityCard } from '@coinbase/onchainkit/identity'; 
 import { base } from 'viem/chains';
-import { normalize } from 'viem/ens';
 import { useAccount } from 'wagmi';
-import { publicClient } from '../client';
-import { motion } from 'framer-motion'; // Import framer-motion
-import { FarcasterSocialIcon } from '../svg/FarcasterIcon';
-
+    
 export default function IdentityWrapper() {
   const { address } = useAccount();
-  const [ensText, setEnsText] = useState<{
-    twitter: string | null;
-    github: string | null;
-    farcaster: string | null;
-    url: string | null;
-  } | null>(null);
-  const [isOpen, setIsOpen] = useState(false); // State to manage dropdown visibility
-
-  useEffect(() => {
-    
-    const fetchEnsText = async () => {
-     
-      if (address) {
-        const cachedData = localStorage.getItem(address);
-        if (cachedData) {
-          setEnsText(JSON.parse(cachedData));
-          return;
-        }
-
-        try {
-          
-          const name = await getName({ chain: base, address: address }); 
-          const normalizedAddress = normalize(name as string); 
-          
-          const twitterText = await publicClient.getEnsText({
-            name: normalizedAddress,
-            key: 'com.twitter',
-          });
-      
-          const githubText = await publicClient.getEnsText({
-            name: normalizedAddress,
-            key: 'com.github',
-          });
-       
-          const farcasterText = await publicClient.getEnsText({
-            name: normalizedAddress,
-            key: 'xyz.farcaster',
-          });
-         
-          const urlText = await publicClient.getEnsText({
-            name: normalizedAddress,
-            key: 'url',
-          });
-          
-
-          const fetchedData = {
-            twitter: twitterText,
-            github: githubText,
-            farcaster: farcasterText,
-            url: urlText,
-          };
-          
-          setEnsText(fetchedData);
-          localStorage.setItem(address, JSON.stringify(fetchedData));
-        } catch (error) {
-          console.error('Error fetching ENS text:', error);
-        }
-      }
-    };
-    fetchEnsText();
-  }, [address]);
 
   return (
-    <div className="mx-auto max-w-2xl p-4">
-      {address ? (
-        <motion.div
-          className="relative space-y-2"
-          initial={{ opacity: 0, y: -20 }} // Initial state
-          animate={{ opacity: 1, y: 0 }} // Animated state
-          transition={{ duration: 0.5 }} // Animation duration
-        >
-          
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-         <div className='flex cursor-pointer items-center justify-between space-x-2 rounded-full bg-white bg-opacity-20 p-2 transition-all duration-300 hover:bg-opacity-30' onClick={() => setIsOpen(!isOpen)}> 
-            <div className='flex items-center space-x-2'>
-              <Avatar address={address} chain={base} />
-              <Name address={address} chain={base} className="text-m text-white" />
-            </div>
-            <ChevronDown className={`h-4 w-4 text-white transition-transform ${isOpen ? 'rotate-180' : ''}`} /> {/* Dropdown arrow */}
-          </div>
-          {ensText && (
-            <motion.div
-              className='rounded-lg bg-white bg-opacity-20 p-4 text-white shadow-md'
-              initial={{ height: 0, opacity: 0 }} // Initial state
-              animate={{ height: isOpen ? 'auto' : 0, opacity: isOpen ? 1 : 0 }} // Animated state
-              transition={{ duration: 0.5, ease: "easeInOut" }} // Animation duration and easing
-              style={{ overflow: 'hidden' }} // Ensure smooth height transition
-            >
-              <div className="flex items-center space-x-2">
-                <Twitter className="h-4 w-4" />
-                <span>Twitter:</span>
-                <a
-                  href={`https://x.com/${ensText.twitter}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:underline"
-                >
-                  {ensText.twitter}
-                </a>
-              </div>
-              <div className="mt-2 flex items-center space-x-2">
-                <FarcasterSocialIcon className="h-4 w-4" />
-                <span>Farcaster:</span>
-                <a
-                  href={`https://warpcast.com/${ensText.farcaster}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:underline"
-                >
-                  {ensText.farcaster}
-                </a>
-              </div>
-              <div className='mt-2 flex items-center space-x-2'>
-                <Github className='h-4 w-4' />
-                <span>Github:</span>
-                <a
-                  href={`https://github.com/${ensText.github}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:underline"
-                >
-                  {ensText.github}
-                </a>
-              </div>
-              <div className='mt-2 flex items-center space-x-2'>
-                <Globe className="h-4 w-4" />
-                <span>Website:</span>
-                <a
-                  href={ensText.url ?? ''}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:underline"
-                >
-                  {ensText.url?.replace(/^https?:\/\//, '')}
-                </a>
-              </div>
-            </motion.div>
-          )}
-        </motion.div>
-      ) : (
-        <div className='text-center text-white'>
-          Connect your wallet to view your profile card.
-        </div>
-      )}
-    </div>
+    <IdentityCard
+      address={address}
+      schemaId={address}
+      chain={base}
+    /> 
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/LoginButton.test.tsx b/src/components/LoginButton.test.tsx
deleted file mode 100644
index 5722f9c..0000000
--- a/src/components/LoginButton.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { http, WagmiProvider, createConfig } from 'wagmi';
-import { base } from 'wagmi/chains';
-import { mock } from 'wagmi/connectors';
-import LoginButton from './LoginButton';
-
-const config = createConfig({
-  chains: [base],
-  connectors: [
-    mock({
-      accounts: [
-        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
-        '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
-        '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
-      ],
-    }),
-  ],
-  transports: {
-    [base.id]: http(),
-  },
-});
-
-const queryClient = new QueryClient();
-
-const renderWithProviders = (component: JSX.Element) => {
-  return render(
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    </WagmiProvider>,
-  );
-};
-
-describe('LoginButton', () => {
-  it('should render', () => {
-    renderWithProviders(<LoginButton />);
-    const walletWrapper = screen.getByTestId('ockConnectWallet_Container');
-    expect(walletWrapper).toBeInTheDocument();
-  });
-});
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
deleted file mode 100644
index 6950107..0000000
--- a/src/components/LoginButton.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-import WalletWrapper from './WalletWrapper';
-
-export default function LoginButton() {
-  return (
-    <WalletWrapper
-      className="min-w-[90px]"
-      text="Log in"
-      withWalletAggregator={true}
-    />
-  );
-}
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(
-      <OnchainProviders>
-        <div data-testid="child">Child Component</div>
-      </OnchainProviders>,
-    );
-    const child = screen.getByTestId('child');
-    expect(child).toBeInTheDocument();
-  });
-});
diff --git a/src/components/OnchainProviders.tsx b/src/components/OnchainProviders.tsx
index 4c6ee7b..08b505d 100644
--- a/src/components/OnchainProviders.tsx
+++ b/src/components/OnchainProviders.tsx
@@ -18,7 +18,13 @@ function OnchainProviders({ children }: Props) {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <OnchainKitProvider apiKey={NEXT_PUBLIC_CDP_API_KEY} chain={base}>
+        <OnchainKitProvider apiKey={NEXT_PUBLIC_CDP_API_KEY} chain={base}
+         config={{
+          appearance: {
+            mode: 'dark',
+            theme: 'default', 
+          },
+        }}>
           <RainbowKitProvider modalSize="compact">
             {children}
           </RainbowKitProvider>
diff --git a/src/components/SignupButton.test.tsx b/src/components/SignupButton.test.tsx
deleted file mode 100644
index 4675cac..0000000
--- a/src/components/SignupButton.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { http, WagmiProvider, createConfig } from 'wagmi';
-import { base } from 'wagmi/chains';
-import { mock } from 'wagmi/connectors';
-import SignupButton from './SignupButton';
-
-const config = createConfig({
-  chains: [base],
-  connectors: [
-    mock({
-      accounts: [
-        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
-        '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
-        '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
-      ],
-    }),
-  ],
-  transports: {
-    [base.id]: http(),
-  },
-});
-
-const queryClient = new QueryClient();
-
-const renderWithProviders = (component: JSX.Element) => {
-  return render(
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    </WagmiProvider>,
-  );
-};
-
-describe('SignupButton', () => {
-  it('should render', () => {
-    renderWithProviders(<SignupButton />);
-    const wallet = screen.getByTestId('ockConnectWallet_Container');
-    expect(wallet).toBeInTheDocument();
-  });
-});
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 (
-    <WalletWrapper
-      className="ockConnectWallet_Container min-w-[90px] shrink bg-slate-200 text-[#030712] hover:bg-slate-300"
-      text="Sign up"
-    />
-  );
-}
diff --git a/src/components/TransactionWrapper.test.tsx b/src/components/TransactionWrapper.test.tsx
deleted file mode 100644
index 7d32bb6..0000000
--- a/src/components/TransactionWrapper.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { http, WagmiProvider, createConfig } from 'wagmi';
-import { base } from 'wagmi/chains';
-import { mock } from 'wagmi/connectors';
-import TransactionWrapper from './TransactionWrapper';
-
-const config = createConfig({
-  chains: [base],
-  connectors: [
-    mock({
-      accounts: [
-        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
-        '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
-        '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
-      ],
-    }),
-  ],
-  transports: {
-    [base.id]: http(),
-  },
-});
-const queryClient = new QueryClient();
-
-const renderWithProviders = (component: JSX.Element) => {
-  return render(
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    </WagmiProvider>,
-  );
-};
-
-describe('TransactionWrapper', () => {
-  it('should renders', () => {
-    renderWithProviders(
-      <TransactionWrapper address="0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266" />,
-    );
-    const transaction = screen.getByText('Transact');
-    expect(transaction).toBeInTheDocument();
-  });
-});
diff --git a/src/components/WalletWrapper.test.tsx b/src/components/WalletWrapper.test.tsx
deleted file mode 100644
index 2f51658..0000000
--- a/src/components/WalletWrapper.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { http, WagmiProvider, createConfig } from 'wagmi';
-import { base } from 'wagmi/chains';
-import { mock } from 'wagmi/connectors';
-import WalletWrapper from './WalletWrapper';
-
-const config = createConfig({
-  chains: [base],
-  connectors: [
-    mock({
-      accounts: [
-        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
-        '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
-        '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
-      ],
-    }),
-  ],
-  transports: {
-    [base.id]: http(),
-  },
-});
-const queryClient = new QueryClient();
-
-const renderWithProviders = (Component: React.ComponentType) => {
-  return render(
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <Component />
-      </QueryClientProvider>
-    </WagmiProvider>,
-  );
-};
-
-describe('WalletWrapper', () => {
-  it('should renders', () => {
-    renderWithProviders(WalletWrapper);
-    const wallet = screen.getByTestId('ockConnectWallet_Container');
-    expect(wallet).toBeInTheDocument();
-  });
-});
diff --git a/src/components/WalletWrapper.tsx b/src/components/WalletWrapper.tsx
index e48ce29..463e024 100644
--- a/src/components/WalletWrapper.tsx
+++ b/src/components/WalletWrapper.tsx
@@ -1,54 +1,48 @@
-'use client';
-
-import {
-  Address,
-  Avatar,
-  EthBalance,
-  Identity,
-  Name,
-} from '@coinbase/onchainkit/identity';
 import {
   ConnectWallet,
   Wallet,
   WalletDropdown,
+  WalletDropdownLink,
   WalletDropdownDisconnect,
-  WalletDropdownFundLink,
- 
 } from '@coinbase/onchainkit/wallet';
+import {
+  Address,
+  Avatar,
+  Name,
+  Identity,
+  EthBalance,
+} from '@coinbase/onchainkit/identity';
 
-type WalletWrapperParams = {
-  text?: string;
-  className?: string;
-  withWalletAggregator?: boolean;
-};
-
-export default function WalletWrapper({
-  className,
-  text,
-  withWalletAggregator = false,
-}: WalletWrapperParams) {
-  return (
-    <>
-      <Wallet>
-        <ConnectWallet
-          withWalletAggregator={withWalletAggregator}
-          text={text}
-          className={className}
-        >
-          <Avatar className="h-6 w-6" />
-          <Name />
-        </ConnectWallet>
-        <WalletDropdown>
-          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
-            <Avatar />
-            <Name />
-            <Address />
-            <EthBalance />
-          </Identity>
-          <WalletDropdownFundLink text="Fund" />
-          <WalletDropdownDisconnect />
-        </WalletDropdown>
-      </Wallet>
-    </>
-  );
-}
+export default function Header() {
+return (
+  <header className="pt-4 pr-4">
+    <div className="flex justify-end">
+        <div className="wallet-container flex space-x-2">
+          <Wallet>
+            <ConnectWallet>
+              <Avatar className="h-6 w-6" />
+              <Name className="text-white" />
+            </ConnectWallet>
+            <WalletDropdown>
+              <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
+                <Avatar />
+                <Name />
+                <Address />
+                <EthBalance />
+              </Identity>
+              <WalletDropdownLink
+                icon="wallet"
+                href="https://keys.coinbase.com"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Wallet
+              </WalletDropdownLink>
+              <WalletDropdownDisconnect />
+            </WalletDropdown>
+          </Wallet>
+        </div>
+      </div>
+  </header>
+);
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 90650c1..e1a1526 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1138,10 +1138,10 @@
   resolved "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.3.tgz"
   integrity sha512-QZzD2XrjJDUyIZK+aR2i5DDxCJfdwiYbUKu9GzkCUJpL78uSelAHAPy7m0GuPMVtF/Uo+OKv97W3P9nuWZangQ==
 
-"@coinbase/onchainkit@^0.32.0":
-  version "0.32.0"
-  resolved "https://registry.npmjs.org/@coinbase/onchainkit/-/onchainkit-0.32.0.tgz"
-  integrity sha512-vLOrNDmg7V5vVddiqBDV4OkIMGz2aQoFebSYAbL4CI6kTs/NtdWTYop8AAJyQ615h7VP3pNSQH+qOZX0lAKQNA==
+"@coinbase/onchainkit@^0.35.2":
+  version "0.35.2"
+  resolved "https://registry.npmjs.org/@coinbase/onchainkit/-/onchainkit-0.35.2.tgz"
+  integrity sha512-bVXmr2nM59DfD0ilj6BKY6d3WmVu9p5oNv9ykIBDlp0g8B95EqpBU3nZRgiq+fnyCd/Wq85imRhzYED06o7H/A==
   dependencies:
     "@rainbow-me/rainbowkit" "^2.1.3"
     "@tanstack/react-query" "^5"