Handles errors during crypto/fiat conversions. (#1136)

Author: jwhardwick

packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteMenuItem/FundingRouteMenuItem.tsx

@@ -52,15 +52,19 @@ export function FundingRouteMenuItem({
     if (!cryptoFiatState.conversions) {
       return;
     }
-
-    setFeesUsd(fundingRouteFees(fundingRoute, cryptoFiatState.conversions));
-    setUsdBalance(
-      calculateCryptoToFiat(
-        firstFundingStep.fundingItem.userBalance.formattedBalance,
-        firstFundingStep.fundingItem.token.symbol,
-        cryptoFiatState.conversions,
-      ),
-    );
+    try {
+      setFeesUsd(fundingRouteFees(fundingRoute, cryptoFiatState.conversions));
+      setUsdBalance(
+        calculateCryptoToFiat(
+          firstFundingStep.fundingItem.userBalance.formattedBalance,
+          firstFundingStep.fundingItem.token.symbol,
+          cryptoFiatState.conversions,
+        ),
+      );
+    } catch {
+      setFeesUsd(undefined);
+      setUsdBalance(undefined);
+    }
   }, [cryptoFiatState, fundingRoute]);
 
   const networkLabel = () => (

packages/checkout/widgets-lib/src/widgets/sale/components/PurchaseMenuItem/PurchaseMenuItem.tsx

@@ -26,22 +26,25 @@ export function PurchaseMenuItem({ fundingRoute }: PurchaseMenuItemProps) {
     if (!cryptoFiatState.conversions) {
       return;
     }
-
-    setUsdPurchaseAmount(
-      calculateCryptoToFiat(
-        firstFundingStep.fundingItem.fundsRequired.formattedAmount,
-        firstFundingStep.fundingItem.token.symbol,
-        cryptoFiatState.conversions,
-      ),
-    );
+    try {
+      setUsdPurchaseAmount(
+        calculateCryptoToFiat(
+          firstFundingStep.fundingItem.fundsRequired.formattedAmount,
+          firstFundingStep.fundingItem.token.symbol,
+          cryptoFiatState.conversions,
+        ),
+      );
+    } catch {
+      setUsdPurchaseAmount(undefined);
+    }
   }, [cryptoFiatState, fundingRoute]);
 
   return (
     <MenuItem
       emphasized
       testId="funding-route-purchase-item"
       size="medium"
-      key={firstItem.name}
+      key={firstItem?.name}
     >
       <MenuItem.FramedImage
         imageUrl={firstItem?.image}