Skip to content

Get Started: Wagmi Apps

Estimated time to read: 2 minutes

Integrate Web3 apps using the Wagmi framework with the Arcana CA Wagmi SDK to enable unified balance.

Wagmi Plug & Play Widget

The Arcana CA Wagmi SDK supports a plug-and-play UI modal that displays the unified balance within the Wagmi app context. Authenticated app users can view the unified balance via the plug-and-play widget and issue blockchain transactions through any browser-based third-party wallets connected to the Wagmi app.

1. Install

npm install --save @arcana/ca-wagmi

yarn add @arcana/ca-wagmi

2. Integrate

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

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

The CA Wagmi SDK offers the same API as Wagmi useSendTransaction(). Use the showBalance() method to display the unified balance via the plug-and-play widget.

useSendTransaction

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

// The SDK offers the 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()
With CA
Plug & Play Unified Balance Widget

See Also

Arcana CA SDK Quick Links

Try CA SDK Demo

Last update: February 21, 2025 by shaloo