Wagmi

Connect Wallet

Connect to or disconnect from a user’s wallet. The function automatically handles both connection and disconnection based on the current connection state.

Parameters (Params)


interface ConnectParams {
  connector: Connector; // Wallet connector, such as injected/metamask/walletConnect, etc.
}
 
interface DisconnectParams {
  // No parameters required for disconnection
}

Returns (Returns)


interface ConnectResult {
  account: string;      // Connected wallet address
  chainId: number;      // Current chain ID
  connector: Connector; // Used wallet connector
}
 
interface DisconnectResult {
  // Disconnection confirmation
}

@wagmi/actions

Pure JS calling approach, suitable for non-React scenarios or direct calls:


// Complete runnable component code:
import { useState, useEffect } from 'react'
import { connect, disconnect, getAccount } from 'wagmi/actions'
import { injected } from 'wagmi/connectors'
import { Button } from 'antd'
import ReactJsonView from 'react-json-view'
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export function Connect() {
  const [res, setRes] = useState({})
  const [isConnected, setIsConnected] = useState(false)
  const [address, setAddress] = useState('')
  const [error, setError] = useState('')
  const [isLoading, setIsLoading] = useState(false)
 
  useEffect(() => {
    const acc = getAccount(config)
    setIsConnected(acc.isConnected)
    setAddress(acc.address || '')
  }, [res])
 
  async function handleConnect() {
    setError('')
    setIsLoading(true)
    try {
      const result = await connect(config, { connector: injected() })
      setRes(result)
    } catch(e) {
      setError(e?.message || String(e))
      setRes({})
    } finally {
      setIsLoading(false)
    }
  }
 
  async function handleDisconnect() {
    setError('')
    setIsLoading(true)
    try {
      const result = await disconnect(config)
      setRes(result)
    } catch(e) {
      setError(e?.message || String(e))
      setRes({})
    } finally {
      setIsLoading(false)
    }
  }
 
  const handleClick = () => {
    if (isConnected) {
      handleDisconnect()
    } else {
      handleConnect()
    }
  }
 
  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        Current Status: {isConnected ? 'Connected' : 'Disconnected'}
      </div>
      <Button 
        type={isConnected ? 'default' : 'primary'}
        style={{ margin: '12px 0' }} 
        loading={isLoading}
        onClick={handleClick}
      >
        {isLoading ? (isConnected ? 'Disconnecting...' : 'Connecting...') : isConnected ? 'Disconnect' : 'Connect Wallet'}
      </Button>
      {isConnected && address && (
        <div style={{ fontSize: 14, color: '#555', wordBreak: 'break-all', background: '#f7f7f7', borderRadius: 6, padding: 10, textAlign: 'center', marginBottom: 12 }}>
          <div style={{ marginBottom: 4 }}>Address:</div>
          <div style={{ fontFamily: 'monospace', fontSize: 15 }}>{address}</div>
        </div>
      )}
      <ReactJsonView src={res} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  )
}

Connect Wallet

Current Status: Disconnected

@wagmi/react

React component/Hook approach, recommended for use in React components:


// Brief usage example:
import { useConnect, useDisconnect, useAccount } from 'wagmi'
import { injected } from 'wagmi/connectors'
 
const { connect, data, error, isSuccess, isPending } = useConnect()
const { disconnect } = useDisconnect()
const { isConnected, address } = useAccount()
 
const handleClick = () => {
  if (isConnected) {
    disconnect()
  } else {
    connect({ connector: injected() })
  }
}
 
// Complete runnable component code:
import { http, createConfig, useConnect, useDisconnect, useAccount, WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { mainnet, sepolia } from 'wagmi/chains'
import { injected } from 'wagmi/connectors'
import { Button } from 'antd'
import React from 'react'
import ReactJsonView from 'react-json-view'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
const queryClient = new QueryClient()
 
function ConnectDemo() {
  const { connect, data, error, isSuccess, isPending } = useConnect()
  const { disconnect } = useDisconnect()
  const { isConnected, address } = useAccount()
 
  const handleClick = () => {
    if (isConnected) {
      disconnect()
    } else {
      connect({ connector: injected() })
    }
  }
 
  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        Current Status: {isConnected ? 'Connected' : 'Disconnected'}
      </div>
      <Button 
        type={isConnected ? 'default' : 'primary'}
        style={{ margin: '12px 0' }} 
        loading={isPending}
        onClick={handleClick}
      >
        {isPending ? (isConnected ? 'Disconnecting...' : 'Connecting...') : isConnected ? 'Disconnect' : 'Connect Wallet'}
      </Button>
      {isConnected && address && (
        <div style={{ fontSize: 14, color: '#555', wordBreak: 'break-all', background: '#f7f7f7', borderRadius: 6, padding: 10, textAlign: 'center', marginBottom: 12 }}>
          <div style={{ marginBottom: 4 }}>Address:</div>
          <div style={{ fontFamily: 'monospace', fontSize: 15 }}>{address}</div>
        </div>
      )}
      <ReactJsonView src={data ? data : {}} theme="monokai" />
      {error && <div style={{ color: 'red' }}>{error.message}</div>}
      {isSuccess && <div style={{ color: 'green' }}>Connected Successfully!</div>}
    </div>
  )
}
 
export function Connect() {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={config}>
        <ConnectDemo />
      </WagmiProvider>
    </QueryClientProvider>
  )
}

Connect Wallet

Current Status: Disconnected

Sign a Message

SignPersonalMessage

Sign arbitrary messages for personal authentication, commonly used for login, authentication, and other scenarios.

Parameters (Params)


interface SignPersonalMessageParams {
  message: string; // Message content to be signed
}

Returns (Returns)


interface SignPersonalMessageResult {
  signature: string; // Signature result
}

@wagmi/actions

Pure JS calling approach, suitable for non-React scenarios or direct calls:


// Complete runnable component code:
import { useState } from 'react'
import { signMessage, getAccount } from 'wagmi/actions'
import { Button, Input } from 'antd'
import ReactJsonView from 'react-json-view'
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export function SignPersonalMessage() {
  const [res, setRes] = useState({})
  const [message, setMessage] = useState('hello bitget wallet')
  const [isConnected, setIsConnected] = useState(false)
  const [error, setError] = useState('')
 
  // Optional: Check connection status before signing
  React.useEffect(() => {
    const acc = getAccount(config)
    setIsConnected(acc.isConnected)
  }, [res])
 
  async function run() {
    setError('')
    try {
      const result = await signMessage(config, { message })
      setRes({ signature: result })
    } catch(e) {
      setError(e?.message || String(e))
      setRes({})
    }
  }
  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        Current Status: {isConnected ? 'Connected' : 'Disconnected'}
      </div>
      <Input style={{ width: 300, marginRight: 8 }} value={message} onChange={e => setMessage(e.target.value)} />
      <Button style={{ margin: '12px 0' }} onClick={run}>Sign Personal Message</Button>
      <ReactJsonView src={res} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  )
}

Sign Personal Message

SignTypedData

Sign structured data (EIP-712), suitable for contract interactions, on-chain authorization, and other advanced scenarios.

Parameters (Params)


interface SignTypedDataParams {
  domain: object;      // EIP-712 domain information
  types: object;       // EIP-712 type definitions
  primaryType: string; // Primary type
  message: object;     // Data to be signed
}

Returns (Returns)


interface SignTypedDataResult {
  signature: string; // Signature result
}

@wagmi/actions

Pure JS calling approach, suitable for non-React scenarios or direct calls:


// Complete runnable component code:
import { useState } from 'react'
import { signTypedData, getAccount } from 'wagmi/actions'
import { Button } from 'antd'
import ReactJsonView from 'react-json-view'
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export function SignTypedData() {
  const [res, setRes] = useState({})
  const [isConnected, setIsConnected] = useState(false)
  const [error, setError] = useState('')
 
  // Optional: Check connection status before signing
  React.useEffect(() => {
    const acc = getAccount(config)
    setIsConnected(acc.isConnected)
  }, [res])
 
  const domain = {
    name: 'MyDApp',
    version: '1',
    chainId: 1,
    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
  }
  const types = {
    Person: [
      { name: 'name', type: 'string' },
      { name: 'wallet', type: 'address' },
    ],
    Mail: [
      { name: 'from', type: 'Person' },
      { name: 'to', type: 'Person' },
      { name: 'contents', type: 'string' },
    ],
  }
  const message = {
    from: {
      name: 'Alice',
      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
    },
    to: {
      name: 'Bob',
      wallet: '0xAaaAaAaaAaAaAaaAaAaAaaAaAaAaAaAaAaAaAaAa',
    },
    contents: 'Hello Bob!',
  }
 
  async function run() {
    setError('')
    try {
      const result = await signTypedData(config, {
        domain,
        types,
        primaryType: 'Mail',
        message,
      })
      setRes({ signature: result })
    } catch(e) {
      setError(e?.message || String(e))
      setRes({})
    }
  }
  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        Current Status: {isConnected ? 'Connected' : 'Disconnected'}
      </div>
      <Button style={{ margin: '12px 0' }} onClick={run}>Sign Typed Data</Button>
      <ReactJsonView src={res} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  )
}

Sign Typed Data

@wagmi/react

React component/Hook approach, recommended for use in React components:


// Complete runnable component code:
import { http, createConfig, useSignTypedData, WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { mainnet, sepolia } from 'wagmi/chains'
import { Button } from 'antd'
import React from 'react'
import ReactJsonView from 'react-json-view'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
const queryClient = new QueryClient()
 
function SignTypedDataDemo() {
  const domain = {
    name: 'MyDApp',
    version: '1',
    chainId: 1,
    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
  }
  const types = {
    Person: [
      { name: 'name', type: 'string' },
      { name: 'wallet', type: 'address' },
    ],
    Mail: [
      { name: 'from', type: 'Person' },
      { name: 'to', type: 'Person' },
      { name: 'contents', type: 'string' },
    ],
  }
  const message = {
    from: {
      name: 'Alice',
      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
    },
    to: {
      name: 'Bob',
      wallet: '0xAaaAaAaaAaAaAaaAaAaAaaAaAaAaAaAaAaAaAaAa',
    },
    contents: 'Hello Bob!',
  }
  const { signTypedData, data, error, isLoading, isSuccess } = useSignTypedData({
    domain,
    types,
    primaryType: 'Mail',
    message,
  })
  const { isConnected } = useAccount();
  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        Current Status: {isConnected ? 'Connected' : 'Disconnected'}
      </div>
      <Button loading={isLoading} onClick={() => signTypedData()}>Sign Typed Data</Button>
      <ReactJsonView src={data ? { signature: data } : {}} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error.message}</div>}
      {isSuccess && <div style={{ color: 'green' }}>Signed Successfully!</div>}
    </div>
  )
}
 
export function SignTypedData() {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={config}>
        <SignTypedDataDemo />
      </WagmiProvider>
    </QueryClientProvider>
  )
}

Sign Typed Data

VerifyMessage

Verify the validity of message signatures, determining whether the signature was generated by the specified address.

Parameters (Params)


interface VerifyMessageParams {
  address: string;    // Wallet address
  message: string;    // Original message
  signature: string;  // Signature
}

Returns (Returns)


interface VerifyMessageResult {
  valid: boolean; // Whether the signature is valid
}

@wagmi/actions

Pure JS calling approach, suitable for non-React scenarios or direct calls:


import { useState } from 'react'
import { verifyMessage } from 'wagmi/actions'
import { Button, Input } from 'antd'
import ReactJsonView from 'react-json-view'
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export function VerifyMessage() {
  const [res, setRes] = useState({})
  const [address, setAddress] = useState('')
  const [message, setMessage] = useState('hello bitget wallet')
  const [signature, setSignature] = useState('')
  const [error, setError] = useState('')
  async function run() {
    setError('')
    try {
      const result = await verifyMessage(config, { address, message, signature })
      setRes({ valid: result })
    } catch (e) {
      setError(e?.message || String(e))
      setRes({})
    }
  }
  return (
    <div>
      <Input style={{ width: 200, marginRight: 8 }} placeholder="address" value={address} onChange={e => setAddress(e.target.value)} />
      <Input style={{ width: 200, marginRight: 8 }} placeholder="message" value={message} onChange={e => setMessage(e.target.value)} />
      <Input style={{ width: 300, marginRight: 8 }} placeholder="signature" value={signature} onChange={e => setSignature(e.target.value)} />
      <Button style={{ margin: '12px 0' }} onClick={run}>Verify Message</Button>
      <ReactJsonView src={res} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  )
}

Verify Message

VerifyTypedData

Verify the validity of structured data (EIP-712) signatures.

Parameters (Params)


interface VerifyTypedDataParams {
  address: string;    // Wallet address
  domain: object;     // EIP-712 domain information
  types: object;      // EIP-712 type definitions
  primaryType: string;// Primary type
  message: object;    // Original data
  signature: string;  // Signature
}

Returns (Returns)


interface VerifyTypedDataResult {
  valid: boolean; // Whether the signature is valid
}

@wagmi/actions

Pure JS calling approach, suitable for non-React scenarios or direct calls:


import { useState } from 'react'
import { verifyTypedData } from 'wagmi/actions'
import { Button, Input } from 'antd'
import ReactJsonView from 'react-json-view'
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export function VerifyTypedData() {
  const [res, setRes] = useState({})
  const [address, setAddress] = useState('')
  const [signature, setSignature] = useState('')
  const [error, setError] = useState('')
  const domain = {
    name: 'MyDApp',
    version: '1',
    chainId: 1,
    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
  }
  const types = {
    Person: [
      { name: 'name', type: 'string' },
      { name: 'wallet', type: 'address' },
    ],
    Mail: [
      { name: 'from', type: 'Person' },
      { name: 'to', type: 'Person' },
      { name: 'contents', type: 'string' },
    ],
  }
  const message = {
    from: {
      name: 'Alice',
      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
    },
    to: {
      name: 'Bob',
      wallet: '0xAaaAaAaaAaAaAaaAaAaAaaAaAaAaAaAaAaAaAaAa',
    },
    contents: 'Hello Bob!',
  }
  async function run() {
    setError('')
    try {
      const result = await verifyTypedData(config, {
        address,
        domain,
        types,
        primaryType: 'Mail',
        message,
        signature,
      })
      setRes({ valid: result })
    } catch (e) {
      setError(e?.message || String(e))
      setRes({})
    }
  }
  return (
    <div>
      <Input style={{ width: 200, marginRight: 8 }} placeholder="address" value={address} onChange={e => setAddress(e.target.value)} />
      <Input style={{ width: 300, marginRight: 8 }} placeholder="signature" value={signature} onChange={e => setSignature(e.target.value)} />
      <Button style={{ margin: '12px 0' }} onClick={run}>Verify Typed Data</Button>
      <ReactJsonView src={res} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  )
}

Verify Typed Data

@wagmi/react

React component/Hook approach, recommended for use in React components:


import { http, createConfig, useVerifyTypedData, WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { mainnet, sepolia } from 'wagmi/chains'
import { Button, Input } from 'antd'
import React, { useState } from 'react'
import ReactJsonView from 'react-json-view'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
const queryClient = new QueryClient()
 
function VerifyTypedDataDemo() {
  const [address, setAddress] = useState('')
  const [signature, setSignature] = useState('')
  const domain = {
    name: 'MyDApp',
    version: '1',
    chainId: 1,
    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
  }
  const types = {
    Person: [
      { name: 'name', type: 'string' },
      { name: 'wallet', type: 'address' },
    ],
    Mail: [
      { name: 'from', type: 'Person' },
      { name: 'to', type: 'Person' },
      { name: 'contents', type: 'string' },
    ],
  }
  const message = {
    from: {
      name: 'Alice',
      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
    },
    to: {
      name: 'Bob',
      wallet: '0xAaaAaAaaAaAaAaaAaAaAaaAaAaAaAaAaAaAaAaAa',
    },
    contents: 'Hello Bob!',
  }
  const { verifyTypedData, data, error, isLoading, isSuccess } = useVerifyTypedData({
    address,
    domain,
    types,
    primaryType: 'Mail',
    message,
    signature,
  })
  return (
    <div>
      <Input style={{ width: 200, marginRight: 8 }} placeholder="address" value={address} onChange={e => setAddress(e.target.value)} />
      <Input style={{ width: 300, marginRight: 8 }} placeholder="signature" value={signature} onChange={e => setSignature(e.target.value)} />
      <Button loading={isLoading} onClick={() => verifyTypedData()}>Verify Typed Data</Button>
      <ReactJsonView src={data ? { valid: data } : {}} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error.message || error.toString()}</div>}
      {isSuccess && <div style={{ color: 'green' }}>Verification Complete!</div>}
    </div>
  )
}
 
export function VerifyTypedData() {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={config}>
        <VerifyTypedDataDemo />
      </WagmiProvider>
    </QueryClientProvider>
  )
}

Verify Typed Data

Transaction

SendTransaction

Initiate an on-chain transfer or contract call transaction.

Parameters (Params)


interface SendTransactionParams {
  to: string;         // Target address
  value: bigint;      // Transfer amount (in wei)
  data?: string;      // Optional, contract call data
}

Returns (Returns)


interface SendTransactionResult {
  hash: string;       // Transaction hash
  // Other on-chain transaction related fields
}

@wagmi/actions


import { useState } from 'react'
import { Button, Input } from 'antd'
import ReactJsonView from 'react-json-view'
import { sendTransaction } from 'wagmi/actions'
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export function SendTransaction() {
  const [res, setRes] = useState({})
  const [to, setTo] = useState('0xAaaAaAaaAaAaAaaAaAaAaaAaAaAaAaAaAaAaAaAa')
  const [value, setValue] = useState('0.01')
  const [data, setData] = useState('')
  const [error, setError] = useState('')
  async function run() {
    setError('')
    try {
      const result = await sendTransaction(config, {
        to,
        value: BigInt(Math.floor(Number(value) * 1e18)),
        data: data || undefined,
      })
      setRes(result)
    } catch (e) {
      setError(e?.message || String(e))
      setRes({})
    }
  }
  return (
    <div>
      <Input style={{ width: 300, marginRight: 8 }} placeholder="to" value={to} onChange={e => setTo(e.target.value)} />
      <Input style={{ width: 120, marginRight: 8 }} placeholder="value(ETH)" value={value} onChange={e => setValue(e.target.value)} />
      <Input style={{ width: 300, marginRight: 8 }} placeholder="data (hex)" value={data} onChange={e => setData(e.target.value)} />
      <Button style={{ margin: '12px 0' }} onClick={run}>Send Transaction</Button>
      <ReactJsonView src={res} theme='monokai' />
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  )
}

API Reference

wagmi