Multi-Chain dApp Starter

Production-ready Next.js + wagmi + viem starter pre-configured for 12 EVM chains out of the box. Connect a wallet, read native balances and current block heights across every chain in parallel, switch networks with a single click.

Powered by SwiftNodes — flat-rate, no-KYC RPC across 75+ chains with crypto payments.

git clone https://github.com/swiftnodes/multichain-dapp-starter
cd multichain-dapp-starter
cp .env.example .env.local       # add your SwiftNodes API key
npm install
npm run dev
# open http://localhost:3000

Features

• ✅ 12 chains pre-configured: Ethereum, Base, Arbitrum, Optimism, Polygon, BSC, Avalanche, Scroll, Linea, zkSync Era, Blast, Sepolia
• ✅ Wallet connect via wagmi v2 with Injected, MetaMask, and optional WalletConnect support
• ✅ Live multi-chain balance reads in parallel — see your native token balance and current block across every chain at once
• ✅ One-click chain switching — uses wallet_switchEthereumChain under the hood
• ✅ HTTP + WebSocket endpoints pre-configured for every chain (see lib/chains.ts)
• ✅ Free SwiftNodes tier — no credit card, no KYC, instant signup
• ✅ Falls back gracefully if your API key isn't set or is rate-limited
• ✅ TypeScript strict mode, Next.js 15 App Router, React 19, Tailwind 4

Architecture

lib/chains.ts          ← Single source of truth for which chains are supported.
                         Add or remove chains here; the rest of the app updates automatically.
lib/wagmi.ts           ← wagmi config wired to the chains in lib/chains.ts.
components/
  Providers.tsx        ← WagmiProvider + QueryClientProvider.
  WalletConnect.tsx    ← Connect button + connected-state UI + chain switcher.
  MultiChainBalances.tsx ← Parallel viem client reads across all chains.
app/
  layout.tsx           ← Wraps everything in <Providers>.
  page.tsx             ← Demo page showing the components.

Setup

1. Get a free SwiftNodes API key

Visit swiftnodes.io, connect a wallet (no email, no KYC), and grab your API key. The free tier covers everything you need for development.

2. Configure environment

cp .env.example .env.local

Edit .env.local:

NEXT_PUBLIC_SWIFTNODES_API_KEY=sn_aBcDeFgHiJkLmNoPqRsTuVwXyZ123456
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=        # optional

3. Install and run

npm install
npm run dev

Open http://localhost:3000.

Adding more chains

Open lib/chains.ts:

import { sonic, mantle, polygonZkEvm } from "viem/chains";

export const supportedChains = [
  withSwiftNodes(mainnet, "eth"),
  // ... existing chains ...
  withSwiftNodes(sonic, "sonic"),
  withSwiftNodes(mantle, "mantle"),
  withSwiftNodes(polygonZkEvm, "polygon-zkevm"),
] as const;

The chain slug must match SwiftNodes' chain slug (see swiftnodes.io/docs/supported-chains for the full list of 75+ supported chains).

That's it — the chain switcher, balance table, and wagmi transports automatically pick up the new chain.

Using SwiftNodes in your own components

The chains exported from lib/chains.ts are standard viem Chain objects with SwiftNodes URLs configured. Use them anywhere:

With viem (server- or client-side)

import { createPublicClient, http } from "viem";
import { supportedChains } from "@/lib/chains";

const base = supportedChains.find(c => c.id === 8453)!;
const client = createPublicClient({
  chain: base,
  transport: http(base.rpcUrls.default.http[0]),
});

const block = await client.getBlockNumber();

With ethers.js

import { JsonRpcProvider } from "ethers";
import { supportedChains } from "@/lib/chains";

const eth = supportedChains.find(c => c.id === 1)!;
const provider = new JsonRpcProvider(eth.rpcUrls.default.http[0]);
const block = await provider.getBlockNumber();

WebSocket subscriptions

import { createPublicClient, webSocket } from "viem";
import { supportedChains } from "@/lib/chains";

const eth = supportedChains.find(c => c.id === 1)!;
const wsClient = createPublicClient({
  chain: eth,
  transport: webSocket(eth.rpcUrls.default.webSocket![0]),
});

const unwatch = wsClient.watchBlocks({
  onBlock: (block) => console.log("New block:", block.number),
});

Deploy

This is a vanilla Next.js app. Deploy to Vercel, Netlify, Cloudflare Pages, or any Node host:

# Vercel
npx vercel

# Or build + run anywhere
npm run build
npm start

Remember to set NEXT_PUBLIC_SWIFTNODES_API_KEY in your deployment's environment variables.

Why SwiftNodes?

• Flat-rate pricing — no per-request charges, no credit cards required
• No KYC — connect a wallet, pay in crypto if you want
• 75+ chains — every major EVM L1/L2 and a growing set of non-EVM chains
• HTTP + WebSocket — full subscription support for eth_subscribe
• One API key — works across all 75 chains, simplifies multi-chain dev
• Health-checked failover — multiple load-balanced upstream nodes per chain

Read the docs for more.

License

MIT — free to use, modify, and ship.

Contributing

Issues and PRs welcome. Particularly looking for:

• More chains added to lib/chains.ts
• Examples for additional libraries (web3.py, ethers v6, etc.)
• UI improvements / better mobile support
• Documentation improvements