Wagmi

https://wagmi.sh/
Admin
Wagmi is a collection of React Hooks for Ethereum, designed to build high-performance, type-safe...
Tokens:450,537
Snippets:4,118
Trust Score:9.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Configuration Setup

Source: https://wagmi.sh/tempo/actions/token.watchRole

Example configuration required for the Tempo actions.

```ts
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'wagmi/tempo'

export const config = createConfig({
  connectors: [tempoWallet()],
  chains: [tempo],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```

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

### CLI project initialization prompts

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

Example output showing the interactive prompts encountered during project setup.

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

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

### Install Tempo dependencies

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

Install the required Viem and accounts packages using your preferred package manager.

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

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

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

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

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

### Usage Example

Source: https://wagmi.sh/core/api/connectors/safe

Example of how to configure the `safe` connector within your application.

```APIDOC
## Usage

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

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

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

### Start Documentation Development Server

Source: https://wagmi.sh/dev/contributing

Run this command to start the VitePress documentation site in development mode.

```bash
pnpm docs:dev
```

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

### Complete Wallet Connection Example

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

A comprehensive example integrating connection, disconnection, and status display logic.

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

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

### Install project dependencies

Source: https://wagmi.sh/dev/contributing

Run this command in the project root to install dependencies and configure git hooks.

```bash
pnpm install
```

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

### Install Playwright Binaries

Source: https://wagmi.sh/dev/contributing

Run this command to install the necessary browser binaries for Playwright.

```bash
pnpm exec playwright install
```

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

### Install Coinbase Wallet SDK

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

Install the Coinbase Wallet SDK using your preferred package manager.

```bash
pnpm add @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

```bash
npm install @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

```bash
yarn add @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

```bash
bun add @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

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

### Install Canary Version

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

Install the latest features from the main branch using the canary tag.

```bash
pnpm add @wagmi/cli@canary
```

```bash
npm install @wagmi/cli@canary
```

```bash
yarn add @wagmi/cli@canary
```

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

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

### Install coinbaseWallet dependencies

Source: https://wagmi.sh/core/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 Base Account Connector

Source: https://wagmi.sh/core/api/connectors/baseAccount

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

```bash
pnpm add @base-org/account@{{connectorDependencyVersion}}
```

```bash
npm install @base-org/account@{{connectorDependencyVersion}}
```

```bash
yarn add @base-org/account@{{connectorDependencyVersion}}
```

```bash
bun add @base-org/account@{{connectorDependencyVersion}}
```

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

### Install porto dependencies

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

Install the required porto package for the porto connector.

```pnpm
pnpm add porto@{{packageJson?.peerDependencies?.['porto']}}
```

```npm
npm install porto@{{packageJson?.peerDependencies?.['porto']}}
```

```yarn
yarn add porto@{{packageJson?.peerDependencies?.['porto']}}
```

```bun
bun add porto@{{packageJson?.peerDependencies?.['porto']}}
```

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

### Install TanStack Query persistence packages

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

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

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

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

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

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

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

### Install Safe Dependencies

Source: https://wagmi.sh/core/api/connectors/safe

Install the necessary Safe Apps provider and SDK packages using your preferred package manager. Ensure you use the correct versions as specified.

```bash
pnpm add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash
npm install @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash
yarn add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash
bun add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

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

### Usage Example

Source: https://wagmi.sh/core/api/actions/watchAsset

Demonstrates how to call watchAsset with a configuration and asset options.

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

await watchAsset(config, {
  type: 'ERC20',
  options: {
    address: '0x0000000000000000000000000000000000000000',
    symbol: 'WAGMI',
    decimals: 18,
  },
})
```

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

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

### Install Pull Request Preview

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

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

```bash
pnpm add https://pkg.pr.new/@wagmi/cli@123
```

```bash
npm install https://pkg.pr.new/@wagmi/cli@123
```

```bash
yarn add https://pkg.pr.new/@wagmi/cli@123
```

```bash
bun add https://pkg.pr.new/@wagmi/cli@123
```

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

### VerifyTypedData Usage Examples

Source: https://wagmi.sh/core/api/actions/verifyTypedData

Examples demonstrating how to use verifyTypedData with specific address and domain configurations.

```ts
import { verifyTypedData } from '@wagmi/core'
import { domain, types } from './data'
import { config } from './config'

const valid = await verifyTypedData(config, {
  domain,
  types,
  message: {
    from: {
      name: 'Cow',
      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
    },
    to: {
      name: 'Bob',
      wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
    },
    contents: 'Hello, Bob!',
  },
  primaryType: 'Mail',
  address: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266', // [!code focus]
  signature: '0x66edc32e2ab001213321ab7d959a2207fcef5190cc9abb6da5b0d2a8a9af2d4d2b0700e2c317c4106f337fd934fbbb0bf62efc8811a78603b33a8265d3b8f8cb1c',
})
// true
```

```ts
export const domain = {
  name: 'Ether Mail',
  version: '1',
  chainId: 1,
  verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
} as const

// The named list of all type definitions
export const types = {
  Person: [
    { name: 'name', type: 'string' },
    { name: 'wallet', type: 'address' },
  ],
  Mail: [
    { name: 'from', type: 'Person' },
    { name: 'to', type: 'Person' },
    { name: 'contents', type: 'string' },
  ],
} as const
```

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

```ts
import { verifyTypedData } from '@wagmi/core'
import { types } from './data'
import { config } from './config'

const valid = await verifyTypedData(config, {
  domain: { // [!code focus:6]
    name: 'Ether Mail',
    version: '1',
    chainId: 1,
    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
  },
  types,
  message: {
    from: {
      name: 'Cow',
      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
    },
    to: {
      name: 'Bob',
      wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
    },
    contents: 'Hello, Bob!',
  },
  primaryType: 'Mail',
  address: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
  signature: '0x66edc32e2ab001213321ab7d959a2207fcef5190cc9abb6da5b0d2a8a9af2d4d2b0700e2c317c4106f337fd934fbbb0bf62efc8811a78603b33a8265d3b8f8cb1c',
})
// true
```

```ts
// The named list of all type definitions
export const types = {
  Person: [
    { name: 'name', type: 'string' },
    { name: 'wallet', type: 'address' },
  ],
  Mail: [
    { name: 'from', type: 'Person' },
    { name: 'to', type: 'Person' },
    { name: 'contents', type: 'string' },
  ],
} as const
```

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

### Install WalletConnect Dependency

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

Install the required Ethereum provider package using your preferred package manager.

```bash-vue
pnpm add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue
npm install @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue
yarn add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue
bun add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

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

### Account Parameter

Source: https://wagmi.sh/core/api/actions/prepareTransactionRequest

Example showing the account parameter usage.

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

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

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

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

### Install MetaMask Connector Dependency

Source: https://wagmi.sh/core/api/connectors/metaMask

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

```bash-vue
pnpm add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue
npm install @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue
yarn add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue
bun add @metamask/connect-evm@{{connectorDependencyVersion}}
```

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

### Install Tempo Wallet Connector Dependencies

Source: https://wagmi.sh/core/api/connectors/tempoWallet

Install the necessary accounts package for Tempo Wallet integration.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add accounts@{{connectorDependencyVersion}}
```

```bash-vue [npm]
npm install accounts@{{connectorDependencyVersion}}
```

```bash-vue [yarn]
yarn add accounts@{{connectorDependencyVersion}}
```

```bash-vue [bun]
bun add accounts@{{connectorDependencyVersion}}
```

:::
```

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

### Install Foundry

Source: https://wagmi.sh/dev/contributing

Use these commands to install Foundry and Anvil, which are required for executing tests against local chain forks.

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

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

### Install TanStack Query Devtools

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

Commands to install the devtools package using various 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
```

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

### EstimateGas with account

Source: https://wagmi.sh/core/api/actions/estimateGas

Example showing how to specify an account for gas estimation.

```ts
import { estimateGas } from '@wagmi/core'
import { parseEther } from 'viem'
import { config } from './config'

const result = await estimateGas(config, {
  account: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e', // [!code focus]
  to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  value: parseEther('0.01'),
})
```

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

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

### Install TanStack Query Persister 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
```

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

### Install Wagmi Solid and dependencies

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

Install the core package along with required peer dependencies using your preferred package manager.

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

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

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

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

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

### Install Safe Dependencies

Source: https://wagmi.sh/core/api/connectors/safe

Install the necessary packages for the Safe connector using your preferred package manager.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash-vue [npm]
npm install @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash-vue [yarn]
yarn add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash-vue [bun]
bun add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

:::
```

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

### Configure useSignTypedData

Source: https://wagmi.sh/vue/api/composables/useSignTypedData

Examples showing how to initialize the composable with a custom configuration.

```vue
<script setup lang="ts">
import { useSignTypedData } from '@wagmi/vue'
import { config } from './config' // [!code focus]

const signTypedData = useSignTypedData({
  config, // [!code focus]
})
</script>
```

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

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

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

### Usage Example

Source: https://wagmi.sh/core/api/actions/getBalance

Basic usage of getBalance with a configuration object.

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

const balance = getBalance(config, {
  address: '0x4557B18E779944BFE9d78A672452331C186a9f48',
})
```

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

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

### Configure useDisconnect

Source: https://wagmi.sh/vue/api/composables/useDisconnect

Example showing how to use the useDisconnect composable with a custom configuration.

```vue
<script setup lang="ts">
import { useDisconnect } from '@wagmi/vue'
import { config } from './config' // [!code focus]

const disconnect = useDisconnect({
  config, // [!code focus]
})
</script>
```

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

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

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

### Using accessList

Source: https://wagmi.sh/core/api/actions/signTransaction

Example of providing an access list to the transaction.

```ts
import { signTransaction } from '@wagmi/core'
import { parseEther } from 'viem'
import { config } from './config'

const result = await signTransaction(config, {
  accessList: [{ // [!code focus]
    address: '0x1', // [!code focus]
    storageKeys: ['0x1'], // [!code focus]
  }], // [!code focus]
  to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  value: parseEther('0.01'),
})
```

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

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

### Usage Example

Source: https://wagmi.sh/core/api/actions/getTransactionReceipt

Basic usage of getTransactionReceipt with a configuration object.

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

await getTransactionReceipt(config, {
  hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d',
})
```

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

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

### Usage Examples

Source: https://wagmi.sh/solid/api/primitives/useBalance

Basic implementation of useBalance and the required Wagmi configuration.

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

function App() {
  const balance = useBalance(() => ({
    address: '0x4557B18E779944BFE9d78A672452331C186a9f48',
  }))
}
```

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

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

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

### Usage of useChainId

Source: https://wagmi.sh/solid/api/primitives/useChainId

Example showing how to use the hook in a component and the required configuration setup.

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

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

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

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

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

### Hash Parameter Usage

Source: https://wagmi.sh/core/api/actions/getTransactionReceipt

Example showing the hash parameter usage.

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

await getTransactionReceipt(config, {
  hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d', // [!code focus]
})
```

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

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

### Usage of useReadContract

Source: https://wagmi.sh/vue/api/composables/useReadContract

Example of calling a contract function within a Vue component setup script.

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

const result = useReadContract({
  abi,
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  functionName: 'totalSupply',
})
</script>
```

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

### Usage Example

Source: https://wagmi.sh/solid/api/primitives/useBlockNumber

Basic implementation of the useBlockNumber hook within a component and the required configuration setup.

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

function App() {
  const blockNumber = useBlockNumber()
}
```

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

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

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

### Manual multi-chain Viem client setup

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

Demonstrates the verbose boilerplate required when manually instantiating multiple Viem clients without Wagmi.

```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(/* ... */)
```

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

### Main Application Setup

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

Initializes the Vue application and injects the Wagmi and Vue Query plugins.

```typescript
// 1. Import modules.
import { VueQueryPlugin } from '@tanstack/vue-query'
import { WagmiPlugin } from '@wagmi/vue'
import { createApp } from 'vue'

import App from './App.vue'
import { config } from './wagmi'

createApp(App)
  // 2. Inject the Wagmi plugin.
  .use(WagmiPlugin, { config })
  // 3. Inject the Vue Query plugin.
  .use(VueQueryPlugin, {})
  .mount('#app')
```

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

### Configure useSwitchChain

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

Example of using the hook with a custom Wagmi config and the corresponding configuration setup.

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

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

### Display help for init command

Source: https://wagmi.sh/cli/api/commands/init

Shows the help message for the init command.

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

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

### UseReconnect Hook Usage

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

Example of using the useReconnect hook to trigger a reconnection and the associated 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(),
  },
})
```

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

### Initialize a project with a specific template

Source: https://wagmi.sh/cli/create-wagmi

Use the --template flag to specify a project template like 'next' during initialization.

```bash
pnpm create wagmi --template next
```

```bash
npm create wagmi@latest --template next
```

```bash
yarn create wagmi --template next
```

```bash
bun create wagmi --template next
```

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

### Usage in Vue Component

Source: https://wagmi.sh/vue/api/composables/useWaitForTransactionReceipt

Example of using the composable within a Vue script setup block to wait for a specific transaction hash.

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

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

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

### Address Parameter Usage

Source: https://wagmi.sh/core/api/actions/getBytecode

Example showing the address parameter usage.

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

await getBytecode(config, {
  address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2', // [!code focus]
})
```

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

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

### Initialize with custom config path

Source: https://wagmi.sh/cli/api/commands/init

Specifies a custom path for the configuration file using the --config option.

```bash
wagmi init --config wagmi.config.ts
```

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

### 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(),
  },
})
```

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

### Initialize with custom root path

Source: https://wagmi.sh/cli/api/commands/init

Sets the root directory for resolving the configuration file using the --root option.

```bash
wagmi init --root path/to/root
```

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

### Install dangerous_secp256k1 connector

Source: https://wagmi.sh/tempo/connectors/dangerous_secp256k1

Install the required dependency using your preferred package manager.

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

```bash
npm install accounts@{{connectorDependencyVersion}}
```

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

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

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

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

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

### EstimateGas with accessList

Source: https://wagmi.sh/core/api/actions/estimateGas

Example showing how to provide an access list when estimating gas.

```ts
import { estimateGas } from '@wagmi/core'
import { parseEther } from 'viem'
import { config } from './config'

const result = await estimateGas(config, {
  accessList: [{ // [!code focus]
    address: '0x1', // [!code focus]
    storageKeys: ['0x1'], // [!code focus]
  }], // [!code focus]
  to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  value: parseEther('0.01'),
})
```

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

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

### Install Wagmi Core dependencies

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

Install the required packages using your preferred package manager.

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

```bash
npm install @wagmi/core @wagmi/connectors viem@{{viemVersion}}
```

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

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

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

### Deploying a Contract

Source: https://wagmi.sh/core/api/actions/deployContract

Example showing the basic usage of deployContract with a configuration, ABI, and bytecode.

```ts
import { deployContract } from '@wagmi/core'
import { wagmiAbi } from './abi'
import { config } from './config'

const result = await deployContract(config, {
  abi: wagmiAbi,
  bytecode: '0x608060405260405161083e38038061083e833981016040819052610...',
})
```

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

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

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

### Usage Example

Source: https://wagmi.sh/core/api/actions/watchContractEvent

Demonstrates how to watch for a specific contract event and handle the logs.

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

const unwatch = watchContractEvent(config, {
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  abi,
  eventName: 'Transfer',
  onLogs(logs) {
    console.log('New logs!', logs)
  },
})
unwatch()
```

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

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

### Install @wagmi/connectors package

Source: https://wagmi.sh/core/guides/migrate-from-v1-to-v2

Install the required peer dependency for connectors using your preferred package manager.

```bash
pnpm add @wagmi/connectors
```

```bash
npm install @wagmi/connectors
```

```bash
yarn add @wagmi/connectors
```

```bash
bun add @wagmi/connectors
```

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

### Deploying with Constructor Arguments

Source: https://wagmi.sh/core/api/actions/deployContract

Example showing how to pass constructor arguments to the deployContract function.

```ts
import { deployContract } from '@wagmi/core'
import { wagmiAbi } from './abi'
import { config } from './config'

const result = await deployContract(config, {
  abi: wagmiAbi,
  args: [69420],
  bytecode: '0x608060405260405161083e38038061083e833981016040819052610...',
})
```

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

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

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

### Install Wagmi v3

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

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

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

```bash
npm install @wagmi/core@3
```

```bash
yarn add @wagmi/core@3
```

```bash
bun add @wagmi/core@3
```

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

### Usage Example

Source: https://wagmi.sh/core/api/actions/getCallsStatus

Basic implementation showing how to fetch the status of a call batch using a configuration object.

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

const status = await getCallsStatus(config, {
  id: '0x1234567890abcdef',
})
```

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

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

### Wire up components to the application entrypoint

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

Integrates the connection logic and wallet options into the main application structure using WagmiProvider and QueryClientProvider.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider, useConnection } from 'wagmi'
import { config } from './config'
import { Connection } from './connection' // [!code ++]
import { WalletOptions } from './wallet-options' // [!code ++]

const queryClient = new QueryClient()

function ConnectWallet() { // [!code ++]
  const { isConnected } = useConnection() // [!code ++]
  if (isConnected) return <Connection /> // [!code ++]
  return <WalletOptions /> // [!code ++]
} // [!code ++]

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

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

### Run development playgrounds

Source: https://wagmi.sh/dev/contributing

Start local development servers for specific packages or tools. Changes to source files will trigger automatic updates in the running playground.

```bash
pnpm dev              # `wagmi` playground
pnpm dev:core         # `@wagmi/core` playground
pnpm dev:create-wagmi # `create-wagmi` cli tool
pnpm dev:cli          # `@wagmi/cli` tool
pnpm dev:next         # `wagmi` playground with Next.js
pnpm dev:nuxt         # `@wagmi/vue` playground with Nuxt.js
pnpm dev:react        # `wagmi` playground (same as `pnpm dev`)
pnpm dev:vue          # `@wagmi/vue` playground
```

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

### Import useClient

Source: https://wagmi.sh/solid/api/primitives/useClient

Import the useClient primitive from @wagmi/solid.

```ts
import { useClient } from '@wagmi/solid'
```

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

### Basic Usage

Source: https://wagmi.sh/vue/api/composables/useConnectorClient

Initialize the composable within a Vue component setup script.

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

const result = useConnectorClient()
</script>
```

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

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

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

### Install Wagmi CLI

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

Install the @wagmi/cli package as a development dependency using your preferred package manager.

```bash
pnpm add -D @wagmi/cli
```

```bash
npm install --save-dev @wagmi/cli
```

```bash
yarn add -D @wagmi/cli
```

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

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

### Create a changeset for connector release

Source: https://wagmi.sh/dev/creating-connectors

Run this command to initiate the release process for a new connector.

```bash
pnpm changeset
```

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

### EstimateGas with connector

Source: https://wagmi.sh/core/api/actions/estimateGas

Example showing how to use a specific connector for gas estimation.

```ts
import { getConnections, estimateGas } from '@wagmi/core'
import { parseEther } from 'viem'
import { config } from './config'

const connections = getConnections(config)
const result = await estimateGas(config, {
  connector: connections[0]?.connector, // [!code focus]
  to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  value: parseEther('0.01'),
})
```

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

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

### Install Wagmi CLI

Source: https://wagmi.sh/cli/guides/migrate-from-v1-to-v2

Commands to install the latest version of the Wagmi CLI using various package managers.

```bash
pnpm add @wagmi/cli
```

```bash
npm install @wagmi/cli
```

```bash
yarn add @wagmi/cli
```

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

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

### Create Config with Custom Client Creation

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

Use a custom function to create Viem `Client` instances, passing `parameters.chain` to `createClient` for synchronization.

```typescript
import { createClient, http } from 'viem' // [!code focus]
import { createConfig } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'

const config = createConfig({
  chains: [mainnet, sepolia],
  client({ chain }) { // [!code focus]
    return createClient({ chain, transport: http('https://...') }) // [!code focus]
  }, // [!code focus]
})
```

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

### Install MetaMask Connector Dependency

Source: https://wagmi.sh/core/api/connectors/metaMask

Install the necessary MetaMask Connect EVM package using your preferred package manager.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue [npm]
npm install @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue [yarn]
yarn add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue [bun]
bun add @metamask/connect-evm@{{connectorDependencyVersion}}
```

:::
```

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

### Initialize a new Wagmi project

Source: https://wagmi.sh/cli/create-wagmi

Run the create-wagmi command using your preferred package manager to start a new project.

```bash
pnpm create wagmi
```

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

```bash
yarn create wagmi
```

```bash
bun create wagmi
```
Tokens:
Raw