clean logic

synapsecns · Sep 5, 2024 · 571b391 · 571b391
1 parent 69f4034
commit 571b391
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 75 deletions.
diff --git a/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx b/packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
@@ -53,7 +53,7 @@ export const BridgeTransactionButton = ({
     hasSameSelectionsAsPreviousQuote,
     hasQuoteOutputChanged,
     hasUserConfirmedChange,
-    handleUserAcceptChange,
+    onUserAcceptChange,
   } = useConfirmNewBridgePrice()
 
   const { isWalletPending } = useWalletState()
@@ -180,7 +180,7 @@ export const BridgeTransactionButton = ({
   } else if (hasQuoteOutputChanged && !hasUserConfirmedChange) {
     buttonProperties = {
       label: 'Confirm new price',
-      onClick: () => handleUserAcceptChange(),
+      onClick: () => onUserAcceptChange(),
       className:
         '!border !border-synapsePurple !from-bgLight !to-bgLight !animate-pulse',
     }

diff --git a/packages/synapse-interface/components/StateManagedBridge/hooks/useConfirmNewBridgePrice.ts b/packages/synapse-interface/components/StateManagedBridge/hooks/useConfirmNewBridgePrice.ts
@@ -1,7 +1,9 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
+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 quoteRef = useRef<any>(null)
@@ -12,112 +14,97 @@ export const useConfirmNewBridgePrice = () => {
     useState<boolean>(false)
 
   const { bridgeQuote, previousBridgeQuote } = useBridgeQuoteState()
+  const { debouncedFromValue, fromToken, toToken, fromChainId, toChainId } =
+    useBridgeState()
 
-  const createBridgeSelections = useCallback(
-    (quote) =>
+  const currentBridgeQuoteSelections = useMemo(
+    () =>
       constructStringifiedBridgeSelections(
-        quote?.inputAmountForQuote,
-        quote?.originChainId,
-        quote?.originTokenForQuote,
-        quote?.destChainId,
-        quote?.destTokenForQuote
+        debouncedFromValue,
+        fromChainId,
+        fromToken,
+        toChainId,
+        toToken
       ),
-    []
-  )
-
-  const currentBridgeQuoteSelections = useMemo(
-    () => createBridgeSelections(bridgeQuote),
-    [bridgeQuote, createBridgeSelections]
+    [debouncedFromValue, fromChainId, fromToken, toChainId, toToken]
   )
 
   const previousBridgeQuoteSelections = useMemo(
-    () => createBridgeSelections(previousBridgeQuote),
-    [previousBridgeQuote, createBridgeSelections]
+    () =>
+      constructStringifiedBridgeSelections(
+        previousBridgeQuote?.inputAmountForQuote,
+        previousBridgeQuote?.originChainId,
+        previousBridgeQuote?.originTokenForQuote,
+        previousBridgeQuote?.destChainId,
+        previousBridgeQuote?.destTokenForQuote
+      ),
+    [previousBridgeQuote]
   )
 
   const hasSameSelectionsAsPreviousQuote = useMemo(
     () => currentBridgeQuoteSelections === previousBridgeQuoteSelections,
     [currentBridgeQuoteSelections, previousBridgeQuoteSelections]
   )
 
-  const calculateOutputRelativeDifference = useCallback((quoteA, quoteB) => {
-    if (!quoteA?.outputAmountString || !quoteB?.outputAmountString) return null
+  useEffect(() => {
+    const validQuotes =
+      bridgeQuote?.outputAmount && previousBridgeQuote?.outputAmount
 
-    const outputA = parseFloat(quoteA.outputAmountString)
-    const outputB = parseFloat(quoteB.outputAmountString)
+    const outputAmountDiffMoreThan1bps = validQuotes
+      ? calculateOutputRelativeDifference(
+          bridgeQuote,
+          quoteRef.current ?? previousBridgeQuote
+        ) > 0.0001
+      : false
 
-    return Math.abs(outputA - outputB) / outputB
-  }, [])
+    if (
+      validQuotes &&
+      outputAmountDiffMoreThan1bps &&
+      hasSameSelectionsAsPreviousQuote
+    ) {
+      requestUserConfirmChange(previousBridgeQuote)
+    } else {
+      resetConfirm()
+    }
+  }, [bridgeQuote, previousBridgeQuote, hasSameSelectionsAsPreviousQuote])
 
-  const handleRequestUserConfirmChange = (previousQuote) => {
+  const requestUserConfirmChange = (previousQuote: BridgeQuote) => {
     if (!hasQuoteOutputChanged && !hasUserConfirmedChange) {
       quoteRef.current = previousQuote
       setHasQuoteOutputChanged(true)
     }
     setHasUserConfirmedChange(false)
   }
 
-  const handleUserAcceptChange = () => {
-    quoteRef.current = null
-    setHasUserConfirmedChange(true)
-  }
-
-  const handleReset = () => {
+  const resetConfirm = () => {
     if (hasUserConfirmedChange) {
       quoteRef.current = null
       setHasQuoteOutputChanged(false)
       setHasUserConfirmedChange(false)
     }
   }
 
-  useEffect(() => {
-    const validQuotes =
-      bridgeQuote?.outputAmount && previousBridgeQuote?.outputAmount
-    const selectionsMatch =
-      currentBridgeQuoteSelections === previousBridgeQuoteSelections
-
-    const outputAmountDiffMoreThan1bps = validQuotes
-      ? calculateOutputRelativeDifference(
-          bridgeQuote,
-          quoteRef.current ?? previousBridgeQuote
-        ) > 0.0001
-      : false
-
-    console.log('quoteRef.current:', quoteRef.current?.outputAmountString)
-    console.log(
-      'bridgeQuote?.outputAmountString: ',
-      bridgeQuote?.outputAmountString
-    )
-    console.log(
-      'previousBridgeQuote?.outputAmountString:',
-      previousBridgeQuote?.outputAmountString
-    )
-    console.log(
-      'relative difference: ',
-      calculateOutputRelativeDifference(
-        bridgeQuote,
-        quoteRef.current ?? previousBridgeQuote
-      )
-    )
-    console.log('outputAmountDiffMoreThan1bps: ', outputAmountDiffMoreThan1bps)
-
-    if (validQuotes && selectionsMatch && outputAmountDiffMoreThan1bps) {
-      handleRequestUserConfirmChange(previousBridgeQuote)
-    } else {
-      handleReset()
-    }
-  }, [
-    bridgeQuote,
-    previousBridgeQuote,
-    currentBridgeQuoteSelections,
-    previousBridgeQuoteSelections,
-    calculateOutputRelativeDifference,
-  ])
+  const onUserAcceptChange = () => {
+    quoteRef.current = null
+    setHasUserConfirmedChange(true)
+  }
 
   return {
     hasSameSelectionsAsPreviousQuote,
     hasQuoteOutputChanged,
     hasUserConfirmedChange,
-    handleUserAcceptChange,
+    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
+}