Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down
60 changes: 57 additions & 3 deletions config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 = {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't love this. But @account-key/infra doesn't offer the ARB_SEPOLIA/ETH -style identifiers. The options are:

  1. Internal Alchemy numeric IDs
  2. Full text names, Arbitrum Sepolia, Mainnet
  3. These variable names
  4. These variable names, run through a to_snake_case method, although they still wouldn't match the other identifier style.

I would be fine with 3 or 4, I went with 3 for now, but open to thoughts.

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: {
Expand All @@ -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
Expand Down