### Manual Viem Client Setup (Boilerplate Example)

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

This example demonstrates the verbose setup required for a multi-chain Viem client without Wagmi, highlighting the benefits of using Wagmi's `createConfig`.

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

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

### Install @wagmi/solid with bun

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

Use this command to install @wagmi/solid, viem, and @tanstack/solid-query with bun.

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

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

### Basic useClient Usage

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

Get the Viem `Client` instance using the `useClient` composable. This example assumes a default configuration is set up.

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

const client = useClient()
</script>
```

```typescript
import { defineConfig } from '@wagmi/vue'

export const config = defineConfig({
  // ... other config options
})
```

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

### Install @wagmi/solid with yarn

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

Use this command to install @wagmi/solid, viem, and @tanstack/solid-query with yarn.

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

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

### Install @wagmi/solid with npm

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

Use this command to install @wagmi/solid, viem, and @tanstack/solid-query with npm.

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

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

### Basic Usage of useChains

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

Use the `useChains` composable to get the configured chains. This example shows the basic setup within a Vue component.

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

const chains = useChains()
</script>
```

```typescript
import { configureChains, createConfig } from '@wagmi/core'
import { mainnet, optimism, polygon } from '@wagmi/core/chains'

const { publicClient, webSocketPublicClient } = configureChains([
  mainnet,
  optimism,
  polygon,
], [
  // Add your chain configuration here
])

export const config = createConfig({
  publicClient,
  webSocketPublicClient,
})

```

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

### Install @wagmi/solid with pnpm

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

Use this command to install @wagmi/solid, viem, and @tanstack/solid-query with pnpm.

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

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

### Get Deposit Status with Wagmi

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

This example demonstrates how to set up a Wagmi configuration for Tempo zone actions, sign an authorization token, and then use `zone.getDepositStatus` to check deposit processing status. Ensure you have `viem` version 2.48.0 or higher installed.

```typescript
import { createConfig } from 'wagmi'
import { KeyManager, webAuthn } from 'wagmi/tempo'
import { http as zoneHttp, zone } from 'viem/tempo/zones'

const zoneChain = zone(7)

const config = createConfig({
  connectors: [
    webAuthn({
      keyManager: KeyManager.localStorage(),
    }),
  ],
  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.getDepositStatus(config, {
  chainId: zoneChain.id,
  tempoBlockNumber: 42n,
})

console.log('Processed:', result.processed)
// @log: Processed: true
```

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

### Install WalletConnect Provider (bun)

Source: https://github.com/wevm/wagmi/blob/main/site/shared/migrate-from-v2-to-v3.md

Use this command to install the WalletConnect Ethereum provider with bun.

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

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

### Install Base Account SDK

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

Install the Base Account SDK package using your preferred package manager.

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

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

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

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

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

### Install MetaMask Connect EVM Package

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-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 @wagmi/connectors

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

Install the @wagmi/connectors package along with @wagmi/core and viem using pnpm.

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

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

### Get Zone Info with Wagmi

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

This example demonstrates how to set up a Wagmi configuration with a Tempo zone chain and then use the `zone.getZoneInfo` action to retrieve its metadata. Ensure you have signed an authorization token before calling `getZoneInfo`.

```typescript
import { createConfig } from 'wagmi'
import { KeyManager, webAuthn } from 'wagmi/tempo'
import { http as zoneHttp, zone } from 'viem/tempo/zones'

const zoneChain = zone(7)

const config = createConfig({
  connectors: [
    webAuthn({
      keyManager: KeyManager.localStorage(),
    }),
  ],
  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
```

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

### `amm.useLiquidityBalance` Usage Example

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

Example demonstrating how to use the `amm.useLiquidityBalance` hook to fetch and log the liquidity balance.

```APIDOC
## `amm.useLiquidityBalance`

Gets the liquidity balance for an address in a specific pool.

### Usage

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

### Parameters

#### Hook Parameters

- **address** (string) - Required - The address of the user.
- **userToken** (string) - Required - The address of the user token.
- **validatorToken** (string) - Required - The address of the validator token.

### Return Type

See [TanStack Query query docs](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery) for more info hook return types.

#### data

See [Wagmi Action `amm.getLiquidityBalance` Return Type](/tempo/actions/amm.getLiquidityBalance#return-type)

### Action

- [`amm.getLiquidityBalance`](/tempo/actions/amm.getLiquidityBalance)
```

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

### Usage Example

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

Demonstrates how to use the `useSignAuthorizationToken` hook to sign and obtain a token, and includes a wagmi configuration example.

```APIDOC
## Usage

::: code-group
```ts [example.ts]
import { Hooks } from 'wagmi/tempo'
import { zone } from 'viem/tempo/zones'

const zoneChain = zone(7)
const signAuthorizationToken = Hooks.zone.useSignAuthorizationToken()

const result = await signAuthorizationToken.mutateAsync({
  chainId: zoneChain.id,
})

console.log('Token:', result.token)
// @log: Token: 0x1234
```

```ts [wagmi.config.ts] filename="wagmi.config.ts"
// @noErrors
import { createConfig } from 'wagmi'
import { KeyManager, webAuthn } from 'wagmi/tempo'
import { http as zoneHttp, zone } from 'viem/tempo/zones'

const zoneChain = zone(7)

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

## Return Type

See [TanStack Query mutation docs](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation) for more info hook return types.

### data

See [Wagmi Action `zone.signAuthorizationToken` Return Type](/tempo/actions/zone.signAuthorizationToken#return-type)

### mutate/mutateAsync

See [Wagmi Action `zone.signAuthorizationToken` Parameters](/tempo/actions/zone.signAuthorizationToken#parameters)

## Parameters

### config

`Config | undefined`

[`Config`](https://wagmi.sh/react/api/createConfig#config) to use instead of retrieving from the nearest [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider).

### mutation

See the [TanStack Query mutation docs](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation) for more info hook parameters.

## Action

- [`zone.signAuthorizationToken`](/tempo/actions/zone.signAuthorizationToken)
```

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

### Install WalletConnect Provider (npm)

Source: https://github.com/wevm/wagmi/blob/main/site/shared/migrate-from-v2-to-v3.md

Use this command to install the WalletConnect Ethereum provider with npm.

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

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

### Basic Usage of useConnectors

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

Use `useConnectors` to get a list of available connectors and `useConnect` to initiate a connection. This example renders a list of buttons, each representing a connector, allowing users to connect their wallet.

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

function App() {
  const connectors = useConnectors()
  const connect = useConnect()
  
  return (
    <ul>
      <For each={connectors()}>
        {(connector) => (
          <li>
            <button onClick={() => connect.mutate({ connector }) }>
              {connector.name}
            </button>
          </li>
        )}
      </For>
    </ul>
  )
}
```

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

### Install WalletConnect Provider (yarn)

Source: https://github.com/wevm/wagmi/blob/main/site/shared/migrate-from-v2-to-v3.md

Use this command to install the WalletConnect Ethereum provider with yarn.

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

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

### Install Coinbase Wallet SDK

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

Install the Coinbase Wallet SDK package using your preferred package manager.

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

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

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

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

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

### Install WalletConnect Provider (pnpm)

Source: https://github.com/wevm/wagmi/blob/main/site/shared/migrate-from-v2-to-v3.md

Use this command to install the WalletConnect Ethereum provider with pnpm.

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

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

### Install Project Dependencies

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

Install all project dependencies using pnpm. This also sets up development links and git hooks.

```bash
pnpm install
```

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

### Install WalletConnect Ethereum Provider

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

Install the necessary WalletConnect 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}}
```

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

### Install @wagmi/vue

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

Install the @wagmi/vue package along with its peer dependencies viem and @tanstack/vue-query using pnpm.

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

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

### Initiate Wallet Swap

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/actions/wallet.swap.md

This example demonstrates how to use the `wallet.swap` action to open the wallet swap flow with pre-filled parameters. The connected wallet will handle the signing and submission of the swap transaction.

```APIDOC
## `wallet.swap`

Opens the wallet swap flow with optional pre-filled swap fields.

The connected wallet handles signing and submission. `wallet.swap` returns the receipt of the submitted swap.

### Parameters

All parameters are optional. Omitted fields are left for the user to fill in inside the wallet UI.

- **amount** (string, optional): Human-readable amount to pre-fill (for example, `"1.5"`).
- **pairToken** (Address, optional): Other side of the swap pair. For buys, this is the token to sell. For sells, this is the token to buy.
- **slippage** (number, optional): Maximum allowed slippage as a decimal fraction, for example `0.05` (= 5%).
- **token** (Address, optional): Token to buy or sell. Omit to let the user choose.
- **type** ('buy' | 'sell', optional): Whether the amount represents an exact buy or an exact sell amount.
- **account** (Account | Address | null, optional): Account to use for the connector client. Use `null` to let the wallet infer the account. Defaults to the connected Wagmi account.
- **chainId** (config['chains'][number]['id'], optional): Chain ID to use. Defaults to the current chain.
- **connector** (Connector, optional): Connector to use. Defaults to the active connector.

### Return Type

```ts
type ReturnType = {
  /** Receipt of the submitted swap. */
  receipt: TransactionReceipt
}
```

### Usage Example

```ts
import { Actions } from 'wagmi/tempo'
import { config } from './config'

const { receipt } = await Actions.wallet.swap(config, {
  amount: '1.5',
  pairToken: '0x20c0000000000000000000000000000000000001',
  slippage: 0.05,
  token: '0x20c0000000000000000000000000000000000002',
  type: 'sell',
})

console.log('Transaction hash:', receipt.transactionHash)
// @log: Transaction hash: 0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef
```
```

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

### Basic Usage of useConnectorClient

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

Use the `useConnectorClient` hook to get a client instance. This example shows a basic setup within a React component.

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

function App() {
  const result = useConnectorClient()
}
```

```typescript
import { mainnet } from 'viem/chains'
import { createConfig, http } from 'wagmi'

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

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

### Manual Installation (bun)

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

Manually add Wagmi Vue, Viem, and TanStack Query to your project using bun. Ensure Viem version matches the specified peer dependency.

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

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

### Install Viem and Accounts Packages

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

Install the necessary Viem and accounts packages for Tempo integration using your preferred package manager. Ensure your Viem version matches the specified requirement.

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

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

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

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

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

### Install Tempo Wallet Dependency

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

Install the 'accounts' package, which is a dependency for the Tempo Wallet connector. Choose the package manager that suits your project setup.

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

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

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

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

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

### Get Contract Events from Block

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

Specify the block number to start including logs from. This is mutually exclusive with `blockHash`.

```typescript
import { getContractEvents } from '@wagmi/core'
import { abi } from './abi'
import { config } from './config'

const logs = getContractEvents(config, {
  abi,
  fromBlock: 69420n, // [!code focus]
})
```

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

### useEnsAvatar Hook Usage

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

Import `useEnsAvatar` and call it with an address to get the ENS avatar. Ensure you have the necessary wagmi setup.

```typescript
import { useEnsAvatar } from 'wagmi'

function App() {
  const { data: ensAvatar } = useEnsAvatar({
    address: '0xd8dA6BFc5170252Bf382192fA2079B32f7274191',
  })

  return (
    <div>
      {ensAvatar && <img src={ensAvatar} alt="ENS Avatar" />}
    </div>
  )
}
```

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

### `zone.useZoneInfo` Usage Example

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

Example of how to use the `zone.useZoneInfo` hook to fetch zone information. It demonstrates importing necessary components, initializing the zone chain, and accessing the fetched zone data.

```APIDOC
## `zone.useZoneInfo`

### Description
Hook for getting Tempo zone metadata.

This hook expects a zone authorization token to already exist in storage. Use [`zone.useSignAuthorizationToken`](/tempo/hooks/zone.useSignAuthorizationToken) first.

::: info Requires viem >=2.48.0
Zone actions and hooks require `viem >=2.48.0`.
:::

## Usage

::: code-group
```ts [example.ts]
import { Hooks } from 'wagmi/tempo'
import { zone } from 'viem/tempo/zones'

const zoneChain = zone(7)

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

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

```ts [wagmi.config.ts] filename="wagmi.config.ts"
// @noErrors
import { createConfig } from 'wagmi'
import { KeyManager, webAuthn } from 'wagmi/tempo'
import { http as zoneHttp, zone } from 'viem/tempo/zones'

const zoneChain = zone(7)

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

## Return Type

See [TanStack Query query docs](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery) for more info hook return types.

### data

See [Wagmi Action `zone.getZoneInfo` Return Type](/tempo/actions/zone.getZoneInfo#return-type)

## Parameters

See [Wagmi Action `zone.getZoneInfo` Parameters](/tempo/actions/zone.getZoneInfo#parameters)

### query

See the [TanStack Query query docs](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery) for more info hook parameters.

## Action

- [`zone.getZoneInfo`](/tempo/actions/zone.getZoneInfo)
```

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

### Start Documentation Site in Dev Mode

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

Run this command to start the Wagmi documentation site in development mode using pnpm.

```bash
pnpm docs:dev
```

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

### Basic Usage of useConnections

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

Use the useConnections composable to get the active connections. This example assumes a default wagmi config is set up.

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

const connections = useConnections()
</script>
```

```typescript
import { defineConfig } from '@wagmi/core'

export const config = defineConfig({
  // ... other config options
})
```

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

### Usage Example

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/hooks/wallet.useDeposit.md

Demonstrates how to use the `wallet.useDeposit` hook to initiate a deposit flow. It shows how to import the hook, call `mutate` with deposit details, and access the returned data.

```APIDOC
## `wallet.useDeposit` Hook

### Description
Hook for opening the wallet deposit flow with optional pre-filled deposit fields.

### Usage

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

const deposit = Hooks.wallet.useDeposit()

// Call `mutate` in response to user action (e.g. button click, form submission)
deposit.mutate({
  address: '0x20c0000000000000000000000000000000000001',
  chainId: 1,
  displayName: 'My Account',
  token: '0x20c0000000000000000000000000000000000002',
  value: '1.5',
})

console.log('Receipts:', deposit.data?.receipts)
// @log: Receipts: [...] 
```

### Parameters

#### config
`Config | undefined`

[`Config`](https://wagmi.sh/react/api/createConfig#config) to use instead of retrieving from the nearest [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider).

#### mutation
See the [TanStack Query mutation docs](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation) for more info hook parameters.

### Return Type

See [TanStack Query mutation docs](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation) for more info hook return types.

#### data
See [Wagmi Action `wallet.deposit` Return Type](/tempo/actions/wallet.deposit#return-type)

#### mutate/mutateAsync
See [Wagmi Action `wallet.deposit` Parameters](/tempo/actions/wallet.deposit#parameters)

### Action

- [`wallet.deposit`](/tempo/actions/wallet.deposit)
```

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

### Basic Usage of useSignMessage

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

Initialize `useSignMessage` and call `mutate` with the message to sign. This example demonstrates the basic setup for signing a message.

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

const signMessage = useSignMessage()
</script>

<template>
  <button @click="signMessage.mutate({ message: 'hello world' })">
    Sign message
  </button>
</template>
```

```ts
import { defineConfig } from '@wagmi/vue'

export const config = defineConfig({
  // ... other config options
})

```

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

### Basic Usage of useChainId

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

Use the `useChainId` composable to get the current chain ID. This example assumes a wagmi configuration is already set up.

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

const chainId = useChainId()
</script>
```

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

### Basic Usage of useConnections Hook

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

Use the `useConnections` hook to retrieve active connections. This example shows the basic setup within a React component.

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

function App() {
  const connections = useConnections()
}
```

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

### Complete Wallet Connection Example

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

This example integrates `useConnect`, `useConnection`, `useConnectors`, and `useDisconnect` to provide a full wallet connection and disconnection UI. It conditionally renders connection options or connected status based on `connection.isConnected`.

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

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

### Write Contracts Example

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

Demonstrates how to use the writeContracts action to send multiple contract calls. Ensure you have parsed ABIs and a configured wagmi setup.

```typescript
import { parseAbi } from 'viem'
import { writeContracts } from '@wagmi/core/experimental'
import { config } from './config'

const abi = parseAbi([
  'function approve(address, uint256) returns (bool)',
  'function transferFrom(address, address, uint256) returns (bool)',
])

const id = await writeContracts(config, {
  contracts: [
    {
      address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
      abi,
      functionName: 'approve',
      args: [
        '0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC',
        100n
      ],
    },
    {
      address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
      abi,
      functionName: 'transferFrom',
      args: [
        '0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC',
        '0x0000000000000000000000000000000000000000',
        100n
      ],
    },
  ],
})
```

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

### Asynchronous `token.revokeRoles`

Source: https://github.com/wevm/wagmi/blob/main/site/tempo/actions/token.revokeRoles.md

For performance optimization, use the non-sync `token.revokeRoles` action and handle transaction waiting manually. This example shows how to get the transaction hash and then wait for its receipt.

```typescript
import { Actions as viem_Actions } from 'viem/tempo'
import { Actions } from 'wagmi/tempo'
import { waitForTransactionReceipt } from 'wagmi/actions'

const hash = await Actions.token.revokeRoles(config, {
  from: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  roles: ['issuer'],
  token: '0x20c0000000000000000000000000000000000000',
})
const receipt = await waitForTransactionReceipt(config, { hash })

const events = viem_Actions.token.revokeRoles.extractEvents(receipt.logs)
```

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

### Manual Installation (npm)

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

Manually add Wagmi Vue, Viem, and TanStack Query to your project using npm. Ensure Viem version matches the specified peer dependency.

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

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

### Fetch Order Details with `dex.useOrder`

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

Use this hook to get details for a specific order from the Stablecoin DEX orderbook. Ensure you have the Tempo hooks configured in your Wagmi setup.

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

const { data: order } = Hooks.dex.useOrder({
  orderId: 123n,
})

console.log('Order details:', order)
// @log: Order details: { amount: 100000000n, maker: '0x...', isBid: true, ... }
```

```typescript
import { http, createConfig, mainnet } from '@wagmi/core'
import { defaultWagmiConfig } from '@wagmi/core/config'

const config = defaultWagmiConfig({
  // ... other config options
  transports: {
    [mainnet.id]: http('https://cloudflare-eth.com'),
  },
})

// Tempo hooks are globally available after config is set
// Hooks.dex.useOrder(...)
```

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

### zone.getWithdrawalFee Usage

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

Example of how to use the `zone.getWithdrawalFee` action with Wagmi and Viem. This snippet demonstrates setting up the Wagmi configuration for a zone chain and then calling the action to get the withdrawal fee.

```APIDOC
## zone.getWithdrawalFee

### Description
Gets the withdrawal fee for a given gas limit.

### Method
`Actions.zone.getWithdrawalFee(config, parameters)`

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* None

### Parameters
#### `config` (WagmiConfig)
- The Wagmi configuration object.

#### `parameters` (object)
- **chainId** (`number`, optional) - Zone chain ID to query. Useful when your Wagmi config supports more than one chain.
- **gas** (`bigint`, optional) - Gas limit reserved for the withdrawal callback on the parent chain.

### Request Example
```ts
import { createConfig } from 'wagmi'
import { http as zoneHttp, zone } from 'viem/tempo/zones'
import { Actions } from 'wagmi/tempo'

const zoneChain = zone(7)

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

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

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

### Response
#### Success Response
- **Return Type:** `bigint`
- **Description:** The withdrawal fee for the provided gas limit.

#### Response Example
```json
22000n
```
```

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

### Basic Action Usage

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

Shows a basic example of using the `getBalance` action with a configuration object and an address.

```APIDOC
## Basic Usage

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

const balance = await getBalance(config, {
  address: '0x...',
})
```
```

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

### Get Viem Client for a Specific Chain

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

Specify the chainId when calling useClient to retrieve the Viem Client instance for a particular chain. Ensure the chain is configured in your wagmi setup.

```typescript
import { useClient } from 'wagmi'
import { mainnet } from 'wagmi/chains' // [!code focus]
import { config } from './config'

function App() {
  const client = useClient({
    chainId: mainnet.id, // [!code focus]
  })
}
```

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

### Install Wagmi Core Packages

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

Install Wagmi Core, connectors, and Viem using your preferred package manager. Ensure Viem version matches the peer dependency.

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

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

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

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

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

### Basic Usage of useSwitchChain

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

Use `useSwitchChain` to get a mutate function for switching chains. This example iterates over available chains and allows users to click a button to switch to a selected chain.

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

const switchChain = useSwitchChain()
const chains = useChains()
</script>

<template>
  <div>
    <button 
      v-for="chain in chains"
      :key="chain.id"
      @click="switchChain.mutate({ chainId: chain.id })"
    >
      {{ chain.name }}
    </button>
  </div>
</template>
```

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

### Manual Installation (yarn)

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

Manually add Wagmi Vue, Viem, and TanStack Query to your project using yarn. Ensure Viem version matches the specified peer dependency.

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

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

### useInfiniteReadContracts Usage Example

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

Demonstrates how to use the useInfiniteReadContracts hook to fetch contract attributes with 'fetch more' support, including initial page parameters and a function to get the next page parameter.

```APIDOC
## useInfiniteReadContracts

### Description
Hook for calling multiple contract read-only methods with "infinite scrolling"/"fetch more" support.

### Import
```ts
import { useInfiniteReadContracts } from 'wagmi'
```

### Usage

The example below shows how to demonstrate how to fetch a set of [mloot](https://etherscan.io/address/0x1dfe7ca09e99d10835bf73044a23b73fc20623df) attributes (chestwear, footwear, and handwear) with "fetch more" support.

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

const mlootContractConfig = {
  address: '0x1dfe7ca09e99d10835bf73044a23b73fc20623df',
  abi,
} as const

function App() {
  const result = useInfiniteReadContracts({
    cacheKey: 'mlootAttributes',
    contracts(pageParam) {
      const args = [pageParam] as const
      return [
        { ...mlootContractConfig, functionName: 'getChest', args },
        { ...mlootContractConfig, functionName: 'getFoot', args },
        { ...mlootContractConfig, functionName: 'getHand', args },
      ]
    },
    query: {
      initialPageParam: 0,
      getNextPageParam: (_lastPage, _allPages, lastPageParam) => {
        return lastPageParam + 1
      }
    }
  })
}
```

In the above example, we are setting a few things:

- [`cacheKey`](#cachekey): A unique key to store the data in the cache.
- [`query.initialPageParam`](#initialpageparam): An initial page parameter to use when fetching the first set of contracts.
- [`query.getNextPageParam`](#getnextpageparam): A function that returns the next page parameter to use when fetching the next set of contracts.
- [`contracts`](#contracts): A function that provides `pageParam` (derived from the above) as an argument and expects to return an array of contracts.

### Paginated Parameters

We can also leverage properties like `getNextPageParam` with a custom `limit` variable to achieve "pagination" of parameters. For example, we can fetch the first 10 contract functions, then fetch the next 10 contract functions, and so on.

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

function Example({ limit = 10 }: { limit?: number } = {}) {
  const result = useInfiniteReadContracts({
    cacheKey: 'mlootAttributes',
    contracts(pageParam) {
      return [...new Array(limit)].map(
        (_, i) =>
          ({
            address: '0x1dfe7ca09e99d10835bf73044a23b73fc20623df',
            abi,
            functionName: 'getHand',
            args: [BigInt(pageParam + i)],
          }) as const,
      )
    },
    query: {
      initialPageParam: 1,
      getNextPageParam(_lastPage, _allPages, lastPageParam) {
        return lastPageParam + limit
      },
    }
  })
}
```

## Parameters

```ts
import { type UseInfiniteReadContractsParameters } from 'wagmi'
```

### cacheKey

`string`

A unique key to store the data in the cache.

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

function App() {
  const result = useInfiniteReadContracts({
    cacheKey: 'mlootAttributes', // [!code hl]
    contracts(pageParam) {
      // ...
    }
    query: {
      initialPageParam: 0,
      getNextPageParam: (_lastPage, _allPages, lastPageParam) => {
        return lastPageParam + 1
      }
    }
  })
}
```

### contracts

`(pageParam: {{TPageParam}}) => Contract[]`

A function that provides `pageParam` (derived from the above) as an argument and expects to return an array of contracts.

```

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

### Get Ens Name with Universal Resolver Address

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

Override the default Universal Resolver Contract address with a custom one. This is typically not needed unless you are using a custom ENS setup.

```typescript
import { getEnsName } from '@wagmi/core'
import { config } from './config'

const ensName = await getEnsName(config, {
  address: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
  universalResolverName: '0x74E20Bd2A1fE0cdbe45b9A1d89cb7e0a45b36376', // [!code focus]
})
```

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

### Main Application Entrypoint

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

Sets up the Vue application with Wagmi and Vue Query plugins. Injects the Wagmi configuration.

```ts
// 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')
```

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

### Get Connection Details in Vue Component

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

Use the `useConnection` composable within your Vue component's setup to access connection information. The `connection.address` will be reactive and update when the wallet connects or disconnects.

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

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

### Install wagmi, viem, and TanStack React Query

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

Install the necessary packages for wagmi. This includes wagmi itself, viem for Ethereum utilities, and TanStack React Query for data fetching and caching.

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

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

### Get Config in Vue Component

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

Use the `useConfig` composable within your Vue component's setup function to retrieve the Wagmi configuration object. This object holds all the necessary settings for Wagmi.

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

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

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

### Wagmi Action TSDoc Example

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

Example TSDoc for a Wagmi action, including function description, @example block with imports and usage, @param tags, and @returns tag. Ensure all examples are complete and runnable.

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

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

### Install Wagmi with Package Managers

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

Install the required packages for Wagmi using your preferred package manager. Ensure you have viem and @tanstack/react-query installed as peer dependencies.

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

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

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

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

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

### Example Generated Hook TSDoc

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

Provides an example of comprehensive TSDoc for a Wagmi hook, including a function description, usage example, parameter details, and return value.

```typescript
/**
 * Hook for getting the user's default fee token.
 *
 * @example
 * ```tsx
 * import { Hooks } from 'wagmi/tempo'
 *
 * function App() {
 *   const { data, isLoading } = Hooks.fee.useUserToken({
 *     account: '0x20c...0055',
 *   })
 *   if (isLoading) return <div>Loading...</div>
 *   return <div>Token: {data?.address}</div>
 * }
 * ```
 * 
 * @param parameters - Parameters.
 * @returns Query result with token address and ID.
 */
```

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

### Install create-wagmi CLI

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

Use npm, pnpm, or yarn to create a new Wagmi project.

```bash
npm create wagmi
```

```bash
pnpm create wagmi
```

```bash
yarn create wagmi
```

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

### Install Wagmi Canary Version

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

Install the latest unreleased version of Wagmi from the canary tag. This is useful for testing new features before they are officially released. Ensure you have the correct package manager installed.

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

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

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

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

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

### Manual Installation (pnpm)

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

Manually add Wagmi Vue, Viem, and TanStack Query to your project using pnpm. Ensure Viem version matches the specified peer dependency.

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

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

### Install @wagmi/solid with Dependencies

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

Install the @wagmi/solid package along with its required peer dependencies, viem and @tanstack/solid-query, using pnpm.

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