Skip to main content
Learn how to set up Wagmi with Base Account to enable Base Account SDK functionality with familiar React hooks.

​
Overview

Wagmi is a collection of React hooks for Ethereum Virtual Machine (EVM) compatible networks that makes it easy to work with wallets, contracts, transactions, and signing. Base Account integrates perfectly with Wagmi, allowing you to use all your familiar hooks.
To create a new wagmi project, you can use the command line npm create wagmi@latest.

​
Installation

If you start a new wagmi project, you can skip the installation step. If you already have a project, you can install the dependencies with your package manager of choice: 
npm install wagmi viem @base-org/account
To get access to the latest version of the Base Account SDK within Wagmi, you can use the following command to override it:
npm pkg set overrides.@base-org/account="latest"
Or you can use a specific version by adding the version to the overrides:
npm pkg set overrides.@base-org/account="2.2.0"
Make sure to delete your node_modules and package-lock.json and run a new install to ensure the overrides are applied.

​
Configuration

​
1. Configure Wagmi with Base Account

Create your Wagmi configuration with the Base Account connector configured for Base Account: 
// config/wagmi.ts
import { http, createConfig } from 'wagmi'
import { base } from 'wagmi/chains'
import { baseAccount } from 'wagmi/connectors'


export const config = createConfig({
  chains: [base],
  connectors: [
    baseAccount({
      appName: 'Base App',
    })
  ],
  transports: {
    [base.id]: http()
  },
})

​
2. Wrap Your App

Wrap your application with the Wagmi provider: 
// app/layout.tsx or pages/_app.tsx
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './config/wagmi'

const queryClient = new QueryClient()

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

​
Next Steps

Now that you have Wagmi configured with Base Account, you can:
⌘I