Add graceful error handling for failed route quotes (#2537)

* fix(redesign/quotes): add graceful error handling for failed route quotes.

* fix(routes): PR suggestions

Author: nikarm22

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

@@ -282,22 +282,36 @@ const SingleRoute = (props: Props) => {
   }, [quote]);
 
   const routeCardHeader = useMemo(() => {
-    return typeof receiveAmount === 'undefined' ? (
-      <CircularProgress size={18} />
-    ) : (
+    if (props.error) {
+      return <Typography color="error">Route is unavailable</Typography>;
+    }
+
+    if (props.isFetchingQuote) {
+      return <CircularProgress size={18} />;
+    }
+
+    if (receiveAmount === undefined) {
+      return null;
+    }
+
+    return (
       <Typography>
         {receiveAmountTrunc} {destTokenConfig.symbol}
       </Typography>
     );
   }, [destToken, receiveAmountTrunc]);
 
   const routeCardSubHeader = useMemo(() => {
-    if (typeof receiveAmount === 'undefined') {
+    if (props.error || !destChain) {
+      return null;
+    }
+
+    if (props.isFetchingQuote) {
       return <CircularProgress size={18} />;
     }
 
-    if (!destChain) {
-      return <></>;
+    if (receiveAmount === undefined) {
+      return null;
     }
 
     const receiveAmountPrice = calculateUSDPrice(

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

@@ -115,12 +115,18 @@ const Routes = ({ sortedSupportedRoutes, ...props }: Props) => {
         const isSelected = routeConfig.name === props.selectedRoute;
         const quoteResult = quotesMap[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}
             available={available}
-            error={availabilityError}
+            error={availabilityError || quoteError}
             isSelected={isSelected}
             onSelect={props.onRouteChange}
             quote={quote}