chore: Update Wallet Connectors

package.json

@@ -17,7 +17,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "^0.35.6",
+    "@coinbase/onchainkit": "^0.36.10",
     "next": "^14.2.5",
     "permissionless": "^0.1.26",
     "react": "^18",

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(

src/app/page.tsx

@@ -6,7 +6,6 @@ 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';
 
 export default function Page() {
   const { address } = useAccount();
@@ -23,10 +22,7 @@ export default function Page() {
           >
             <OnchainkitSvg />
           </a>
-          <div className="flex items-center gap-3">
-            <SignupButton />
-            {!address && <LoginButton />}
-          </div>
+          <div className="flex items-center gap-3">{<LoginButton />}</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">

src/components/LoginButton.tsx

@@ -2,11 +2,5 @@
 import WalletWrapper from './WalletWrapper';
 
 export default function LoginButton() {
-  return (
-    <WalletWrapper
-      className="min-w-[90px]"
-      text="Log in"
-      withWalletAggregator={true}
-    />
-  );
+  return <WalletWrapper className="min-w-[90px]" text="Log in" />;
 }

src/components/OnchainProviders.tsx

@@ -1,6 +1,5 @@
 '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';
@@ -18,10 +17,21 @@ function OnchainProviders({ children }: Props) {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <OnchainKitProvider apiKey={NEXT_PUBLIC_CDP_API_KEY} chain={base}>
-          <RainbowKitProvider modalSize="compact">
-            {children}
-          </RainbowKitProvider>
+        <OnchainKitProvider
+          apiKey={NEXT_PUBLIC_CDP_API_KEY}
+          config={{
+            appearance: {
+              name: 'OnchainKit Template',
+              mode: 'auto',
+              theme: 'default',
+            },
+            wallet: {
+              display: 'modal',
+            },
+          }}
+          chain={base}
+        >
+          {children}
         </OnchainKitProvider>
       </QueryClientProvider>
     </WagmiProvider>

src/components/WalletWrapper.tsx

@@ -19,21 +19,15 @@ import {
 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}
-        >
+        <ConnectWallet text={text} className={className}>
           <Avatar className="h-6 w-6" />
           <Name />
         </ConnectWallet>

src/wagmi.ts

@@ -1,13 +1,9 @@
 'use client';
-import { connectorsForWallets } from '@rainbow-me/rainbowkit';
-import {
-  coinbaseWallet,
-  metaMaskWallet,
-  rainbowWallet,
-} from '@rainbow-me/rainbowkit/wallets';
+
 import { useMemo } from 'react';
 import { http, createConfig } from 'wagmi';
 import { base, baseSepolia } from 'wagmi/chains';
+import { coinbaseWallet } from 'wagmi/connectors';
 import { NEXT_PUBLIC_WC_PROJECT_ID } from './config';
 
 export function useWagmiConfig() {
@@ -19,28 +15,15 @@ export function useWagmiConfig() {
   }
 
   return useMemo(() => {
-    const connectors = connectorsForWallets(
-      [
-        {
-          groupName: 'Recommended Wallet',
-          wallets: [coinbaseWallet],
-        },
-        {
-          groupName: 'Other Wallets',
-          wallets: [rainbowWallet, metaMaskWallet],
-        },
-      ],
-      {
-        appName: 'onchainkit',
-        projectId,
-      },
-    );
-
     const wagmiConfig = createConfig({
       chains: [base, baseSepolia],
       // turn off injected provider discovery
       multiInjectedProviderDiscovery: false,
-      connectors,
+      connectors: [
+        coinbaseWallet({
+          preference: 'all',
+        }),
+      ],
       ssr: true,
       transports: {
         [base.id]: http(),
@@ -49,5 +32,5 @@ export function useWagmiConfig() {
     });
 
     return wagmiConfig;
-  }, [projectId]);
+  }, []);
 }