feat(token-input): show dollar sign for stablecoins #430
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThe changes in this pull request focus on the Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/components/Global/TokenAmountInput/index.tsx (1)
91-92: LGTM! Consider extracting price logic for improved readability.The update to use
selectedTokenData?.priceis consistent with earlier changes. The nullish coalescing operator (??) provides a safe fallback, which is good practice.To improve readability, consider extracting the price logic:
+ const tokenPrice = selectedTokenData?.price ?? 0; ? inputDenomination === 'USD' - ? utils.formatTokenAmount(Number(tokenValue) / (selectedTokenData?.price ?? 0)) - : '$' + utils.formatTokenAmount(Number(tokenValue) * (selectedTokenData?.price ?? 0))} + ? utils.formatTokenAmount(Number(tokenValue) / tokenPrice) + : '$' + utils.formatTokenAmount(Number(tokenValue) * tokenPrice)}This change would make the code more readable and reduce repetition.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/components/Global/TokenAmountInput/index.tsx (4 hunks)
🧰 Additional context used
📓 Learnings (2)
📓 Common learnings
Learnt from: jjramirezn PR: peanutprotocol/peanut-ui#413 File: src/context/tokenSelector.context.tsx:118-123 Timestamp: 2024-10-04T13:40:16.067Z Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.src/components/Global/TokenAmountInput/index.tsx (1)
Learnt from: jjramirezn PR: peanutprotocol/peanut-ui#413 File: src/context/tokenSelector.context.tsx:118-123 Timestamp: 2024-10-04T13:40:16.067Z Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.
🔇 Additional comments (3)
src/components/Global/TokenAmountInput/index.tsx (3)
97-97: LGTM! Consistent use of selectedTokenData.The update to check
selectedTokenData?.priceis consistent with earlier changes and correctly uses the optional chaining operator. This change ensures that the input denomination is only toggled when a valid price is available.
98-98: LGTM! Improved safety in toggling input denomination.Moving the
setInputDenominationcall inside the condition that checks forselectedTokenData?.priceis a good practice. It ensures that the input denomination is only changed when a valid price is available, preventing potential issues with undefined values.
14-14: LGTM! Verify context usage throughout the component.The change from
selectedTokenPricetoselectedTokenDatais consistent with the PR objectives. This modification suggests that more comprehensive token data is now available from the context.To ensure consistency, let's verify the usage of
selectedTokenDatathroughout the component:✅ Verification successful
Run updated script to verify usage of
selectedTokenDatawithin the component.The previous shell script encountered an error with the file type. Let's use the correct file type for
.tsxfiles.
Adjust the search command to use the correct file type or omit the type filter.
The previous attempts to search for
selectedTokenDatafailed due to unrecognized file types. Let's try using the correct type identifier or remove the--typeflag.
Context usage verified successfully.
The renaming of
selectedTokenPricetoselectedTokenDatais consistent throughout the component.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check usage of selectedTokenData in the component # Test: Search for occurrences of selectedTokenData rg --type typescript 'selectedTokenData' src/components/Global/TokenAmountInput/index.tsxLength of output: 124
Script:
#!/bin/bash # Description: Check usage of selectedTokenData in the component with correct file type # Test: Search for occurrences of selectedTokenData rg --type tsx 'selectedTokenData' src/components/Global/TokenAmountInput/index.tsxLength of output: 110
Script:
#!/bin/bash # Description: Check usage of selectedTokenData in the component using the correct file type # Test: Search for occurrences of selectedTokenData with 'typescriptreact' type rg --type typescriptreact 'selectedTokenData' src/components/Global/TokenAmountInput/index.tsx # Fallback: Search without specifying the file type rg 'selectedTokenData' src/components/Global/TokenAmountInput/index.tsxLength of output: 855
On all views that use the token input, now it shows a dollar sign for stablecoins
