pause remaining time when quote loading or tx pending

osmosis-labs · Jul 8, 2024 · 6db1321 · 6db1321
1 parent e8d8576
commit 6db1321
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/packages/web/components/bridge/amount-screen.tsx b/packages/web/components/bridge/amount-screen.tsx
@@ -1232,6 +1232,7 @@ const TransferDetails: FunctionComponent<{
     successfulQuotes,
     setSelectedBridgeProvider,
     isRefetchingQuote,
+    isTxPending,
   } = quote;
 
   return (
@@ -1264,6 +1265,7 @@ const TransferDetails: FunctionComponent<{
                 refetchInterval={refetchInterval}
                 selectedQuote={selectedQuote}
                 open={open}
+                isRemainingTimePaused={isRefetchingQuote || isTxPending}
                 showRemainingTime
               />
             </div>

diff --git a/packages/web/components/bridge/bridge-quote-remaining-time.tsx b/packages/web/components/bridge/bridge-quote-remaining-time.tsx
@@ -13,16 +13,25 @@ export const BridgeQuoteRemainingTime: FunctionComponent<
     className?: string;
     refetchInterval: number;
     dataUpdatedAt: number;
+    isPaused?: boolean;
     strokeWidth?: number;
   }>
-> = ({ className, refetchInterval, dataUpdatedAt, children, strokeWidth }) => {
+> = ({
+  className,
+  refetchInterval,
+  dataUpdatedAt,
+  isPaused = false,
+  children,
+  strokeWidth,
+}) => {
   const [progress, setProgress] = useState(100);
 
   useEffect(() => {
     if (!dataUpdatedAt) return;
 
     const updateProgress = () => {
-      const elapsed = Date.now() - dataUpdatedAt;
+      const now = isPaused ? dataUpdatedAt : Date.now();
+      const elapsed = now - dataUpdatedAt;
       const percentage = Math.max((1 - elapsed / refetchInterval) * 100, 0);
       setProgress(percentage);
     };
@@ -37,7 +46,7 @@ export const BridgeQuoteRemainingTime: FunctionComponent<
     );
 
     return () => clearInterval(intervalId);
-  }, [dataUpdatedAt, refetchInterval]);
+  }, [dataUpdatedAt, refetchInterval, isPaused]);
 
   return (
     <div className={classNames("relative h-7 w-7 md:h-5 md:w-5", className)}>

diff --git a/packages/web/components/bridge/quote-detail.tsx b/packages/web/components/bridge/quote-detail.tsx
@@ -173,6 +173,7 @@ export const ExpandDetailsControlContent: FunctionComponent<{
   selectedQuoteUpdatedAt: number | undefined;
   refetchInterval: number;
   open: boolean;
+  isRemainingTimePaused: boolean;
   showRemainingTime?: boolean;
 }> = ({
   selectedQuote,
@@ -181,6 +182,7 @@ export const ExpandDetailsControlContent: FunctionComponent<{
   selectedQuoteUpdatedAt,
   refetchInterval,
   open,
+  isRemainingTimePaused,
   showRemainingTime = false,
 }) => {
   const totalFees = calcSelectedQuoteTotalFee(selectedQuote);
@@ -191,6 +193,7 @@ export const ExpandDetailsControlContent: FunctionComponent<{
         <BridgeQuoteRemainingTime
           dataUpdatedAt={selectedQuoteUpdatedAt}
           refetchInterval={refetchInterval}
+          isPaused={isRemainingTimePaused}
         />
       )}
       <div className="flex items-center gap-2 md:gap-1">

diff --git a/packages/web/components/bridge/review-screen.tsx b/packages/web/components/bridge/review-screen.tsx
@@ -299,6 +299,8 @@ const TransferDetails: FunctionComponent<
     fromDisplayChain,
     selectedQuoteUpdatedAt,
     refetchInterval,
+    isRefetchingQuote,
+    isTxPending,
   } = quote;
 
   if (!selectedQuote) return null;
@@ -328,6 +330,7 @@ const TransferDetails: FunctionComponent<
                     className="flex !h-12 !w-12 items-center justify-center rounded-full md:!h-8 md:!w-8"
                     dataUpdatedAt={selectedQuoteUpdatedAt}
                     refetchInterval={refetchInterval}
+                    isPaused={isRefetchingQuote || isTxPending}
                     strokeWidth={2}
                   >
                     <Icon id="down-arrow" className="md:h-4 md:w-4" />