# Multi-chain Apps

> Learn how to build multi-chain apps with Wallet APIs.

> For the complete documentation index, see [llms.txt](/docs/llms.txt).

Multi-chain apps are supported, allowing you to build applications that interact with multiple blockchains. This guide shows you how to set up your app to work with multiple chains.

## Update your config

To support multiple chains in your app, update your `createConfig` call to include the chains you want to support.

<Tabs>
  <Tab title="React" language="react">

```ts twoslash config.ts
// @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",
    },
  ],
});
```

## Change chains

Once your app is configured to use multiple chains, you can switch between them at any time using the [`useChain`](/docs/wallets/reference/account-kit/react/hooks/useChain) hook.

```tsx twoslash
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>
  );
}
```

  </Tab>
  <Tab title="Other Javascript">

```ts twoslash
import { createConfig } from "@account-kit/core";
import { sepolia, mainnet, alchemy } from "@account-kit/infra";

export const config = createConfig({
  // use this transport for all chains
  transport: alchemy({ apiKey: "ALCHEMY_API_KEY" }),
  // this is the default chain
  chain: sepolia,
  chains: [
    {
      chain: mainnet,
      // optional: sponsor gas for this chain
      policyId: "MAINNET_GAS_MANAGER_POLICY_ID",
    },
    {
      chain: sepolia,
      // optional: override the default transport for this chain
      transport: alchemy({ apiKey: "OTHER_API_KEY" }),
      // optional: sponsor gas for this chain
      policyId: "SEPOLIA_GAS_MANAGER_POLICY_ID",
    },
  ],
});
```

## Change chains

Once your app is configured to use multiple chains, you can switch between them at any time using the [`setChain`](/docs/wallets/reference/account-kit/core/functions/setChain) function.

<Tip>
  Changing the chain will trigger state changes in your app (eg. the
  `BundlerClient` returned from `getBundlerClient`, the `SmartAccountClient`
  returned from `getSmartAccountClient`, etc). This is why it's important to use
  the various `watch*` methods that subscribe to the state changes that impact
  them.
</Tip>

<CodeBlocks>

```ts example.ts
import { setChain } from "@account-kit/core";
import { mainnet } from "@account-kit/infra";
import { config } from "./config";

await setChain(config, mainnet);
```

```ts config.ts filename="config.ts"
import { createConfig } from "@account-kit/core";
import { sepolia, mainnet, alchemy } from "@account-kit/infra";

export const config = createConfig({
  transport: alchemy({ apiKey: "ALCHEMY_API_KEY" }),
  // this is the default chain
  chain: sepolia,
  chains: [
    {
      chain: mainnet,
      // optional: sponsor gas for this chain
      policyId: "MAINNET_GAS_MANAGER_POLICY_ID",
    },
    {
      chain: sepolia,
      // optional: sponsor gas for this chain
      policyId: "SEPOLIA_GAS_MANAGER_POLICY_ID",
    },
  ],
});
```

</CodeBlocks>

  </Tab>
</Tabs>