Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update wagmi config #3

Merged
merged 1 commit into from
Oct 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .env.local.default
Original file line number Diff line number Diff line change
Expand Up @@ -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"

3 changes: 1 addition & 2 deletions .env.local.example
Original file line number Diff line number Diff line change
Expand Up @@ -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"

3 changes: 1 addition & 2 deletions .env.test
Original file line number Diff line number Diff line change
Expand Up @@ -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"

6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 />

Expand Down
9 changes: 2 additions & 7 deletions src/components/OnchainProviders.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
1 change: 0 additions & 1 deletion src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
65 changes: 15 additions & 50 deletions src/wagmi.ts
Original file line number Diff line number Diff line change
@@ -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(),
},
});