feat(synapse-interface): update button states #2214
Conversation
bigboydiamonds
requested review from
abtestingalpha and
aureliusbtc
as code owners
WalkthroughThe updates aim to enhance user interface components in a software package by refining button behavior, improving numeric display through trimming trailing zeroes, and streamlining imports. These changes focus on enhancing readability, consistency, and user experience across various components like pools, portfolios, transactions, and staking interfaces. Changes
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #2214 +/- ##
===================================================
- Coverage 47.98060% 47.84792% -0.13269%
===================================================
Files 364 360 -4
Lines 27013 26881 -132
Branches 83 83
===================================================
- Hits 12961 12862 -99
+ Misses 12709 12680 -29
+ Partials 1343 1339 -4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Deploying with
|
| Latest commit: |
7f00fbd
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5a340ded.sanguine.pages.dev |
| Branch Preview URL: | https://fe-button-states.sanguine.pages.dev |
bigboydiamonds
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: .coderabbit.yaml
Files selected for processing (7)
- packages/synapse-interface/components/Pools/PoolActionOptions.tsx (2 hunks)
- packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx (2 hunks)
- packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx (1 hunks)
- packages/synapse-interface/components/StateManagedSwap/SwapTransactionButton.tsx (2 hunks)
- packages/synapse-interface/pages/pool/poolManagement/WithdrawButton.tsx (2 hunks)
- packages/synapse-interface/pages/stake/StakeCard.tsx (8 hunks)
- packages/synapse-interface/pages/swap/index.tsx (3 hunks)
Files skipped from review due to trivial changes (1)
- packages/synapse-interface/components/Pools/PoolActionOptions.tsx
Additional comments: 12
packages/synapse-interface/components/Portfolio/components/PortfolioTokenAsset.tsx (2)
- 16-16: The import of
trimTrailingZeroesAfterDecimalis correctly added to enhance the precision of displayed values by trimming trailing zeroes after decimal points. This aligns with the PR objectives to improve user experience.- 54-58: The usage of
trimTrailingZeroesAfterDecimalwithin theupdateFromValuedispatch call is a good practice. It ensures that the displayed values in thePortfolioTokenAssetcomponent are formatted without unnecessary trailing zeroes, enhancing readability and precision. This change is consistent with the PR's goal to improve the user interface.packages/synapse-interface/pages/pool/poolManagement/WithdrawButton.tsx (2)
- 40-42: The addition of
isValidInputandisValidQuoteconditions to determine the button's enabled state is a significant improvement. It ensures that the button is only enabled when the input is valid, the quote is valid, and the balance is sufficient. This change enhances the user experience by preventing invalid or incomplete transactions.- 33-49: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [46-71]
The logic for setting
buttonPropertiesbased on various conditions (e.g., insufficient balance, loading state, wallet connection, chain mismatch, and approval status) is well-structured and comprehensive. It covers a wide range of scenarios that users might encounter, ensuring that the button's label and behavior are appropriate for each situation. This contributes to a more intuitive and responsive interface.packages/synapse-interface/components/StateManagedSwap/SwapTransactionButton.tsx (2)
- 57-60: The updated conditions for disabling the
SwapTransactionButtonare comprehensive, consideringisLoading,isApproved,isConnected,sufficientBalance, and the validity ofswapQuote. This ensures that the button is only enabled when all necessary prerequisites for a swap transaction are met, enhancing the user experience by preventing invalid operations.- 104-109: The logic for setting
buttonPropertiesbased on the approval status, loading state, and the presence of a valid quote is well-implemented. It provides clear feedback to the user about the action required (e.g., approving the token, executing the swap) and ensures that the button's behavior is consistent with the current state of the swap transaction. This contributes to a more intuitive and responsive interface for swapping operations.packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx (1)
- 146-146: The addition of a condition to check for
isApproved,fromValueBigInt > 0, andbridgeQuote?.destQuerybefore settingbuttonPropertiesis a thoughtful enhancement. It ensures that the button for approving the bridge transaction is only enabled when the user has a non-zero value to bridge, the transaction is approved, and there is a destination query available. This change makes the bridge functionality more robust and user-friendly by preventing incomplete or invalid transactions.packages/synapse-interface/pages/stake/StakeCard.tsx (3)
- 22-23: The addition of
InteractiveInputRowButtonandtrimTrailingZeroesAfterDecimalimports is correctly done to support the updated functionality in theStakeCardcomponent. These changes are in line with the PR's objectives to enhance the precision of displayed values and improve the user interface.- 146-154: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [136-166]
Replacing direct usage of
formatBigIntToStringwithtrimTrailingZeroesAfterDecimalfor displaying balances and rewards is a significant improvement. It ensures that the displayed values are formatted without unnecessary trailing zeroes, enhancing readability and precision. This change aligns with the PR's goal to make the interface more user-friendly by improving the accuracy and usability of displayed information.
- 265-294: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [172-372]
The updated logic for enabling/disabling buttons based on balance and reward values is well-implemented. It ensures that actions such as claiming rewards, staking, and unstaking are only available when appropriate, preventing users from attempting invalid operations. This contributes to a more intuitive and responsive interface for staking functionalities.
packages/synapse-interface/pages/swap/index.tsx (2)
- 1-1: The removal of the
useNetworkimport fromwagmiis a good decision if thechainvariable is no longer used in this file. This change streamlines the codebase by eliminating unnecessary imports, contributing to the PR's objective of improving maintainability.- 45-45: The adjustment in the import of constants, specifically the inclusion of
EMPTY_SWAP_QUOTE_ZEROfrom@/constants/swap, is appropriate given the context of the changes made in this file. It ensures that the necessary constants are available for use in the swap functionality, aligning with the PR's goal to enhance user interaction and interface responsiveness.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: .coderabbit.yaml
Files selected for processing (1)
- packages/synapse-interface/pages/stake/StakeCard.tsx (8 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/synapse-interface/pages/stake/StakeCard.tsx
Description
Improve UX button states across Bridge, Swap, Pools, Stake flows
0af5d34fcff07e194d386a001c00ddb6a1e6c999: synapse-interface preview link
220555359708c26404b785fea8ae0d56628c8db3: synapse-interface preview link
dbf5fe00dd5b75284abe657f7fa39d052d3ba6e7: synapse-interface preview link
28719a3bfe06769ed915edb7465e04fd5b79a798: synapse-interface preview link
62889d79c452bc0d44c9a0741ce25ac70da53aa7: synapse-interface preview link
eabf49c8c86ca1af118deb74d774c3109d68bf9c: synapse-interface preview link
c277479c03e7c224bd80cd3f568a5283eb27a6f7: synapse-interface preview link
a3634a2c9d606feb830f0b13a2bc7ada2083bf98: synapse-interface preview link
8a8943dfcc4d2aeda19b00d59639d424db11dd6e: synapse-interface preview link
e40f098ffa079dd353cf56927657c0b971f04061: synapse-interface preview link
c6b9d9c52323b82c634962f0a6576a1bc093b97e: synapse-interface preview link
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
239744517ca488faa6c8e7de54a679cfeaabf4db: synapse-interface preview link