From 92c53bb068841f3332ac39ad8235075060d76870 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 21 Sep 2024 02:06:44 +0100
Subject: [PATCH] more safeguards

---
 features/prices/components/Price/Price.tsx    |  2 +-
 features/prices/hooks/use-prices.tsx          | 47 +++++++++++--------
 features/strategies/components/Buy.tsx        | 30 ++++++------
 .../strategies/components/Swap/Results.tsx    | 24 +++++-----
 4 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/features/prices/components/Price/Price.tsx b/features/prices/components/Price/Price.tsx
index fbd7d73..15a3619 100644
--- a/features/prices/components/Price/Price.tsx
+++ b/features/prices/components/Price/Price.tsx
@@ -16,7 +16,7 @@ export function Price({ price }: { price: PriceCoingecko }) {
   return (
     <p className={styles.price}>
       <span className={`${styles.fiat} ${feedbackClasses}`}>
-        {formatFiat(price.usd, 'USD', locale)}
+        {formatFiat(price?.usd, 'USD', locale)}
       </span>
       {price?.usd_24h_change ? (
         <PriceChange priceChange={price.usd_24h_change} />
diff --git a/features/prices/hooks/use-prices.tsx b/features/prices/hooks/use-prices.tsx
index b0e3e9b..ffeecc4 100644
--- a/features/prices/hooks/use-prices.tsx
+++ b/features/prices/hooks/use-prices.tsx
@@ -24,7 +24,7 @@ export function usePrices(): {
   isValidating: boolean
   isLoading: boolean
 } {
-  const { data, isValidating, isLoading } = useSWR(
+  const { data, error, isValidating, isLoading } = useSWR(
     `/api/prices?tokens=${tokenAddresses}`,
     fetcher
   )
@@ -34,24 +34,33 @@ export function usePrices(): {
   const agixAddress = getTokenAddressBySymbol('AGIX')
   const cudosAddress = getTokenAddressBySymbol('CUDOS')
 
-  if (!data || !oceanAddress || !fetAddress || !agixAddress || !cudosAddress)
-    return {
-      prices: {
-        ocean: { usd: 0, usd_24h_change: 0 },
-        fet: { usd: 0, usd_24h_change: 0 },
-        agix: { usd: 0, usd_24h_change: 0 },
-        cudos: { usd: 0, usd_24h_change: 0 },
-        asi: { usd: 0, usd_24h_change: 0 }
-      },
-      isValidating,
-      isLoading
-    }
+  const pricesEmpty = {
+    ocean: { usd: 0, usd_24h_change: 0 },
+    fet: { usd: 0, usd_24h_change: 0 },
+    agix: { usd: 0, usd_24h_change: 0 },
+    cudos: { usd: 0, usd_24h_change: 0 },
+    asi: { usd: 0, usd_24h_change: 0 }
+  }
 
-  const ocean = data[oceanAddress]
-  const fet = data[fetAddress]
-  const agix = data[agixAddress]
-  const cudos = data[cudosAddress]
-  const asi = fet
+  const isError =
+    !data ||
+    error ||
+    !oceanAddress ||
+    !fetAddress ||
+    !agixAddress ||
+    !cudosAddress
 
-  return { prices: { ocean, fet, agix, cudos, asi }, isValidating, isLoading }
+  return {
+    prices: isError
+      ? pricesEmpty
+      : {
+          ocean: data[oceanAddress],
+          fet: data[fetAddress],
+          agix: data[agixAddress],
+          cudos: data[cudosAddress],
+          asi: data[fetAddress]
+        },
+    isValidating,
+    isLoading
+  }
 }
diff --git a/features/strategies/components/Buy.tsx b/features/strategies/components/Buy.tsx
index 243bcc7..74864c4 100644
--- a/features/strategies/components/Buy.tsx
+++ b/features/strategies/components/Buy.tsx
@@ -26,44 +26,46 @@ export function Buy() {
       </h3>
       <Result
         token={getTokenBySymbol('OCEAN')}
-        amount={debouncedAmount / prices.ocean.usd}
-        amountAsi={(debouncedAmount / prices.ocean.usd) * ratioOceanToAsi}
+        amount={debouncedAmount / prices.ocean?.usd}
+        amountAsi={(debouncedAmount / prices.ocean?.usd) * ratioOceanToAsi}
         amountFiat={
-          (debouncedAmount / prices.ocean.usd) *
+          (debouncedAmount / prices.ocean?.usd) *
           ratioOceanToAsi *
-          prices.asi.usd
+          prices.asi?.usd
         }
         isValidating={isValidating}
         isLoading={isLoading}
       />
       <Result
         token={getTokenBySymbol('AGIX')}
-        amount={debouncedAmount / prices.agix.usd}
-        amountAsi={(debouncedAmount / prices.agix.usd) * ratioAgixToAsi}
+        amount={debouncedAmount / prices.agix?.usd}
+        amountAsi={(debouncedAmount / prices.agix?.usd) * ratioAgixToAsi}
         amountFiat={
-          (debouncedAmount / prices.agix.usd) * ratioAgixToAsi * prices.asi.usd
+          (debouncedAmount / prices.agix?.usd) *
+          ratioAgixToAsi *
+          prices.asi?.usd
         }
         isValidating={isValidating}
         isLoading={isLoading}
       />
       <Result
         token={getTokenBySymbol('CUDOS')}
-        amount={debouncedAmount / prices.cudos.usd}
-        amountAsi={(debouncedAmount / prices.cudos.usd) * ratioCudosToAsi}
+        amount={debouncedAmount / prices.cudos?.usd}
+        amountAsi={(debouncedAmount / prices.cudos?.usd) * ratioCudosToAsi}
         amountFiat={
-          (debouncedAmount / prices.cudos.usd) *
+          (debouncedAmount / prices.cudos?.usd) *
           ratioCudosToAsi *
-          prices.asi.usd
+          prices.asi?.usd
         }
         isValidating={isValidating}
         isLoading={isLoading}
       />
       <Result
         token={getTokenBySymbol('FET')}
-        amount={debouncedAmount / prices.fet.usd}
-        amountAsi={(debouncedAmount / prices.fet.usd) * ratioFetToAsi}
+        amount={debouncedAmount / prices.fet?.usd}
+        amountAsi={(debouncedAmount / prices.fet?.usd) * ratioFetToAsi}
         amountFiat={
-          (debouncedAmount / prices.fet.usd) * ratioFetToAsi * prices.asi.usd
+          (debouncedAmount / prices.fet?.usd) * ratioFetToAsi * prices.asi?.usd
         }
         isValidating={isValidating}
         isLoading={isLoading}
diff --git a/features/strategies/components/Swap/Results.tsx b/features/strategies/components/Swap/Results.tsx
index 1446e86..9bc74b3 100644
--- a/features/strategies/components/Swap/Results.tsx
+++ b/features/strategies/components/Swap/Results.tsx
@@ -46,9 +46,9 @@ export function SwapResults({
   const tokenSelected = tokenSymbol.toLowerCase() as keyof Prices
 
   const amountInUsd = amount * prices[tokenSelected]?.usd
-  const amountToOcean = amountInUsd / prices.ocean.usd
-  const amountToAgix = amountInUsd / prices.agix.usd
-  const amountToCudos = amountInUsd / prices.cudos.usd
+  const amountToOcean = amountInUsd / prices.ocean?.usd
+  const amountToAgix = amountInUsd / prices.agix?.usd
+  const amountToCudos = amountInUsd / prices.cudos?.usd
 
   // As of July 1st, use fixed ratios instead of FET market price
   // for Migration Tool scenario
@@ -60,7 +60,7 @@ export function SwapResults({
         : tokenSelected === 'cudos'
           ? amount * ratioCudosToAsi
           : amount
-    : amountInUsd / prices.fet.usd
+    : amountInUsd / prices.fet?.usd
 
   const showOcean = !isMigration || (isMigration && tokenSelected === 'ocean')
   const showAgix = !isMigration || (isMigration && tokenSelected === 'agix')
@@ -77,10 +77,10 @@ export function SwapResults({
           amountFiat={
             (amountToOceanUniswap || amountToOcean) *
             ratioOceanToAsi *
-            prices.asi.usd
+            prices.asi?.usd
           }
           amountOriginalFiat={
-            (amountToOceanUniswap || amountToOcean) * prices.ocean.usd
+            (amountToOceanUniswap || amountToOcean) * prices.ocean?.usd
           }
           isValidating={isValidatingToOcean || isValidatingPrices}
           isLoading={isLoadingToOcean || isLoadingPrices}
@@ -95,10 +95,10 @@ export function SwapResults({
           amountFiat={
             (amountToAgixUniswap || amountToAgix) *
             ratioAgixToAsi *
-            prices.asi.usd
+            prices.asi?.usd
           }
           amountOriginalFiat={
-            (amountToAgixUniswap || amountToAgix) * prices.agix.usd
+            (amountToAgixUniswap || amountToAgix) * prices.agix?.usd
           }
           isValidating={isValidatingToAgix || isValidatingPrices}
           isLoading={isLoadingToAgix || isLoadingPrices}
@@ -113,10 +113,10 @@ export function SwapResults({
           amountFiat={
             (amountToCudosUniswap || amountToCudos) *
             ratioCudosToAsi *
-            prices.asi.usd
+            prices.asi?.usd
           }
           amountOriginalFiat={
-            (amountToCudosUniswap || amountToCudos) * prices.cudos.usd
+            (amountToCudosUniswap || amountToCudos) * prices.cudos?.usd
           }
           isValidating={isValidatingToCudos || isValidatingPrices}
           isLoading={isLoadingToCudos || isLoadingPrices}
@@ -128,9 +128,9 @@ export function SwapResults({
           token={getTokenBySymbol('FET')}
           amount={amountToFetUniswap || amountToFet}
           amountAsi={(amountToFetUniswap || amountToFet) * ratioFetToAsi}
-          amountFiat={(amountToFetUniswap || amountToFet) * prices.asi.usd}
+          amountFiat={(amountToFetUniswap || amountToFet) * prices.asi?.usd}
           amountOriginalFiat={
-            (amountToFetUniswap || amountToFet) * prices.asi.usd
+            (amountToFetUniswap || amountToFet) * prices.asi?.usd
           }
           isValidating={isValidatingToFet || isValidatingPrices}
           isLoading={isLoadingToFet || isLoadingPrices}