fix(token-input): display correct USD value for selected balance#463
Merged
Conversation
…ading Compute the estimated USD field from price × balance instead of price × amount, so selecting a token immediately shows its USD worth without requiring user input or pressing MAX. Add useTokens call inside useTokenInput to fetch prices for the selected token chain, fixing single-token mode where the initial token carries no priceUSD. Expose priceUSD and isLoadingPrice from the hook. Show a spinner in the USD slot while price or balance is loading. Closes #393
… cast in USD value render
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes the TokenInput “~$0.00” USD estimate by sourcing a token’s priceUSD reliably and computing the estimate from the connected wallet’s balance (instead of the typed amount), with loading feedback in the UI.
Changes:
- Extend
useTokenInputto derivepriceUSD(case-insensitive address match) and exposeisLoadingPrice. - Update
TokenInputto computeestimatedUSDValuefrompriceUSD × balanceand show a spinner while price/balance is loading. - Update demo mocks and add/extend unit tests for the hook’s new return values.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/components/sharedComponents/TokenInput/useTokenInput.tsx |
Adds useTokens integration to resolve priceUSD + loading state and exposes them from the hook. |
src/components/sharedComponents/TokenInput/useTokenInput.test.ts |
Adds tests validating priceUSD and isLoadingPrice behavior and token switching. |
src/components/sharedComponents/TokenInput/index.tsx |
Switches USD estimation to be balance-based and adds spinner rendering while loading. |
src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsx |
Updates hook mock shape to include new fields. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Decouple price loading from combined isLoadingBalances so consumers that only need to know when price data is ready (TokenInput's USD display) are not kept in a loading state by unrelated balance queries. isLoadingBalances retains its current union semantics; TokenSelect consumers are unaffected.
Add missing @returns entries to useTokenInput JSDoc so consumers can discover the USD price value and its loading state.
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 #393
The Token Input approximate USD field always rendered
~$0.00regardless of the selected token or wallet balance. Three defects fed into the same symptom: the estimate was computed from the typed input amount (zero at mount), the initial token carried nopriceUSDextension, and the subsequent lookup againsttokensByChainIdcompared addresses with strict equality against differently-cased entries.Changes
estimatedUSDValuefrompriceUSD × balanceinstead ofpriceUSD × amount, so a price appears as soon as the balance resolvespriceUSDfromuseTokens({ chainId, withBalance: true })insideuseTokenInput, covering single-token mode where the initial token carries no extensionspriceUSDandisLoadingPricefrom the hook and render a spinner in the USD slot while either price or balance is loadingpriceUSDfromtokensByChainId, so checksum-cased list entries match the lowercased selectionas numbercast from the render branchAcceptance criteria
No price datalabelTest plan
Automated tests
pnpm test src/components/sharedComponents/TokenInput/useTokenInput.test.tspnpm test src/components/pageComponents/home/Examples/demos/TokenInput/index.test.tsxManual verification
pnpm dev~$slot shows a spinner while loading, then a non-zero figure equal tobalance × priceNo price datalabel is shownBreaking changes
None.
Checklist
Screenshots
Screen.Recording.2026-04-20.at.23.41.57.mov