Skip to content

Add a custom chain

This recipe demonstrates how to add a custom chain to your project. We'll use Base as an example, but you can apply this process to any other chain you want to add. Scaffold-ETH 2 uses viem/chains as a list of chains. Normally, Base already exists in viem/chains and you can import it and use it, but we're going to add it manually to show you how to do it.

Step 1: Define the chain

First, create a new file called customChains.ts in your packages/nextjs/utils/ directory.

Open the file with your favorite editor and add the following code to define the chain.

packages/nextjs/utils/customChains.ts
import { defineChain } from "viem";
 
// Base chain
export const base = defineChain({
  id: 8453,
  name: "Base",
  nativeCurrency: { name: "Base", symbol: "ETH", decimals: 18 },
  rpcUrls: {
    default: {
      http: ["https://mainnet.base.org"],
    },
  },
  blockExplorers: {
    default: {
      name: "Basescan",
      url: "https://basescan.org",
    },
  },
});

In this file, we're defining the Base chain. We're using the defineChain function from viem to define the chain. You can add as many chains as you want to the customChains.ts file.

Step 2: Update scaffold.config.ts

Next, update your scaffold.config.ts file to include the new chain:

packages/nextjs/scaffold.config.ts
import { base } from "./utils/customChains";
// ... other imports and type definitions
 
const scaffoldConfig = {
  targetNetworks: [base],
  // ... other configuration options
} as const satisfies ScaffoldConfig;
 
export default scaffoldConfig;

If you'd like to add multiple chains, you can do so by adding them to the targetNetworks array. Below is a simple example of how to add multiple chains.

packages/nextjs/scaffold.config.ts
import { base, baseSepolia } from "./utils/customChains";
 
const scaffoldConfig = {
  targetNetworks: [base, baseSepolia],
  // ... other configuration options
} as const satisfies ScaffoldConfig;