feat(token-input): add Sepolia support with AAVE faucet tokens#462
Merged
Conversation
Appends Sepolia as a 5th entry in the demo's networks array, gated on `includeTestnets` so it only appears when `PUBLIC_INCLUDE_TESTNETS=true`. Uses `NetworkSepolia` from `@web3icons/react` (the icon exists; earlier issue note claiming it was absent was incorrect). Also guards the LI.FI token price query against an empty `chainsToFetch` array, which caused 400s when a testnet chain (unsupported by LI.FI) was selected. Closes #461
…raceful fallback display - Add Sepolia to the TokenInput demo network selector, gated by PUBLIC_INCLUDE_TESTNETS - Bundle AAVE v3 Sepolia faucet tokens (DAI, LINK, USDC, WBTC, WETH, USDT, AAVE, EURS, GHO) with Trust Wallet CDN icons, wired through the existing useTokenLists pipeline - Fix HTTP 400 from LI.FI SDK when Sepolia is selected by guarding the price query with chainsToFetch.length > 0 - Replace indefinite balance/USD skeletons on LI.FI-unsupported chains with on-chain fallback balances (wagmi useBalance for native, useErc20Balance for ERC-20) and N/A for the USD value - Show N/A in the TokenInput estimated USD field when no price data is available Closes #461
- close missing ) in CSS var() fallback in TokenBalance const blocks - extract BalanceLoading to shared file; Row.tsx imports from it - harmonize fallback-path loading state to render two skeletons (matching the Suspense fallback) instead of one skeleton + immediate N/A - guard tokensBalances query on chainsToFetch.length > 0 to match the prices query, making the cascade explicit - pin Trust Wallet CDN URL to commit SHA instead of master - update aaveSepoliaFaucet.ts timestamp to 2026-04-20 - extract N/A display label to NO_PRICE_DATA_LABEL constant in common.ts - fix misleading test comment; replace per-test dynamic imports with static imports and a beforeEach that resets mocks between tests - add tests for ERC-20 error, native error, and disconnected wallet states - remove em-dashes from new comments
Reorders the dropdown so multi token appears first, matching the new default.
Replace absolute positioning on CloseButton with margin-based flow layout. Move children slot to render before Search instead of after List.
The native balance query used the hook's initial `token` argument for `usePublicClient`, so picking ETH on a different chain (e.g. Sepolia) kept fetching from the initial chain's client and reported 0. Switch the binding to `selectedToken?.chainId` so the client tracks the current selection, matching the ERC-20 branch. Covered by a new regression test for the chain-switch path.
LI.FI returns native tokens at the zero address, but the app builds its local native token from `env.PUBLIC_NATIVE_TOKEN_ADDRESS`, which can be overridden (e.g. `0xEeee...eE`). The price/balance merge keyed on LI.FI's address, so any non-default sentinel caused every native-token lookup to miss and the list to render "0" for ETH on supported chains. Normalize LI.FI's zero-address entries back to the configured sentinel when building the lookup maps. No-op on the default config.
…state The estimated USD value rendered "N/A" whenever no token was selected or the amount was zero, conflating "no price data for this chain" with "nothing to price yet". On mainnet that surfaced as a spurious N/A on the default view. Base the label on `chain.testnet` of the active chain (selected token's chain, then network selector, then wallet/app chain). Mainnet shows `~$0.00` until the user enters an amount; testnets keep `N/A` and the label flips immediately when the user toggles networks, without needing to pick a token first.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Sepolia support to the TokenInput demo (gated by PUBLIC_INCLUDE_TESTNETS) and improves TokenSelect/TokenInput behavior on chains without LI.FI token/price coverage by bundling an AAVE Sepolia faucet token list and adding on-chain balance fallbacks. This also fixes several chain/balance source mismatches surfaced during implementation.
Changes:
- Add a bundled AAVE Sepolia faucet token list (enabled only when testnets are included) and load bundled token lists alongside remote lists.
- Improve token balance/price enrichment and native-token address normalization when merging LI.FI data.
- Add TokenSelect balance fallback rendering (on-chain balance + “N/A” USD) for chains without LI.FI coverage, plus related tests and demo updates.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/useTokens.ts | Avoid LI.FI queries when no supported chains; normalize LI.FI native address; export balance-merge helper. |
| src/hooks/useTokens.test.ts | Tests for native-token address normalization when merging LI.FI results. |
| src/hooks/useTokenLists.ts | Load enabled bundled token lists in addition to remote token lists. |
| src/hooks/useTokenLists.test.ts | Update mocks to include bundledTokenLists. |
| src/constants/tokenLists.ts | Define bundledTokenLists (AAVE Sepolia faucet list) gated by includeTestnets. |
| src/constants/common.ts | Add shared NO_PRICE_DATA_LABEL. |
| src/constants/aaveSepoliaFaucet.ts | Introduce AAVE v3 Sepolia faucet token list with pinned TrustWallet icon URLs. |
| src/components/sharedComponents/TokenSelect/index.tsx | Adjust children render position (CloseButton layout fix). |
| src/components/sharedComponents/TokenSelect/List/TokenBalance.tsx | Add on-chain balance fallback for tokens without LI.FI extensions; render “N/A” USD value. |
| src/components/sharedComponents/TokenSelect/List/TokenBalance.test.tsx | Tests covering LI.FI vs fallback paths and loading/error behavior. |
| src/components/sharedComponents/TokenSelect/List/Row.tsx | Extract BalanceLoading into its own component. |
| src/components/sharedComponents/TokenSelect/List/BalanceLoading.tsx | New shared skeleton component for balance/value placeholders. |
| src/components/sharedComponents/TokenInput/useTokenInput.tsx | Bind native-token public client to the selected token’s chain (not initial token). |
| src/components/sharedComponents/TokenInput/useTokenInput.test.ts | Tests ensuring native balance client rebinds when token chain changes. |
| src/components/sharedComponents/TokenInput/index.tsx | Show “N/A” estimated USD on testnets; compute estimated USD on supported chains. |
| src/components/sharedComponents/TokenInput/Components.tsx | CloseButton layout tweak. |
| src/components/pageComponents/home/Examples/demos/TokenInput/index.tsx | Add Sepolia to demo network selector (gated by includeTestnets); default demo to multi-token mode. |
| src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx | Update demo test expectation to match new default mode. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- replace viemChains wildcard scan with configured chains lookup in TokenInput - extract toLocalNativeAddress helper into utils/address alongside isNativeToken - drop redundant !!chains guard in useTokens (implied by chainsToFetch.length > 0) - memoize enabledBundledLists filter in useTokenLists - remove WHAT-style comments in TokenBalance and aaveSepoliaFaucet - fix marginLeft string literal in CloseButton
- Add !!userWallet to the enabled predicate in useTokenInput so the
native-balance query does not fire (and getAddress('') does not
throw) when no wallet is connected
- Rename udpateTokensBalances to updateTokensBalances (typo)
- Add disconnected-wallet test to useTokenInput
- Add integration test: Sepolia appears in the network selector when
includeTestnets is true
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #461
Adds Sepolia to the TokenInput demo network selector and, to make the selector actually useful on Sepolia, extends TokenSelect with an AAVE faucet token list and graceful fallback display for chains without upstream token lists. Several native-token and balance-source bugs surfaced during this work and are fixed here as well.
Changes
Scope of #461
PUBLIC_INCLUDE_TESTNETSBalanceLoading,Rowupdates)Bugs discovered while implementing Sepolia support
Unrelated changes bundled in (flagging per self-review)
CloseButtonlayout and children render position (cosmetic layout bug, separate from Sepolia work)Acceptance criteria
From #461:
PUBLIC_INCLUDE_TESTNETS=true11155111and the token list renders native ETHpnpm lint,pnpm test, andpnpm buildpassAdded during implementation:
Test plan
Automated tests
New tests:
src/components/sharedComponents/TokenInput/useTokenInput.test.tssrc/components/sharedComponents/TokenSelect/List/TokenBalance.test.tsxsrc/hooks/useTokens.test.tsUpdated tests:
src/hooks/useTokenLists.test.tssrc/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsxRun with:
pnpm testManual verification
PUBLIC_INCLUDE_TESTNETS=truein.env.localand runpnpm dev11155111and the token list shows native ETH and AAVE faucet tokensBreaking changes
None.
Checklist
Screenshots
Screen.Recording.2026-04-20.at.19.34.51.mov