Wagmi SDK — Wallet

This guide covers wallet features using standard wagmi hooks with the CROSSx connector.

Prerequisites

Wallet should be connected (check isConnected from useAccount).
CROSSx connector handles chain routing internally.

Balance

import { useBalance } from 'wagmi'

function Balance() {
  const { data, isLoading } = useBalance({
    address: '0xYourAddress',
  })

  if (isLoading) return <p>Loading...</p>

  return <p>Balance: {data?.formatted} {data?.symbol}</p>
}

Sign message

import { useSignMessage } from 'wagmi'

function SignMessage() {
  const { signMessage, data: signature, isPending } = useSignMessage()

  return (
    <div>
      <button
        disabled={isPending}
        onClick={() => signMessage({ message: 'Hello CROSSx' })}
      >
        Sign Message
      </button>
      {signature && <p>Signature: {signature}</p>}
    </div>
  )
}

Sign typed data (EIP-712)

import { useSignTypedData } from 'wagmi'

function SignTypedData() {
  const { signTypedData, isPending } = useSignTypedData()

  const handleSign = () => {
    signTypedData({
      domain: { name: 'MyApp', version: '1', chainId: 612044 },
      types: {
        Mail: [
          { name: 'from', type: 'string' },
          { name: 'to', type: 'string' },
          { name: 'contents', type: 'string' },
        ],
      },
      primaryType: 'Mail',
      message: {
        from: 'Alice',
        to: 'Bob',
        contents: 'Hello!',
      },
    })
  }

  return (
    <button disabled={isPending} onClick={handleSign}>
      Sign Typed Data
    </button>
  )
}

Send transaction

import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi'
import { parseEther } from 'viem'

function SendTransaction() {
  const { sendTransaction, data: hash, isPending } = useSendTransaction()
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash })

  return (
    <div>
      <button
        disabled={isPending}
        onClick={() => sendTransaction({
          to: '0xRecipient...',
          value: parseEther('0.1'),
        })}
      >
        Send 0.1 CROSS
      </button>
      {isPending && <p>Sending...</p>}
      {isConfirming && <p>Waiting for confirmation...</p>}
      {isSuccess && <p>Transaction confirmed!</p>}
    </div>
  )
}

Wallet client

For advanced use cases, access the viem wallet client directly:

import { useWalletClient } from 'wagmi'

function AdvancedWallet() {
  const { data: walletClient } = useWalletClient()

  const handleCustomCall = async () => {
    if (!walletClient) return

    const hash = await walletClient.sendTransaction({
      to: '0xRecipient...',
      value: parseEther('0.1'),
    })
    console.log('TX Hash:', hash)
  }

  return <button onClick={handleCustomCall}>Custom Send</button>
}

Multi-wallet switching & persistence

CROSSx supports multiple wallet addresses per user. The connector automatically persists the selected wallet index in localStorage (key: crossx-wallet-index) — no additional configuration required.

Default behavior

// wagmi-config.ts — wallet index persistence works out of the box
export const wagmiConfig = createConfig({
  chains: [crossTestnet],
  connectors: [
    createCROSSxConnector({
      sdk,
      defaultChainId: ChainId.CROSS_TESTNET,
    }),
  ],
  transports: { [crossTestnet.id]: http() },
});

Custom storage (optional)

If you need a different storage mechanism (e.g. cookies for SSR), provide custom callbacks:

export const wagmiConfig = createConfig({
  chains: [crossTestnet],
  connectors: [
    createCROSSxConnector({
      sdk,
      defaultChainId: ChainId.CROSS_TESTNET,
      getStoredWalletIndex: () => {
        return Number(cookieUtils.get('crossx-wallet-index')) || 0;
      },
      onWalletIndexChanged: (index) => {
        cookieUtils.set('crossx-wallet-index', String(index));
      },
    }),
  ],
  transports: { [crossTestnet.id]: http() },
});

Switching wallet

sdk.selectWallet() emits an addressChanged event, so the wagmi provider automatically syncs the wallet index and notifies wagmi — no manual provider.setWalletIndex() or provider.notifyAccountsChanged() calls needed.

import { useAccount } from 'wagmi'

function WalletSelector() {
  const { address } = useAccount()

  const handleSelectWallet = async () => {
    // Pass current address to highlight it as "selected" in the popup
    const wallet = await sdk.selectWallet(address || undefined)
    if (!wallet) return
    // Provider state and wagmi are updated automatically
  }

  return (
    <div>
      <p>Active: {address}</p>
      <button onClick={handleSelectWallet}>Switch Wallet</button>
    </div>
  )
}

How it works:

sdk.selectWallet() emits addressChanged → the wagmi provider automatically calls setWalletIndex() and notifyAccountsChanged().
Wallet index is automatically persisted in localStorage (key: crossx-wallet-index) by default.
On page refresh, the saved index is restored and the correct wallet is used.
On disconnect, the saved index is cleared.

Supported wagmi hooks

All standard wagmi hooks work with the CROSSx connector:

import {
  useAccount,
  useBalance,
  useSendTransaction,
  useSignMessage,
  useSignTypedData,
  useWalletClient,
  usePublicClient,
  useWaitForTransactionReceipt,
} from 'wagmi'