diff --git a/.env.local.default b/.env.local.default index 1817fff..ebc0b3a 100644 --- a/.env.local.default +++ b/.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" + diff --git a/.env.local.example b/.env.local.example index 846e244..f6492c1 100644 --- a/.env.local.example +++ b/.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" + diff --git a/.env.test b/.env.test index 1817fff..ebc0b3a 100644 --- a/.env.test +++ b/.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" + diff --git a/README.md b/README.md index 82635cd..10eea08 100644 --- a/README.md +++ b/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" ```
diff --git a/src/components/OnchainProviders.tsx b/src/components/OnchainProviders.tsx index faff83d..6ee651f 100644 --- a/src/components/OnchainProviders.tsx +++ b/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 ( - - {children} - + {children} diff --git a/src/config.ts b/src/config.ts index a52f456..6f9d3c5 100644 --- a/src/config.ts +++ b/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; diff --git a/src/wagmi.ts b/src/wagmi.ts index d4c5fad..27f74ed 100644 --- a/src/wagmi.ts +++ b/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(), + }, +});