update wagmi config

.env.local.default

@@ -7,5 +7,4 @@ NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
 # ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost
 
-# See https://cloud.walletconnect.com/
-NEXT_PUBLIC_WC_PROJECT_ID="TEST_1234567890"
+

.env.local.example

@@ -7,5 +7,4 @@ NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"
 # ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost
 
-# See https://cloud.walletconnect.com/
-NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT"
+

.env.test

@@ -7,5 +7,4 @@ NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
 # ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost
 
-# See https://cloud.walletconnect.com/
-NEXT_PUBLIC_WC_PROJECT_ID="TEST_1234567890"
+

README.md

@@ -21,14 +21,14 @@ To ensure all components work seamlessly, set the following environment variable
 
 You can find the API key on the [Coinbase Developer Portal's OnchainKit page](https://portal.cdp.coinbase.com/products/onchainkit). If you don't have an account, you will need to create one. 
 
-You can find your Wallet Connector project ID at [Wallet Connect](https://cloud.walletconnect.com).
+You can find your Coinbase Commerce API key after creating an account on [Coinbase Commerce](https://beta.commerce.coinbase.com/).
 
 ```sh
 # See https://portal.cdp.coinbase.com/products/onchainkit
 NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"
 
-# See https://cloud.walletconnect.com
-NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT"
+# See https://beta.commerce.coinbase.com/
+COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE"
 ```
 <br />
 

src/components/OnchainProviders.tsx

@@ -1,27 +1,22 @@
 '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 { useWamigConfig } from '../wagmi';
+import { wagmiConfig } from '../wagmi';
 
 type Props = { children: ReactNode };
 
 const queryClient = new QueryClient();
 
 function OnchainProviders({ children }: Props) {
-  const wagmiConfig = useWamigConfig();
-
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <OnchainKitProvider apiKey={NEXT_PUBLIC_CDP_API_KEY} chain={base}>
-          <RainbowKitProvider modalSize="compact">
-            {children}
-          </RainbowKitProvider>
+          {children}
         </OnchainKitProvider>
       </QueryClientProvider>
     </WagmiProvider>

src/config.ts

@@ -8,4 +8,3 @@ export const NEXT_PUBLIC_URL =
     : 'https://onchain-commerce-template.vercel.app';
 // Add your API KEY from the Coinbase Developer Portal
 export const NEXT_PUBLIC_CDP_API_KEY = process.env.NEXT_PUBLIC_CDP_API_KEY;
-export const NEXT_PUBLIC_WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID;

src/wagmi.ts

@@ -1,53 +1,18 @@
 '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 { NEXT_PUBLIC_WC_PROJECT_ID } from './config';
-
-export function useWamigConfig() {
-  const projectId = NEXT_PUBLIC_WC_PROJECT_ID ?? '';
-  if (!projectId) {
-    const providerErrMessage =
-      'To connect to all Wallets you need to provide a NEXT_PUBLIC_WC_PROJECT_ID env variable';
-    throw new Error(providerErrMessage);
-  }
 
-  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,
-      ssr: true,
-      transports: {
-        [base.id]: http(),
-        [baseSepolia.id]: http(),
-      },
-    });
+import { http, createConfig } from 'wagmi';
+import { base } from 'wagmi/chains';
+import { coinbaseWallet } from 'wagmi/connectors';
 
-    return wagmiConfig;
-  }, [projectId]);
-}
+export const wagmiConfig = createConfig({
+  chains: [base],
+  connectors: [
+    coinbaseWallet({
+      appName: 'onchain-commerce-template',
+    }),
+  ],
+  ssr: true,
+  transports: {
+    [base.id]: http(),
+  },
+});