feat/bridge-housekeeping #1422
feat/bridge-housekeeping #1422
Conversation
bigboydiamonds
requested review from
abtestingalpha,
nautsimon and
aureliusbtc
as code owners
Rate Limit Exceeded@bigboydiamonds has exceeded the limit for the number of files or commits that can be reviewed per hour. Please wait 2 minutes and 20 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, convert this PR to a draft and then mark it as ready for review again to re-trigger the review. Alternatively, you can push new commits to this PR. We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per repository. WalkthroughThis pull request introduces changes to enhance the user interface and improve the codebase's maintainability. It includes modifications to the portfolio and bridge components, addition of a new action in the bridge reducer, and updates to the test suite. The changes aim to improve the user experience, streamline the codebase, and ensure proper formatting of values. Changes
TipsChat with CodeRabbit Bot (
|
![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
Files ignored due to filter (6)
- packages/synapse-interface/assets/chains/bnb.svg
- packages/synapse-interface/assets/chains/boba.svg
- packages/synapse-interface/assets/chains/canto.svg
- packages/synapse-interface/assets/chains/dfk.svg
- packages/synapse-interface/assets/chains/ethereum.svg
- packages/synapse-interface/assets/chains/metis.svg
Files selected for processing (4)
- packages/synapse-interface/components/Portfolio/PortfolioContent/SingleNetworkPortfolio.tsx (2 hunks)
- packages/synapse-interface/components/StateManagedBridge/FromChainListOverlay.tsx (2 hunks)
- packages/synapse-interface/components/StateManagedBridge/ToChainListOverlay.tsx (2 hunks)
- packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificNetworkButton.tsx (6 hunks)
Files skipped from review due to trivial changes (2)
- packages/synapse-interface/components/Portfolio/PortfolioContent/SingleNetworkPortfolio.tsx
- packages/synapse-interface/components/StateManagedBridge/ToChainListOverlay.tsx
Additional comments (Suppressed): 10
packages/synapse-interface/components/StateManagedBridge/FromChainListOverlay.tsx (2)
- 143-156: The
isOriginprop has been added to theSelectSpecificNetworkButtoncomponent. This prop is set totruefor all chains in the list, which might not be correct if the intention is to distinguish the origin chain from other chains. Please verify this logic.- isOrigin={true} + isOrigin={fromChainId === mapChainId}
- 176-182: Similar to the previous comment, the
isOriginprop is set totruefor all chains in the list. If the intention is to distinguish the origin chain from other chains, this logic should be revised.- isOrigin={true} + isOrigin={fromChainId === mapChainId}packages/synapse-interface/components/StateManagedBridge/components/SelectSpecificNetworkButton.tsx (8)
25-34: The
isOriginprop has been added to theSelectSpecificNetworkButtoncomponent. Ensure that all instances of this component in the codebase have been updated to include this new prop.77-78: The
isOriginprop is now passed to theButtonContentcomponent. Make sure that all calls to this component have been updated accordingly.111-113: The condition for rendering
ChainTokensnow includes a check forisOrigin. This change seems to be intended to only display balance tokens if the chain is the origin chain. Verify that this is the desired behavior.123-125: Three new state variables (
isT1Hovered,isT2Hovered,isT3Hovered) have been introduced to handle hover states for individual tokens. This is a good approach for managing hover states separately for each token.127-134: These boolean variables are used to determine the number of tokens and their existence. It's a good practice to use descriptive variable names to make the code more readable and maintainable.
136-145: This block handles the case when there are no tokens, returning a dash ("-") as a placeholder. This is a good way to handle empty states in the UI.
147-212: This block handles the rendering of tokens and their balances. It uses the previously defined boolean variables to conditionally render different parts of the UI based on the number of tokens. The hover state for each token is managed individually, which allows for displaying the balance of each token on hover. This is a good approach for providing detailed information to the user in an interactive manner.
226-246: The
HoverContentcomponent has been introduced to handle the rendering of hover content. This is a good practice as it abstracts the logic for displaying hover content, making the code more modular and reusable.
Codecov ReportAll modified lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1422 +/- ##
=============================================
Coverage 50.82015% 50.82015%
=============================================
Files 356 356
Lines 24203 24203
Branches 267 267
=============================================
Hits 12300 12300
Misses 10695 10695
Partials 1208 1208
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.
Review Status
Actionable comments generated: 0
Files selected for processing (3)
- packages/synapse-interface/cypress/e2e/landing.cy.ts (1 hunks)
- packages/synapse-interface/slices/bridge/reducer.ts (2 hunks)
- packages/synapse-interface/utils/bigint/format.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- packages/synapse-interface/cypress/e2e/landing.cy.ts
- packages/synapse-interface/slices/bridge/reducer.ts
Additional comments (Suppressed): 2
packages/synapse-interface/utils/bigint/format.ts (2)
27-33: The addition of handling for values below zero is a good improvement. It ensures that the string representation of such numbers is correctly formatted with a '0' before the decimal point.
36-37: Ensure that the new logic to handle values below zero does not interfere with the existing logic to trim to the desired number of decimal places. If
strstarts with '.', the index of '.' might change after adding '0', which could affect the trimming process.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Files selected for processing (3)
- packages/synapse-interface/components/Portfolio/Portfolio.tsx (2 hunks)
- packages/synapse-interface/slices/bridge/actions.ts (1 hunks)
- packages/synapse-interface/slices/bridge/reducer.ts (4 hunks)
Files skipped from review due to trivial changes (2)
- packages/synapse-interface/slices/bridge/actions.ts
- packages/synapse-interface/slices/bridge/reducer.ts
Additional comments (Suppressed): 2
packages/synapse-interface/components/Portfolio/Portfolio.tsx (2)
30-30: The
resetBridgeInputsaction has been imported. This action resets thefromChainId,fromToken,toChainId, andtoTokenfields of the state to their initial values. This is a new addition to the code and seems to be part of the housekeeping updates mentioned in the PR summary.46-46: The
resetBridgeInputsaction is dispatched when theonDisconnectfunction is called. This ensures that the bridge inputs are reset to their initial state when the user disconnects. This is a good practice as it prevents any stale data from being left in the state after a user disconnects.
* fix: packages/explorer-ui/package.json & packages/explorer-ui/yarn.lock to reduce vulnerabilities The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-POSTCSS-5926692 * change eth rpc hotfix (#1425) * Publish - @synapsecns/[email protected] * SDK: cleanup (#1382) * yarn add ts-xor * Isolate Query types * Define Abstract Router * Implement common functions for Routers * Wrappers for SynapseRouter, SynapseCCTPRouter * Abstraction for a set of Router instances * Finding bridge routes * Add SynapseRouter-specific functions * Add router/index.ts * Constructor for new SDK class * Add pools, swaps operations to new SDK * Fix: naming * Add origin router address to BridgeRoute * Add bridge operations to SDK * Match exports with the old SDK * Nuke old SDK * Add address property to Router class * Remove ABI from Router constructor * Remove `addresses` from RouterSet constructor * Rework address map generation * Fully isolate contract interaction * Don't expose routerContract in Router class * Fix: circular dependency * Adjust synapseRouter test * Adjust CCTP router test * Fix: pass addressMap as constructor arg * Fix: pass Router constructor as argument * Basic coverage for RouterSets * Refactor constants * Add test for getBridgeTokens * Add test: getOriginQueries * Tests: getDestinationQueries * Test SDK constructor * Add ETH -> ARB bridgeQuote tests * More bridge tests * Add tests for errors * Introduce SwapQuote type * Fix: return type for `getBridgeGas()` * Add coverage for the remainder of the functions * Fix: address handling in calculateAddLiquidity * Remove deprecated code * Add coverage for deadlines * Rename new tests * Add some clarity for used classes * yarn install * add comment for vercel build * Use llama public RPCs * [DROP IN PROD] modify to local * Fix: spelling * Explicit error when Router is not present * Add coverage * Set default timeout to 30s for SDK tests * Keep the Code Rabbit happy by resolving a few issues * Revert "[DROP IN PROD] modify to local" This reverts commit 4c33414. * Revert "add comment for vercel build" This reverts commit dd9979d. * bump * Revert "bump" This reverts commit 1883649. --------- Co-authored-by: Trajan0x <[email protected]> Co-authored-by: Jonah Lin <[email protected]> * Publish - @synapsecns/[email protected] - @synapsecns/[email protected] - @synapsecns/[email protected] * cleanup stale (#1426) Co-authored-by: Trajan0x <[email protected]> * update (#1431) * Publish - @synapsecns/[email protected] * fix: lint (#1433) * Publish - @synapsecns/[email protected] * Updated charts to use v2 version of autoscaling kube API (#1428) * Updated charts to use v2 version of autoscaling kube API * Fixed explorer helm chart format * Updated config * Added port to config * Fixed hpa spec of services (#1437) * update (#1439) * Publish - @synapsecns/[email protected] * fix lint (#1441) * Publish - @synapsecns/[email protected] * Feat/input quotes (#1412) * Initialize fetchBridgeQuotes in utils, add BridgeQuoteRequest data type * Basic useBridgeQuote that continuously provides back bridge quote amount * Simple async fetchBridgeQuote function * Adjust fetchBridgeQuote function to accept synapseSDK as a param * fetchBridgeQuotes can return multiple bridge quotes via SDK in single function call * static typing * Init Bridge Updater component to allow for refreshing toTokens quotes * Bridge Updater component can access bridge quotes based on current toTokens in store * Remove test code in ToTokenListOverlay * Return token Token type in fetchBridgeQuote() call to match possibleTokens in ToTokenListOverlay * Update * Add comment * init fechAndStoreBridgeQuotes async thunk * fetchAndStoreBridgeQuotes * add fetchAndStoreBridgeQuote to use for current bridge selections * Update BridgeQuoteRequest to include originToken * ... * port getAndSetBridgeQuote logic into fetchBridgeQuote * Extend BridgeQuote type into BridgeQuoteResponse to include destinationToken to match token options by * Add typing to thunks * Add store state and reducer for fetchAndStoerBridgeQuotes * Bridge Updater to dispatch fetched bridge quotes for toTokens when avail * Update fetchBridgeQuotes to return array of objects * Pass in formatted exchangeRate string into SelectSpecificTokenButton * Add OptionDetails component that displays exchangeRate for now * Prefetch exchange rates without fromValue * Add state/reducer for fetchAndStoreBridgeQuotes status * Show exchangeRates only after fetch status is valid * Add action and reducer to resetFetchedBridgeQuotes * Reset fetched bridge quotes if fromToken is reset or is null * Reset fetched bridge quotes if no toChainId exists * calculateEstimatedTransactionTime util function * Pass in estimatedDuration prop to SelectSpecificTokenButton to populate token selection * Add comments * Add estimatedDurationInSeconds as prop in OptionDetails component, display duration in minute format * Style estimated duration in token selection * Add util function locateBestExchangeRateIndex * Add isBestExchangeRate bool prop to SelectSpecificTokenButton * ... * Create OptionTag with BestOptionType interface to create multiple options * Basic unstyled OptionTag is working * Add gradient * Style tag * Render tag only if exchangeRate available * Add destinationChainId in response for fetchBridgeQuotes * Ensure quote does not show unless destinationChainId matches, solve for case when connected chain id is default toChainId * Style OptionTag * Match bridgeQuotes based on destinationToken and not array positioning * Init getDefaultBridgeAmount util function * Create required enums to construct respective getDefaultBridgeAmount func * ... * Update locateBestExchangeRateToken to match best rate by Token * Proprogate bestExchangeRateToken changes to ToTokenListOverlay * clean * Fix NaN bug * ... * Clean * Add maxConcurrentRequests and requestDelay to limit single overload + throttle fetchBridgeQuotes call * Debounce user input in Bridge updater to prevent alternative quote fetching, initial 5000ms * updateDebouncedFromValue action * Add reducer * Lift debouncedFromValue to store * Utilize debouncedFromValue throughout bridge experience * Create orderedPossibleTokens to create ordered list based on fetched bridge quotes * Debounce 400 * Debounce 300ms * 400ms debounce works * Ensure loader activates when fromValue updates, not based on debouncedFromValue * .. * Sort Best Rate selection and place at top * Add delay on bridge loading animation * Add default case for getDefaultBridgeAmount switch statement * Ensure loader not triggered until debouncedFromValue populated * Add isLoadingExchangeRate prop to SelectSpecificTokenButton * Show loading spinner when fetching bridge quote exchange rates * ... * Update name from LoadingSpinner to LoadingDots to be more descriptive' ' ' * Update ButtonLoadingSpinner to ButtonLoadingDots * Add debouncedToTokensFromValue action and reducer * Setup debounce for alternative bridge quotes * Utilize debouncedToTokensFromValue to fetch alternate bridge quotes * Separate debouncing for primary quote and alternate quotes * Update semantic naming, add comments * Update debounce times between primary/alternative * Tweak debouncer for alternative quote * Update debounce and maxConcurrentRequests to make alternative bridge quotes more reliable * Tighten up alternative bridge quotes fetching conditions for stability * update naming * Clear quotes if user input does not exist * Allow input to be zerod * Update trigger for useEffect updating alternative bridge quotes * hasOnlyZeroes shared utils function * Add try catch around fetchBridgeQuote action * clean * clean * Example with fetching with default values * Only fetch alternative bridge quotes when user input exists and is not zero * Increase bridge qutoe fetching reliability after setting default to selections to undefined * Update loading status when fetching default exchange rates * Only show best rate if more than one option * Fix lint * .. * Disable integration tests for iniitally settting bridge origin and destination token * Test max 2 concurrent requests * Set loading to false in useEffect cleanup * Add error handling for when fetchBridgeQuote does not have request or synapseSDK avail --------- Co-authored-by: Jonah Lin <[email protected]> * Publish - @synapsecns/[email protected] * feat/bridge-housekeeping (#1422) * Add isOrigin prop to SelectSpecificNetworkButton components to determine when to display extra tokens * Propogate props * Update TokenVisualizer in FromChainList * ... * Update chain icons * Set default fromToken and toToken to null * Remove default to selections * Default originToken set to null to set to options to empty * Resolve failures * Update formatBigIntToString util function to include trailing 0 before decimal * set initial default for fromToken to null * resetBridgeInputs action * Add reducer for resetBridgeInputs * Reset bridge inputs on disconnect * Only set toToken from finite bridge machine if toChainId has been set --------- Co-authored-by: Jonah Lin <[email protected]> * Publish - @synapsecns/[email protected] * [Snyk] Security upgrade postcss from 8.4.27 to 8.4.31 (#1416) * fix: packages/synapse-interface/package.json to reduce vulnerabilities The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-POSTCSS-5926692 * Add disabled prop to FilterInput * Ensure search input is disabled until app successfully mounts * Add border opacity when not mounted --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jonah Lin <[email protected]> * yarn install * yarn install --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: aureliusbtc <[email protected]> Co-authored-by: aureliusbtc <[email protected]> Co-authored-by: χ² <[email protected]> Co-authored-by: Trajan0x <[email protected]> Co-authored-by: Jonah Lin <[email protected]> Co-authored-by: ChiTimesChi <[email protected]> Co-authored-by: Borislav Grigorov <[email protected]> Co-authored-by: jonah <[email protected]> Co-authored-by: bigboydiamonds <[email protected]>
bde251f47c9475765273e7eb77b39c134c8b844e: synapse-interface preview link
01cb01ac6ef5e564371724a055ff2c73c4ff1eef: synapse-interface preview link
2b3c9d40412b51be58e4c19d77c0786eb77349e3: synapse-interface preview link
872c94df3d6e1651971740f9ffc3d0aa3741cc08: synapse-interface preview link
Summary by CodeRabbit
New Features:
SelectSpecificNetworkButtonandChainTokenscomponents to handle hover states and display token balances.HoverContentcomponent to render token balances on hover.resetBridgeInputsaction to reset bridge inputs to their initial state.Refactor:
PortfolioTokenVisualizercomponent to be exported as a named export.FromChainListOverlayandToChainListOverlaycomponents to distinguish the origin chain from other chains.getRoutePossibilitiesfunction to remove dependencies on specific tokens and chains.Bug Fix:
formatBigIntToStringfunction.Test:
Landing (/)test suite related to the initial loading of default origin and destination tokens.3620edcef418c4970ac5e39203ab1a3d08b3165f: synapse-interface preview link
9d5a134f5ceb2994442e61fb18c3bfcbdb53f83f: synapse-interface preview link
4b77819b79df3990460942e2003dd0dbd71af412: synapse-interface preview link
60128650838ce5ef4194d4aea92308075099be72: synapse-interface preview link