Route priority sorting (wormhole-foundation#2419)

* feat(redesign): sort routes by auto/manual, eta and fees * fix(redesign): remove redundant quote fetches * fix(redesign): lint fix * fix(redesign): route sorting code style fixes * refactor(redesign): refactor multiple quote fetcher hook * fix(redesign): linting fixes * fix(redesign): make Chain non optional for quote fetching * refactor(redesign/quotes): replace legacy quotes with SDKv2 quotes * fix(redesign/qoute): use correct relayFee token for bridgeFee calculation in quotes and TX Details
wormholelabs-xyz · Aug 29, 2024 · c480b69 · c480b69
1 parent 191f91c
commit c480b69
Show file tree

Hide file tree

Showing 10 changed files with 293 additions and 234 deletions.
diff --git a/wormhole-connect/src/hooks/useComputeQuote.ts b/wormhole-connect/src/hooks/useComputeQuote.ts
@@ -54,8 +54,7 @@ const useComputeQuote = (props: Props): returnProps => {
       try {
         setIsFetching(true);
 
-        const parsedAmount = Number.parseFloat(amount);
-        if (Number.isNaN(parsedAmount)) {
+        if (Number.isNaN(Number.parseFloat(amount))) {
           dispatch(setReceiveAmount('0'));
           dispatch(setReceiveNativeAmt(0));
           dispatch(setRelayerFee(undefined));
@@ -64,7 +63,7 @@ const useComputeQuote = (props: Props): returnProps => {
 
         const r = config.routes.get(route);
         const quote = await r.computeQuote(
-          parsedAmount,
+          amount,
           sourceToken,
           destToken,
           sourceChain,

diff --git a/wormhole-connect/src/hooks/useComputeQuoteV2.ts b/wormhole-connect/src/hooks/useComputeQuoteV2.ts
diff --git a/wormhole-connect/src/hooks/useRoutesQuotesBulk.ts b/wormhole-connect/src/hooks/useRoutesQuotesBulk.ts
@@ -0,0 +1,82 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Chain, routes } from '@wormhole-foundation/sdk';
+
+import config from 'config';
+
+type RoutesQuotesBulkParams = {
+  sourceChain?: Chain;
+  sourceToken: string;
+  destChain?: Chain;
+  destToken: string;
+  amount: string;
+  nativeGas: number;
+};
+
+type QuoteResult = routes.QuoteResult<routes.Options>;
+
+type HookReturn = {
+  quotesMap: Record<string, QuoteResult | undefined>;
+  isFetching: boolean;
+};
+
+const useRoutesQuotesBulk = (
+  routes: string[],
+  params: RoutesQuotesBulkParams,
+): HookReturn => {
+  const [isFetching, setIsFetching] = useState(false);
+  const [quotes, setQuotes] = useState<QuoteResult[]>([]);
+
+  useEffect(() => {
+    let unmounted = false;
+    if (
+      !params.sourceChain ||
+      !params.sourceToken ||
+      !params.destChain ||
+      !params.destToken ||
+      !params.amount
+    ) {
+      return;
+    }
+
+    // Forcing TS to infer that fields are non-optional
+    const rParams = params as Required<RoutesQuotesBulkParams>;
+
+    setIsFetching(true);
+    config.routes
+      .computeMultipleQuotes(routes, rParams)
+      .then((quoteResults) => {
+        if (!unmounted) {
+          setQuotes(quoteResults);
+          setIsFetching(false);
+        }
+      });
+
+    return () => {
+      unmounted = true;
+    };
+  }, [
+    routes.join(),
+    params.sourceChain,
+    params.sourceToken,
+    params.destChain,
+    params.destToken,
+    params.amount,
+    params.nativeGas,
+  ]);
+
+  const quotesMap = useMemo(
+    () =>
+      routes.reduce((acc, route, index) => {
+        acc[route] = quotes[index];
+        return acc;
+      }, {} as Record<string, QuoteResult | undefined>),
+    [routes.join(), quotes],
+  );
+
+  return {
+    quotesMap,
+    isFetching,
+  };
+};
+
+export default useRoutesQuotesBulk;
diff --git a/wormhole-connect/src/routes/operator.ts b/wormhole-connect/src/routes/operator.ts
@@ -183,6 +183,42 @@ export default class RouteOperator {
     });
     return Object.values(supported);
   }
+
+  async computeMultipleQuotes(
+    routes: string[],
+    params: {
+      sourceChain: Chain;
+      sourceToken: string;
+      destChain: Chain;
+      destToken: string;
+      amount: string;
+      nativeGas: number;
+    },
+  ): Promise<routes.QuoteResult<routes.Options>[]> {
+    const quoteResults = await Promise.allSettled(
+      routes.map((route) =>
+        this.get(route).computeQuote(
+          params.amount,
+          params.sourceToken,
+          params.destToken,
+          params.sourceChain,
+          params.destChain,
+          { nativeGas: params.nativeGas },
+        ),
+      ),
+    );
+
+    return quoteResults.map((quoteResult) => {
+      if (quoteResult.status === 'rejected') {
+        return {
+          success: false,
+          error: quoteResult.reason,
+        };
+      } else {
+        return quoteResult.value;
+      }
+    });
+  }
 }
 
 // Convenience function for integrators when adding NTT routes to their config

diff --git a/wormhole-connect/src/routes/sdkv2/route.ts b/wormhole-connect/src/routes/sdkv2/route.ts
@@ -263,7 +263,7 @@ export class SDKv2Route {
   ): Promise<
     [
       routes.Route<Network>,
-      routes.QuoteResult<any>,
+      routes.QuoteResult<routes.Options>,
       routes.RouteTransferRequest<Network>,
     ]
   > {
@@ -389,18 +389,18 @@ export class SDKv2Route {
   }
 
   async computeQuote(
-    amountIn: number,
+    amountIn: string,
     sourceToken: string,
     destToken: string,
-    fromChain: Chain | undefined,
-    toChain: Chain | undefined,
+    fromChain: Chain,
+    toChain: Chain,
     options?: routes.AutomaticTokenBridgeRoute.Options,
-  ): Promise<routes.QuoteResult<any>> {
+  ): Promise<routes.QuoteResult<routes.Options>> {
     if (!fromChain || !toChain)
       throw new Error('Need both chains to get a quote from SDKv2');
 
     const [, quote] = await this.getQuote(
-      amountIn.toString(),
+      amountIn,
       sourceToken,
       destToken,
       fromChain,

diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx
@@ -49,25 +49,26 @@ type SliderProps = {
   railColor: string;
 };
 
-const StyledSlider = styled(Slider)<SliderProps>(
-  ({ baseColor, railColor }) => ({
-    color: baseColor,
-    height: 8,
-    '& .MuiSlider-rail': {
-      height: '8px',
-      backgroundColor: railColor,
-      opacity: 0.1,
-    },
-    '& .MuiSlider-track': {
-      height: '8px',
-    },
-    '& .MuiSlider-thumb': {
-      height: 20,
-      width: 20,
-      backgroundColor: '#C1BBF6',
-    },
-  }),
-);
+const StyledSlider = styled(Slider, {
+  shouldForwardProp: (prop) =>
+    !['baseColor', 'railColor'].includes(prop.toString()),
+})<SliderProps>(({ baseColor, railColor }) => ({
+  color: baseColor,
+  height: 8,
+  '& .MuiSlider-rail': {
+    height: '8px',
+    backgroundColor: railColor,
+    opacity: 0.1,
+  },
+  '& .MuiSlider-track': {
+    height: '8px',
+  },
+  '& .MuiSlider-thumb': {
+    height: 20,
+    width: 20,
+    backgroundColor: '#C1BBF6',
+  },
+}));
 
 const StyledSwitch = styled(Switch)((props) => ({
   padding: '9px 12px',