[WIP] stale quote animation (#3105)

* animate-quote-refresh * pair stale quote refresh with each quote * update progress circle animation
synapsecns · Sep 7, 2024 · c7b2981 · c7b2981
1 parent 571b391
commit c7b2981
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 16 deletions.
diff --git a/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/OutputContainer.tsx
@@ -1,5 +1,5 @@
 import { useAccount } from 'wagmi'
-import { useMemo } from 'react'
+import { useMemo, useEffect, useState } from 'react'
 
 import { ChainSelector } from '@/components/ui/ChainSelector'
 import { TokenSelector } from '@/components/ui/TokenSelector'
@@ -14,11 +14,13 @@ import { setToChainId, setToToken } from '@/slices/bridge/reducer'
 import { useBridgeDisplayState, useBridgeState } from '@/slices/bridge/hooks'
 import { useWalletState } from '@/slices/wallet/hooks'
 import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
+import { BridgeQuote } from '@/utils/types'
 import { useBridgeValidations } from './hooks/useBridgeValidations'
+import { useConfirmNewBridgePrice } from './hooks/useConfirmNewBridgePrice'
 
 export const OutputContainer = () => {
   const { address } = useAccount()
-  const { bridgeQuote, isLoading } = useBridgeQuoteState()
+  const { bridgeQuote, previousBridgeQuote, isLoading } = useBridgeQuoteState()
   const { showDestinationAddress } = useBridgeDisplayState()
   const { hasValidInput, hasValidQuote } = useBridgeValidations()
 
@@ -48,6 +50,9 @@ export const OutputContainer = () => {
           showValue={showValue}
           isLoading={isLoading}
         />
+        {hasValidQuote && !isLoading && (
+          <AnimatedProgressCircle bridgeQuoteId={bridgeQuote?.id} />
+        )}
       </BridgeAmountContainer>
     </BridgeSectionContainer>
   )
@@ -88,3 +93,43 @@ const ToTokenSelector = () => {
     />
   )
 }
+
+const AnimatedProgressCircle = ({ bridgeQuoteId }) => {
+  const [animationKey, setAnimationKey] = useState(0)
+
+  useEffect(() => {
+    setAnimationKey((prevKey) => prevKey + 1)
+  }, [bridgeQuoteId])
+
+  return (
+    <svg
+      key={animationKey}
+      width="36"
+      height="36"
+      viewBox="-12 -12 24 24"
+      stroke="currentcolor"
+      strokeOpacity=".33"
+      fill="none"
+      className="-rotate-90 -scale-y-100"
+    >
+      <circle r="8">
+        <animate
+          attributeName="opacity"
+          values="0; 0; 1"
+          dur="15s"
+          fill="freeze"
+          keyTimes="0; .5; 1"
+        />
+      </circle>
+      <circle r="8" strokeDasharray="1" pathLength="1">
+        <animate
+          attributeName="stroke-dashoffset"
+          values="1; 1; 2"
+          dur="15s"
+          keyTimes="0; .67; 1"
+          fill="freeze"
+        />
+      </circle>
+    </svg>
+  )
+}
diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -200,7 +200,6 @@ const StateManagedBridge = () => {
     bridgeQuote,
     getAndSetBridgeQuote,
     isLoading,
-    isWalletPending,
     quoteTimeout
   )
 

diff --git a/packages/synapse-interface/utils/hooks/useStaleQuoteUpdater.ts b/packages/synapse-interface/utils/hooks/useStaleQuoteUpdater.ts
@@ -2,7 +2,6 @@ import { isNull, isNumber } from 'lodash'
 import { useEffect, useRef } from 'react'
 
 import { BridgeQuote } from '@/utils/types'
-import { calculateTimeBetween } from '@/utils/time'
 import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'
 import { convertUuidToUnix } from '@/utils/convertUuidToUnix'
 
@@ -14,25 +13,19 @@ export const useStaleQuoteUpdater = (
   quote: BridgeQuote,
   refreshQuoteCallback: () => Promise<void>,
   isQuoteLoading: boolean,
-  isWalletPending: boolean,
   staleTimeout: number = 15000 // Default 15_000ms or 15s
 ) => {
   const eventListenerRef = useRef<null | (() => void)>(null)
-
+  const timeoutRef = useRef<null | NodeJS.Timeout>(null)
   const quoteTime = quote?.id ? convertUuidToUnix(quote?.id) : null
   const isValidQuote = isNumber(quoteTime) && !isNull(quoteTime)
 
-  const currentTime = useIntervalTimer(staleTimeout, !isValidQuote)
+  useIntervalTimer(staleTimeout, !isValidQuote)
 
   useEffect(() => {
-    if (isValidQuote && !isQuoteLoading && !isWalletPending) {
-      const timeDifference = calculateTimeBetween(currentTime, quoteTime)
-      const isStaleQuote = timeDifference >= staleTimeout
-
-      if (isStaleQuote) {
-        if (eventListenerRef.current) {
-          document.removeEventListener('mousemove', eventListenerRef.current)
-        }
+    if (isValidQuote && !isQuoteLoading) {
+      timeoutRef.current = setTimeout(() => {
+        eventListenerRef.current = null
 
         const newEventListener = () => {
           refreshQuoteCallback()
@@ -44,7 +37,13 @@ export const useStaleQuoteUpdater = (
         })
 
         eventListenerRef.current = newEventListener
+      }, staleTimeout)
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
       }
     }
-  }, [currentTime, staleTimeout])
+  }, [quote, isQuoteLoading])
 }