Wagmi React

https://wagmi.sh/react/
Admin
Wagmi React is a collection of React Hooks for Ethereum, simplifying interactions with wallets,...
Tokens:175,799
Snippets:1,533
Trust Score:9.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install safe dependencies

Source: https://wagmi.sh/react/guides/migrate-from-v2-to-v3

Install the required @safe-global/safe-apps-provider and @safe-global/safe-apps-sdk packages for the safe connector.

```pnpm
pnpm add @safe-global/safe-apps-provider@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-provider']}} @safe-global/safe-apps-sdk@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-sdk']}} 
```

```npm
npm install @safe-global/safe-apps-provider@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-provider']}} @safe-global/safe-apps-sdk@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-sdk']}} 
```

```yarn
yarn add @safe-global/safe-apps-provider@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-provider']}} @safe-global/safe-apps-sdk@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-sdk']}} 
```

```bun
bun add @safe-global/safe-apps-provider@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-provider']}} @safe-global/safe-apps-sdk@{{packageJson?.peerDependencies?.['@safe-global/safe-apps-sdk']}} 
```

--------------------------------

### Install metaMask dependencies

Source: https://wagmi.sh/react/guides/migrate-from-v2-to-v3

Install the required @metamask/connect-evm package for the metaMask connector.

```pnpm
pnpm add @metamask/connect-evm@{{packageJson?.peerDependencies?.['@metamask/connect-evm']}}
```

```npm
npm install @metamask/connect-evm@{{packageJson?.peerDependencies?.['@metamask/connect-evm']}}
```

```yarn
yarn add @metamask/connect-evm@{{packageJson?.peerDependencies?.['@metamask/connect-evm']}}
```

```bun
bun add @metamask/connect-evm@{{packageJson?.peerDependencies?.['@metamask/connect-evm']}}
```

--------------------------------

### Install TanStack Query Devtools

Source: https://wagmi.sh/react/guides/tanstack-query

Install the devtools package using your preferred package manager.

```bash
pnpm i @tanstack/react-query-devtools
```

```bash
npm i @tanstack/react-query-devtools
```

```bash
yarn add @tanstack/react-query-devtools
```

```bash
bun i @tanstack/react-query-devtools
```

--------------------------------

### Install coinbaseWallet dependencies

Source: https://wagmi.sh/react/guides/migrate-from-v2-to-v3

Install the required @coinbase/wallet-sdk package for the coinbaseWallet connector.

```pnpm
pnpm add @coinbase/wallet-sdk@{{packageJson?.peerDependencies?.['@coinbase/wallet-sdk']}}
```

```npm
npm install @coinbase/wallet-sdk@{{packageJson?.peerDependencies?.['@coinbase/wallet-sdk']}}
```

```yarn
yarn add @coinbase/wallet-sdk@{{packageJson?.peerDependencies?.['@coinbase/wallet-sdk']}}
```

```bun
bun add @coinbase/wallet-sdk@{{packageJson?.peerDependencies?.['@coinbase/wallet-sdk']}}
```

--------------------------------

### Install TanStack Query persistence packages

Source: https://wagmi.sh/react/guides/tanstack-query

Install the necessary packages for async storage persistence using your preferred package manager.

```bash
pnpm i @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
```

```bash
npm i @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
```

```bash
yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
```

```bash
bun i @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
```

--------------------------------

### Install walletConnect dependencies

Source: https://wagmi.sh/react/guides/migrate-from-v2-to-v3

Install the required @walletconnect/ethereum-provider package for the walletConnect connector.

```pnpm
pnpm add @walletconnect/ethereum-provider@{{packageJson?.peerDependencies?.['@walletconnect/ethereum-provider']}}
```

```npm
npm install @walletconnect/ethereum-provider@{{packageJson?.peerDependencies?.['@walletconnect/ethereum-provider']}}
```

```yarn
yarn add @walletconnect/ethereum-provider@{{packageJson?.peerDependencies?.['@walletconnect/ethereum-provider']}}
```

```bun
bun add @walletconnect/ethereum-provider@{{packageJson?.peerDependencies?.['@walletconnect/ethereum-provider']}}
```

--------------------------------

### Install baseAccount dependencies

Source: https://wagmi.sh/react/guides/migrate-from-v2-to-v3

Install the required @base-org/account package for the baseAccount connector.

```pnpm
pnpm add @base-org/account@{{packageJson?.peerDependencies?.['@base-org/account']}}
```

```npm
npm install @base-org/account@{{packageJson?.peerDependencies?.['@base-org/account']}}
```

```yarn
yarn add @base-org/account@{{packageJson?.peerDependencies?.['@base-org/account']}}
```

```bun
bun add @base-org/account@{{packageJson?.peerDependencies?.['@base-org/account']}}
```

--------------------------------

### Install Pull Request Preview

Source: https://wagmi.sh/react/installation

Install specific pull request builds using the pkg.pr.new service.

```bash
pnpm add https://pkg.pr.new/{{packageName}}@123
```

```bash
npm install https://pkg.pr.new/{{packageName}}@123
```

```bash
yarn add https://pkg.pr.new/{{packageName}}@123
```

```bash
bun add https://pkg.pr.new/{{packageName}}@123
```

--------------------------------

### Install TanStack Query Persist dependencies

Source: https://wagmi.sh/react/guides/tanstack-query

Install the required packages for sync storage persistence using your preferred package manager.

```bash
pnpm i @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
```

```bash
npm i @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
```

```bash
yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
```

```bash
bun i @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client
```

--------------------------------

### CLI project initialization prompts

Source: https://wagmi.sh/react/getting-started

Example of the interactive prompts displayed when running the create-wagmi command.

```ansi
Project name: wagmi-project
Select a framework: React / Vanilla
...
```

--------------------------------

### Install Wagmi dependencies

Source: https://wagmi.sh/react/getting-started

Install the required packages including Wagmi, Viem, and TanStack React Query using your preferred package manager.

```bash
pnpm add wagmi viem@{{viemVersion}} @tanstack/react-query
```

```bash
npm install wagmi viem@{{viemVersion}} @tanstack/react-query
```

```bash
yarn add wagmi viem@{{viemVersion}} @tanstack/react-query
```

```bash
bun add wagmi viem@{{viemVersion}} @tanstack/react-query
```

--------------------------------

### Install Wagmi v3

Source: https://wagmi.sh/react/guides/migrate-from-v2-to-v3

Install the latest version of Wagmi using your preferred package manager.

```pnpm
pnpm add wagmi@3
```

```npm
npm install wagmi@3
```

```yarn
yarn add wagmi@3
```

```bun
bun add wagmi@3
```

--------------------------------

### Install Canary Version

Source: https://wagmi.sh/react/installation

Install the latest unreleased features from the canary tag using various package managers.

```bash
pnpm add {{packageName}}@canary
```

```bash
npm install {{packageName}}@canary
```

```bash
yarn add {{packageName}}@canary
```

```bash
bun add {{packageName}}@canary
```

--------------------------------

### Basic Usage

Source: https://wagmi.sh/react/api/hooks/usePrepareTransactionRequest

Example of using the hook to prepare a simple transaction.

```tsx
import { usePrepareTransactionRequest } from 'wagmi'
import { parseEther } from 'viem'

function App() {
  const result = usePrepareTransactionRequest({
    to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
    value: parseEther('1'),
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Configure useWatchAsset

Source: https://wagmi.sh/react/api/hooks/useWatchAsset

Examples showing how to use the hook with a custom configuration.

```tsx
import { useWatchAsset } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const result = useWatchAsset({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Emit on Subscription Begin

Source: https://wagmi.sh/react/api/hooks/useWatchBlockNumber

Configure the hook to emit the current block immediately when the subscription starts.

```ts
import { useWatchBlockNumber } from 'wagmi'

function App() {
  useWatchBlockNumber({
    emitOnBegin: true, // [!code focus]
    onBlockNumber(blockNumber) {
      console.log('New block number', blockNumber)
    },
  })
}
```

```ts
import { createConfig, http } from '@wagmi/core'
import { mainnet, sepolia } from '@wagmi/core/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Connect to Wallet

Source: https://wagmi.sh/react/api/hooks/useConnect

Example of using useConnect to render available connectors and trigger a connection mutation.

```tsx
import { useConnect } from 'wagmi'

function App() {
  const connect = useConnect()

  return (
    <div>
      {connect.connectors.map((connector) => (
        <button key={connector.id} onClick={() => connect.mutate({ connector })}>
          {connector.name}
        </button>
      ))}
    </div>
  )
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Switch Chain Usage

Source: https://wagmi.sh/react/api/hooks/useSwitchChain

Example demonstrating how to use the hook to switch chains via button clicks.

```tsx
import { useChains, useSwitchChain } from 'wagmi'

function App() {
  const switchChain = useSwitchChain()
  const chains = useChains()
  return (
    <div>
      {chains.map((chain) => (
        <button key={chain.id} onClick={() => switchChain.mutate({ chainId: chain.id })}>
          {chain.name}
        </button>
      ))}
    </div>
  )
}
```

--------------------------------

### Configuring useSignTypedData

Source: https://wagmi.sh/react/api/hooks/useSignTypedData

Examples showing how to configure the hook with a custom Wagmi config.

```tsx
import { useSignTypedData } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const signTypedData = useSignTypedData({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Configuring useShowCallsStatus

Source: https://wagmi.sh/react/api/hooks/useShowCallsStatus

Examples showing how to provide a custom Wagmi config to the hook.

```tsx
import { useShowCallsStatus } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const showCallsStatus = useShowCallsStatus({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Configuring useSendTransaction

Source: https://wagmi.sh/react/api/hooks/useSendTransaction

Examples showing how to provide a custom Wagmi configuration to the hook.

```tsx
import { useSendTransaction } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const sendTransaction = useSendTransaction({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Usage of useReadContracts

Source: https://wagmi.sh/react/api/hooks/useReadContracts

Example demonstrating how to batch multiple contract read calls using the hook.

```tsx
import { useReadContracts } from 'wagmi'

const wagmigotchiContract = {
  address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
  abi: wagmigotchiABI,
} as const
const mlootContract = {
  address: '0x1dfe7ca09e99d10835bf73044a23b73fc20623df',
  abi: mlootABI,
} as const

function App() {
  const result = useReadContracts({
    contracts: [
      {
        ...wagmigotchiContract,
        functionName: 'getAlive',
      },
      {
        ...wagmigotchiContract,
        functionName: 'getBoredom',
      },
      {
        ...mlootContract,
        functionName: 'getChest',
        args: [69],
      },
      {
        ...mlootContract,
        functionName: 'getWaist',
        args: [69],
      },
    ],
  })
}
```

--------------------------------

### Configuring Chains with createConfig

Source: https://wagmi.sh/react/api/createConfig

Specify the Ethereum chains your application will interact with using the `chains` parameter in `createConfig`. This example shows how to include `mainnet` and `sepolia`.

```ts-vue
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'

const config = createConfig({
  chains: [mainnet, sepolia], // [!code focus]
  transports: {
    [mainnet.id]: http('https://mainnet.example.com'),
    [sepolia.id]: http('https://sepolia.example.com'),
  },
})
```

--------------------------------

### Disconnect Connectors Example

Source: https://wagmi.sh/react/api/hooks/useDisconnect

Demonstrates using useDisconnect and useConnectors to render a list of buttons that disconnect specific connectors.

```tsx
import { useConnectors, useDisconnect } from 'wagmi'
import { mainnet } from 'wagmi/chains'

function App() {
  const disconnect = useDisconnect()
  const connectors = useConnectors()

  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.id} onClick={() => disconnect.mutate({ connector })}>
          {connector.name}
        </button>
      ))}
    </div>
  )
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Initialize a new Wagmi project

Source: https://wagmi.sh/react/getting-started

Use the CLI to scaffold a new project with TypeScript and necessary dependencies.

```bash
pnpm create wagmi
```

```bash
npm create wagmi@latest
```

```bash
yarn create wagmi
```

```bash
bun create wagmi
```

--------------------------------

### UseReconnect Hook Implementation

Source: https://wagmi.sh/react/api/hooks/useReconnect

Example of using the useReconnect hook to trigger a reconnection on component mount, alongside the required configuration setup.

```tsx
import { useReconnect } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { useEffect } from 'react'

function App() {
  const reconnect = useReconnect()

  useEffect(() => {
    reconnect.mutate({ connectors: reconnect.connectors })
  }, [])
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Customizing Storage with createConfig

Source: https://wagmi.sh/react/api/createConfig

Provide a custom `Storage` object to persist Wagmi's state between sessions. This example uses `window.localStorage`.

```ts-vue
import { createConfig, createStorage, http } from '{{packageName}}' // [!code focus]
import { mainnet, sepolia } from '{{packageName}}/chains'

const config = createConfig({
  chains: [mainnet, sepolia],
  storage: createStorage({ storage: window.localStorage }), // [!code focus]
  transports: {
    [mainnet.id]: http('https://mainnet.example.com'),
    [sepolia.id]: http('https://sepolia.example.com'),
  },
})
```

--------------------------------

### Configure scopeKey for useBlockTransactionCount

Source: https://wagmi.sh/react/api/hooks/useBlockTransactionCount

Use scopeKey to group cache entries for hooks with identical context. This example demonstrates passing a scopeKey to the hook and the required Wagmi config setup.

```tsx
import { useBlockTransactionCount } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const result = useBlockTransactionCount({
    scopeKey: 'foo', // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Wagmi Configuration for SSR with Cookie Storage

Source: https://wagmi.sh/react/api/utilities/cookieToInitialState

Example Wagmi configuration setup for server-side rendering, utilizing `cookieStorage` and defining transports for different chains. This configuration is required when using `cookieToInitialState`.

```typescript
import {
  createConfig,
  http,
  cookieStorage,
  createStorage
} from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  ssr: true,
  storage: createStorage({
    storage: cookieStorage,
  }),
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Utilizing Viem Actions

Source: https://wagmi.sh/react/guides/viem

Compare the tree-shakable approach, which is recommended for smaller bundle sizes, against the direct client action approach.

```tsx
// 1. Import modules. 
import { useMutation, useQuery } from '@tanstack/react-query'
import { http, createConfig, useClient, useConnectorClient } from 'wagmi' 
import { base, mainnet, optimism, zora } from 'wagmi/chains' 
import { getLogs, watchAsset } from 'viem/actions'

// 2. Set up a Wagmi Config 
export const config = createConfig({ 
  chains: [base, mainnet, optimism, zora], 
  transports: { 
    [base.id]: http(), 
    [mainnet.id]: http(), 
    [optimism.id]: http(), 
    [zora.id]: http(), 
  }, 
}) 

function Example() {
  // 3. Extract a Viem Client for the current active chain. // [!code hl]
  const publicClient = useClient({ config }) // [!code hl]

  // 4. Create a "custom" Query Hook that utilizes the Client. // [!code hl]
  const { data: logs } = useQuery({ // [!code hl]
    queryKey: ['logs', publicClient.uid], // [!code hl]
    queryFn: () => getLogs(publicClient, /* ... */) // [!code hl]
  }) // [!code hl]
  
  // 5. Extract a Viem Client for the current active chain & account. // [!code hl]
  const { data: walletClient } = useConnectorClient({ config }) // [!code hl]

  // 6. Create a "custom" Mutation Hook that utilizes the Client. // [!code hl]
  const { mutate } = useMutation({ // [!code hl]
    mutationFn: (asset) => watchAsset(walletClient, asset) // [!code hl]
  }) // [!code hl]

  return (
    <div>
      {/* ... */}
    </div>
  )
}
```

```tsx
// 1. Import modules. 
import { useMutation, useQuery } from '@tanstack/react-query'
import { http, createConfig, useClient, useConnectorClient } from 'wagmi' 
import { base, mainnet, optimism, zora } from 'wagmi/chains' 

// 2. Set up a Wagmi Config 
export const config = createConfig({ 
  chains: [base, mainnet, optimism, zora], 
  transports: { 
    [base.id]: http(), 
    [mainnet.id]: http(), 
    [optimism.id]: http(), 
    [zora.id]: http(), 
  }, 
}) 

function Example() {
  // 3. Extract a Viem Client for the current active chain. // [!code hl]
  const publicClient = useClient({ config }) // [!code hl]

  // 4. Create a "custom" Query Hook that utilizes the Client. // [!code hl]
  const { data: logs } = useQuery({ // [!code hl]
    queryKey: ['logs', publicClient.uid], // [!code hl]
    queryFn: () => publicClient.getLogs(/* ... */) // [!code hl]
  }) // [!code hl]
  
  // 5. Extract a Viem Client for the current active chain & account. // [!code hl]
  const { data: walletClient } = useConnectorClient({ config }) // [!code hl]

  // 6. Create a "custom" Mutation Hook that utilizes the Client. // [!code hl]
  const { mutate } = useMutation({ // [!code hl]
    mutationFn: (asset) => walletClient.watchAsset(asset) // [!code hl]
  }) // [!code hl]

  return (
    <div>
      {/* ... */}
    </div>
  )
}
```

--------------------------------

### Configure watch in useBlock

Source: https://wagmi.sh/react/api/hooks/useBlock

Examples of enabling block watching, either as a simple boolean or with custom polling intervals.

```tsx
import { useBlock } from 'wagmi'

function App() {
  const result = useBlock({
    watch: true, // [!code focus]
  })
}
```

```tsx
import { useBlock } from 'wagmi'

function App() {
  const result = useBlock({
    watch: { // [!code focus]
      pollingInterval: 4_000, // [!code focus]
    }, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Setup TanStack Query Provider

Source: https://wagmi.sh/react/getting-started

Wrap the application in a QueryClientProvider to enable TanStack Query functionality alongside Wagmi.

```tsx
// <fsm-g3jcbhy8yd9>{"path":"/vercel/path0/site/react/getting-started.md","from":9495,"to":9955}<fsm-g3jcbhy8yd9>
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' // [!code focus]
import { WagmiProvider } from 'wagmi'
import { config } from './config'

const queryClient = new QueryClient() // [!code focus]

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}> // [!code focus]
        {/** ... */} // [!code focus]
      </QueryClientProvider> // [!code focus]
    </WagmiProvider>
  )
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Switch Chain Implementation

Source: https://wagmi.sh/react/api/hooks/useSwitchChain

Example of using useSwitchChain to render a list of chains and trigger a chain switch, alongside the required wagmi configuration.

```tsx
import { useSwitchChain } from 'wagmi'

function App() {
  const switchChain = useSwitchChain()
  return (
    <div>
      {switchChain.chains.map((chain) => (
        <button key={chain.id} onClick={() => switchChain({ chainId: chain.id })}>
          {chain.name}
        </button>
      ))}
    </div>
  )
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Configuring Connectors with createConfig

Source: https://wagmi.sh/react/api/createConfig

Add wallet connectors to your Wagmi configuration using the `connectors` parameter. This example demonstrates adding the `injected` connector.

```ts-vue
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { injected } from '{{connectorsPackageName}}' // [!code focus]

const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [injected()], // [!code focus]
  transports: {
    [mainnet.id]: http('https://mainnet.example.com'),
    [sepolia.id]: http('https://sepolia.example.com'),
  },
})
```

--------------------------------

### Using Private Key Accounts with Wagmi Actions

Source: https://wagmi.sh/react/guides/viem

Demonstrates how to initialize a private key account using Viem and pass it to the Wagmi useSendTransaction hook.

```tsx
import { http, createConfig, useSendTransaction } from 'wagmi' 
import { base, mainnet, optimism, zora } from 'wagmi/chains' 
import { parseEther } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'

export const config = createConfig({ 
  chains: [base, mainnet, optimism, zora], 
  transports: { 
    [base.id]: http(), 
    [mainnet.id]: http(), 
    [optimism.id]: http(), 
    [zora.id]: http(), 
  }, 
}) 

const account = privateKeyToAccount('0x...') // [!code hl]

function Example() {
  const { data: hash } = useSendTransaction({
    account, // [!code hl]
    to: '0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC',
    value: parseEther('0.001')
  })
}
```

--------------------------------

### Configure Sync Storage Persistence

Source: https://wagmi.sh/react/guides/tanstack-query

Set up the QueryClient and wrap the application with PersistQueryClientProvider to enable persistent storage.

```tsx
// 1. Import modules. // [!code hl]
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister' // [!code hl]
import { QueryClient } from '@tanstack/react-query' // [!code hl]
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' // [!code hl]
import { WagmiProvider, deserialize, serialize } from 'wagmi' // [!code hl]

// 2. Create a new Query Client with a default `gcTime`. // [!code hl]
const queryClient = new QueryClient({ // [!code hl]
  defaultOptions: { // [!code hl]
    queries: { // [!code hl]
      gcTime: 1_000 * 60 * 60 * 24, // 24 hours // [!code hl]
    }, // [!code hl] 
  }, // [!code hl]
}) // [!code hl]

// 3. Set up the persister. // [!code hl]
const persister = createSyncStoragePersister({ // [!code hl]
  serialize, // [!code hl]
  storage: window.localStorage, // [!code hl]
  deserialize, // [!code hl]
}) // [!code hl]

function App() {
  return (
    <WagmiProvider config={config}>
      {/* 4. Wrap app in PersistQueryClientProvider */} // [!code hl]
      <PersistQueryClientProvider // [!code hl]
        client={queryClient} // [!code hl]
        persistOptions={{ persister }} // [!code hl]
      > // [!code hl]
        {/* ... */}
      </PersistQueryClientProvider> // [!code hl]
    </WagmiProvider>
  )
}
```

--------------------------------

### coinbaseWallet Connector Configuration

Source: https://wagmi.sh/react/api/connectors/coinbaseWallet

Demonstrates how to import and use the coinbaseWallet connector with basic configuration.

```APIDOC
## coinbaseWallet Connector Configuration

### Description
This snippet shows how to import the `coinbaseWallet` connector and include it in your Wagmi configuration.

### Usage
```ts
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { coinbaseWallet } from '{{connectorsPackageName}}'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [coinbaseWallet()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```
```

--------------------------------

### BlockTag Parameter

Source: https://wagmi.sh/react/api/hooks/useProof

Example usage of the blockTag parameter.

```tsx
import { useProof } from 'wagmi'

function App() {
  const result = useProof({
    address: '0x4200000000000000000000000000000000000016',
    blockTag: 'latest', // [!code focus]
    storageKeys: [
      '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
    ],
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Importing Connectors

Source: https://wagmi.sh/react/api/connectors

Shows how to import a connector from the wagmi/connectors entrypoint.

```APIDOC
## Import

### Description
Import wallet connectors via the 'wagmi/connectors' entrypoint.

### Example
```ts
import { injected } from 'wagmi/connectors'
```
```

--------------------------------

### BlockNumber Parameter

Source: https://wagmi.sh/react/api/hooks/useProof

Example usage of the blockNumber parameter.

```tsx
import { useProof } from 'wagmi'

function App() {
  const result = useProof({
    address: '0x4200000000000000000000000000000000000016',
    blockNumber: 42069n, // [!code focus]
    storageKeys: [
      '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
    ],
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Build and Link Wagmi Locally

Source: https://wagmi.sh/react/installation

Clone the repository, build the project, and link it globally for local development.

```bash
gh repo clone wevm/wagmi
cd wagmi
pnpm install
pnpm build
cd packages/{{packageDir}}
pnpm link --global
```

--------------------------------

### StorageKeys Parameter

Source: https://wagmi.sh/react/api/hooks/useProof

Example usage of the storageKeys parameter.

```tsx
import { useProof } from 'wagmi'

function App() {
  const result = useProof({
    address: '0x4200000000000000000000000000000000000016',
    storageKeys: [ // [!code focus:3]
      '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
    ],
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Import useProof

Source: https://wagmi.sh/react/api/hooks/useProof

Import the hook from the wagmi package.

```ts
import { useProof } from 'wagmi'
```

--------------------------------

### Address Parameter

Source: https://wagmi.sh/react/api/hooks/useProof

Example usage of the address parameter.

```tsx
import { useProof } from 'wagmi'

function App() {
  const result = useProof({
    address: '0x4200000000000000000000000000000000000016', // [!code focus]
    storageKeys: [
      '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
    ],
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Import useBlock

Source: https://wagmi.sh/react/api/hooks/useBlock

Import the hook from the wagmi package.

```ts
import { useBlock } from 'wagmi'
```

--------------------------------

### Basic Usage

Source: https://wagmi.sh/react/api/hooks/useTransactionConfirmations

Example of using the hook with a transaction hash.

```tsx
import { useTransactionConfirmations } from 'wagmi'

function App() {
  const result = useTransactionConfirmations({
    hash: '0x0fa64daeae54e207aa98613e308c2ba8abfe274f75507e741508cc4db82c8cb5',
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Mock Connector Initialization

Source: https://wagmi.sh/react/api/connectors/mock

Initializes the mock connector with a list of predefined accounts.

```APIDOC
## mock

Connector for mocking Wagmi functionality.

### Parameters

#### accounts

`readonly [Address, ...Address[]]`

Accounts to use with the connector.

### Request Example

```ts
import { mock } from '{{connectorsPackageName}}'

const connector = mock({
  accounts: [
    '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
    '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
    '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
  ],
})
```
```

--------------------------------

### walletConnect(options)

Source: https://wagmi.sh/react/api/connectors/walletConnect

Initializes the WalletConnect connector with specific configuration options.

```APIDOC
## walletConnect(options)

### Description
Initializes the WalletConnect connector. The options object allows customization of the QR modal, relay URL, and storage behavior.

### Parameters
- **projectId** (string) - Required - The project ID associated with your WalletConnect account.
- **qrModalOptions** (QrModalOptions) - Optional - Configuration for the QR modal appearance (e.g., themeMode).
- **relayUrl** (string) - Optional - The WalletConnect relay URL. Defaults to 'wss://relay.walletconnect.com'.
- **storageOptions** (KeyValueStorageOptions) - Optional - Configuration for key-value storage.
- **showQrModal** (boolean) - Optional - Whether to show the QR code modal upon calling connector.connect(). Defaults to true.
```

--------------------------------

### Configure useSwitchConnection

Source: https://wagmi.sh/react/api/hooks/useSwitchConnection

Example usage of the hook with a custom Wagmi configuration.

```tsx
import { useSwitchConnection } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const result = useSwitchConnection({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Configure App Providers

Source: https://wagmi.sh/react/guides/connect-wallet

Wraps the application with WagmiProvider and QueryClientProvider to enable wallet state management.

```tsx
 // 1. Import modules
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'

// 2. Set up a React Query client.
const queryClient = new QueryClient()

function App() {
  // 3. Wrap app with Wagmi and React Query context.
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}> 
        {/* ... */}
      </QueryClientProvider> 
    </WagmiProvider>
  )
}
```

--------------------------------

### Defining the contract ABI

Source: https://wagmi.sh/react/api/hooks/useDeployContract

Example of defining the ABI for a contract with a constructor.

```ts
export const wagmiAbi = [
  ...
  {
    inputs: [{ name: "x", type: "uint32" }],
    stateMutability: "nonpayable",
    type: "constructor",
  },
  ...
] as const;
```

--------------------------------

### Configure App Providers

Source: https://wagmi.sh/react/guides/connect-wallet

Wraps the application with WagmiProvider and QueryClientProvider to enable wallet state management.

```tsx
// <fsm-g3jcbhy8yd9>{"path":"/vercel/path0/site/react/guides/connect-wallet.md","from":7102,"to":7588}<fsm-g3jcbhy8yd9>
 // 1. Import modules
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'

// 2. Set up a React Query client.
const queryClient = new QueryClient()

function App() {
  // 3. Wrap app with Wagmi and React Query context.
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}> 
        {/* ... */}
      </QueryClientProvider> 
    </WagmiProvider>
  )
}
```

--------------------------------

### Configure useSwitchChain

Source: https://wagmi.sh/react/api/hooks/useSwitchChain

Example of using a custom Wagmi config with the useSwitchChain hook.

```tsx
import { useSwitchChain } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const switchChain = useSwitchChain({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Importing Connectors

Source: https://wagmi.sh/react/api/connectors

Use the wagmi/connectors entrypoint to import specific wallet connectors.

```ts
import { injected } from 'wagmi/connectors'
```

--------------------------------

### Configure useSignMessage

Source: https://wagmi.sh/react/api/hooks/useSignMessage

Example of using a custom Wagmi config with the useSignMessage hook.

```tsx
import { useSignMessage } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const signMessage = useSignMessage({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Configure useSendCalls

Source: https://wagmi.sh/react/api/hooks/useSendCalls

Examples showing how to use the hook with a custom Wagmi configuration.

```tsx
import { useSendCalls } from 'wagmi'
import { config } from './config' // [!code focus]

function App() {
  const sendCalls = useSendCalls({
    config, // [!code focus]
  })
}
```

```ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Import useWalletClient

Source: https://wagmi.sh/react/api/hooks/useWalletClient

Import the hook from the wagmi package.

```ts
import { useWalletClient } from 'wagmi'
```

--------------------------------

### Linear Backoff retryDelay Example

Source: https://wagmi.sh/react/api/hooks/useEnsAddress

Applies linear backoff to retry attempts.

```typescript
attempt => attempt * 1000
```

--------------------------------

### Import usePrepareTransactionRequest

Source: https://wagmi.sh/react/api/hooks/usePrepareTransactionRequest

Import the hook from the wagmi package.

```ts
import { usePrepareTransactionRequest } from 'wagmi'
```

--------------------------------

### Exponential Backoff retryDelay Example

Source: https://wagmi.sh/react/api/hooks/useEnsAddress

Applies exponential backoff to retry attempts.

```typescript
attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)
```
Tokens:
Raw