From 35764bd2edca2a302336437ac964894b44d4fc67 Mon Sep 17 00:00:00 2001
From: Armen Nikoyan <armen@nikoyan.com>
Date: Thu, 5 Sep 2024 01:38:44 +0400
Subject: [PATCH 1/2] fix(redesign/quotes): add graceful error handling for
 failed route quotes.

---
 .../views/v2/Bridge/Routes/SingleRoute.tsx    | 20 ++++++++++++-------
 .../src/views/v2/Bridge/Routes/index.tsx      |  7 ++++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
index 7199056f5..25dde78ab 100644
--- a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
@@ -264,9 +264,15 @@ 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 (typeof receiveAmount === 'undefined') {
+      return <CircularProgress size={18} />;
+    }
+
+    return (
       <Typography>
         {receiveAmount} {destTokenConfig.symbol}
       </Typography>
@@ -274,12 +280,12 @@ const SingleRoute = (props: Props) => {
   }, [destToken, receiveAmount]);
 
   const routeCardSubHeader = useMemo(() => {
-    if (typeof receiveAmount === 'undefined') {
-      return <CircularProgress size={18} />;
+    if (props.error || !destChain) {
+      return null;
     }
 
-    if (!destChain) {
-      return <></>;
+    if (typeof receiveAmount === 'undefined') {
+      return <CircularProgress size={18} />;
     }
 
     const receiveAmountPrice = calculateUSDPrice(
diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx
index 67f80d596..5b9b89729 100644
--- a/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx
@@ -108,12 +108,17 @@ 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.'
+            : undefined;
         return (
           <SingleRoute
             key={name}
             route={routeConfig}
             available={available}
-            error={availabilityError}
+            error={availabilityError || quoteError}
             isSelected={isSelected}
             onSelect={props.onRouteChange}
             quote={quote}

From 16f112010151cf94b11c6bda5f3f79b171badcb5 Mon Sep 17 00:00:00 2001
From: Armen Nikoyan <armen@nikoyan.com>
Date: Fri, 6 Sep 2024 15:08:03 +0400
Subject: [PATCH 2/2] fix(routes): PR suggestions

---
 .../src/views/v2/Bridge/Routes/SingleRoute.tsx       | 12 ++++++++++--
 .../src/views/v2/Bridge/Routes/index.tsx             |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
index 25dde78ab..3793a4c10 100644
--- a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
@@ -268,10 +268,14 @@ const SingleRoute = (props: Props) => {
       return <Typography color="error">Route is unavailable</Typography>;
     }
 
-    if (typeof receiveAmount === 'undefined') {
+    if (props.isFetchingQuote) {
       return <CircularProgress size={18} />;
     }
 
+    if (receiveAmount === undefined) {
+      return null;
+    }
+
     return (
       <Typography>
         {receiveAmount} {destTokenConfig.symbol}
@@ -284,10 +288,14 @@ const SingleRoute = (props: Props) => {
       return null;
     }
 
-    if (typeof receiveAmount === 'undefined') {
+    if (props.isFetchingQuote) {
       return <CircularProgress size={18} />;
     }
 
+    if (receiveAmount === undefined) {
+      return null;
+    }
+
     const receiveAmountPrice = calculateUSDPrice(
       receiveAmount,
       tokenPrices.data,
diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx
index 5b9b89729..ee1e57a8f 100644
--- a/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx
@@ -111,7 +111,8 @@ const Routes = ({ sortedSupportedRoutes, ...props }: Props) => {
         // Default message added as precaution, as 'Error' type cannot be trusted
         const quoteError =
           quoteResult?.success === false
-            ? quoteResult?.error?.message ?? 'Error while getting a quote.'
+            ? quoteResult?.error?.message ??
+              `Error while getting a quote for ${name}.`
             : undefined;
         return (
           <SingleRoute