Getting Started with Wagmi Template

This guide covers creating a new Wagmi template project that uses Smart Wallet. We use pnpm or bun for Node package manager as these have superior resolutions support.

1. Run the following command and proceed through the prompts.

pnpm create wagmi

2. In your new project directory, add the following to package.json.

"resolutions": {
  "@coinbase/wallet-sdk": "npm:@coinbase/wallet-sdk@4.0.0-beta.12"
}

3. Install packages and run dev.

pnpm install && pnpm run dev

4. Update the Wagmi config and coinbaseWallet connector to use baseSepolia

src/wagmi.ts should look something like this:

import { http, createConfig } from 'wagmi';
import { baseSepolia } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';
 
export const config = createConfig({
  chains: [baseSepolia],
  connectors: [
    coinbaseWallet({
      appName: 'Create Wagmi',
      appChainIds: [baseSepolia.id],
    }),
  ],
  transports: {
    [baseSepolia.id]: http(),
  },
});
 
declare module 'wagmi' {
  interface Register {
    config: typeof config;
  }
}

5. Visit your site locally, click the "Coinbase Wallet" button, and choose "Create a Smart Wallet."

Note, if you are using a browser with Coinbase Wallet Extension enabled, that will be the default connection method and you will not see a screen to choose Smart Wallet. Temporarily disable the Extension to connect with Smart Wallet.

6. Keep building

You can find everything you need here: https://wagmi.sh/react/api/hooks