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.

​
What you’ll achieve

By the end of this guide, you will:
  • Set up Wagmi with Base Account connector
  • Configure your React application for Base Account
  • Use standard Wagmi hooks with Base Account

​
Installation

After creating a new Next.js project, install the required dependencies: 
npm install wagmi viem @base-org/account
You can also use the command line npm create wagmi@latest to create a new full Wagmi project.

​
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: