feat: improve token logos, fallbacks, improve code #59
Conversation
WalkthroughThe recent changes across various files focus on enhancing token icon handling and improving the rendering of transaction details. The updates include removing redundant imports, introducing a new Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant User
participant TokenSelector
participant TokenIcon
participant TransactionCard
participant Header
User->>TokenSelector: Select Token
TokenSelector->>TokenIcon: Fetch Token Icon
TokenIcon-->>TokenSelector: Return Token Icon
TokenSelector-->>User: Display Token Icon
User->>TransactionCard: View Transaction Details
TransactionCard->>TokenSelector: Get Token Info
TokenSelector-->>TransactionCard: Return Token Info
TransactionCard->>Header: Display Transaction with Token Symbol
Header-->>User: Show Transaction Details
Poem
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
✅ Deploy Preview for kleros-escrow-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-escrow-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
Files ignored due to path filters (12)
web/src/assets/svgs/icons/eth-token-icon.pngis excluded by!**/*.pngweb/src/assets/svgs/icons/tokens/arb.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/dai.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/eth.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/gno.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/matic.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/op.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/pnk.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/unknown.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/usdc.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/usdt.svgis excluded by!**/*.svgweb/src/assets/svgs/icons/tokens/weth.svgis excluded by!**/*.svg
Files selected for processing (7)
- web/src/hooks/useFilteredTokens.ts (2 hunks)
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/DropdownButton.tsx (3 hunks)
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx (1 hunks)
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/index.tsx (3 hunks)
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx (1 hunks)
- web/src/utils/fetchNativeToken.ts (1 hunks)
- web/src/utils/fetchTokenInfo.ts (1 hunks)
Files skipped from review due to trivial changes (3)
- web/src/hooks/useFilteredTokens.ts
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/index.tsx
- web/src/utils/fetchNativeToken.ts
Additional context used
Biome
web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx
[error] 31-31: This hook does not specify all of its dependencies: alchemyInstance (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
[error] 31-31: This hook does not specify all of its dependencies: setTokens (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
Additional comments not posted (5)
web/src/utils/fetchTokenInfo.ts (2)
8-9: LGTM! Using token metadata directly forsymbolandlogoproperties enhances data consistency.
13-13: Excellent change to log errors instead of returning default values. This improves error transparency and debugging.web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/DropdownButton.tsx (1)
4-4: The integration of theTokenIconcomponent enhances the UI by dynamically displaying token icons. Good job on this refactor!Also applies to: 48-58
web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenItem/TokenIcon.tsx (1)
1-57: The newTokenIconcomponent is well-implemented with a clear structure for handling various token icons dynamically. This should greatly improve the flexibility and maintainability of the token display logic.web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx (1)
33-33: Proactive removal of tokens from local storage ensures clean state management. Good practice!
...pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx
Show resolved
Hide resolved
update dependencies of useeffect hook Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- web/src/components/TransactionCard/index.tsx (3 hunks)
- web/src/pages/MyTransactions/Modal/PaymentReleased/Header.tsx (2 hunks)
- web/src/pages/MyTransactions/TransactionDetails/index.tsx (3 hunks)
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx
Additional context used
Biome
web/src/pages/MyTransactions/TransactionDetails/index.tsx
[error] 59-59: This hook does not specify all of its dependencies: assetSymbol (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
[error] 59-59: This hook specifies more dependencies than necessary: erc20TokenSymbol, nativeTokenSymbol, token (lint/correctness/useExhaustiveDependencies)
This dependency can be removed from the list.
This dependency can be removed from the list.
This dependency can be removed from the list.
Additional comments not posted (2)
web/src/pages/MyTransactions/Modal/PaymentReleased/Header.tsx (1)
13-17: LGTM! The usage ofassetSymbolfrom the context is a good practice for dynamic content rendering.web/src/components/TransactionCard/index.tsx (1)
75-75: LGTM! The dynamic handling ofassetSymbolis implemented consistently across the component.Also applies to: 94-94, 115-115
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- web/src/pages/MyTransactions/TransactionDetails/index.tsx (3 hunks)
- web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- web/src/pages/MyTransactions/TransactionDetails/index.tsx
Additional context used
Biome
web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx
[error] 33-33: This hook does not specify all of its dependencies: setTokens (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
Additional comments not posted (2)
web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx (2)
38-38: The dependencies for this useEffect are correctly specified.
35-35: Ensure removal of "tokens" from localStorage is intentional and secure.
...pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/index.tsx
Show resolved
Hide resolved
PR-Codex overview
This PR removes the dependency on
EthTokenIconin various components, updates token icons, and refactors token logo rendering.Detailed summary
EthTokenIcondependency from multiple fileseth.svg,usdt.svg,pnk.svg, anddai.svgTokenItem/index.tsxandDropdownButton.tsxSummary by CodeRabbit
New Features
TokenIconcomponent for dynamic token icon rendering based on the token symbol.Refactor
TokenIconcomponent, replacing the oldTokenLogostyled image.assetSymbolin transaction-related components for better clarity and consistency.Chores