Merge pull request #36 from androbwebb/webb/configurable-chain-with-env-var

feat: allow the chain to be configured through an env variable

Author: androbwebb

.env.example

@@ -1,4 +1,5 @@
 # Retrieve your API Key and Policy ID from the smart wallets dashboard default configuration or create new keys: https://dashboard.alchemy.com/services/smart-wallets/configuration
 NEXT_PUBLIC_ALCHEMY_API_KEY=YOUR_APP_API_KEY # Get your app API key: https://dashboard.alchemy.com/apps
 NEXT_PUBLIC_ALCHEMY_POLICY_ID=YOUR_SPONSORSHIP_POLICY_ID # Get your gas sponsorship policy ID: https://dashboard.alchemy.com/services/gas-manager/configuration
+NEXT_PUBLIC_CHAIN_ID=421614 # Arbitrum Sepolia as default
 # NOTE: make sure to set up a smart wallet configuration for your app to enable login

README.md

@@ -7,15 +7,15 @@ Use this template to get started with **embedded smart wallets** using [Alchemy
 - Email, passkey & social login using pre‑built UI components
 - Flexible, secure, and cheap smart accounts
 - Gasless transactions powered by ERC-4337 Account Abstraction
-- One‑click NFT mint on Arbitrum Sepolia (no ETH required)
+- One‑click NFT mint (no ETH required)
 - Server‑side rendering ready – session persisted with cookies
 - TailwindCSS + shadcn/ui components, React Query, TypeScript
 
 ![Smart Wallet Quickstart](https://github.com/user-attachments/assets/2903fb78-e632-4aaa-befd-5775c60e1ca2)
 
 ## 📍 Network & Demo Contract
 
-This quickstart is configured to run on **Arbitrum Sepolia** testnet. A free demo NFT contract has been deployed specifically for this quickstart, allowing you to mint NFTs without any setup or deployment steps. The contract is pre-configured and ready to use out of the box.
+This quickstart is configured to run on **Arbitrum Sepolia** testnet, by default. A free demo NFT contract has been deployed specifically for this quickstart, allowing you to mint NFTs without any setup or deployment steps. The contract is pre-configured and ready to use out of the box.
 
 ## 🚀 Quick start
 
@@ -75,7 +75,7 @@ tailwind.config.ts
 
 ## 🏗️ How it works
 
-1. `config.ts` initializes Account Kit with your API key, Arbitrum Sepolia chain, and Gas Sponsorship policy.
+1. `config.ts` initializes Account Kit with your API key, chain, and Gas Sponsorship policy.
 2. `Providers` wraps the app with `AlchemyAccountProvider` & React Query.
 3. `LoginCard` opens the authentication modal (`useAuthModal`).
 4. After login, `useSmartAccountClient` exposes the smart wallet.

app/components/nft-mint-card.tsx

@@ -21,16 +21,17 @@ import Link from "next/link";
 import { useReadNFTData } from "@/app/hooks/useReadNFTData";
 import { useMint } from "@/app/hooks/useMintNFT";
 import { useSmartAccountClient } from "@account-kit/react";
-import { NFT_CONTRACT_ADDRESS } from "@/lib/constants";
+import { useNftContractAddress } from "@/app/hooks/useNftContractAddress";
 
 export default function NftMintCard() {
   const [isImageLoading, setIsImageLoading] = useState(true);
   const [showSuccess, setShowSuccess] = useState(true);
+  const nftContractAddress = useNftContractAddress();
 
   const { client } = useSmartAccountClient({});
 
   const { uri, count, isLoadingCount, refetchCount } = useReadNFTData({
-    contractAddress: NFT_CONTRACT_ADDRESS,
+    contractAddress: nftContractAddress,
     ownerAddress: client?.account?.address,
   });
 
@@ -123,7 +124,7 @@ export default function NftMintCard() {
               )}
             >
               <PlusCircle className="h-[18px] w-[18px]" />
-              Mint New NFT
+              Mint New NFT {!!client?.chain?.name && `on ${client.chain.name}`}
             </span>
             <span
               className={cn(

app/hooks/useMintNFT.tsx

@@ -4,7 +4,8 @@ import {
   useSendUserOperation,
 } from "@account-kit/react";
 import { encodeFunctionData } from "viem";
-import { NFT_MINTABLE_ABI_PARSED, NFT_CONTRACT_ADDRESS } from "@/lib/constants";
+import { NFT_MINTABLE_ABI_PARSED } from "@/lib/constants";
+import { useNftContractAddress } from "@/app/hooks/useNftContractAddress";
 
 export interface UseMintNFTParams {
   onSuccess?: () => void;
@@ -19,6 +20,7 @@ export interface UseMintReturn {
 export const useMint = ({ onSuccess }: UseMintNFTParams): UseMintReturn => {
   const [isMinting, setIsMinting] = useState(false);
   const [error, setError] = useState<string>();
+  const nftContractAddress = useNftContractAddress();
 
   const { client } = useSmartAccountClient({});
 
@@ -51,17 +53,22 @@ export const useMint = ({ onSuccess }: UseMintNFTParams): UseMintReturn => {
       return;
     }
 
+    if (!nftContractAddress) {
+        setError("Contract address is not defined.");
+        return;
+    }
+
     sendUserOperation({
       uo: {
-        target: NFT_CONTRACT_ADDRESS,
+        target: nftContractAddress,
         data: encodeFunctionData({
           abi: NFT_MINTABLE_ABI_PARSED,
           functionName: "mintTo",
           args: [client.getAddress()],
         }),
       },
     });
-  }, [client, sendUserOperation]);
+  }, [client, sendUserOperation, nftContractAddress]);
 
   const transactionUrl = useMemo(() => {
     if (!client?.chain?.blockExplorers || !sendUserOperationResult?.hash) {

app/hooks/useNftContractAddress.ts

@@ -0,0 +1,10 @@
+import { useSmartAccountClient } from "@account-kit/react";
+import { arbitrumSepolia } from "@account-kit/infra";
+import { ChainData, chainNFTMintContractData } from "@/lib/chains";
+
+export const useNftContractAddress = (): ChainData['nftContractAddress'] | undefined => {
+    const { client } = useSmartAccountClient({});
+    const chain = client?.chain || arbitrumSepolia;
+
+    return chainNFTMintContractData[chain.id]?.nftContractAddress;
+}

config.ts

@@ -3,8 +3,9 @@ import {
   cookieStorage,
   createConfig,
 } from "@account-kit/react";
-import { alchemy, arbitrumSepolia } from "@account-kit/infra";
 import { QueryClient } from "@tanstack/react-query";
+import { chainNFTMintContractData } from "@/lib/chains";
+import { alchemy } from "@account-kit/infra";
 
 const API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY;
 if (!API_KEY) {
@@ -16,6 +17,12 @@ if (!SPONSORSHIP_POLICY_ID) {
   throw new Error("NEXT_PUBLIC_ALCHEMY_POLICY_ID is not set");
 }
 
+const CHAIN_ID = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID ?? '') || 421614;
+const chain = chainNFTMintContractData[CHAIN_ID]?.chain;
+if (!chain) {
+    throw new Error("Invalid chain ID")
+}
+
 const uiConfig: AlchemyAccountsUIConfig = {
   illustrationStyle: "outline",
   auth: {
@@ -34,8 +41,7 @@ const uiConfig: AlchemyAccountsUIConfig = {
 export const config = createConfig(
   {
     transport: alchemy({ apiKey: API_KEY }),
-    // Note: This quickstart is configured for Arbitrum Sepolia.
-    chain: arbitrumSepolia,
+    chain,
     ssr: true, // more about ssr: https://www.alchemy.com/docs/wallets/react/ssr
     storage: cookieStorage, // more about persisting state with cookies: https://www.alchemy.com/docs/wallets/react/ssr#persisting-the-account-state
     enablePopupOauth: true, // must be set to "true" if you plan on using popup rather than redirect in the social login flow

lib/chains.ts

@@ -0,0 +1,71 @@
+import { Address, Chain } from "viem";
+import {
+    arbitrumSepolia,
+    baseSepolia,
+    sepolia,
+    polygonAmoy,
+    shapeSepolia,
+    soneiumMinato,
+    unichainSepolia,
+    inkSepolia,
+    monadTestnet,
+    riseTestnet,
+    storyAeneid,
+    teaSepolia
+} from "@account-kit/infra";
+
+export interface ChainData {
+    chain: Chain;
+    nftContractAddress: Address;
+}
+
+export const chainNFTMintContractData: Record<Chain['id'], ChainData> = {
+    [arbitrumSepolia.id]: {
+        chain: arbitrumSepolia,
+        nftContractAddress: "0x6D1BaA7951f26f600b4ABc3a9CF8F18aBf36fac1",
+    },
+    [baseSepolia.id]: {
+        chain: baseSepolia,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [polygonAmoy.id]: {
+        chain: polygonAmoy,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [sepolia.id]: {
+        chain: sepolia,
+        nftContractAddress: "0xc59b508C90425C8e25e3F9dA30e52057908E2838",
+    },
+    [shapeSepolia.id]: {
+        chain: shapeSepolia,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [soneiumMinato.id]: {
+        chain: soneiumMinato,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [unichainSepolia.id]: {
+        chain: unichainSepolia,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [inkSepolia.id]: {
+        chain: inkSepolia,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [monadTestnet.id]: {
+        chain: monadTestnet,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [riseTestnet.id]: {
+        chain: riseTestnet,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [storyAeneid.id]: {
+        chain: storyAeneid,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+    [teaSepolia.id]: {
+        chain: teaSepolia,
+        nftContractAddress: "0x6d15c130d9B2548597C1d2D0c8CB2067Ce9C4525",
+    },
+}

lib/constants.ts

@@ -1,7 +1,7 @@
 import { parseAbi } from "viem";
+import { arbitrumSepolia } from "@account-kit/infra";
 
-export const NFT_CONTRACT_ADDRESS =
-  "0x6D1BaA7951f26f600b4ABc3a9CF8F18aBf36fac1";
+export const DEFAULT_CHAIN_ID = arbitrumSepolia.id;
 
 export const NFT_MINTABLE_ABI_PARSED = parseAbi([
   "function mintTo(address recipient) returns (uint256)",