@avakit/react

React layer for AvaKit — a drop-in <ConnectAvalanche> social-login wallet button and hooks, built on shadcn/ui.

Install

npm install @avakit/react @avakit/core viem react react-dom

Usage

// providers.tsx
"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>
  );
}

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

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

To add social login, install @web3auth/modal and pass web3authAdapter({ clientId }) (from @avakit/core/web3auth).

API

• Components: <AvaKitProvider chains adapters dataApiKey?> · <ConnectAvalanche /> · <TransactionButton to value>
• Wallet/tx hooks: useAvaAccount, useAvaChain, useBalance, useContract, useAvaDeploy, useSendTransaction, useAvaKit
• Data hooks (AvaCloud Data API, no indexer): useTokenBalances, useNfts, useTxHistory

Styling

Components are shadcn-styled (Radix + Tailwind tokens). Your app needs Tailwind configured with shadcn tokens. The fastest way to get a fully-wired app is create-avalanche-app.

MIT © AvaKit contributors