Arcana CA Wagmi SDK Usage

Estimated time to read: 1 minute

Learn how to leverage Arcana's Chain Abstraction and enable unified balance for Web3 app users.

Arcana CA SDK Reference

Installation

npm install @arcana/ca-wagmi

Quick start

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { CAProvider } from '@arcana/ca-wagmi'
import { App } from "./App"
const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <CAProvider>
          <App />
        </CAProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

App.jsx

// import { useSendTransaction } from 'wagmi'
import { useSendTransaction } from '@arcana/ca-wagmi'
import { parseEther } from 'viem'

function App() {
  const { sendTransaction } = useSendTransaction()

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
          value: parseEther('0.01'),
        })
      }
    >
      Send transaction
    </button>
  )
}

Hooks

useSendTransaction

import { useSendTransaction } from "@arcana/ca-wagmi"

// has same API as wagmi `useSendTransaction`
const { sendTransaction } = useSendTransaction() 

useBalance

import { useBalance } from "@arcana/ca-wagmi"

const { showBalance } = useBalance();

// displays a modal with unified balance
showBalance()

Refer to the CA Wagmi SDK Reference Guide for details.

---

Last update: February 21, 2025 by shaloo