Skip to content

Add Sepolia to the TokenInput demo network selector #461

@gabitoesmiapodo

Description

@gabitoesmiapodo

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

  • Sepolia appears as a selectable option in the TokenInput demo's network selector when PUBLIC_INCLUDE_TESTNETS=true.
  • Selecting Sepolia sets the active chain id to 11155111 and the token list renders native ETH.
  • No regression: Mainnet, Optimism, Arbitrum, and Polygon continue to appear and work as before.
  • pnpm lint, pnpm test, and pnpm build pass.

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.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions