@avakit/react

Install

$ pnpm add @avakit/react @avakit/core viem react react-dom

Provider

Wrap your app in <AvaKitProvider> with the chains and wallet adapters you want:

"use client";
import { injectedAdapter } from "@avakit/core";
import { fuji } from "@avakit/core/chains";
import { AvaKitProvider } from "@avakit/react";

export function Providers({ children }) {
  return (
    <AvaKitProvider chains={[fuji]} adapters={[injectedAdapter()]}>
      {children}
    </AvaKitProvider>
  );
}

Connect button

import { ConnectAvalanche, useAvaAccount } from "@avakit/react";

export function Header() {
  const { address, isConnected } = useAvaAccount();
  return <ConnectAvalanche />;
}

On connect, AvaKit automatically switches the wallet to the active chain (adding it if unknown), including embedded wallets, which default to a different network.

Hooks

• useAvaAccount(): { address, status, isConnected, isConnecting }
• useAvaChain(): { chain, chains, setChain }
• useBalance(address?): { data, isLoading, refetch }
• useContract({ address, abi }): { read, write }
• useAvaDeploy(): { deploy, status, result, error }
• useSendTransaction(): { send, status, hash, explorerUrl, isPending }
• useTokenBalances(address?): { native, tokens, isLoading, refetch }
• useNfts(address?): { nfts, isLoading, refetch }
• useTxHistory(address?): { transactions, isLoading, refetch }
• useAvaKit(): the full context (provider, adapters, connect/disconnect)

Send a transaction

The useSendTransaction hook (and the <TransactionButton> component built on it) wrap the whole send flow: pending state, errors, and an explorer link.

import { TransactionButton, useSendTransaction } from "@avakit/react";
import { parseEther } from "viem";

// One-click component
<TransactionButton to="0x…" value={parseEther("0.01")}>Send 0.01 AVAX</TransactionButton>;

// Or the hook
const { send, isPending, explorerUrl } = useSendTransaction();
await send({ to: "0x…", value: parseEther("0.01") });

Read chain data (no indexer)

useTokenBalances, useNfts, and useTxHistory return indexed data from the AvaCloud Data API (balances, NFT holdings, and transaction history) with no indexer to run. They default to the connected account and active chain, and work keyless (pass dataApiKey to <AvaKitProvider> for higher rate limits).

import { useTokenBalances, useNfts, useTxHistory } from "@avakit/react";

const { native, tokens } = useTokenBalances();   // connected account
const { nfts } = useNfts();
const { transactions } = useTxHistory("0x…");     // or any address

Deploy & mint from React

import { useAvaDeploy, useContract } from "@avakit/react";

const { deploy } = useAvaDeploy();
const { address } = await deploy({ abi, bytecode });

const nft = useContract({ address, abi });
await nft.write("mint", []);
const total = await nft.read("totalSupply");