FE Release 03-27-2024 #2370
Merged
FE Release 03-27-2024 #2370
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Init * Basic Address Input * Detect if input is valid address * Click on Input to trigger warning * DestinationInputWarning to handle accept/reject warning * Hide placeholder when input is active * Input display when input address valid * Input width * DestinationInputWarning state * Warning accept/reject callback * DestinationInputWarning to take up entire output container * Style Warning * Focus on Input after accepting warning terms * showDestinationWarning state in bridge display to track if user already accepted warning for session * Input border red signalling invalid input when activated * Improve isEmptyString * SwitchButton takes priority over OutputContainer in visual layer * Clear Input button * Style and format clear button for smooth input clearing * Style Close Button * Clean * filterTransactionsByRecipient * Calculate days ago a recipient tx was executed * filterNewestTxByRecipient * Display list of recipient addresses when input is focused * Style Receipient dropdown list * Destination address settable from dropdown list * Close dropdown after selecting new destination address from list * Disable Input if wallet unconnected * Hover text on Input * Input html states, styling * Remove previous dest address settings state + component * Optimize OutputContianer address prop passed into DestinationAddressInput, remove previous component * Clean Bridge imports * Style Input * Replace useSelector with hook * clearDestinationAddress on Bridge Page load * Clean up Bridge reducer to not require actions file for better imports * Rm file * Maintain inputted destination address after bridge tx executes * Clear destination address by setting to null, clear input * Fix errors in BridgeTransactionButton * User inputted empty string throws error in input * Clean * Update text error state * Clean callbacks to make clear input flow clearer * Clean * Fix console errors * Clean * Add hover on warning buttnos * . * Refactor; clean functions * Use destination address as key * Style address dropdown * Rm log * Clean * Keep inputRef local * Add To * Dynamically set Input width * Adjust spacing for filled input * Dynamic input width including placeholder * Increase input width when focused * Remove shift when x button appears * Max width for input to fit on mobile * Clean * Basic Confirm Warning * Connect ConfirmWarning to store * Allow Warning text to be clickable * Style: BridgeTransactionButton Warning * Add setIsDestinationWarningAccepted to state to track status * Show Confirm warning button when warning not yet accepted + tracked in state * Conditions for showing Destination Address in Bridge Receipt * Remove prior destination warning popup * BridgeWarnings * Conditions to show Warning * Conditions to hide Destination Address Input * Simplify * Update button color for Confirm destination address * Use default text size for dropdown * Ensure blur from input on handleInputBlur * Ensure blur from input on handleInputBlur * .. * Add paste functionality * Conditions to show paste button * Add key press up/down direction for navigating list * Add pressing enter key functionality to select Address from list * Reset list idx onClose * Clean * Prevent input blur when mouseDown on ListReceipient item * Blur after selecting address from list * Update input ref to useRef * Fix merge imports * Make input smaller * Unconnected input padding * Remove shift when input is valid address * Add back SettingsSlideOver * Add back settings toggled page * Show destination address input when toggled on from Settings * Clean SettingsSlideOver * Clean * Remove Pink highlight on Input * Increase spacing between address and days ago * Increase width of input, limit for mobile * Remove yellow text in Warning * Only show Destination Address in Receipt if valid * Clear input if invalid and exists * Adjust dropdown spacing * Minor adjustments * Blur input after clearing * Enter button can submit input text for validation * Paste icon sizing * Show dest address for unconnected user if inputted * Hide destination address input on page load between page switch * Hide Bridge Warning if destination address is turned off * Ensure bridge listener clears destination address if destination input setting turned off * Remove unused code * Fix enter bug when wallet disconnected * Update dispatch value * Update to proper action to dispatch * Add back segment given we are using settings * Lint * Remove side effect to clear dest address * Origin token copy --------- Co-authored-by: abtestingalpha <abtestingalpha@gmail.com>
* Update maintenance for Blast * Update for Blast pause messaging * Unpause blast * Merge
bigboydiamonds
requested review from
abtestingalpha and
aureliusbtc
as code owners
WalkthroughThe recent updates to the 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 (
|
Deploying sanguine-fe with
|
| Latest commit: |
2e5eb98
|
| Status: | ⚡️ Build in progress... |
![coderabbitai[bot]](https://github.com/avatars/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: .coderabbit.yaml
Files selected for processing (23)
- packages/synapse-interface/CHANGELOG.md (1 hunks)
- packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx (1 hunks)
- packages/synapse-interface/components/Portfolio/Portfolio.tsx (1 hunks)
- packages/synapse-interface/components/StateManagedBridge/BridgeExchangeRateInfo.tsx (2 hunks)
- packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx (6 hunks)
- packages/synapse-interface/components/StateManagedBridge/BridgeWarnings.tsx (1 hunks)
- packages/synapse-interface/components/StateManagedBridge/DestinationAddressInput.tsx (1 hunks)
- packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (3 hunks)
- packages/synapse-interface/components/StateManagedBridge/SettingsSlideOver.tsx (5 hunks)
- packages/synapse-interface/components/StateManagedBridge/components/CloseButton.tsx (1 hunks)
- packages/synapse-interface/components/buttons/SwitchButton.tsx (1 hunks)
- packages/synapse-interface/components/ui/tailwind/Tooltip.tsx (1 hunks)
- packages/synapse-interface/constants/chains/master.tsx (2 hunks)
- packages/synapse-interface/package.json (1 hunks)
- packages/synapse-interface/pages/index.tsx (2 hunks)
- packages/synapse-interface/pages/state-managed-bridge/index.tsx (5 hunks)
- packages/synapse-interface/public/blacklist.json (1 hunks)
- packages/synapse-interface/slices/bridge/hooks.ts (1 hunks)
- packages/synapse-interface/slices/bridge/reducer.ts (4 hunks)
- packages/synapse-interface/slices/bridgeDisplaySlice.ts (4 hunks)
- packages/synapse-interface/utils/hooks/useAlternateBridgeQuotes.ts (1 hunks)
- packages/synapse-interface/utils/hooks/useBridgeListener.ts (1 hunks)
- packages/synapse-interface/utils/isEmptyString.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- packages/synapse-interface/CHANGELOG.md
- packages/synapse-interface/package.json
Additional comments: 35
packages/synapse-interface/utils/isEmptyString.ts (1)
- 2-2: The modification to
isEmptyStringto returnfalsefor any falsy input (not just an empty string) changes its behavior significantly. Ensure that all usages of this function across the codebase are reviewed to confirm that this broader falsy check does not introduce unintended side effects.packages/synapse-interface/components/StateManagedBridge/components/CloseButton.tsx (1)
- 3-16: The addition of an optional
classNameprop to theCloseButtoncomponent is a good enhancement for custom styling flexibility. Ensure that any dynamic class names passed to this prop are properly sanitized, especially if they can be influenced by user input, to prevent CSS injection vulnerabilities.packages/synapse-interface/slices/bridge/hooks.ts (1)
- 16-18: The addition of the
useBridgeDisplayStatehook is a good practice for accessing specific slices of the Redux state in a reusable manner. Ensure that thebridgeDisplaystate slice is properly initialized and managed within the Redux store to avoid any undefined or unexpected behaviors.packages/synapse-interface/pages/index.tsx (1)
- 4-9: > 📝 NOTE
This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [1-1]
The removal of the
AnnouncementBannercomponent from theHomecomponent appears to be a UI/UX improvement or cleanup. Ensure that any related state, props, or styles that were exclusively used by theAnnouncementBannercomponent are also removed to avoid leaving dead code in the project.packages/synapse-interface/components/buttons/SwitchButton.tsx (1)
- 15-15: The addition of
relative z-10classes to theSwitchButtoncomponent for positioning and stacking is noted. Ensure to verify the visual impact of these changes in different contexts and screen sizes to prevent any unintended visual regressions or conflicts with other components.packages/synapse-interface/utils/hooks/useBridgeListener.ts (1)
- 11-11: The reorganization of imports related to the bridge reducer and actions within the
useBridgeListenerhook improves maintainability and readability. Ensure to double-check that all necessary actions and reducers are still correctly imported and accessible after this consolidation to avoid any unintended reference errors.packages/synapse-interface/components/ui/tailwind/Tooltip.tsx (1)
- 20-20: Changing the
placementof the tooltip from'bottom'to'top'is noted. Ensure to verify the visual impact and usability of this change in different contexts and screen sizes to prevent any visual issues or overlap with other UI elements.packages/synapse-interface/components/StateManagedBridge/BridgeWarnings.tsx (1)
- 5-49: The introduction of the
ConfirmDestinationAddressWarningcomponent is a valuable addition for enhancing user safety and interaction. Ensure to verify the user experience and the integration of this component with the rest of the application, particularly in how it interacts with theshowDestinationWarningandshowDestinationAddressstate variables. Testing in various scenarios to confirm that the warning behaves as expected is crucial.packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx (3)
- 4-4: The import of
useBridgeDisplayStateis added, which aligns with the refactoring effort to streamline state management. Ensure that the new hook is properly utilized within the component for managing display-related state.- 9-11: The usage of
useBridgeDisplayStateto determine the visibility of theDestinationAddressInputcomponent is a good application of the newly introduced state management hook. This approach enhances modularity and readability.- 18-20: The conditional rendering based on
showDestinationAddressis a clean way to manage the UI components' visibility. This change likely improves the user experience by dynamically showing or hiding the destination address input based on the application state.packages/synapse-interface/utils/hooks/useAlternateBridgeQuotes.ts (1)
- 10-10: Consolidating imports from the
reducermodule into a single line is a good practice for maintaining cleaner and more organized code. This change likely contributes to improved readability and maintainability.packages/synapse-interface/slices/bridgeDisplaySlice.ts (2)
- 8-9: Adding
showDestinationWarningandisDestinationWarningAcceptedto theBridgeStateinterface is a clear way to manage new UI states related to destination address warnings. This addition supports the feature of showing warnings and tracking user acceptance.- 41-49: The implementation of reducers
setShowDestinationWarningandsetIsDestinationWarningAcceptedis correctly done to manage the state of destination address warnings. This approach allows for a modular way to update the application state based on user interactions.packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx (1)
- 23-23: Updating the
MAINTENANCE_END_DATEconstant to a new date value is a straightforward change. Ensure that this new date accurately reflects the intended end date for the maintenance event.packages/synapse-interface/components/StateManagedBridge/SettingsSlideOver.tsx (3)
- 3-3: Replacing
useDispatchwithuseAppDispatchand introducinguseBridgeDisplayStatealigns with the effort to utilize custom hooks for state management and dispatch actions. This change likely enhances consistency and type safety across the application.- 22-28: Converting
onCloseandescFuncto arrow functions is a stylistic change that improves consistency with modern JavaScript practices. This also enhances readability by making the functions concise.- 60-60: Triggering
onClosewhen theSwitchcomponent is selected is a good UX improvement. It ensures that the settings overlay closes immediately after the user makes a selection, providing a smoother interaction flow.packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx (2)
- 12-12: The addition of
useBridgeDisplayStateanduseAppDispatchimports supports the new functionality related to destination address warnings. This change aligns with the application's state management strategy.- 141-146: The updated button properties logic to handle destination warning confirmation is a significant improvement. It ensures that users must confirm the destination address warning before proceeding, enhancing the application's security and user experience.
packages/synapse-interface/components/Portfolio/Portfolio.tsx (1)
- 24-24: Consolidating imports from the
reducermodule into a single line is a good practice for maintaining cleaner and more organized code. This change likely contributes to improved readability and maintainability.packages/synapse-interface/components/StateManagedBridge/BridgeExchangeRateInfo.tsx (2)
- 14-14: The addition of
getValidAddressandisValidAddressutility functions is a crucial update for handling address validation. Ensure these functions are thoroughly tested to prevent any issues with address validation logic.- 37-57: Introducing the
DestinationAddresscomponent to display the destination address if it is valid and different from the user's address is a thoughtful UX improvement. This change enhances transparency by clearly showing the destination address to the user.packages/synapse-interface/constants/chains/master.tsx (2)
- 403-403: The update of the
chainSymbolfor theBASEchain from 'ETH' to 'BASE' is appropriate and aligns with the objective of accurately representing chain identities.- 428-428: The update of the
chainSymbolfor theBLASTchain from 'ETH' to 'BLAST' enhances clarity and consistency, accurately reflecting the chain's identity.packages/synapse-interface/components/StateManagedBridge/DestinationAddressInput.tsx (1)
- 1-432: Significant updates have been made to the
DestinationAddressInputcomponent, including the introduction of new state management hooks, refactoring of address validation logic, handling recipient lists, and improving user interaction. These changes enhance the component's functionality and user experience. Ensure thorough testing, especially for the new logic around recipient list handling and address validation, to maintain robustness and reliability.Consider adding unit tests or integration tests to cover the new functionality and changes, ensuring the component behaves as expected under various scenarios.
packages/synapse-interface/slices/bridge/reducer.ts (3)
- 447-455: The addition of actions for updating debounced values (
updateDebouncedFromValueandupdateDebouncedToTokensFromValue) is a good practice for handling asynchronous input changes efficiently. This enhances the user experience by reducing unnecessary re-renders and API calls.- 462-464: The introduction of the
clearDestinationAddressaction is a useful addition for resetting the destination address state. This action enhances the reducer's functionality by providing a clear way to reset part of the state when necessary.- 509-517: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [500-514]
The reorganization of action exports at the bottom of the file improves readability and maintainability. Grouping related actions together and ordering them logically makes it easier for developers to understand the available actions and their purposes.
packages/synapse-interface/pages/state-managed-bridge/index.tsx (6)
- 30-89: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [1-72]
The imports have been updated to include new utilities, components, and hooks. Ensure that all newly imported entities are used within the file and that there are no unused imports to maintain code cleanliness.
- 94-116: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [84-113]
The initialization of state and dispatch hooks at the beginning of the component is standard practice. However, the useEffect hook used to clear the destination address and hide the destination address warning on component load is a good practice for resetting state, ensuring a clean state for each new user interaction.
- 109-113: The use of
useEffectto clear the destination address and hide its warning on component load is a good practice. It ensures that any previous state is reset when the component is reloaded or revisited, enhancing the user experience by avoiding confusion from lingering states.- 109-113: The initialization of the component's state within a
useEffecthook to clear the destination address and set the show destination address state to false is a good practice. It ensures that the component starts with a clean state every time it is loaded, which is crucial for maintaining a predictable and user-friendly interface.- 605-605: The comment regarding making the warning reusable is a valuable insight. It suggests an opportunity for refactoring to enhance code reusability and maintainability. Consider abstracting the warning into a more generic component that can be configured with props to handle different scenarios.
Consider refactoring the
ConfirmDestinationAddressWarningto be a reusable component that can accept props to customize the warning message and actions. This would increase the component's utility across the application.
- 604-606: The addition of the
ConfirmDestinationAddressWarningcomponent directly within the JSX structure is a straightforward way to integrate new UI elements. However, ensure that its visibility and behavior are controlled based on the application's state to provide a seamless user experience.
Comment on lines
+435
to
+437
| "0xc207fa4b17ca710ba53f06feff56ca9d315915b7", | ||
| "0x9746d0962f46b175a23e7f7787b061f1417627de", | ||
| "0xc51d9da0ae8cfa5fb6ff52af84c5deaee453b80d" |
There was a problem hiding this comment.
Tip
Codebase Verification
The script execution confirmed the presence of duplicate addresses in the blacklist.json file. This finding validates the review comment's concern about ensuring there are no duplicates across the entire blacklist to maintain its integrity. The duplicates identified need to be addressed to ensure the blacklist functions as intended.
Analysis chain
The addition of the three new addresses to the blacklist appears correctly formatted and consistent with the existing entries. However, it's crucial to ensure there are no duplicates across the entire blacklist to maintain its integrity.
If the script outputs any addresses, those are duplicates that need to be addressed.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for duplicate addresses in the blacklist.json
jq '.[]' packages/synapse-interface/public/blacklist.json | sort | uniq -d
Length of output: 571
| import { approveToken } from '@/utils/approveToken' | ||
| import { AcceptedChainId, CHAINS_BY_ID } from '@/constants/chains' | ||
| import { EMPTY_BRIDGE_QUOTE_ZERO } from '@/constants/bridge' | ||
| import { ConfirmDestinationAddressWarning } from '@/components/StateManagedBridge/BridgeWarnings' |
There was a problem hiding this comment.
The introduction of the ConfirmDestinationAddressWarning component is a significant addition. It's important to ensure that this component is properly integrated with the rest of the application, particularly in terms of state management and user interaction. Consider adding unit tests to verify its behavior in various scenarios.
Would you like me to help with creating unit tests for the ConfirmDestinationAddressWarning component?
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: .coderabbit.yaml
Files selected for processing (2)
- packages/synapse-interface/CHANGELOG.md (1 hunks)
- packages/synapse-interface/package.json (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/synapse-interface/CHANGELOG.md
Additional comments: 1
packages/synapse-interface/package.json (1)
- 3-3: The version update from
0.12.3to0.14.0is noted and aligns with the introduction of new features and optimizations as described. Ensure thorough testing of the new features and any refactored code to maintain compatibility and stability across the application.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
chainSymbolproperty for specific chains to reflect correct values.Documentation
CHANGELOG.mdwith version changes and a notable feature addition.Refactor
Style
SwitchButtoncomponent with new class additions.Chores
0.12.3to0.14.0.dcdacaa5a7d3ccc5918057714e0014276b35aabc: synapse-interface preview link