React Hooks Overview

If you are using Smart Contract Accounts and building a React application, you can use the React Hooks exported by Account Kit to interact with your Smart Contract Accounts. You're not required to use these hooks to leverage all of the power of Account Kit. The hooks are exported from @alchemy/aa-alchemy and can be found within the @alchemy/aa-alchemy/react namespace.

Install the package

To use the React Hooks, you need to install the @alchemy/aa-alchemy and @tanstack/react-query packages. We use react-query to manage async data fetching and mutations in our hooks.

npm

npm install @alchemy/aa-alchemy @tanstack/react-query

yarn

yarn add @alchemy/aa-alchemy @tanstack/react-query

pnpm

pnpm add @alchemy/aa-alchemy @tanstack/react-query

Create a config

In order to get started, you'll first have to define a config object that can be used to create an AlchemyAccountContext that will be used by all of the hooks exported by the library.

config.ts

import { createConfig } from "@alchemy/aa-alchemy/config";
import { sepolia } from "@alchemy/aa-core";

export const config = createConfig({
  // required
  rpcUrl: "/api/rpc",
  chain: sepolia,
});

Wrap app in Context Provider

Next, you'll need to add the AlchemyAccountProvider to your application and pass in the config object and an instance of the react-query QueryClient.

app.tsx

import { AlchemyAccountProvider } from "@alchemy/aa-alchemy/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./config";

const queryClient = new QueryClient();

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AlchemyAccountProvider config={config} queryClient={queryClient}>
        {/** ... */}
      </AlchemyAccountProvider>
    </QueryClientProvider>
  );
}

config.ts

import { createConfig } from "@alchemy/aa-alchemy/config";
import { sepolia } from "@alchemy/aa-core";

export const config = createConfig({
  // required
  rpcUrl: "/api/rpc",
  chain: sepolia,
});

Use the hooks

Explore the remaining hooks docs and use them in your application!