### Install Safe Dependencies (bun)

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

Install the necessary Safe provider and SDK packages using bun.

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

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

### Install Wagmi v3 with bun

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

Install the latest version of Wagmi using bun.

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

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

### Install Porto Connector

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

Install the Porto connector using your preferred package manager.

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

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

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

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

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

### Install Base Account SDK

Source: https://wagmi.sh/react/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}}
```

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

### Install Coinbase Wallet SDK

Source: https://wagmi.sh/react/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 Safe Dependencies (npm)

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

Install the necessary Safe provider and SDK packages using npm.

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

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

### Install MetaMask Connect EVM

Source: https://wagmi.sh/react/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}}
```

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

### useReadContract Example

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

An example demonstrating how to use the `useReadContract` hook to read the `balanceOf` function from a smart contract. It shows the necessary setup with `createConfig` and the hook's parameters.

```APIDOC
## useReadContract

### Description
Reads data from a smart contract.

### Method
`useReadContract`

### Parameters
#### `abi` (object[]) - Required
An array of contract Application Binary Interface (ABI) entries.

#### `address` (address | 
`{ [chainId: number]: address }`) - Required
The address of the contract.

#### `functionName` (string) - Required
The name of the function to call on the contract.

#### `args` (any[]) - Optional
Arguments to pass to the contract function.

### Request Example
```ts
import { createConfig, http, useReadContract } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

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

const result = useReadContract({
  abi: [
    {
      type: 'function',
      name: 'balanceOf',
      stateMutability: 'view',
      inputs: [{ name: 'account', type: 'address' }],
      outputs: [{ type: 'uint256' }],
    },
    {
      type: 'function',
      name: 'totalSupply',
      stateMutability: 'view',
      inputs: [],
      outputs: [{ type: 'uint256' }],
    },
  ],
  address: '0x...', // Replace with the actual contract address
  functionName: 'balanceOf',
  args: ['0x...'], // Replace with the account address
})
```

### Response
#### Success Response
The hook returns an object containing the contract data and status information.
- **data** (T | undefined): The data returned from the contract function call.
- **error** (TError | undefined): An error object if the call fails.
- **isError** (boolean): True if the call resulted in an error.
- **isLoading** (boolean): True if the call is in progress.
- **isSuccess** (boolean): True if the call was successful.
- **refetch** (Function): A function to manually refetch the data.
```

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

### Install Safe Dependencies (yarn)

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

Install the necessary Safe provider and SDK packages using yarn.

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

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

### Install Safe Dependencies (pnpm)

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

Install the necessary Safe provider and SDK packages using pnpm.

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

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

### Install Accounts Package

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

Install the accounts package with the specified version using your preferred package manager.

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

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

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

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

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

### Install Wagmi v3 with yarn

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

Install the latest version of Wagmi using yarn.

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

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

### Install Wagmi v3 with npm

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

Install the latest version of Wagmi using npm.

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

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

### Install porto dependency with bun

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

Install the `porto` npm package required for the `porto` connector using bun.

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

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

### Install coinbaseWallet dependency with bun

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

Install the `@coinbase/wallet-sdk` npm package required for the `coinbaseWallet` connector using bun.

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

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

### Install Wagmi v3 with pnpm

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

Install the latest version of Wagmi using pnpm.

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

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

### Install WalletConnect Ethereum Provider

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

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

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

### Install metaMask dependency with bun

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

Install the `@metamask/connect-evm` npm package required for the `metaMask` connector using bun.

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

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

### Install metaMask dependency with npm

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

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

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

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

### Install TanStack Query Persister Packages

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

Install the necessary packages for TanStack Query persistence with sync storage. Choose the command corresponding to your 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 Safe Apps Provider and SDK

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

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

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

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

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

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

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

### Install porto dependency with npm

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

Install the `porto` npm package required for the `porto` connector using npm.

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

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

### Install coinbaseWallet dependency with npm

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

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

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

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

### Install baseAccount dependency with bun

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

Install the `@base-org/account` npm package required for the `baseAccount` connector using bun.

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

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

### Install metaMask dependency with pnpm

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

Install the `@metamask/connect-evm` npm package required for the `metaMask` connector using pnpm.

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

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

### Install Wagmi from Pull Request with bun

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

Install a Wagmi version from a specific pull request using bun.

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

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

### Install Wagmi canary version with bun

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

Install the latest canary version of Wagmi from the main branch using bun.

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

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

### Install coinbaseWallet dependency with pnpm

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

Install the `@coinbase/wallet-sdk` npm package required for the `coinbaseWallet` connector using pnpm.

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

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

### Install baseAccount dependency with npm

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

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

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

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

### Install Wagmi canary version with yarn

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

Install the latest canary version of Wagmi from the main branch using yarn.

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

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

### 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 a basic setup without any parameters.

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

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

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

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

### Basic useConnect Usage

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

Use the useConnect hook to get the connect function and trigger the connection process. This example shows how to initiate a connection with a specific connector.

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

function Component() {
  const { connect, connectors, error, isLoading, pending } = useConnect({
    // connector: injected,
  })

  return (
    <div>
      {connectors.map((connector) => (
        <button
          key={connector.id}
          onClick={() => connect({ connector })}
          type="button"
        >
          {connector.name}
          {isLoading &&
          pending &&
          connector.id === connector?.id &&
          '…'
          }
        </button>
      ))}

      {error && <div>{error.message}</div>}
    </div>
  )
}

```

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

### useReadContract Example

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

An example of how to use the `useReadContract` hook to read the `balanceOf` function from a contract.

```APIDOC
## useReadContract

### Description
Reads data from a smart contract.

### Method
`useReadContract` (Hook)

### Parameters
#### `abi` (array) - Required
- The ABI of the contract.
#### `address` (string) - Required
- The address of the contract.
#### `functionName` (string) - Required
- The name of the function to call.
#### `args` (array) - Optional
- The arguments to pass to the function.

### Request Example
```javascript
const abi = [
  {
    type: 'function',
    name: 'balanceOf',
    stateMutability: 'view',
    inputs: [{ name: 'account', type: 'address' }],
    outputs: [{ type: 'uint256' }],
  },
  {
    type: 'function',
    name: 'totalSupply',
    stateMutability: 'view',
    inputs: [],
    outputs: [{ name: 'supply', type: 'uint256' }],
  },
] as const

const result = useReadContract({
  abi,
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  functionName: 'balanceOf',
  args: ['0x6b175474e89094c44da98b954eedeac495271d0f'],
})
```

### Response
#### `data`
- The data returned from the contract function call.
```

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

### Create Wagmi Project Prompts

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

Example output of prompts shown when running the `create-wagmi` CLI. Follow these prompts to configure your new project.

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

```

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

### Create Wagmi Project with bun

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

Use this command to automatically set up a new Wagmi project with bun. It will guide you through project configuration prompts.

```bash
bun create wagmi
```

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

### Client Viem Actions with Wagmi

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

Demonstrates using Viem actions directly via client instances obtained from `usePublicClient` and `useWalletClient`. This approach might lead to larger bundle sizes.

```tsx
// <fsm-s2xuhnazdl>{"path":"/vercel/path0/site/react/guides/viem.md","from":3031,"to":4361}<fsm-s2xuhnazdl>
// 1. Import modules. 
import { useMutation, useQuery } from '@tanstack/react-query'
import { http, createConfig, useClient, useConnectorClient } from 'wagmi' 
import { base, mainnet, optimism, zora } from 'wagmi/chains' 

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

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

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

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

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

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

### Build and Link Wagmi from Source

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

Clone the Wagmi repository, build it locally, and link it to your project.

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

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

### Import Chains from wagmi/chains

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

The `'wagmi/chains'` entrypoint now proxies chains from `'viem/chains'`. This example shows how to correctly import `mainnet` and `sepolia` in v2.

```typescript
import { mainnet, sepolia } from 'wagmi' // [!code --]
import { mainnet, sepolia } from 'wagmi/chains' // [!code ++]
```

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

### Manually Install Wagmi with bun

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

Manually install Wagmi and its core dependencies using bun. This includes Viem for Ethereum operations and TanStack Query for state management.

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

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

### Install porto dependency with yarn

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

Install the `porto` npm package required for the `porto` connector using yarn.

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

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

### Install porto dependency with pnpm

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

Install the `porto` npm package required for the `porto` connector using pnpm.

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

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

### Tree-shakable Viem Actions with Wagmi

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

Demonstrates using tree-shakable Viem actions with `useClient` and `useConnectorClient` hooks. Recommended for smaller bundle sizes.

```tsx
// <fsm-s2xuhnazdl>{"path":"/vercel/path0/site/react/guides/viem.md","from":1619,"to":3002}<fsm-s2xuhnazdl>
// 1. Import modules. 
import { useMutation, useQuery } from '@tanstack/react-query'
import { http, createConfig, useClient, useConnectorClient } from 'wagmi' 
import { base, mainnet, optimism, zora } from 'wagmi/chains' 
import { getLogs, watchAsset } from 'viem/actions'

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

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

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

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

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

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

### Create Wagmi Project with npm

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

Use this command to automatically set up a new Wagmi project with npm. It will guide you through project configuration prompts.

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

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

### Install metaMask dependency with yarn

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

Install the `@metamask/connect-evm` npm package required for the `metaMask` connector using yarn.

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

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

### Wagmi Configuration Example

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

This snippet shows a basic wagmi configuration using `createConfig` with mainnet and sepolia chains and HTTP transports.

```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 TanStack Query Async Storage Persister

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

Install the necessary packages for TanStack Query async storage persistence. Choose the command corresponding to your package manager (pnpm, npm, yarn, or bun).

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

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

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

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

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

### Install coinbaseWallet dependency with yarn

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

Install the `@coinbase/wallet-sdk` npm package required for the `coinbaseWallet` connector using yarn.

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

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

### Basic useReadContract Example

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

Demonstrates how to use `useReadContract` to read the `balanceOf` function from a contract. Ensure your ABI and configuration are set up correctly for type inference.

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

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

```