fix: handle coingecko API errors [LW-8256] (#1996)

* fix: token display if pricing data not available

* fix: display assets price data expired banner

* fix: activity display if pricing data not available

* fix: show empty dash for cardano data when balance information unavailable

* fix: btc wallet display if pricing data not available

* fix: dapp-related amount transformers fallback

* fix: token detail drawer when no token pricing available

* fix: hide fiat amount when failed to fetch the price (BTC Send Flow)

* fix: hide fiat amount when failed to fetch the price (ADA Send Flow)

* chore: fix lint/format and unit test

---------

Co-authored-by: Przemysław Włodek <[email protected]>
Co-authored-by: vetalcore <[email protected]>

Author: 3 people

apps/browser-extension-wallet/src/hooks/useWalletActivities.ts

@@ -29,7 +29,6 @@ export const useWalletActivities = ({
 
   const fetchWalletActivities = useCallback(async () => {
     fiatCurrency &&
-      cardanoFiatPrice &&
       getWalletActivities({
         fiatCurrency,
         cardanoFiatPrice,
@@ -141,7 +140,7 @@ export const useWalletActivitiesPaginated = ({
 
   useEffect(() => {
     (async () => {
-      if (loadedHistory?.transactions === undefined || !fiatCurrency || !cardanoFiatPrice) return;
+      if (loadedHistory?.transactions === undefined || !fiatCurrency) return;
 
       handleUpdateWalletActivities(loadedHistory.transactions.slice(0, currentPage * pageSize));
     })();

apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts

@@ -180,7 +180,19 @@ const fetchAdaPrice = (coinPrices: CoinPrices) => {
     `https://coingecko.live-mainnet.eks.lw.iog.io/api/v3/simple/price?ids=cardano&vs_currencies=${vsCurrencies}&include_24hr_change=true`
   )
     .then(async (response) => {
-      const { cardano: prices } = await response.json();
+      // Check if the response is successful
+      if (!response.ok) {
+        throw new Error(`Failed to fetch ADA price: HTTP ${response.status}`);
+      }
+
+      const responseData = await response.json();
+
+      // Check if we have valid cardano price data
+      if (!responseData.cardano) {
+        throw new Error('Invalid ADA price response: missing cardano data');
+      }
+
+      const { cardano: prices } = responseData;
       // save the last fetched ada price in background storage
       await setBackgroundStorage({
         fiatPrices: {
@@ -222,8 +234,20 @@ const fetchBitcoinPrice = (coinPrices: CoinPrices) => {
     `https://coingecko.live-mainnet.eks.lw.iog.io/api/v3/simple/price?ids=bitcoin&vs_currencies=${vsCurrencies}&include_24hr_change=true`
   )
     .then(async (response) => {
-      const { bitcoin: prices } = await response.json();
-      // save the last fetched ada price in background storage
+      // Check if the response is successful
+      if (!response.ok) {
+        throw new Error(`Failed to fetch Bitcoin price: HTTP ${response.status}`);
+      }
+
+      const responseData = await response.json();
+
+      // Check if we have valid bitcoin price data
+      if (!responseData.bitcoin) {
+        throw new Error('Invalid Bitcoin price response: missing bitcoin data');
+      }
+
+      const { bitcoin: prices } = responseData;
+      // save the last fetched bitcoin price in background storage
       await setBackgroundStorage({
         fiatBitcoinPrices: {
           prices,

apps/browser-extension-wallet/src/utils/__tests__/assets-transformers.test.ts

@@ -131,7 +131,7 @@ describe('Testing assets transformers', () => {
         balance: 'balance',
         price: 'formattedPrice',
         variation: 'variationParserResult',
-        fiatBalance: `- ${params.fiatCode}`
+        fiatBalance: '-'
       });
       expect(formatNumberSpy).toBeCalledWith(params.fiatPrice?.price.toString(), 3);
       expect(walletBalanceTransformerSpy).toBeCalledWith(params.total.coins.toString(), params.fiatPrice?.price);
@@ -189,7 +189,7 @@ describe('Testing assets transformers', () => {
       const isNumericSpy = jest.spyOn(formatNumber, 'isNumeric');
       isNumericSpy.mockReturnValue(false);
 
-      expect(assetsTransformers.cardanoTransformer(params).fiatBalance).toEqual(`? ${params.fiatCode}`);
+      expect(assetsTransformers.cardanoTransformer(params).fiatBalance).toEqual('-');
       expect(isNumericSpy).toBeCalledWith(walletBalanceTransformerResult.fiatBalance);
 
       isNumericSpy.mockRestore();

apps/browser-extension-wallet/src/utils/assets-transformers.ts

@@ -32,8 +32,8 @@ export const cardanoTransformer = (params: {
     balance.fiatBalance === '-'
       ? balance.fiatBalance
       : isNumeric(balance.fiatBalance)
-      ? formatLocaleNumber(balance.fiatBalance)
-      : '?';
+      ? `${formatLocaleNumber(balance.fiatBalance)} ${fiatCode}`
+      : '-';
 
   return {
     id: cardanoCoin.id,
@@ -44,7 +44,7 @@ export const cardanoTransformer = (params: {
     price: isNumber(fiatPrice?.price) ? formatLocaleNumber(fiatPrice.price.toString(), 3) : '-',
     variation: fiatPrice?.priceVariationPercentage24h ? variationParser(fiatPrice.priceVariationPercentage24h) : '-',
     balance: areBalancesVisible ? formatLocaleNumber(balance.coinBalance) : balancesPlaceholder,
-    fiatBalance: areBalancesVisible ? `${fiatBalance} ${fiatCode}` : balancesPlaceholder
+    fiatBalance: areBalancesVisible ? fiatBalance : balancesPlaceholder
   };
 };
 

apps/browser-extension-wallet/src/views/bitcoin-mode/features/activity/components/ActivityLayout.tsx

@@ -169,9 +169,9 @@ export const ActivityLayout = (): React.ReactElement => {
               ? 'PENDING'
               : formattedTimestamp(new Date(transaction.timestamp * 1000)),
           amount: `${new BigNumber(net.toString()).dividedBy(100_000_000).toFixed(8, BigNumber.ROUND_HALF_UP)} BTC`,
-          fiatAmount: `${computeBalance(Number(net) / SATS_IN_BTC, fiatCurrency.code, bitcoinPrice)} ${
-            fiatCurrency.code === 'ADA' ? 'BTC' : fiatCurrency.code
-          }`,
+          fiatAmount: `${
+            bitcoinPrice ? computeBalance(Number(net) / SATS_IN_BTC, fiatCurrency.code, bitcoinPrice) : '-'
+          } ${fiatCurrency.code === 'ADA' ? 'BTC' : fiatCurrency.code}`,
           status:
             transaction.status === Bitcoin.TransactionStatus.Pending ? ActivityStatus.PENDING : ActivityStatus.SUCCESS,
           type,

apps/browser-extension-wallet/src/views/bitcoin-mode/features/assets/components/Assets.tsx

@@ -96,7 +96,7 @@ export const Assets = ({ topSection }: AssetsProps): React.ReactElement => {
               variation: currencyCode === 'BTC' ? '-' : `${bitcoinPriceVariation.toFixed(2)}`,
               balance: areBalancesVisible ? (Number(balance) / SATS_IN_BTC).toString() : hiddenBalancePlaceholder,
               fiatBalance: areBalancesVisible
-                ? `${computeBalance(totalBalance, fiatCurrency.code, 1)} ${currencyCode}`
+                ? `${bitcoinPrice ? computeBalance(totalBalance, fiatCurrency.code, 1) : '-'} ${currencyCode}`
                 : hiddenBalancePlaceholder
             }
           ]

apps/browser-extension-wallet/src/views/bitcoin-mode/features/assets/components/AssetsPortfolio/AssetsPortfolio.tsx

@@ -85,13 +85,11 @@ export const AssetsPortfolio = ({
     redirectToSend({ params: { id: '1' } });
   };
 
-  // Display banner after 3 minutes since last coin price save
+  // Display banner after 3 minutes since last coin price save or when there's an error
   const isPriceOutdated = useMemo(
     () =>
-      // If there is no timestamp, that means that we never saved a previous price, so we just check if it has an error
-      coinPrice.status === 'error' && coinPrice.timestamp
-        ? dayjs().diff(coinPrice.timestamp, 'minutes') >= MINUTES_UNTIL_WARNING_BANNER
-        : coinPrice.status === 'error',
+      coinPrice.status === 'error' ||
+      (coinPrice.timestamp && dayjs().diff(coinPrice.timestamp, 'minutes') >= MINUTES_UNTIL_WARNING_BANNER),
     [coinPrice]
   );
 

apps/browser-extension-wallet/src/views/bitcoin-mode/features/send/components/ReviewTransaction.tsx

@@ -70,7 +70,7 @@ export const ReviewTransaction: React.FC<ReviewTransactionProps> = ({
                 weight={isPopupView ? '$medium' : '$semibold'}
                 data-testid="output-summary-amount-fiat"
               >
-                {Number.parseFloat(usdValue.toFixed(2))} USD
+                {btcToUsdRate ? `${Number.parseFloat(usdValue.toFixed(2))} USD` : ''}
               </Text.Body.Normal>
             </Flex>
           </RowContainer>

apps/browser-extension-wallet/src/views/bitcoin-mode/features/send/components/SendStepOne.tsx

@@ -188,7 +188,9 @@ export const SendStepOne: React.FC<SendStepOneProps> = ({
     balance: `${t('browserView.transaction.btc.send.balance')}: ${(availableBalance / SATS_IN_BTC).toFixed(8)}`
   };
 
-  const fiatValue = `≈ ${new BigNumber(enteredAmount.toString()).toFixed(2, BigNumber.ROUND_HALF_UP)} USD`;
+  const fiatValue = bitcoinPrice
+    ? `≈ ${new BigNumber(enteredAmount.toString()).toFixed(2, BigNumber.ROUND_HALF_UP)} USD`
+    : '';
 
   const isAddressInputInvalidHandle =
     isAdaHandleEnabled &&

apps/browser-extension-wallet/src/views/browser-view/components/PortfolioBalance/PortfolioBalance.module.scss

@@ -1,5 +1,5 @@
 @import '../../../../../../../packages/common/src/ui/styles/theme.scss';
 
 .warningBanner {
-  margin: size_unit(3) 0 -#{size_unit(3)} 0;
+  margin-top: size_unit(3);
 }