### Manual Viem Client Setup (Boilerplate)

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

This example shows the verbose boilerplate required to manually set up Viem clients for multiple chains 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(/* ... */)
```

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

### Configuration Example

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

An example of how to configure wagmi with multiple chains, which can then be accessed by the useSwitchChain hook.

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

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

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

### Usage Example

Source: https://wagmi.sh/solid/api/connectors/porto

Example of how to configure the Porto connector within your application's config.

```APIDOC
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { porto } from '{{connectorsPackageName}}'

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

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

### Install Base Account SDK

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

Install the Base Account SDK 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}}
```

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

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

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

### Install WebAuthn Connector with bun

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

Install the accounts package using bun. Ensure you use the correct version for your project.

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

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

### Install @wagmi/solid with bun

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

Install the required packages for @wagmi/solid using bun. This includes @wagmi/solid, viem, and @tanstack/solid-query.

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

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

### 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 Base Account SDK

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

Install the Base Account SDK using your preferred package manager.

```APIDOC
## Install

::: code-group

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

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

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

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

:::
```

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

### Install Project Dependencies

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

Install project dependencies using pnpm. This also sets up git hooks.

```bash
pnpm install
```

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

### Install WebAuthn Connector with npm

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

Install the accounts package using npm. Ensure you use the correct version for your project.

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

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

### Install @wagmi/solid with npm

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

Install the required packages for @wagmi/solid using npm. This includes @wagmi/solid, viem, and @tanstack/solid-query.

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

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

### Install @wagmi/solid with pnpm

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

Install the required packages for @wagmi/solid using pnpm. This includes @wagmi/solid, viem, and @tanstack/solid-query.

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

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

### Install WebAuthn Connector with yarn

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

Install the accounts package using yarn. Ensure you use the correct version for your project.

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

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

### Install @wagmi/solid with yarn

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

Install the required packages for @wagmi/solid using yarn. This includes @wagmi/solid, viem, and @tanstack/solid-query.

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

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

### Install WebAuthn Connector with pnpm

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

Install the accounts package using pnpm. Ensure you use the correct version for your project.

```bash
pnpm add accounts@{{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 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 WalletConnect Ethereum Provider

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

Install the WalletConnect Ethereum provider dependency using your preferred package manager.

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

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

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

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

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

### Get Current Chain ID

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

Use the `useChainId` composable within a Vue component's setup to retrieve the current chain ID. Ensure `@wagmi/vue` is installed and configured.

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

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

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

### Get Viem Client Instance

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

Use the `useClient` composable within your Vue component's setup to get the Viem `Client` instance. This client is then available for blockchain interactions.

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

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

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

### Use Wagmi Actions

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

Example of using Wagmi actions to get connection details and ENS names after setting up the config.

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

const { address } = getConnection(config)
const ensName = await getEnsName(config, { address })
```

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

### Start Documentation Development Server

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

Starts the VitePress documentation site in development mode, allowing for live preview and iteration.

```bash
pnpm docs:dev
```

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

### useProof Hook with Chain ID

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

Use the `chainId` parameter to specify the chain for which to get the proof. This example uses the optimism chain ID.

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

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

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

### Create Wagmi Config

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

Example of creating a Wagmi configuration using `createConfig`. This setup includes defining chains and transports for network communication.

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

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

### Get Contract Events with fromBlock

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

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

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

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

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

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

### Complete Wallet Connection UI Example

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

This comprehensive example integrates `useConnect`, `useConnection`, `useConnectors`, and `useDisconnect` to provide a full wallet connection interface. It displays connection status, available connectors, and a disconnect button.

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

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

### Basic Usage of useSwitchConnection

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

Use `useSwitchConnection` to get a mutation function for switching connections. This example iterates through available connections and allows switching to a selected one.

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

const switchConnection = useSwitchConnection()
const connections = useConnections()
</script>

<template>
  <div>
    <button 
      v-for="connection in connections"
      :key="connection.id"
      @click="switchConnection.mutate({ connector: connection.connector })"
    >
      {{ connection.connector.name }}
    </button>
  </div>
</template>
```

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

### Basic Usage of useConnect

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

Use the `useConnect` composable to get a `connect` function. Call `connect.mutate` with a connector to initiate the connection. This example uses the `injected` connector.

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

const connect = useConnect()
</script>

<template>
  <button @click="connect.mutate({ connector: injected() }">
    Connect
  </button>
</template>
```

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

### Get Block by Block Hash

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

Fetches block information using a specific block hash. Replace the example hash with the desired block's hash.

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

const blockNumber = await getBlock(config, {
  blockHash: '0x89644bbd5c8d682a2e9611170e6c1f02573d866d286f006cbf517eec7254ec2d' // [!code focus]
})
```

```typescript
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 with bun

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

Manually install Wagmi, Viem, and TanStack Query using bun. Viem is for Ethereum operations, and TanStack Query is for async state management.

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

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

### Basic Usage of useConnections

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

Use the `useConnections` composable within your Vue component's setup to get the active connections. This requires the Wagmi plugin to be set up.

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

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

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

### Using getBalance Action

Source: https://wagmi.sh/solid/api/actions

Shows an example of how to use the `getBalance` action imperatively with a provided configuration and address.

```APIDOC
## Usage: getBalance

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

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

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

### Basic Usage of useWaitForCallsStatus

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

Use the hook by providing the `id` of the call bundle you want to wait for. This example shows a basic setup within a React component.

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

function App() {
  const result = useWaitForCallsStatus({
    id: '0x...', // [!code focus]
  })
}
```

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

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

### Disconnecting a Connector

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

Use the `useDisconnect` hook to get a function to disconnect from the current wallet. This example shows how to map over connected connectors and provide a button to disconnect each one.

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

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

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

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

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

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

### Install Dependencies for Tempo

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

Install the necessary Viem and accounts packages for Tempo integration. Choose the command that matches your package manager.

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

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

### Basic Usage

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

Example of how to create a Wagmi config with the WalletConnect connector.

```APIDOC
## Usage

```ts-vue{3,8-10}
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { walletConnect } from '{{connectorsPackageName}}'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    walletConnect({
      projectId: '3fcc6bba6f1de962d911bb5b5c3dba68',
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```
```

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

### Basic Usage of useClient Hook

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

Use the `useClient` hook within a React component to get the Viem `Client` instance. This example shows the basic import and usage.

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

function App() {
  const client = useClient()
}
```

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

### Usage Example

Source: https://wagmi.sh/cli/api/plugins/foundry

Configure the foundry plugin within `defineConfig` by providing the project path.

```APIDOC
import {
  defineConfig
} from '@wagmi/cli'
import {
  foundry
} from '@wagmi/cli/plugins'

export default defineConfig({
  plugins: [
    foundry({
      project: '../hello_foundry',
    }),
  ],
})
```

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

### Sign Message with Action in Solid Component

Source: https://wagmi.sh/solid/api/actions

Example of using the `signMessage` action within a Solid component. Requires `useConnection` to get the user's address and the `config` object.

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

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

### Set Up Environment Variables

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

Copy and fill out environment variables in a .env file for development playgrounds and the test suite.

```bash
VITE_MAINNET_FORK_URL=https://eth.merkle.io
VITE_OPTIMISM_FORK_URL=https://mainnet.optimism.io

NEXT_PUBLIC_WC_PROJECT_ID=3fbb6bba6f1de962d911bb5b5c9dba88
NUXT_PUBLIC_WC_PROJECT_ID=3fbb6bba6f1de962d911bb5b5c9dba88
VITE_WC_PROJECT_ID=3fbb6bba6f1de962d911bb5b5c9dba88

NEXT_TELEMETRY_DISABLED=1
NUXT_TELEMETRY_DISABLED=1
```

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

### Basic Usage of useSwitchChain

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

Use `useSwitchChain` to get a mutate function for switching chains. This example iterates through 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>
```

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

### Use useConfig in Vue Component

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

Use the `useConfig` composable within a Vue component's setup function to get the Wagmi configuration. This allows you to access configuration details directly.

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

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

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

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

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

### Connect Account with Injected Connector

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

Use the `useConnect` hook to get a mutation function for connecting to a wallet. This example connects using the `injected` connector, typically a browser extension like MetaMask.

```tsx
import { useConnect } from '@wagmi/solid'
import { injected } from '@wagmi/solid/connectors'

function App() {
  const connect = useConnect()
  
  return (
    <button onClick={() => connect.mutate({ connector: injected() })}>
      Connect
    </button>
  )
}
```

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

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

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

### Use useConnectors in Vue Component

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

Use the `useConnectors` composable within a Vue component's setup function to get the list of configured connectors. This allows you to display connection options to the user.

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

const connectors = useConnectors()
</script>
```

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

### Define Config for TypeScript

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

Example of creating a Wagmi `Config` object with specified chains and transports, and declaring it for TypeScript inference. This setup ensures type safety when using hooks like `useConfig`.

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

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

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

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

### Set up Multi-chain Viem Client with Wagmi

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

Use `createConfig` to define multiple chains and their transports, then `getClient` to extract a Viem client for the active chain. `getConnectorClient` can be used to get a client with account access.

```tsx
import { http, createConfig, getClient, getConnectorClient } from '@wagmi/core'
import { base, mainnet, optimism, zora } from '@wagmi/core/chains'
import { getBlockNumber, sendTransaction } from 'viem/actions'

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

const publicClient = getClient(config)
const blockNumber = await getBlockNumber(publicClient)

const walletClient = getConnectorClient(config)
const hash = await sendTransaction(walletClient, /* ... */)
```

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

### Install Wagmi with yarn

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

Manually install Wagmi, Viem, and TanStack Query using yarn. Viem is for Ethereum operations, and TanStack Query is for async state management.

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

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

### Migrate useBalance token parameter to useReadContracts

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

The `token` parameter is deprecated in `useBalance`. Use `useReadContracts` to fetch ERC-20 token balances instead. This example shows how to replace `useBalance` with `useReadContracts` to get a token's balance, decimals, and symbol.

```typescript
import { useBalance } from 'wagmi' // [!code --]
import { useReadContracts } from 'wagmi' // [!code ++]
import { erc20Abi } from 'viem' // [!code ++]

const result = useBalance({ // [!code --]
  address: '0x4557B18E779944BFE9d78A672452331C186a9f48', // [!code --]
  token: '0x6B175474E89094C44Da98b954EedeAC495271d0F', // [!code --]
})
const result = useReadContracts({ // [!code ++]
  allowFailure: false, // [!code ++]
  contracts: [ // [!code ++]
    {
      address: '0x6B175474E89094C44Da98b954EedeAC495271d0F', // [!code ++]
      abi: erc20Abi, // [!code ++]
      functionName: 'balanceOf', // [!code ++]
      args: ['0x4557B18E779944BFE9d78A672452331C186a9f48'], // [!code ++]
    },
    {
      address: '0x6B175474E89094C44Da98b954EedeAC495271d0F', // [!code ++]
      abi: erc20Abi, // [!code ++]
      functionName: 'decimals', // [!code ++]
    },
    {
      address: '0x6B175474E89094C44Da98b954EedeAC495271d0F', // [!code ++]
      abi: erc20Abi, // [!code ++]
      functionName: 'symbol', // [!code ++]
    },
  ] // [!code ++]
})
```

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

### Display Wagmi Init Help Message

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

Shows the help message for the `wagmi init` command, detailing all available options and their usage.

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

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

### Use useConnectors in a Solid Component

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

Use the `useConnectors` primitive within a SolidJS component to get a reactive accessor for configured connectors. This example demonstrates rendering a list of buttons, each corresponding to a connector, which can be used to initiate a connection via the `useConnect` primitive.

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

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

### Basic Usage of useSwitchChain

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

Use the `useSwitchChain` hook to get a function for switching chains. This example maps over available chains and renders a button for each, allowing users to switch to a selected chain by clicking the button. When connected, this switches the connector's chain; when disconnected, it switches the global config chain.

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

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

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

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

### Usage Example

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

Demonstrates how to use `readContracts` to call multiple functions on different contracts. Ensure your `config` is set up and ABIs are available.

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

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

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

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

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

### useCall Hook Example

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

This example demonstrates how to use the `useCall` hook with a `scopeKey` to scope the cache and provides an example of making a contract call.

```APIDOC
## useCall Hook

### Description
Scopes the cache to a given context. Hooks that have identical context will share the same cache.

### Method Signature
```typescript
useCall(options: { scopeKey?: string | undefined, account?: Address, data?: Hex, to: Address } & UseBaseCallParameters<TChain, TAbi, TFunctionName, TArgs, TError, TData, TSelectData>)
```

### Parameters
#### `options`
- **`scopeKey`** (`string | undefined`) - Scopes the cache to a given context. Hooks that have identical context will share the same cache.
- **`account`** (`Address`) - The account to use for the call.
- **`data`** (`Hex`) - The data to send with the call.
- **`to`** (`Address`) - The contract address to call.

### Example
```tsx
import { useCall } from 'wagmi'
import { config } from './config'

function App() {
  const result = useCall({
    scopeKey: 'foo',
    account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
    data: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
    to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
  })
}
```

### TanStack Query Parameters
TanStack Query parameters can be passed to `useCall` for advanced configuration. See the [TanStack Query query docs](https://tanstack.com/query/v5/docs/react/reference/useQuery) for more info.

**Note:** Wagmi does not support passing all TanStack Query parameters, such as `queryFn` and `queryKey`, as they are used internally.

#### `enabled`
`boolean | undefined` - Set this to `false` to disable this query from automatically running. Can be used for [Dependent Queries](https://tanstack.com/query/v5/docs/react/guides/dependent-queries).

#### `gcTime`
`number | Infinity | undefined` - Defaults to `5 * 60 * 1000` (5 minutes) or `Infinity` during SSR. The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used. If set to `Infinity`, will disable garbage collection.

#### `initialData`
`{{TData}} | (() => {{TData}}) | undefined` - If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet). If set to a function, the function will be called **once** during the shared/root query initialization, and be expected to synchronously return the initialData. Initial data is considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the cache.

#### `initialDataUpdatedAt`
`number | (() => number | undefined) | undefined` - If set, this value will be used as the time (in milliseconds) of when the `initialData` itself was last updated.

#### `initialPageParam`
`{{TPageParam}}` - The initial page parameter to be passed to the query function.

#### `getPreviousPageParam`
`(firstPage: {{TData}}, allPages: {{TData}}[], firstPageParam: {{TPageParam}}, allPageParams: {{TPageParam}}[]) => {{TPageParam}} | undefined | null` - This function can be set to automatically get the previous cursor for infinite queries. The result will also be used to determine the value of `hasPreviousPage`.

#### `getNextPageParam`
`(lastPage: {{TData}}, allPages: {{TData}}[], lastPageParam: {{TPageParam}}, allPageParams: {{TPageParam}}[]) => {{TPageParam}} | undefined | null` - This function can be set to automatically get the previous cursor for infinite queries. The result will also be used to determine the value of `hasPreviousPage`.

#### `meta`
`Record<string, unknown> | undefined` - If set, stores additional information on the query cache entry that can be used as needed. It will be accessible wherever the `query` is available, and is also part of the `QueryFunctionContext` provided to the `queryFn`.

#### `networkMode`
`'online' | 'always' | 'offlineFirst' | undefined` - Defaults to `'online'`. See [Network Mode](https://tanstack.com/query/v5/docs/react/guides/network-mode) for more information.

#### `notifyOnChangeProps`
`string[] | 'all' | (() => string[] | 'all') | undefined` - If set, the component will only re-render if any of the listed properties change. If set to `['data', 'error']` for example, the component will only re-render when the `data` or `error` properties change. If set to `'all'`, the component will opt-out of smart tracking and re-render whenever a query is updated. If set to a function, the function will be executed to compute the list of properties. By default, access to properties will be tracked, and the component will only re-render when one of the tracked properties change.
```

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

### Install Wagmi with Package Managers

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

Install the required Wagmi packages using your preferred package manager. Ensure Viem and TanStack Query are also installed with compatible versions.

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