User story / Problem statement
Currently, the TokenInput demo on the home page exposes only Mainnet, Optimism, Arbitrum, and Polygon in its network selector. Sepolia is a first-class chain elsewhere in the project (registered in src/lib/networks.config.ts, wired with an RPC transport, and enabled by PUBLIC_INCLUDE_TESTNETS=true in both .env.example and .env.local), but it never reaches this demo because the demo hardcodes its own networks array instead of deriving from the global chains export. This makes the demo understate what the starter-kit supports and blocks testnet experimentation through the showcased UI.
Expected outcome
Opening the TokenInput demo and clicking the network selector shows Sepolia alongside Mainnet, Optimism, Arbitrum, and Polygon. Selecting Sepolia switches the active chain to 11155111, and the token list populates with at least the native ETH token for Sepolia.
Acceptance criteria
Alternatives considered
- Deriving the demo's
networks array from the global chains export in src/lib/networks.config.ts so the demo tracks the real chain list automatically. Discarded for this issue because it expands scope beyond "add Sepolia" and would couple icon selection to a generic lookup. Worth considering as a follow-up refactor.
Technical notes
- File to modify:
src/components/pageComponents/home/Examples/demos/TokenInput/index.tsx -- import sepolia from viem/chains and append a 5th entry to the networks array at lines 63-108.
- Icon:
@web3icons/react exports NetworkSepolia directly -- use it. (Earlier note claiming it was absent was incorrect; verified in node_modules/@web3icons/react/dist/index.js.)
- The Sepolia entry must be gated on
includeTestnets (from src/constants/common.ts) so it only appears when PUBLIC_INCLUDE_TESTNETS=true, consistent with how networks.config.ts conditionally includes testnet chains.
- The same hardcoded pattern exists in
src/components/pageComponents/home/Examples/demos/SwitchNetwork/index.tsx. Out of scope here, but worth tracking.
- No changes needed in
networks.config.ts, env.ts, or any token list source. src/hooks/useTokenLists.ts already groups tokens by chainId and synthesizes native tokens automatically, so Sepolia gets native ETH for free. Non-native Sepolia token coverage is limited by the upstream CoinGecko/Uniswap list and is not in scope.
Additional context
Origin: investigation triggered by "I want to use the token selector but Sepolia isn't in the list." Verified in session on branch develop at commit 528a331.
User story / Problem statement
Currently, the TokenInput demo on the home page exposes only Mainnet, Optimism, Arbitrum, and Polygon in its network selector. Sepolia is a first-class chain elsewhere in the project (registered in
src/lib/networks.config.ts, wired with an RPC transport, and enabled byPUBLIC_INCLUDE_TESTNETS=truein both.env.exampleand.env.local), but it never reaches this demo because the demo hardcodes its ownnetworksarray instead of deriving from the globalchainsexport. This makes the demo understate what the starter-kit supports and blocks testnet experimentation through the showcased UI.Expected outcome
Opening the TokenInput demo and clicking the network selector shows Sepolia alongside Mainnet, Optimism, Arbitrum, and Polygon. Selecting Sepolia switches the active chain to
11155111, and the token list populates with at least the native ETH token for Sepolia.Acceptance criteria
PUBLIC_INCLUDE_TESTNETS=true.11155111and the token list renders native ETH.pnpm lint,pnpm test, andpnpm buildpass.Alternatives considered
networksarray from the globalchainsexport insrc/lib/networks.config.tsso the demo tracks the real chain list automatically. Discarded for this issue because it expands scope beyond "add Sepolia" and would couple icon selection to a generic lookup. Worth considering as a follow-up refactor.Technical notes
src/components/pageComponents/home/Examples/demos/TokenInput/index.tsx-- importsepoliafromviem/chainsand append a 5th entry to thenetworksarray at lines 63-108.@web3icons/reactexportsNetworkSepoliadirectly -- use it. (Earlier note claiming it was absent was incorrect; verified innode_modules/@web3icons/react/dist/index.js.)includeTestnets(fromsrc/constants/common.ts) so it only appears whenPUBLIC_INCLUDE_TESTNETS=true, consistent with hownetworks.config.tsconditionally includes testnet chains.src/components/pageComponents/home/Examples/demos/SwitchNetwork/index.tsx. Out of scope here, but worth tracking.networks.config.ts,env.ts, or any token list source.src/hooks/useTokenLists.tsalready groups tokens bychainIdand synthesizes native tokens automatically, so Sepolia gets native ETH for free. Non-native Sepolia token coverage is limited by the upstream CoinGecko/Uniswap list and is not in scope.Additional context
Origin: investigation triggered by "I want to use the token selector but Sepolia isn't in the list." Verified in session on branch
developat commit528a331.