Wagmi

https://github.com/wevm/wagmi
Admin
Reactive primitives for Ethereum apps
Tokens:653,188
Snippets:5,675
Trust Score:8.5
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### getProof with address parameter

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/getProof.md

Example showing the address parameter, which is the account address to get the proof for.

```ts
import { getProof } from '@wagmi/core'
import { config } from './config'

await getProof(config, {
  address: '0x4200000000000000000000000000000000000016', // [!code focus]
  storageKeys: [
    '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
  ],
})

```

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

### useProof with address

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useProof.md

Example showing the address parameter, which is the account address to get the proof for.

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

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

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

### parameters example

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/prepareTransactionRequest.md

Specifies which parameters to prepare. The example only prepares the 'gas' and 'nonce' parameters.

```TypeScript
import { prepareTransactionRequest } from '@wagmi/core'
import { parseEther } from 'viem'
import { config } from './config'

await prepareTransactionRequest(config, {
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
  parameters: ['gas', 'nonce'], // [!code focus]
  to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
  value: parseEther('1'),
})
```

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

### Install @metamask/connect-evm

Source: https://github.com/wevm/wagmi/blob/main/site/shared/connectors/metaMask.md

Install the @metamask/connect-evm package using your preferred package manager.

```bash
pnpm add @metamask/connect-evm@x.y.z
```

```bash
npm install @metamask/connect-evm@x.y.z
```

```bash
yarn add @metamask/connect-evm@x.y.z
```

```bash
bun add @metamask/connect-evm@x.y.z
```

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

### Install Wagmi packages manually

Source: https://github.com/wevm/wagmi/blob/main/site/vue/getting-started.md

Install the required packages for manual Wagmi setup: @wagmi/vue, viem (version matching the peer dependency), and @tanstack/vue-query. Viem provides the Ethereum interface and TanStack Query handles async state.

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

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

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

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

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

### Example: Using Actions with Primitives

Source: https://github.com/wevm/wagmi/blob/main/site/solid/api/actions.md

Shows how to use the signMessage action inside a Solid component, using useConnection to get the address and signing a message on button click.

```tsx
import { useConnection } from '@wagmi/solid'
import { signMessage } from '@wagmi/solid/actions'
import { config } from './config'

function SignMessage() {
  const connection = useConnection()

  const handleSign = async () => {
    if (!connection.address) return
    
    const signature = await signMessage(config, {
      message: 'Hello, World!',
    })
    console.log('Signature:', signature)
  }

  return (
    <button onClick={handleSign}>
      Sign Message
    </button>
  )
}
```

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

### Install @wagmi/solid with pnpm

Source: https://github.com/wevm/wagmi/blob/main/packages/solid/README.md

Install the required packages for using @wagmi/solid with viem and @tanstack/solid-query.

```bash
pnpm add @wagmi/solid viem @tanstack/solid-query
```

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

### Install wagmi with pnpm

Source: https://github.com/wevm/wagmi/blob/main/packages/react/README.md

Install wagmi, viem, and @tanstack/react-query using pnpm.

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

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

### Send Transaction Example: app.tsx, send-transaction.tsx, and config.ts

Source: https://github.com/wevm/wagmi/blob/main/site/react/guides/send-transaction.md

These three files form the complete setup for a Send Transaction example: app.tsx wires the WagmiProvider and QueryClientProvider with the SendTransaction component, send-transaction.tsx implements the form using useSendTransaction and useWaitForTransactionReceipt, and config.ts defines the wagmi configuration with chains, connectors, and transports. The config requires a WalletConnect project ID placeholder to be replaced.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { SendTransaction } from './send-transaction' // [!code ++]

const queryClient = new QueryClient()

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

```tsx
import * as React from 'react'
import { 
  type BaseError, 
  useSendTransaction, 
  useWaitForTransactionReceipt 
} from 'wagmi' 
import { parseEther } from 'viem' 
 
export function SendTransaction() {
  const { 
    data: hash,
    error, 
    isPending, 
    sendTransaction 
  } = useSendTransaction() 

  async function submit(e: React.FormEvent<HTMLFormElement>) { 
    e.preventDefault() 
    const formData = new FormData(e.target as HTMLFormElement) 
    const to = formData.get('address') as `0x${string}` 
    const value = formData.get('value') as string 
    sendTransaction({ to, value: parseEther(value) }) 
  } 

  const { isLoading: isConfirming, isSuccess: isConfirmed } = 
    useWaitForTransactionReceipt({ 
      hash, 
    }) 

  return (
    <form onSubmit={submit}>
      <input name="address" placeholder="0xA0Cf…251e" required />
      <input name="value" placeholder="0.05" required />
      <button 
        disabled={isPending} 
        type="submit"
      >
        {isPending ? 'Confirming...' : 'Send'} 
      </button>
      {hash && <div>Transaction Hash: {hash}</div>} 
      {isConfirming && <div>Waiting for confirmation...</div>} 
      {isConfirmed && <div>Transaction confirmed.</div>} 
      {error && ( 
        <div>Error: {(error as BaseError).shortMessage || error.message}</div> 
      )} 
    </form>
  )
}
```

```tsx
import { http, createConfig } from 'wagmi'
import { base, mainnet, optimism } from 'wagmi/chains'
import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors'

const projectId = '<WALLETCONNECT_PROJECT_ID>'

export const config = createConfig({
  chains: [mainnet, base],
  connectors: [
    injected(),
    walletConnect({ projectId }),
    metaMask(),
    safe(),
  ],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
  },
})
```

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

### Install @wagmi/core and viem with pnpm

Source: https://github.com/wevm/wagmi/blob/main/packages/core/README.md

Install the @wagmi/core package along with viem as a dependency using pnpm.

```bash
pnpm add @wagmi/core viem
```

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

### account parameter example

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/call.md

Example showing the `account` parameter set to a specific address.

```ts
import { call } from '@wagmi/core'
import { config } from './config'

await call(config, {
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266', // [!code focus]
  data: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
  to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
})
```

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

### gas parameter example

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/call.md

Example showing the `gas` parameter set to 1,000,000 wei.

```ts
import { call } from '@wagmi/core'
import { config } from './config'

await call(config, {
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
  data: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
  gas: 1_000_000n, // [!code focus]
  to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
})
```

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

### accessList parameter example

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/call.md

Example showing the `accessList` parameter with an array of access entries.

```ts
import { call } from '@wagmi/core'
import { config } from './config'

await call(config, {
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
  accessList: [ // [!code focus:6] 
    {
      address: '0x1',
      storageKeys: ['0x1'],
    },
  ],
  data: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
  to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
})
```

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

### Install dependencies with pnpm

Source: https://github.com/wevm/wagmi/blob/main/site/dev/contributing.md

Run this command in the project root to install pnpm (via Corepack) and all project dependencies. After install, pnpm links packages for development and sets up git hooks.

```bash
pnpm install
```

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

### Install @wagmi/cli with bun

Source: https://github.com/wevm/wagmi/blob/main/site/cli/guides/migrate-from-v1-to-v2.md

Install the latest version of the Wagmi CLI using bun.

```bash
bun add @wagmi/cli
```

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

### Install @base-org/account

Source: https://github.com/wevm/wagmi/blob/main/site/shared/connectors/baseAccount.md

Install the required @base-org/account package using your preferred package manager.

```APIDOC
## Install

### pnpm
```bash
pnpm add @base-org/account
```

### npm
```bash
npm install @base-org/account
```

### yarn
```bash
yarn add @base-org/account
```

### bun
```bash
bun add @base-org/account
```
```

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

### Usage example for amm.useLiquidityBalance

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/hooks/amm.useLiquidityBalance.md

This example imports the Hooks object from 'wagmi/tempo' and calls `amm.useLiquidityBalance` with the pool address, user token, and validator token. The returned balance is logged to the console. The example includes a config file reference that is not shown on this page.

```ts
import { Hooks } from 'wagmi/tempo'

const { data: balance } = Hooks.amm.useLiquidityBalance({
  address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  userToken: '0x20c0000000000000000000000000000000000000',
  validatorToken: '0x20c0000000000000000000000000000000000001',
})

console.log('Liquidity balance:', balance)
// @log: Liquidity balance: 10500000000000000000n
```

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

### Manual Multi-chain Viem Client Setup (Not Recommended)

Source: https://github.com/wevm/wagmi/blob/main/site/core/guides/viem.md

This snippet shows the manual Viem setup without Wagmi, demonstrating the boilerplate required for multi-chain support. It creates public and wallet clients for each chain and uses them directly. The source explicitly advises against this approach.

```tsx
// Manually set up Viem Clients without wagmi. Don't do this, it's only here 
// to demonstrate the amount of boilerplate required.

import { createPublicClient, createWalletClient, http } from 'viem'
import { base, mainnet, optimism, zora } from 'viem/chains'

const publicClient = {
  base: createPublicClient({
    chain: base,
    transport: http()
  }),
  mainnet: createPublicClient({
    chain: mainnet,
    transport: http()
  }),
  optimism: createPublicClient({
    chain: optimism,
    transport: http()
  }),
  zora: createPublicClient({
    chain: zora,
    transport: http()
  })
} as const

const walletClient = {
  base: createWalletClient({
    chain: base,
    transport: custom(window.ethereum)
  }),
  mainnet: createWalletClient({
    chain: mainnet,
    transport: custom(window.ethereum)
  }),
  optimism: createWalletClient({
    chain: optimism,
    transport: custom(window.ethereum)
  }),
  zora: createWalletClient({
    chain: zora,
    transport: custom(window.ethereum)
  })
} as const

const blockNumber = await publicClient.mainnet.getBlockNumber()
const hash = await walletClient.mainnet.sendTransaction(/* ... */)
```

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

### Basic usage of useTransactionReceipt

Source: https://github.com/wevm/wagmi/blob/main/site/vue/api/composables/useTransactionReceipt.md

Example of using `useTransactionReceipt` with a transaction hash to get the receipt.

```vue
<script setup lang="ts">
import { useTransactionReceipt } from '@wagmi/vue'

const result = useTransactionReceipt({
  hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d',
})
</script>
```

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

### Usage of useChains

Source: https://github.com/wevm/wagmi/blob/main/site/solid/api/primitives/useChains.md

Example usage of useChains to get the configured chains and render them in a list.

```tsx
import { useChains } from '@wagmi/solid'
import { For } from 'solid-js'

function App() {
  const chains = useChains()
  
  return (
    <ul>
      <For each={chains()}>
        {(chain) => <li>{chain.name}</li>}
      </For>
    </ul>
  )
}

```

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

### getClient example

Source: https://github.com/wevm/wagmi/blob/main/site/shared/createConfig.md

Shows how to use config.getClient to create a Viem Client for a specific chain. The config.ts file sets up a Wagmi config with mainnet and sepolia chains.

```ts-vue
import { config } from './config'

const client = config.getClient({ chainId: 1 })
```

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

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

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

### useProof with chainId

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useProof.md

Example showing the chainId parameter to specify the chain to get the proof for.

```tsx
import { useProof } from 'wagmi'
import { optimism } from 'wagmi/chains'

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

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

### Install Foundry and Anvil

Source: https://github.com/wevm/wagmi/blob/main/site/dev/contributing.md

Installs Foundry and Anvil, which are required to run the test suite against local chain forks.

```bash
curl -L https://foundry.paradigm.xyz | bash
foundryup
```

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

### Use zone.useZoneInfo with wagmi.config.ts setup

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/hooks/zone.useZoneInfo.md

The example.ts file shows how to use the useZoneInfo hook with initial data, while wagmi.config.ts provides the required configuration for the zone chain. The hook expects a zone authorization token to already exist in storage; use zone.useSignAuthorizationToken first. Requires viem >=2.56.2.

```ts
import { Hooks } from 'wagmi/tempo'
import { Zone } from 'viem/tempo'

const zoneChain = Zone.b

const { data: zoneInfo } = Hooks.zone.useZoneInfo({
  chainId: zoneChain.id,
  query: {
    initialData: {
      chainId: zoneChain.id,
      sequencer: '0x0000000000000000000000000000000000000007',
      tempoBlockNumber: 42n,
      zoneId: 7,
      zoneTokens: ['0x20c0000000000000000000000000000000000001'],
    },
  },
})

console.log('Zone ID:', zoneInfo?.zoneId)
// @log: Zone ID: 7
```

```ts
// @noErrors
import { createConfig } from 'wagmi'
import { webAuthn } from 'wagmi/tempo'
import { http as zoneHttp, Zone } from 'viem/tempo'

const zoneChain = Zone.b

export const config = createConfig({
  connectors: [webAuthn()],
  chains: [zoneChain],
  multiInjectedProviderDiscovery: false,
  transports: {
    [zoneChain.id]: zoneHttp(),
  },
})
```

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

### TSDoc Example for Wagmi Action

Source: https://github.com/wevm/wagmi/blob/main/packages/core/src/tempo/AGENTS.md

Required TSDoc structure for all Wagmi actions, including function description, @example block with imports and config setup, @param tags, and @returns tag.

```typescript
/**
 * Gets the user's default fee token.
 *
 * @example
 * ts
 * import { createConfig, http } from '@wagmi/core'
 * import { tempo } from '@wagmi/core/chains'
 * import { Actions } from '@wagmi/core/tempo'
 *
 * const config = createConfig({
 *   chains: [tempo],
 *   transports: {
 *     [tempo.id]: http(),
 *   },
 * })
 *
 * const token = await Actions.fee.getUserToken(config, {
 *   account: '0x...',
 * })
 * 
 *
 * @param config - Config.
 * @param parameters - Parameters.
 * @returns The user's fee token address.
 */
```

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

### wagmi init --help

Source: https://github.com/wevm/wagmi/blob/main/site/cli/api/commands/init.md

Displays the help message for the wagmi init command.

```bash
wagmi init --help
```

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

### useProof with blockTag

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useProof.md

Example showing the blockTag parameter to get the proof at a given block tag.

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

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

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

### Install @wagmi/solid with bun

Source: https://github.com/wevm/wagmi/blob/main/site/solid/getting-started.md

Installs @wagmi/solid, viem, and @tanstack/solid-query using bun. The viem version is pinned to the peer dependency version.

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

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

### useProof with blockNumber

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useProof.md

Example showing the blockNumber parameter to get the proof at a given block number.

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

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

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

### Install @coinbase/wallet-sdk

Source: https://github.com/wevm/wagmi/blob/main/site/shared/connectors/coinbaseWallet.md

Install the @coinbase/wallet-sdk package using pnpm, npm, yarn, or bun. The version placeholder x.y.z should be replaced with the actual version.

```bash-vue
pnpm add @coinbase/wallet-sdk@x.y.z
```

```bash-vue
npm install @coinbase/wallet-sdk@x.y.z
```

```bash-vue
yarn add @coinbase/wallet-sdk@x.y.z
```

```bash-vue
bun add @coinbase/wallet-sdk@x.y.z
```

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

### Setup with WagmiProvider and QueryClientProvider

Source: https://github.com/wevm/wagmi/blob/main/site/solid/guides/tanstack-query.md

Wrap your app with both WagmiProvider and QueryClientProvider to use @wagmi/solid. The QueryClient instance is created and passed to QueryClientProvider.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
import { WagmiProvider } from '@wagmi/solid'
import { config } from './config'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/* Your app */}
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

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

### getProof with blockTag parameter

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/getProof.md

Example showing the blockTag parameter to get the proof at a given block tag.

```ts
import { getProof } from '@wagmi/core'
import { config } from './config'

await getProof(config, {
  address: '0x4200000000000000000000000000000000000016',
  blockTag: 'latest', // [!code focus]
  storageKeys: [
    '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
  ],
})

```

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

### getProof with blockNumber parameter

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/getProof.md

Example showing the blockNumber parameter to get the proof at a given block number.

```ts
import { getProof } from '@wagmi/core'
import { config } from './config'

await getProof(config, {
  address: '0x4200000000000000000000000000000000000016',
  blockNumber: 42069n, // [!code focus]
  storageKeys: [
    '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
  ],
})

```

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

### Install @wagmi/solid with npm

Source: https://github.com/wevm/wagmi/blob/main/site/solid/getting-started.md

Installs @wagmi/solid, viem, and @tanstack/solid-query using npm. The viem version is pinned to the peer dependency version.

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

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

### Install React Query Devtools (pnpm, npm, yarn, bun)

Source: https://github.com/wevm/wagmi/blob/main/site/react/guides/tanstack-query.md

Installation commands for @tanstack/react-query-devtools using different package managers.

```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
```

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

### Usage in React component

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useConnectors.md

Example of using the useConnectors hook inside a React component to get the configured connectors.

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

function App() {
  const connectors = useConnectors()
}
```

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

### getProof with storageKeys parameter

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/getProof.md

Example showing the storageKeys parameter, an array of storage keys to be proofed and included.

```ts
import { getProof } from '@wagmi/core'
import { config } from './config'

await getProof(config, {
  address: '0x4200000000000000000000000000000000000016',
  storageKeys: [ // [!code focus:3]
    '0x4a932049252365b3eedbc5190e18949f2ec11f39d3bef2d259764799a1b27d99',
  ],
})

```

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

### getTransactionCount with blockNumber parameter

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/actions/getTransactionCount.md

Example showing the blockNumber parameter, which is a bigint and specifies the block number to get the count at.

```ts
import { getTransactionCount } from '@wagmi/core'
import { config } from './config'

const transactionCount = getTransactionCount(config, {
  address: '0x4557B18E779944BFE9d78A672452331C186a9f48',
  blockNumber: 17829139n, // [!code focus]
})

```

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

### Install Wagmi Core with bun

Source: https://github.com/wevm/wagmi/blob/main/site/core/getting-started.md

Install @wagmi/core, @wagmi/connectors, and viem using bun. The viem version is specified as a peer dependency.

```bash
bun add @wagmi/core @wagmi/connectors viem@{{viemVersion}}
```

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

### Use Hooks.nonce.useNonce to get nonce

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/hooks/nonce.useNonce.md

Example of using the `Hooks.nonce.useNonce` hook to get the nonce for an account and nonce key. The `nonceKey` is set to `1n` and the account is a specific Ethereum address. The result is logged to the console, showing a nonce value of `42n`.

```ts
import { Hooks } from 'wagmi/tempo'

const { data: nonce } = Hooks.nonce.useNonce({
  account: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  nonceKey: 1n,
})

console.log('Nonce:', nonce)
// @log: Nonce: 42n
```

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

### useProof with storageKeys

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useProof.md

Example showing the storageKeys parameter, an array of storage-keys to be proofed and included.

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

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

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

### Usage example for useEthersProvider

Source: https://github.com/wevm/wagmi/blob/main/site/react/guides/ethers.md

Shows how to use the useEthersProvider hook in a React component. Import the hook and call it to get the provider instance.

```ts
import { useEthersProvider } from './ethers'

function Example() {
  const provider = useEthersProvider()
  ...
}
```

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

### create-wagmi CLI prompts output

Source: https://github.com/wevm/wagmi/blob/main/site/react/getting-started.md

Example output shown after running create-wagmi, displaying prompts for project name and framework selection.

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

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

### Basic usage of useConnection

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useConnection.md

Use the useConnection hook to get the current connection. The example shows a basic usage in a React component.

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

function App() {
  const connection = useConnection()
}
```

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

### Install @wagmi/solid with yarn

Source: https://github.com/wevm/wagmi/blob/main/site/solid/getting-started.md

Installs @wagmi/solid, viem, and @tanstack/solid-query using yarn. The viem version is pinned to the peer dependency version.

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

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

### Create MintNFT component

Source: https://github.com/wevm/wagmi/blob/main/site/react/guides/write-to-contract.md

Initial MintNFT component with a form for entering a token ID and a Mint button. This is the starting point for the guide.

```tsx
import * as React from 'react'
 
export function MintNFT() {
  return (
    <form>
      <input name="tokenId" placeholder="69420" required />
      <button type="submit">Mint</button>
    </form>
  )
}

```

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

### Install Viem and accounts packages for Tempo

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/getting-started.md

Install the required Viem and accounts packages for Tempo support. The version placeholders are resolved by the documentation framework: viemVersion is '>=2.55.2' and accountsVersion comes from the connectors package's peerDependencies.

```bash
pnpm add viem@{{viemVersion}} accounts@{{accountsVersion}}
```

```bash
npm install viem@{{viemVersion}} accounts@{{accountsVersion}}
```

```bash
yarn add viem@{{viemVersion}} accounts@{{accountsVersion}}
```

```bash
bun add viem@{{viemVersion}} accounts@{{accountsVersion}}
```

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

### Use useConfig in Vue component

Source: https://github.com/wevm/wagmi/blob/main/site/vue/api/composables/useConfig.md

Use the useConfig composable inside a Vue component's script setup to get the Config from the WagmiPlugin.

```vue
<script setup lang="ts">
import { useConfig } from 'wagmi'

const config = useConfig()
</script>
```

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

### Get buy quote with Hooks.dex.useBuyQuote

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/hooks/dex.useBuyQuote.md

Use this hook to get a quote for buying a specific amount of tokens. The example imports the Hooks object from 'wagmi/tempo' and parseUnits from 'viem', then calls Hooks.dex.useBuyQuote with the amountOut, tokenIn, and tokenOut parameters. The returned quote is logged to the console.

```ts
import { Hooks } from 'wagmi/tempo'
import { parseUnits } from 'viem'

const { data: quote } = Hooks.dex.useBuyQuote({
  amountOut: parseUnits('100', 6),
  tokenIn: '0x20c0000000000000000000000000000000000001',
  tokenOut: '0x20c0000000000000000000000000000000000002',
})

console.log('Amount needed:', quote)
// @log: Amount needed: 100300000n
```

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

### Get withdrawal fee with Actions.zone.getWithdrawalFee

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/actions/zone.getWithdrawalFee.md

Example of using the `Actions.zone.getWithdrawalFee` action from `wagmi/tempo` to retrieve the withdrawal fee for a given gas limit. Requires `viem >=2.56.2`. The example configures a Wagmi config with the Zone.b chain and calls the action with `callbackGas` and `chainId`, logging the result.

```ts
import { createConfig } from 'wagmi'
import { http as zoneHttp, Zone } from 'viem/tempo'

const zoneChain = Zone.b

const config = createConfig({
  chains: [zoneChain],
  multiInjectedProviderDiscovery: false,
  transports: {
    [zoneChain.id]: zoneHttp(),
  },
})

import { Actions } from 'wagmi/tempo'

const result = await Actions.zone.getWithdrawalFee(config, {
  callbackGas: 21_000n,
  chainId: zoneChain.id,
})

console.log('Fee:', result)
// @log: Fee: 22000n
```

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

### parameters parameter example

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/usePrepareTransactionRequest.md

Example showing how to use the parameters option to specify which transaction parameters to prepare, such as gas and nonce. Includes a config file snippet.

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

function App() {
  const result = usePrepareTransactionRequest({
    account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
    parameters: ['gas', 'nonce'], // [!code focus]
    to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
    value: parseEther('1'),
  })
}
```

```ts
<<< @/snippets/react/config.ts[config.ts]
```

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

### useReadContract example

Source: https://github.com/wevm/wagmi/blob/main/site/vue/api/composables/useReadContract.md

Example of using the useReadContract composable to read a contract's balanceOf function. It includes a config setup with mainnet and sepolia chains, an ABI definition, and the hook call with address and args. The code shows type inference for the function name and args.

```ts
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
// ---cut---
const abi = [
  {
    type: 'function',
    name: 'balanceOf',
    stateMutability: 'view',
    inputs: [{ name: 'account', type: 'address' }],
    outputs: [{ type: 'uint256' }],
  },
  {
    type: 'function',
    name: 'totalSupply',
    stateMutability: 'view',
    inputs: [],
    outputs: [{ name: 'supply', type: 'uint256' }],
  },
] as const

const result = useReadContract({
  abi,
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  functionName: 'balanceOf',
  // ^?


  args: ['0x6b175474e89094c44da98b954eedeac495271d0f'],
  // ^?
})

result.data
//     ^?
```

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

### Install Wagmi Core with bun

Source: https://github.com/wevm/wagmi/blob/main/site/core/installation.md

Install @wagmi/core and viem using bun. The viem version is specified by the package's peer dependency.

```bash
bun add @wagmi/core viem@{{viemVersion}}
```

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

### Import and use useSignTypedData

Source: https://github.com/wevm/wagmi/blob/main/site/vue/api/composables/useSignTypedData.md

Import the useSignTypedData composable from '@wagmi/vue' and call it to get the signTypedData function. The example shows the basic usage with type inference.

```ts
import { useSignTypedData } from '@wagmi/vue'
// ---cut---
const signTypedData = useSignTypedData()
```

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

### Create MintNft component with form

Source: https://github.com/wevm/wagmi/blob/main/site/vue/guides/write-to-contract.md

Initial Vue component with a form for entering a token ID and a Mint button. This is the starting point for the Mint NFT example.

```vue
<script setup lang="ts">
</script>
 
<template>
  <form>
    <input name="tokenId" placeholder="69420" required />
    <button type="submit">Mint</button>
  </form>
</template>
```

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

### Use useChainId in a Solid component

Source: https://github.com/wevm/wagmi/blob/main/site/solid/api/primitives/useChainId.md

Example usage of useChainId in a Solid component. The hook returns an accessor that must be called to get the current chain ID.

```tsx
import { useChainId } from '@wagmi/solid'

function App() {
  const chainId = useChainId()
  
  return <p>Chain ID: {chainId()}</p>
}

```

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

### Install create-wagmi with npm

Source: https://github.com/wevm/wagmi/blob/main/packages/create-wagmi/README.md

Run this command to create a new Wagmi project using npm.

```bash
npm create wagmi
```

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

### useWatchContractEvent onError callback

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useWatchContractEvent.md

Example of using the `onError` callback in `useWatchContractEvent` to handle errors thrown when getting the block number. The callback receives an `Error` object.

```tsx
import { useWatchContractEvent } from 'wagmi'
import { abi } from './abi'

function App() {
  useWatchContractEvent({
    address: '0x6b175474e89094c44da98b954eedeac495271d0f',
    abi,
    eventName: 'Transfer',
    onLogs(logs) {
      console.log('New logs!', logs)
    },
    onError(error) { // [!code focus]
      console.log('Error', error) // [!code focus]
    } // [!code focus]
  })
}
```

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

### Install create-wagmi with yarn

Source: https://github.com/wevm/wagmi/blob/main/packages/create-wagmi/README.md

Run this command to create a new Wagmi project using yarn.

```bash
yarn create wagmi
```

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

### useSwitchChain usage

Source: https://github.com/wevm/wagmi/blob/main/site/react/api/hooks/useSwitchChain.md

Example usage of useSwitchChain to switch the chain when connected. It uses useChains to get the available chains and renders buttons that call switchChain.mutate with the chainId.

```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>
  )
}

```

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

### Complete Wallet Connection Example

Source: https://github.com/wevm/wagmi/blob/main/site/solid/guides/connect-wallet.md

A complete example combining all the pieces: connecting, displaying connectors, checking connection status, and disconnecting. It shows a fallback UI when not connected and displays the connected address and chain ID when connected.

```tsx
import { useConnect, useConnection, useConnectors, useDisconnect } from '@wagmi/solid'
import { For, Show } from 'solid-js'

function WalletConnection() {
  const connection = useConnection()
  const connectors = useConnectors()
  const connect = useConnect()
  const disconnect = useDisconnect()

  return (
    <div>
      <Show
        when={connection.isConnected}
        fallback={
          <div>
            <p>Connect your wallet:</p>
            <For each={connectors()}>
              {(connector) => (
                <button
                  disabled={connect.isPending}
                  onClick={() => connect.mutate({ connector })}
                >
                  {connector.name}
                </button>
              )}
            </For>
            {connect.isError && <p>Error: {connect.error?.message}</p>}
          </div>
        }
      >
        <div>
          <p>Connected: {connection.address}</p>
          <p>Chain ID: {connection.chainId}</p>
          <button onClick={() => disconnect.mutate()}>
            Disconnect
          </button>
        </div>
      </Show>
    </div>
  )
}

```

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

### Use dex.useTickLevel to get tick level

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/hooks/dex.useTickLevel.md

This example demonstrates how to call the `dex.useTickLevel` hook with the required parameters: `base`, `tick`, and `isBid`. The hook returns a `level` object containing `head`, `tail`, and `totalLiquidity` fields. The example also includes a `config.ts` file that is required for the hook to work.

```ts
import { Hooks } from 'wagmi/tempo'
import { Tick } from 'viem/tempo'

const { data: level } = Hooks.dex.useTickLevel({
  base: '0x20c0000000000000000000000000000000000001',
  tick: Tick.fromPrice('1.001'),
  isBid: true,
})

console.log('Tick level:', level)
// @log: Tick level: { head: 1n, tail: 5n, totalLiquidity: 1000000000n }
```

```ts
<<< @/snippets/react/config-tempo.ts{ts} [config.ts]
```

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

### Usage example for zone.getZoneInfo

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/actions/zone.getZoneInfo.md

This example demonstrates how to use `Actions.zone.getZoneInfo` with a zone chain. It requires an authorization token in storage, which is obtained by calling `Actions.zone.signAuthorizationToken` first. The result includes the zone ID, which is logged to the console.

```ts
import { createConfig } from 'wagmi'
import { webAuthn } from 'wagmi/tempo'
import { http as zoneHttp, Zone } from 'viem/tempo'

const zoneChain = Zone.b

const config = createConfig({
  connectors: [webAuthn()],
  chains: [zoneChain],
  multiInjectedProviderDiscovery: false,
  transports: {
    [zoneChain.id]: zoneHttp(),
  },
})

import { Actions } from 'wagmi/tempo'

await Actions.zone.signAuthorizationToken(config, {
  chainId: zoneChain.id,
})

const result = await Actions.zone.getZoneInfo(config, {
  chainId: zoneChain.id,
})

console.log('Zone ID:', result.zoneId)
// @log: Zone ID: 7
```

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

### Install accounts package with bun

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/connectors/dangerous_secp256k1.md

Install the accounts package using bun. The version is dynamically inserted from the connector's peer dependency.

```bash
bun add accounts@{{connectorDependencyVersion}}
```

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

### Switch Connection with useSwitchConnection

Source: https://github.com/wevm/wagmi/blob/main/site/solid/api/primitives/useSwitchConnection.md

Example usage of useSwitchConnection to switch between connections when multiple wallets are connected. It uses useConnections to get the list of connections and renders buttons to switch to each connection.

```tsx
import { useConnections, useSwitchConnection } from '@wagmi/solid'
import { For } from 'solid-js'

function App() {
  const connections = useConnections()
  const switchConnection = useSwitchConnection()
  
  return (
    <div>
      <For each={connections()}>
        {(connection) => (
          <button
            onClick={() => switchConnection.mutate({ connector: connection.connector })}
          >
            Switch to {connection.connector.name}
          </button>
        )}
      </For>
    </div>
  )
}

```

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

### Create a custom connector with createConnector

Source: https://github.com/wevm/wagmi/blob/main/site/core/api/createConnector.md

Example of using createConnector to define a custom connector. The setup function receives a config object with Wagmi internals such as chains, emitter, providers, and storage.

```ts
import { createConnector } from '@wagmi/core'

export type InjectedParameters = {}

export function injected(parameters: InjectedParameters = {}) {
  return createConnector((config) => ({
    // ...
  }))
}
```

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

### Install async storage persister packages

Source: https://github.com/wevm/wagmi/blob/main/site/react/guides/tanstack-query.md

Install the required packages for async storage persistence with TanStack Query. Use the command matching your package manager (pnpm, npm, yarn, or bun).

```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
```

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

### Use useConnection in a Vue component

Source: https://github.com/wevm/wagmi/blob/main/site/vue/api/composables/useConnection.md

Vue component using useConnection to get the current connection and display its address. The script setup includes a module augmentation for the config type with mainnet and sepolia chains.

```vue
<script setup lang="ts">
// ---cut-start---
// @errors: 2322
import { type Config } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

declare module '@wagmi/vue' {
  interface Register {
    config: Config<readonly [typeof mainnet, typeof sepolia]>
  }
}
// ---cut-end---
import { useConnection } from '@wagmi/vue'

const connection = useConnection()
</script>

<template>
  Address: {{ connection.address }}
</template>

```

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

### useReadContract with const-asserted ABI

Source: https://github.com/wevm/wagmi/blob/main/site/vue/typescript.md

Example of using useReadContract with a const-asserted ABI to get type-safe data. The snippet shows the function call with address, abi, functionName, and args. The data returned is typed based on the ABI.

```TypeScript
import { useReadContract } from '@wagmi/vue'

const { data } = useReadContract({
  address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
  abi: erc721Abi,
  functionName: 'balanceOf',
  // ^?



  args: ['0xA0Cf798816D4b9b9866b5330EEa46a18382f251e'],
  // ^?
})

data
// ^?
```
Tokens:
Raw