Chain Abstraction (Wagmi PnP)

The Arcana ca-wagmi SDK simplifies Web3 apps built with the Wagmi library by providing a unified balance across blockchains through easy-to-use useBalance and useBalanceModal hooks. It also replaces the Wagmi hooks useSendTransaction and useWriteContract to support chain-abstracted transactions.

Quick start

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { config } from "./config";
import { CAProvider } from "@arcana/ca-wagmi";
import { CA } from "@arcana/ca-sdk";
import { App } from "./App";

const ca = new CA();
const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <CAProvider client={ca}>
          <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

There are two kinds of hooks implemented by the ca-wagmi SDK.

• Wagmi hooks (Re-implemented / Replaced)
• Arcana ca-wagmi hooks to enable unified balance and chain abstracted transactions

Wagmi Hooks

Following Wagmi hooks have been replaced by the Arcana ca-wagmi SDK to ensure chain abstraction is enabled automatically in the transaction flow with no changes to the app code.

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

// Replaces `wagmi` hook: `useSendTransaction`
const { sendTransaction, sendTransactionAsync } = useSendTransaction();

// Replaces `wagmi` hook: `useWriteContract`
const { writeContract, writeContractAsync } = useWriteContract();

Arcana ca-wagmi Hooks

The following hooks allow developers to access unified balance and enable chain abstracted bridge and transfer operations in a Wagmi app.

• useBalance
• useBalances
• useBalanceModal
• useCAFn
• useGetMyIntents

useBalance

---

Get the unified balance across all supported chains associated with the EoA for the specified token symbol.

Usage

useBalance({ symbol: string })

Parameter	Required	Type	Description
symbol	yes	string	Should be one of the supported currencies

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

const balance = useBalance({ symbol: "eth" });

Response

UseQueryResult<UseBalanceValue[] | null>

Sample Response

{
    isLoading: false,
    isFetching: false,
    isSuccess: true,
    isError: false,
    data: {
      symbol: "ETH",
      decimals: 18,
      formatted: "0.000785657313049966"
      value: 785657313049966n
      breakdown: {
        chain: {
          id: 1,
          name: "Ethereum",
          logo: "..."
        },
        formatted: "0.000785657313049966",
        address: "0x0000000000000000000000000000000000000000",
        value: 785657313049966n
      }
    },
    error: null
}

useBalances

---

Get the unified balances across all supported chains associated with the EoA for every supported token type.

Usage

useBalances()

import { useBalances } from "@arcana/ca-wagmi";

const balances = useBalances();

Response

UseQueryResult<UseBalancesValue[] | null>

Sample Response

{
  isLoading: false,
  isFetching: false,
  isSuccess: true,
  isError: false,
  data: [{
    symbol: "ETH",
    decimals: 18,
    formatted: "0.000785657313049966"
    value: 785657313049966n,
    breakdown: [{
      chain: {
        id: 1,
        name: "Ethereum",
        logo: "..."
      },
      formatted: "0.000785657313049966",
      address: "0x0000000000000000000000000000000000000000",
      value: 785657313049966n
    }]
  }],
  error: null
}

useBalanceModal

---

Display or hide the popup displaying the unified balance in the context of the user EoA.

Usage

useBalanceModal()

import { useBalanceModal } from "@arcana/ca-wagmi";

const { showModal, hideModal } = useBalanceModal();

Response

Field	Type
showModal	() => void
hideModal	() => void

useCAFn

---

Initiate a chain abstracted bridge or transfer function in the context of the user EoA.

Usage

useCAFn()

import { useCAFn } from "@arcana/ca-wagmi";

const { bridge, transfer } = useCAFn();

await bridge({
  token: "usdt",
  amount: "1.5",
  chain: 42161,
});

const hash = await transfer({
  to: "0x80129F3d408545e51d051a6D3e194983EB7801e8",
  token: "usdt",
  amount: "1.5",
  chain: 10,
});

Response

Field	Type
bridge	({ token: string, amount: string, chain: number }) => Promise<unknown>
transfer	({ token: string, amount: string, chain: number, to: "0x${string}" }) => Promise<unknown>

useGetMyIntents

---

Get a list of intents created by the user

Usage

useGetMyIntents(page)

import { useGetMyIntents } from "@arcana/ca-wagmi";

const getMyIntentsResponse = useGetMyIntents(1);

Response

UseQueryResult<RFF[] | null>

Sample Response

{
  isLoading: false,
  isFetching: false,
  isSuccess: true,
  isError: false,
  data: [{
    id: 107,
    sources: [{
      universe: "ETHEREUM",
      tokenAddress: "0x0b2c639c533813f4aa9d7837caf62653d097ff85",
      value: 18531n,
      chainID: 10,
    }],
    destinations: [{
      tokenAddress: "0xaf88d065e77c8cc2239327c5edb3a432268e5831",
      value: 10000n,
    }],
    destinationUniverse: "ETHEREUM",
    destinationChainID: 42161
    fulfilled: true,
    refunded: false,
    expiry: 1750070223,
    deposited: true
  }],
  error: null
}