ReactUsing smart accounts

Multi-chain Apps

Account Kit supports multi-chain apps, allowing you to build applications that interact with multiple blockchains. This guide will show you how to set up your app to work with multiple chains.

Update your config

In order to support multiple chains in your app, the first thing you need to do is update your createConfig call to include the chains you want to support.

config.ts
1// @noErrors
2import { createConfig } from "@account-kit/react";
3import { sepolia, mainnet } from "@account-kit/infra";
4
5export const config = createConfig({
6  apiKey: "ALCHEMY_API_KEY",
7  // this is the default chain
8  chain: sepolia,
9  chains: [
10    {
11      chain: mainnet, // optional: you can specify a policy ID for this chain, if you want to sponsor gas
12      policyId: "MAINNET_GAS_MANAGER_POLICY_ID",
13    },
14    {
15      chain: sepolia,
16      // optional: you can specify a policy ID for this chain, if you want to sponsor gas
17      policyId: "SEPOLIA_GAS_MANAGER_POLICY_ID",
18    },
19  ],
20});

Change chains

Once your app is configured to use multiple chains, you can switch between them at any time using the useChain hook.

1import React from "react";
2import { useChain } from "@account-kit/react";
3import { mainnet, sepolia } from "@account-kit/infra";
4
5export default function MyComponent() {
6  const { chain, setChain } = useChain();
7
8  return (
9    <div>
10      <p>Current chain: {chain.name}</p>
11      <button onClick={() => setChain({ chain: mainnet })}>
12        Switch to Mainnet
13      </button>
14      <button onClick={() => setChain({ chain: sepolia })}>
15        Switch to Sepolia
16      </button>
17    </div>
18  );
19}