Refresh quotes every 20 seconds

wormhole-connect/src/hooks/useRoutesQuotesBulk.ts

@@ -28,17 +28,27 @@ type HookReturn = {
   isFetching: boolean;
 };
 
+const QUOTE_REFRESH_INTERVAL = 20_000;
+
 const MAYAN_BETA_LIMIT = 10_000; // USD
 const MAYAN_BETA_PROTOCOLS = ['MCTP', 'SWIFT'];
 
 const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
+  const [nonce, setNonce] = useState(new Date().valueOf());
+  const [refreshTimeout, setRefreshTimeout] = useState<null | ReturnType<
+    typeof setTimeout
+  >>(null);
+
   const [isFetching, setIsFetching] = useState(false);
   const [quotes, setQuotes] = useState<QuoteResult[]>([]);
 
   // TODO temporary
   // Calculate USD amount for temporary $1000 Mayan limit
   const tokenConfig = config.tokens[params.sourceToken];
   const { usdPrices } = useSelector((state: RootState) => state.tokenPrices);
+  const { isTransactionInProgress } = useSelector(
+    (state: RootState) => state.transferInput,
+  );
   const usdAmount = calculateUSDPriceRaw(
     params.amount,
     usdPrices.data,
@@ -60,16 +70,34 @@ const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
     // Forcing TS to infer that fields are non-optional
     const rParams = params as Required<QuoteParams>;
 
-    setIsFetching(true);
-    config.routes.getQuotes(routes, rParams).then((quoteResults) => {
-      if (!unmounted) {
-        setQuotes(quoteResults);
-        setIsFetching(false);
-      }
-    });
+    const onComplete = () => {
+      // Refresh quotes in 20 seconds
+      const refreshTimeout = setTimeout(
+        () => setNonce(new Date().valueOf()),
+        QUOTE_REFRESH_INTERVAL,
+      );
+      setRefreshTimeout(refreshTimeout);
+    };
+
+    if (isTransactionInProgress) {
+      // Don't fetch new quotes if the user has committed to one and has initiated a transaction
+      onComplete();
+    } else {
+      setIsFetching(true);
+      config.routes.getQuotes(routes, rParams).then((quoteResults) => {
+        if (!unmounted) {
+          setQuotes(quoteResults);
+          setIsFetching(false);
+          onComplete();
+        }
+      });
+    }
 
     return () => {
       unmounted = true;
+      if (refreshTimeout) {
+        clearTimeout(refreshTimeout);
+      }
     };
   }, [
     routes.join(),
@@ -79,6 +107,8 @@ const useRoutesQuotesBulk = (routes: string[], params: Params): HookReturn => {
     params.destToken,
     params.amount,
     params.nativeGas,
+    nonce,
+    isTransactionInProgress,
   ]);
 
   const quotesMap = useMemo(

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx

@@ -37,7 +37,6 @@ import GasSlider from 'views/v2/Bridge/ReviewTransaction/GasSlider';
 import SingleRoute from 'views/v2/Bridge/Routes/SingleRoute';
 
 import type { RootState } from 'store';
-import useRoutesQuotesBulk from 'hooks/useRoutesQuotesBulk';
 import { RelayerFee } from 'store/relay';
 
 import { amount as sdkAmount } from '@wormhole-foundation/sdk';
@@ -61,6 +60,8 @@ const useStyles = makeStyles()((theme) => ({
 
 type Props = {
   onClose: () => void;
+  quotes: any;
+  isFetchingQuotes: boolean;
 };
 
 const ReviewTransaction = (props: Props) => {
@@ -103,16 +104,7 @@ const ReviewTransaction = (props: Props) => {
     isTransactionInProgress,
   });
 
-  const routes = useMemo(() => (route ? [route] : []), []);
-  const { quotesMap, isFetching } = useRoutesQuotesBulk(routes, {
-    amount,
-    sourceChain,
-    sourceToken,
-    destChain,
-    destToken,
-    nativeGas: toNativeToken,
-  });
-  const quoteResult = quotesMap[route ?? ''];
+  const quoteResult = props.quotes[route ?? ''];
   const quote = quoteResult?.success ? quoteResult : undefined;
 
   const receiveNativeAmount = quote?.destinationNativeGas
@@ -324,7 +316,7 @@ const ReviewTransaction = (props: Props) => {
 
     return (
       <Button
-        disabled={isFetching || isTransactionInProgress}
+        disabled={props.isFetchingQuotes || isTransactionInProgress}
         variant="primary"
         className={classes.confirmTransaction}
         onClick={() => send()}
@@ -339,6 +331,16 @@ const ReviewTransaction = (props: Props) => {
             <CircularProgress color="secondary" size={16} />
             {mobile ? 'Preparing' : 'Preparing transaction'}
           </Typography>
+        ) : !isTransactionInProgress && props.isFetchingQuotes ? (
+          <Typography
+            display="flex"
+            alignItems="center"
+            gap={1}
+            textTransform="none"
+          >
+            <CircularProgress color="secondary" size={16} />
+            {mobile ? 'Refreshing' : 'Refreshing quote'}
+          </Typography>
         ) : (
           <Typography textTransform="none">
             {mobile ? 'Confirm' : 'Confirm transaction'}
@@ -347,7 +349,7 @@ const ReviewTransaction = (props: Props) => {
       </Button>
     );
   }, [
-    isFetching,
+    props.isFetchingQuotes,
     isTransactionInProgress,
     sourceChain,
     sourceToken,
@@ -375,7 +377,6 @@ const ReviewTransaction = (props: Props) => {
         destinationGasDrop={receiveNativeAmount}
         title="You will receive"
         quote={quote}
-        isFetchingQuote={isFetching}
       />
       <Collapse in={showGasSlider}>
         <GasSlider

wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { CircularProgress, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import CardContent from '@mui/material/CardContent';
@@ -62,7 +62,6 @@ type Props = {
   isOnlyChoice?: boolean;
   onSelect?: (route: string) => void;
   quote?: routes.Quote<routes.Options>;
-  isFetchingQuote: boolean;
 };
 
 const SingleRoute = (props: Props) => {
@@ -82,7 +81,7 @@ const SingleRoute = (props: Props) => {
   );
 
   const { name } = props.route;
-  const { quote, isFetchingQuote } = props;
+  const { quote } = props;
 
   const destTokenConfig = useMemo(
     () => config.tokens[destToken] as TokenConfig | undefined,
@@ -121,9 +120,7 @@ const SingleRoute = (props: Props) => {
       return <></>;
     }
 
-    let feeValue = isFetchingQuote ? (
-      <CircularProgress size={14} />
-    ) : (
+    let feeValue = (
       <Typography fontSize={14}>{`${toFixedDecimals(relayFee.toString(), 4)} ${
         feeTokenConfig.symbol
       } (${feePrice})`}</Typography>
@@ -144,7 +141,7 @@ const SingleRoute = (props: Props) => {
         </Typography>
       </Stack>
     );
-  }, [destToken, isFetchingQuote, quote?.relayFee, tokenPrices]);
+  }, [destToken, quote?.relayFee, tokenPrices]);
 
   const destinationGas = useMemo(() => {
     if (!destChain || !props.destinationGasDrop) {
@@ -169,14 +166,10 @@ const SingleRoute = (props: Props) => {
         <Typography color={theme.palette.text.secondary} fontSize={14}>
           Gas top up
         </Typography>
-        {isFetchingQuote ? (
-          <CircularProgress size={14} />
-        ) : (
-          <Typography fontSize={14}>{gasTokenPrice}</Typography>
-        )}
+        <Typography fontSize={14}>{gasTokenPrice}</Typography>
       </Stack>
     );
-  }, [destChain, isFetchingQuote, props.destinationGasDrop]);
+  }, [destChain, props.destinationGasDrop]);
 
   const timeToDestination = useMemo(
     () => (
@@ -185,24 +178,20 @@ const SingleRoute = (props: Props) => {
           Time to destination
         </Typography>
 
-        {isFetchingQuote ? (
-          <CircularProgress size={14} />
-        ) : (
-          <Typography
-            fontSize={14}
-            sx={{
-              color:
-                quote?.eta && quote.eta < 60 * 1000
-                  ? theme.palette.success.main
-                  : theme.palette.text.secondary,
-            }}
-          >
-            {quote?.eta ? millisToHumanString(quote.eta) : 'N/A'}
-          </Typography>
-        )}
+        <Typography
+          fontSize={14}
+          sx={{
+            color:
+              quote?.eta && quote.eta < 60 * 1000
+                ? theme.palette.success.main
+                : theme.palette.text.secondary,
+          }}
+        >
+          {quote?.eta ? millisToHumanString(quote.eta) : 'N/A'}
+        </Typography>
       </>
     ),
-    [quote?.eta, isFetchingQuote],
+    [quote?.eta],
   );
 
   const isManual = useMemo(() => {
@@ -310,10 +299,6 @@ const SingleRoute = (props: Props) => {
       return <Typography color="error">Route is unavailable</Typography>;
     }
 
-    if (props.isFetchingQuote) {
-      return <CircularProgress size={18} />;
-    }
-
     if (receiveAmount === undefined || !destTokenConfig) {
       return null;
     }
@@ -330,10 +315,6 @@ const SingleRoute = (props: Props) => {
       return null;
     }
 
-    if (props.isFetchingQuote) {
-      return <CircularProgress size={18} />;
-    }
-
     if (receiveAmount === undefined) {
       return null;
     }

wormhole-connect/src/views/v2/Bridge/Routes/index.tsx

@@ -13,7 +13,7 @@ import AlertBannerV2 from 'components/v2/AlertBanner';
 import type { RootState } from 'store';
 import { RouteState } from 'store/transferInput';
 import { routes } from '@wormhole-foundation/sdk';
-import { CircularProgress } from '@mui/material';
+import { Box, CircularProgress, Skeleton } from '@mui/material';
 
 const useStyles = makeStyles()((theme: any) => ({
   connectWallet: {
@@ -144,10 +144,6 @@ const Routes = ({ ...props }: Props) => {
     return null;
   }
 
-  if (props.isLoading) {
-    return <CircularProgress />;
-  }
-
   if (walletsConnected && !(Number(amount) > 0)) {
     return (
       <Tooltip title="Please enter the amount to view available routes">
@@ -160,42 +156,53 @@ const Routes = ({ ...props }: Props) => {
 
   return (
     <>
-      <Typography
-        fontSize={16}
-        paddingBottom={0}
-        marginTop="8px"
-        marginBottom={0}
-        width="100%"
-        textAlign="left"
-      >
-        Routes
-      </Typography>
-      {renderRoutes.map(({ name }, index) => {
-        const routeConfig = RoutesConfig[name];
-        const isSelected = routeConfig.name === props.selectedRoute;
-        const quoteResult = props.quotes[name];
-        const quote = quoteResult?.success ? quoteResult : undefined;
-        // Default message added as precaution, as 'Error' type cannot be trusted
-        const quoteError =
-          quoteResult?.success === false
-            ? quoteResult?.error?.message ??
-              `Error while getting a quote for ${name}.`
-            : undefined;
-        return (
-          <SingleRoute
-            key={name}
-            route={routeConfig}
-            error={quoteError}
-            isSelected={isSelected && !quoteError}
-            isFastest={name === fastestRoute.name}
-            isCheapest={name === cheapestRoute.name}
-            isOnlyChoice={supportedRoutes.length === 1}
-            onSelect={props.onRouteChange}
-            quote={quote}
-            isFetchingQuote={props.isLoading}
-          />
-        );
-      })}
+      <Box sx={{ display: 'flex', width: '100%' }}>
+        <Typography
+          align="left"
+          fontSize={16}
+          paddingBottom={0}
+          marginTop="8px"
+          marginBottom={0}
+          width="100%"
+          textAlign="left"
+        >
+          Routes
+        </Typography>
+        {props.isLoading ? (
+          <CircularProgress sx={{ 'align-self': 'flex-end' }} size={20} />
+        ) : null}
+      </Box>
+
+      {props.isLoading && renderRoutes.length === 0 ? (
+        <Skeleton variant="rounded" height={153} width="100%" />
+      ) : (
+        renderRoutes.map(({ name }, index) => {
+          const routeConfig = RoutesConfig[name];
+          const isSelected = routeConfig.name === props.selectedRoute;
+          const quoteResult = props.quotes[name];
+          const quote = quoteResult?.success ? quoteResult : undefined;
+          // Default message added as precaution, as 'Error' type cannot be trusted
+          const quoteError =
+            quoteResult?.success === false
+              ? quoteResult?.error?.message ??
+                `Error while getting a quote for ${name}.`
+              : undefined;
+          return (
+            <SingleRoute
+              key={name}
+              route={routeConfig}
+              error={quoteError}
+              isSelected={isSelected && !quoteError}
+              isFastest={name === fastestRoute.name}
+              isCheapest={name === cheapestRoute.name}
+              isOnlyChoice={supportedRoutes.length === 1}
+              onSelect={props.onRouteChange}
+              quote={quote}
+            />
+          );
+        })
+      )}
+
       {props.routes.length > 1 && (
         <Link
           onClick={() => setShowAll((prev) => !prev)}