Smart Wallets 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.
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.
// @noErrors
import { createConfig } from "@account-kit/react";
import { sepolia, mainnet } from "@account-kit/infra";
export const config = createConfig({
apiKey: "ALCHEMY_API_KEY",
// this is the default chain
chain: sepolia,
chains: [
{
chain: mainnet,
// optional: you can specify a policy ID for this chain, if you want to sponsor gas
policyId: "MAINNET_GAS_MANAGER_POLICY_ID",
},
{
chain: sepolia,
// optional: you can specify a policy ID for this chain, if you want to sponsor gas
policyId: "SEPOLIA_GAS_MANAGER_POLICY_ID",
},
],
});Once your app is configured to use multiple chains, you can switch between them at any time using the useChain hook.
import React from "react";
import { useChain } from "@account-kit/react";
import { mainnet, sepolia } from "@account-kit/infra";
export default function MyComponent() {
const { chain, setChain } = useChain();
return (
<div>
<p>Current chain: {chain.name}</p>
<button onClick={() => setChain({ chain: mainnet })}>
Switch to Mainnet
</button>
<button onClick={() => setChain({ chain: sepolia })}>
Switch to Sepolia
</button>
</div>
);
}