Improvement on selected token from token atlas to the exchange#287
Improvement on selected token from token atlas to the exchange#287
Conversation
WalkthroughThe changes update the Changes
Sequence Diagram(s)sequenceDiagram
participant Card as SwapReceiveCard
participant Redux as Redux Store
participant Lookup as Token Lookup (searchData)
Card->>Card: Trigger useEffect
alt selectedToken available
Card->>Redux: Dispatch setReceiveToken(selectedToken properties)
else selectedToken not available
Card->>Lookup: Process searchData
alt Native token found
Lookup->>Redux: Dispatch setReceiveToken(native token)
else
Lookup->>Redux: Dispatch setReceiveToken(first token from result)
end
end
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snapis excluded by!**/*.snapsrc/apps/pillarx-app/components/PointsTile/test/__snapshots__/PointsTile.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/apps/the-exchange/components/SwapReceiveCard/SwapReceiveCard.tsx(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/apps/the-exchange/components/SwapReceiveCard/SwapReceiveCard.tsx (5)
src/apps/the-exchange/hooks/useReducerHooks.tsx (1)
useAppSelector(6-6)src/apps/token-atlas/types/types.tsx (1)
SelectedTokenType(14-22)src/apps/the-exchange/reducer/theExchangeSlice.ts (1)
setReceiveToken(71-73)src/services/tokensData.ts (2)
chainIdToChainNameTokensData(211-232)convertAPIResponseToTokens(267-404)src/types/api.ts (1)
TokenAssetResponse(491-509)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: Cloudflare Pages
🔇 Additional comments (5)
src/apps/the-exchange/components/SwapReceiveCard/SwapReceiveCard.tsx (5)
8-8: LGTM: Import for chainIdToChainNameTokensData added correctly.The import statement correctly adds the utility function needed for mapping chain IDs to chain names, which supports the new token selection logic.
23-24: LGTM: Required type imports added.The imports for TokenAssetResponse and SelectedTokenType are correctly added to support the updated token selection mechanism.
44-46: LGTM: Added new Redux state selector for selectedToken.This selector correctly retrieves the token selected in the token-atlas component, enabling improved token selection flow in the exchange.
68-80: LGTM: Improved token selection logic.The new logic prioritizes using the selected token from the token atlas when available, which improves the user experience when selecting tokens. The code correctly maps the selected token's properties to the required format for the receive token.
81-99: LGTM: Fallback logic retained correctly.The fallback to the original token search behavior is maintained when no selected token is available, ensuring backward compatibility.
| if (asset && chain && selectedToken) { | ||
| dispatch( | ||
| setReceiveToken({ | ||
| id: selectedToken?.id || 0, | ||
| name: selectedToken?.name || '', | ||
| symbol: selectedToken?.symbol || '', | ||
| logo: selectedToken?.icon || '', | ||
| blockchain: | ||
| chainIdToChainNameTokensData(selectedToken?.chainId) || '', | ||
| contract: selectedToken?.address || '', | ||
| decimals: selectedToken?.decimals || 18, | ||
| }) | ||
| ); | ||
| } else { | ||
| dispatch(setReceiveToken(result[0])); | ||
| if (!searchData) return; | ||
|
|
||
| const result = convertAPIResponseToTokens( | ||
| searchData?.result?.data as TokenAssetResponse[], | ||
| asset || '' | ||
| ); | ||
|
|
||
| // if it is considered a native token, Token Atlas would have handled the request | ||
| // with showing the asset as a symbol rather than an contract address | ||
| const nativeToken = result.filter( | ||
| (token) => token.blockchain === chain && token.symbol === asset | ||
| ); | ||
|
|
||
| if (nativeToken.length > 0) { | ||
| dispatch(setReceiveToken(nativeToken[0])); | ||
| } else { | ||
| dispatch(setReceiveToken(result[0])); | ||
| } | ||
| } |
There was a problem hiding this comment.
Update useEffect dependency array to include all dependencies.
The useEffect hook now uses chain and selectedToken in its logic, but they're missing from the dependency array. This could cause the effect not to run when these values change.
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [asset, searchData]);
+ }, [asset, chain, selectedToken, searchData, dispatch]);Additionally, since you're using the ESLint disable comment, you might want to be explicit about which dependencies you're intentionally excluding, if any.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (asset && chain && selectedToken) { | |
| dispatch( | |
| setReceiveToken({ | |
| id: selectedToken?.id || 0, | |
| name: selectedToken?.name || '', | |
| symbol: selectedToken?.symbol || '', | |
| logo: selectedToken?.icon || '', | |
| blockchain: | |
| chainIdToChainNameTokensData(selectedToken?.chainId) || '', | |
| contract: selectedToken?.address || '', | |
| decimals: selectedToken?.decimals || 18, | |
| }) | |
| ); | |
| } else { | |
| dispatch(setReceiveToken(result[0])); | |
| if (!searchData) return; | |
| const result = convertAPIResponseToTokens( | |
| searchData?.result?.data as TokenAssetResponse[], | |
| asset || '' | |
| ); | |
| // if it is considered a native token, Token Atlas would have handled the request | |
| // with showing the asset as a symbol rather than an contract address | |
| const nativeToken = result.filter( | |
| (token) => token.blockchain === chain && token.symbol === asset | |
| ); | |
| if (nativeToken.length > 0) { | |
| dispatch(setReceiveToken(nativeToken[0])); | |
| } else { | |
| dispatch(setReceiveToken(result[0])); | |
| } | |
| } | |
| useEffect(() => { | |
| if (asset && chain && selectedToken) { | |
| dispatch( | |
| setReceiveToken({ | |
| id: selectedToken?.id || 0, | |
| name: selectedToken?.name || '', | |
| symbol: selectedToken?.symbol || '', | |
| logo: selectedToken?.icon || '', | |
| blockchain: | |
| chainIdToChainNameTokensData(selectedToken?.chainId) || '', | |
| contract: selectedToken?.address || '', | |
| decimals: selectedToken?.decimals || 18, | |
| }) | |
| ); | |
| } else { | |
| if (!searchData) return; | |
| const result = convertAPIResponseToTokens( | |
| searchData?.result?.data as TokenAssetResponse[], | |
| asset || '' | |
| ); | |
| // if it is considered a native token, Token Atlas would have handled the request | |
| // with showing the asset as a symbol rather than an contract address | |
| const nativeToken = result.filter( | |
| (token) => token.blockchain === chain && token.symbol === asset | |
| ); | |
| if (nativeToken.length > 0) { | |
| dispatch(setReceiveToken(nativeToken[0])); | |
| } else { | |
| dispatch(setReceiveToken(result[0])); | |
| } | |
| } | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, [asset, chain, selectedToken, searchData, dispatch]); |
Deploying x with
|
| Latest commit: |
02e588a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c1f7c377.x-e62.pages.dev |
| Branch Preview URL: | https://fix-pro-3190-hifi-endpoint-r.x-e62.pages.dev |
2 participants
Description
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Summary by CodeRabbit