diff --git a/.env.example b/.env.example index 549c3f7..06cb656 100644 --- a/.env.example +++ b/.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=ARB_SEPOLIA # Network identifier (e.g., ARB_SEPOLIA, ETH_MAINNET, POLYGON, OPTIMISM, BASE_SEPOLIA, etc) # NOTE: make sure to set up a smart wallet configuration for your app to enable login \ No newline at end of file diff --git a/README.md b/README.md index e21a44d..018c431 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ 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 @@ -15,7 +15,7 @@ Use this template to get started with **embedded smart wallets** using [Alchemy ## 📍 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. diff --git a/config.ts b/config.ts index c33ab99..73dc8a9 100644 --- a/config.ts +++ b/config.ts @@ -3,7 +3,7 @@ import { cookieStorage, createConfig, } from "@account-kit/react"; -import { alchemy, arbitrumSepolia } from "@account-kit/infra"; +import { alchemy, arbitrum, arbitrumGoerli, arbitrumNova, arbitrumSepolia, base, baseGoerli, baseSepolia, fraxtal, fraxtalSepolia, goerli, mainnet, optimism, optimismGoerli, optimismSepolia, polygon, polygonAmoy, polygonMumbai, sepolia, shape, shapeSepolia, worldChain, worldChainSepolia, zora, zoraSepolia, beraChainBartio, opbnbMainnet, opbnbTestnet, soneiumMinato, soneiumMainnet, unichainMainnet, unichainSepolia, inkMainnet, inkSepolia, mekong, monadTestnet, openlootSepolia, gensynTestnet, riseTestnet, storyMainnet, storyAeneid, celoAlfajores, celoMainnet, teaSepolia, bobaSepolia, bobaMainnet } from "@account-kit/infra"; import { QueryClient } from "@tanstack/react-query"; const API_KEY = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY; @@ -16,6 +16,61 @@ if (!SPONSORSHIP_POLICY_ID) { throw new Error("NEXT_PUBLIC_ALCHEMY_POLICY_ID is not set"); } +const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID || "abitrumSepolia"; + +const allChains = { + arbitrum, + arbitrumGoerli, + arbitrumNova, + arbitrumSepolia, + base, + baseGoerli, + baseSepolia, + fraxtal, + fraxtalSepolia, + goerli, + mainnet, + optimism, + optimismGoerli, + optimismSepolia, + polygon, + polygonAmoy, + polygonMumbai, + sepolia, + shape, + shapeSepolia, + worldChain, + worldChainSepolia, + zora, + zoraSepolia, + beraChainBartio, + opbnbMainnet, + opbnbTestnet, + soneiumMinato, + soneiumMainnet, + unichainMainnet, + unichainSepolia, + inkMainnet, + inkSepolia, + mekong, + monadTestnet, + openlootSepolia, + gensynTestnet, + riseTestnet, + storyMainnet, + storyAeneid, + celoAlfajores, + celoMainnet, + teaSepolia, + bobaSepolia, + bobaMainnet +} + +const chain = allChains[CHAIN_ID as keyof typeof allChains]; +if (!chain) { + throw new Error(`Unsupported chain ID: ${CHAIN_ID}. Supported chains: ${Object.keys(allChains).join(", ")}`); +} + const uiConfig: AlchemyAccountsUIConfig = { illustrationStyle: "outline", auth: { @@ -34,8 +89,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