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.
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>
);
}
There are two kinds of hooks implemented by the ca-wagmi
SDK.
ca-wagmi
hooks to enable unified balance and chain abstracted transactionsFollowing 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();
ca-wagmi
HooksThe following hooks allow developers to access unified balance and enable chain abstracted bridge and transfer operations in a Wagmi app.
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" });
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
}
Get the unified balances across all supported chains associated with the EoA for every supported token type.
useBalances()
import { useBalances } from "@arcana/ca-wagmi";
const balances = useBalances();
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
}
Display or hide the popup displaying the unified balance in the context of the user EoA.
useBalanceModal()
import { useBalanceModal } from "@arcana/ca-wagmi";
const { showModal, hideModal } = useBalanceModal();
Field | Type |
---|---|
showModal | () => void |
hideModal | () => void |
Initiate a chain abstracted bridge
or transfer
function in the context of the user EoA.
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,
});
Field | Type |
---|---|
bridge | ({ token: string, amount: string, chain: number }) => Promise<unknown> |
transfer | ({ token: string, amount: string, chain: number, to: "0x${string}" }) => Promise<unknown> |
Get a list of intents created by the user
useGetMyIntents(page)
import { useGetMyIntents } from "@arcana/ca-wagmi";
const getMyIntentsResponse = useGetMyIntents(1);
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
}