feat(synapse-interface): confirm new price [SLT-150] #3084
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import { useState, useEffect, useMemo } from 'react' | ||
|
|
||
| import { BridgeQuote } from '@/utils/types' | ||
| import { convertMsToSeconds } from '@/utils/time' | ||
|
|
||
| export const BridgeQuoteResetTimer = ({ | ||
| bridgeQuote, | ||
| isLoading, | ||
| isActive, | ||
| duration, // in ms | ||
| }: { | ||
| bridgeQuote: BridgeQuote | ||
| isLoading: boolean | ||
| isActive: boolean | ||
| duration: number | ||
| }) => { | ||
| const memoizedTimer = useMemo(() => { | ||
| if (!isActive) return null | ||
|
|
||
| if (isLoading) { | ||
| return <AnimatedLoadingCircle /> | ||
| } else { | ||
| return ( | ||
| <AnimatedProgressCircle | ||
| animateKey={bridgeQuote.id} | ||
| duration={duration} | ||
| /> | ||
| ) | ||
| } | ||
| }, [bridgeQuote, duration, isActive]) | ||
|
|
||
| return memoizedTimer | ||
| } | ||
|
|
||
| const AnimatedLoadingCircle = () => { | ||
| return ( | ||
| <svg | ||
| width="24" | ||
| height="24" | ||
| viewBox="-12 -12 24 24" | ||
| stroke="currentcolor" | ||
| fill="none" | ||
| className="absolute block -rotate-90" | ||
| > | ||
| <circle r="8" pathLength="1" stroke-dashArray="0.05" stroke-opacity=".5"> | ||
| <animate | ||
| attributeName="stroke-dashoffset" | ||
| to="-1" | ||
| dur="2.5s" | ||
| repeatCount="indefinite" | ||
| /> | ||
| </circle> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| const AnimatedProgressCircle = ({ | ||
| animateKey, | ||
| duration, | ||
| }: { | ||
| animateKey: string | ||
| duration: number | ||
| }) => { | ||
| const [animationKey, setAnimationKey] = useState(0) | ||
|
|
||
| useEffect(() => { | ||
| setAnimationKey((prevKey) => prevKey + 1) | ||
| }, [animateKey]) | ||
|
|
||
| return ( | ||
| <svg | ||
| key={animationKey} | ||
| width="24" | ||
| height="24" | ||
| viewBox="-12 -12 24 24" | ||
| stroke="currentcolor" | ||
| fill="none" | ||
| className="absolute block -rotate-90" | ||
| > | ||
| <circle r="8" pathLength="1" stroke-opacity=".25"> | ||
| <animate | ||
| attributeName="stroke-dashoffset" | ||
| to="-1" | ||
| dur="2.5s" | ||
| repeatCount="indefinite" | ||
| /> | ||
| <set | ||
| attributeName="stroke-dasharray" | ||
| to="0.05" | ||
| begin={`${convertMsToSeconds(duration)}s`} | ||
| /> | ||
| <set | ||
| attributeName="stroke-opacity" | ||
| to="0.5" | ||
| begin={`${convertMsToSeconds(duration)}s`} | ||
| /> | ||
| </circle> | ||
| <circle r="8" stroke-dasharray="1" pathLength="1"> | ||
| <animate | ||
| attributeName="stroke-dashoffset" | ||
| values="2; 1" | ||
| dur={`${convertMsToSeconds(duration)}s`} | ||
| fill="freeze" | ||
| /> | ||
| <animate | ||
| attributeName="stroke-opacity" | ||
| values="0; 1" | ||
| dur={`${convertMsToSeconds(duration)}s`} | ||
| /> | ||
| </circle> | ||
| </svg> | ||
| ) | ||
| } |
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
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
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
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
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,125 @@ | ||||||
| import { useState, useEffect, useMemo, useRef } from 'react' | ||||||
|
|
||||||
| import { useBridgeState } from '@/slices/bridge/hooks' | ||||||
| import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks' | ||||||
| import { constructStringifiedBridgeSelections } from './useBridgeValidations' | ||||||
| import { BridgeQuote } from '@/utils/types' | ||||||
|
|
||||||
| export const useConfirmNewBridgePrice = () => { | ||||||
| const triggerQuoteRef = useRef<any>(null) | ||||||
|
There was a problem hiding this comment. Specify explicit type for 'triggerQuoteRef' to enhance type safety Currently, Update the declaration to use the appropriate type: -const triggerQuoteRef = useRef<any>(null)
+const triggerQuoteRef = useRef<BridgeQuote | null>(null)Committable suggestion
Suggested change
|
||||||
| const bpsThreshold = 0.0001 // 1bps | ||||||
|
|
||||||
| const [hasQuoteOutputChanged, setHasQuoteOutputChanged] = | ||||||
| useState<boolean>(false) | ||||||
| const [hasUserConfirmedChange, setHasUserConfirmedChange] = | ||||||
| useState<boolean>(false) | ||||||
|
|
||||||
| const { bridgeQuote, previousBridgeQuote } = useBridgeQuoteState() | ||||||
| const { debouncedFromValue, fromToken, toToken, fromChainId, toChainId } = | ||||||
| useBridgeState() | ||||||
|
|
||||||
| const currentBridgeQuoteSelections = useMemo( | ||||||
| () => | ||||||
| constructStringifiedBridgeSelections( | ||||||
| debouncedFromValue, | ||||||
| fromChainId, | ||||||
| fromToken, | ||||||
| toChainId, | ||||||
| toToken | ||||||
| ), | ||||||
| [debouncedFromValue, fromChainId, fromToken, toChainId, toToken] | ||||||
| ) | ||||||
|
|
||||||
| const previousBridgeQuoteSelections = useMemo( | ||||||
| () => | ||||||
| constructStringifiedBridgeSelections( | ||||||
| previousBridgeQuote?.inputAmountForQuote, | ||||||
| previousBridgeQuote?.originChainId, | ||||||
| previousBridgeQuote?.originTokenForQuote, | ||||||
| previousBridgeQuote?.destChainId, | ||||||
| previousBridgeQuote?.destTokenForQuote | ||||||
| ), | ||||||
| [previousBridgeQuote] | ||||||
| ) | ||||||
|
|
||||||
| const hasSameSelectionsAsPreviousQuote = useMemo( | ||||||
| () => currentBridgeQuoteSelections === previousBridgeQuoteSelections, | ||||||
| [currentBridgeQuoteSelections, previousBridgeQuoteSelections] | ||||||
| ) | ||||||
|
|
||||||
| const isPendingConfirmChange = | ||||||
| hasQuoteOutputChanged && | ||||||
| hasSameSelectionsAsPreviousQuote && | ||||||
| !hasUserConfirmedChange | ||||||
|
|
||||||
| useEffect(() => { | ||||||
| const validQuotes = | ||||||
| bridgeQuote?.outputAmount && previousBridgeQuote?.outputAmount | ||||||
|
|
||||||
| const hasBridgeModuleChanged = | ||||||
| bridgeQuote?.bridgeModuleName !== | ||||||
| (triggerQuoteRef.current?.bridgeModuleName ?? | ||||||
| previousBridgeQuote?.bridgeModuleName) | ||||||
|
|
||||||
| const outputAmountDiffMoreThanThreshold = validQuotes | ||||||
| ? calculateOutputRelativeDifference( | ||||||
| bridgeQuote, | ||||||
| triggerQuoteRef.current ?? previousBridgeQuote | ||||||
| ) > bpsThreshold | ||||||
| : false | ||||||
|
|
||||||
|
Comment on lines
+64
to
+70
There was a problem hiding this comment. Ensure safe comparison when 'calculateOutputRelativeDifference' may return null The function Apply the following changes to handle the const diff = calculateOutputRelativeDifference(
bridgeQuote,
triggerQuoteRef.current ?? previousBridgeQuote
)
const outputAmountDiffMoreThanThreshold = validQuotes
- ? diff > bpsThreshold
+ ? diff !== null && diff > bpsThreshold
: false
|
||||||
| if ( | ||||||
| validQuotes && | ||||||
| hasSameSelectionsAsPreviousQuote && | ||||||
| hasBridgeModuleChanged | ||||||
| ) { | ||||||
| requestUserConfirmChange(previousBridgeQuote) | ||||||
| } else if ( | ||||||
| validQuotes && | ||||||
| hasSameSelectionsAsPreviousQuote && | ||||||
| outputAmountDiffMoreThanThreshold | ||||||
| ) { | ||||||
| requestUserConfirmChange(previousBridgeQuote) | ||||||
| } else { | ||||||
| resetConfirm() | ||||||
| } | ||||||
| }, [bridgeQuote, previousBridgeQuote, hasSameSelectionsAsPreviousQuote]) | ||||||
|
|
||||||
| const requestUserConfirmChange = (previousQuote: BridgeQuote) => { | ||||||
| if (!hasQuoteOutputChanged && !hasUserConfirmedChange) { | ||||||
| triggerQuoteRef.current = previousQuote | ||||||
| setHasQuoteOutputChanged(true) | ||||||
| } | ||||||
| setHasUserConfirmedChange(false) | ||||||
| } | ||||||
|
|
||||||
| const resetConfirm = () => { | ||||||
| if (hasUserConfirmedChange) { | ||||||
| triggerQuoteRef.current = null | ||||||
| setHasQuoteOutputChanged(false) | ||||||
| setHasUserConfirmedChange(false) | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| const onUserAcceptChange = () => { | ||||||
| triggerQuoteRef.current = null | ||||||
| setHasUserConfirmedChange(true) | ||||||
| } | ||||||
|
|
||||||
| return { | ||||||
| isPendingConfirmChange, | ||||||
| onUserAcceptChange, | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| const calculateOutputRelativeDifference = ( | ||||||
| quoteA?: BridgeQuote, | ||||||
| quoteB?: BridgeQuote | ||||||
| ) => { | ||||||
| if (!quoteA?.outputAmountString || !quoteB?.outputAmountString) return null | ||||||
|
|
||||||
| const outputA = parseFloat(quoteA.outputAmountString) | ||||||
| const outputB = parseFloat(quoteB.outputAmountString) | ||||||
|
|
||||||
| return Math.abs(outputA - outputB) / outputB | ||||||
| } | ||||||
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adjust 'isButtonDisabled' logic to enable user confirmation
Including
(isConnected && isQuoteStale)inisButtonDisableddisables the button when the quote is stale, even when user confirmation is required. Modify the condition to exclude cases whereisPendingConfirmChangeis true, allowing the user to confirm the new quote.Apply this diff to adjust the disabling logic:
const isButtonDisabled = isBridgePaused || isTyping || isLoading || isWalletPending || !hasValidInput || !doesBridgeStateMatchQuote || isBridgeQuoteAmountGreaterThanInputForRfq || (isConnected && !hasValidQuote) || (isConnected && !hasSufficientBalance) || - (isConnected && isQuoteStale) || + (isConnected && isQuoteStale && !isPendingConfirmChange) || (destinationAddress && !isAddress(destinationAddress))