Wagmi Setup with Global Wallet

The following is a quick and easy implementation for getting started with Wagmi template and the global wallet of choice.

This guide will walk you through integrating the global wallet Rapidfire ID.

Installation

After creating a new Next.js project, install the required dependencies:

npm install wagmi viem @rapidfire/id

You can also use the command line npm create wagmi@latest to create a new full Wagmi project.

Configuration

Configure Wagmi with Smart Wallet

Update the Wagmi configuration file, set up baseSepolia as the primary chain, and configure wallet connector with injected wallet preference.

wagmi.ts

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

Wrap App in Context Provider

Wrap your app in the WagmiProvider React Context Provider and pass the config you created earlier to the value property.

app.tsx

import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './config'
 
const queryClient = new QueryClient()
 
function App() {
  useEffect(() => {
    config.getEthereumProvider();
  }, []);
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Keep building

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