feat(synapse-interface): portfolio gas tokens #2401
Conversation
bigboydiamonds
requested review from
abtestingalpha and
aureliusbtc
as code owners
WalkthroughThe recent update focuses on enhancing the portfolio interface with a special emphasis on gas tokens. It introduces a new Changes
Recent Review DetailsConfiguration used: .coderabbit.yaml Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
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 (
|
Deploying sanguine with
|
| Latest commit: |
cbfcb6c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://078328ef.sanguine.pages.dev |
| Branch Preview URL: | https://fe-portfolio-gas-tokens.sanguine.pages.dev |
Deploying sanguine-fe with
|
| Latest commit: |
cbfcb6c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b014f3d2.sanguine-fe.pages.dev |
| Branch Preview URL: | https://fe-portfolio-gas-tokens.sanguine-fe.pages.dev |
![coderabbitai[bot]](https://github.com/avatars/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: .coderabbit.yaml
Files selected for processing (5)
- packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx (2 hunks)
- packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx (4 hunks)
- packages/synapse-interface/constants/tokens/gasTokens.ts (1 hunks)
- packages/synapse-interface/constants/tokens/index.ts (4 hunks)
- packages/synapse-interface/utils/actions/fetchPortfolioBalances.tsx (2 hunks)
Additional Context Used
Additional comments not posted (22)
packages/synapse-interface/constants/tokens/gasTokens.ts (8)
11-18: TheGasTokentype definition is clear and aligns with the intended use of gas tokens within the application. It includes all necessary fields for representing a gas token.
17-17: Theiconfield in theGasTokentype is typed asany. For better type safety and to leverage TypeScript's capabilities, consider specifying a more precise type for icons, such asstringif icons are represented by URLs or paths, or a specific type if icons are React components.
33-42: The definition ofBNB_Gasas aGasTokenis correctly structured and includes all necessary details. The use ofzeroAddressfor the token address and the inclusion of an icon are appropriate.
44-53: TheMETISgas token is correctly defined. It follows the structure established by theGasTokentype and includes relevant details such as the chain ID, symbol, name, decimals, and icon.
55-64: TheNOTEgas token, representing the Canto network's native token, is correctly defined. The naming, structure, and included details are consistent with the other gas token definitions.
66-75: TheMOVRgas token for the Moonriver network is correctly defined. The structure and details provided are consistent with the expectations for aGasToken.
77-86: TheGLMRgas token for the Moonbeam network is correctly defined. The structure and details provided are consistent with the expectations for aGasToken.
88-97: TheONEgas token for the Harmony network is correctly defined. The structure and details provided are consistent with the expectations for aGasToken.packages/synapse-interface/utils/actions/fetchPortfolioBalances.tsx (3)
3-6: The addition ofGAS_TOKENSto the imports is appropriate for the purpose of integrating gas tokens into the portfolio balances fetching logic. This change enables the function to consider gas tokens alongside bridgeable tokens.
58-70: The logic for handlingcurrentChainTokenshas been updated to include gas tokens by concatenating them with bridgeable tokens and pool tokens (if available). This approach ensures that gas tokens are considered when fetching portfolio balances. The use of.concatfor merging arrays is appropriate and maintains readability.
58-70: Consider adding error handling for the case wheregetTokenBalancesfails for a specific chain. Currently, ifgetTokenBalancesthrows an error, it could cause the entirefetchPortfolioBalancesfunction to fail. Implementing a try-catch block around thegetTokenBalancescall and handling errors gracefully can improve the robustness of the function.packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx (3)
17-17: The import of theGasTokentype is correctly added to support the typing of gas tokens within theGasTokenAssetcomponent. This ensures type safety and clarity in the component's props.
30-59: TheGasTokenAssetcomponent is well-implemented, providing a clear and concise way to display gas token information. The use of destructuring for props, the rendering of the token's icon, and the display of the formatted balance and symbol are all appropriate. The component enhances the portfolio section by allowing for the distinct visualization of gas tokens.
30-59: Consider adding a tooltip or some form of description to theGasTokenAssetcomponent to provide users with more context about gas tokens, especially for users who might not be familiar with the concept. This can improve the user experience by making the portfolio section more informative.packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx (4)
22-24: The addition of imports forGAS_TOKENS,GasTokenAsset, andGasTokenis appropriate for the purpose of integrating gas token information into theSingleNetworkPortfoliocomponent. These imports enable the component to handle gas tokens distinctly from bridgeable tokens.
36-61: ThefilterOutGasTokensfunction is correctly implemented to separate gas tokens from the list of all tokens based on the chain ID. This function enhances the portfolio section by allowing for distinct handling and display of gas tokens alongside bridgeable tokens. The use of array methods such as.flatMapand.forEachfor processing tokens is appropriate and maintains code readability.
149-159: The rendering logic for gas tokens using theGasTokenAssetcomponent is correctly implemented. It ensures that gas tokens, if present, are displayed distinctly from bridgeable tokens. This approach enhances the user experience by providing a more comprehensive view of the user's assets.
149-159: Consider adding a section header or some form of visual distinction between gas tokens and bridgeable tokens when rendering them in the portfolio. This can improve the clarity and usability of the portfolio section by making it easier for users to differentiate between the two types of tokens.packages/synapse-interface/constants/tokens/index.ts (4)
4-4: The import of gas tokens from@constants/tokens/gasTokensis correctly added to support the integration of gas tokens into the token constants module. This change enables the application to handle gas tokens alongside bridgeable tokens.
9-9: The import of theGasTokeninterface from@constants/tokens/gasTokensis appropriate for ensuring type safety and clarity when working with gas tokens within this module.
78-95: ThegetGasTokensfunction is correctly implemented to retrieve gas tokens by chain. This function enhances the application's ability to process gas tokens alongside bridgeable tokens, facilitating their integration into the portfolio. The use ofObject.entriesand array methods for processing tokens is appropriate and maintains code readability.
121-121: The assignment ofGAS_TOKENSusing thegetGasTokensfunction is correctly implemented. This ensures that gas tokens are available for use throughout the application, allowing for a more comprehensive representation of a user's assets.
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: .coderabbit.yaml
Files selected for processing (2)
- packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx (4 hunks)
- packages/synapse-interface/constants/tokens/gasTokens.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx
- packages/synapse-interface/constants/tokens/gasTokens.ts
Additional Context Used
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #2401 +/- ##
===================================================
- Coverage 47.05001% 46.92864% -0.12137%
===================================================
Files 384 383 -1
Lines 29373 29189 -184
Branches 83 83
===================================================
- Hits 13820 13698 -122
+ Misses 14102 14036 -66
- Partials 1451 1455 +4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 1
Review Status
Configuration used: .coderabbit.yaml
Files selected for processing (4)
- packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx (1 hunks)
- packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx (5 hunks)
- packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx (5 hunks)
- packages/synapse-interface/constants/tokens/gasTokens.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx
- packages/synapse-interface/components/Portfolio/components/SingleNetworkPortfolio.tsx
- packages/synapse-interface/constants/tokens/gasTokens.ts
Additional Context Used
Additional comments not posted (1)
packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx (1)
13-13: Ensure theTokentype consistently definesdecimalsas a number to avoid unnecessary type assertions.
packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: .coderabbit.yaml
Files selected for processing (2)
- packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx (1 hunks)
- packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx (5 hunks)
Files skipped from review as they are similar to previous changes (2)
- packages/synapse-interface/components/Portfolio/components/GasTokenAsset.tsx
- packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx
Additional Context Used
abtestingalpha
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
Review Status
Configuration used: .coderabbit.yaml
Files selected for processing (1)
- packages/synapse-interface/components/Portfolio/components/HoverTooltip.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/synapse-interface/components/Portfolio/components/HoverTooltip.tsx
packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx
Outdated
Show resolved
Hide resolved
feat(synapse-interface): add chain native currency
…ns/sanguine into fe/portfolio-gas-tokens
fetchPortfolioBalancesfunction to catch errors thrown by a single network fetch, so we still return remainder of successfully fetched dataSummary by CodeRabbit
GasTokenAssetcomponent to display gas token information in the portfolio.GasIconcomponent for rendering gas icons.HoverTooltipcomponent.d39739942477b4e553402f39435532ad12b04d1f: synapse-interface preview link
638ea1d2e84dda34dc5e14bcbc27aa6aa0cedcde: synapse-interface preview link
ab473258d43e90cbe02b9e302926a12124a52ac0: synapse-interface preview link
aa037d6e680787740b03e6d320c8a85366b5ba81: synapse-interface preview link
ad76b84ba2ec701bc9e4f7aead0f2a7b05fd0c91: synapse-interface preview link
f48865de5a13b54020abbc0759ff3c1066bfaa78: synapse-interface preview link
3bb843aed6438f0e5d6121604b7b45b712a5e967: synapse-interface preview link
860abc9072722dd6c9d9ef21d752603e6000d9db: synapse-interface preview link
6e96a040a397f73b5c7ef66ae3962b902f67290b: synapse-interface preview link
783b5d8a932cf8336a0eedceca28d7408e20d9d5: synapse-interface preview link
2844125253cfba3ecf17faf97035800b1507876d: synapse-interface preview link
34fec38bf3bdd373c91922324c620a6af44b89bc: synapse-interface preview link
0682fd8a388f3113668bb1612e876deff7438f49: synapse-interface preview link
f73d5faf30ea5e8128c275710c0f19cf6236f312: synapse-interface preview link
ec260dd3b76775a437b25041224b00b2ac093290: synapse-interface preview link
2ac9c55f86117091ac3a879c982b38c4e13ccc10: synapse-interface preview link
9a9c1c3e2f65df28cbed3ca3c4c2888d1e1453e0: synapse-interface preview link
0e2bca1a8edce2646ba8a52e474610187e228ff9: synapse-interface preview link