fix: client side rate limiter for coingecko (#1898)

perf: refactor cardanoTokenPrices to make less requests

- tokens price tracking is now fully in the SW: UI no longer requests token price,
only reads what's currently available
- throttle fetch requests that come from UI
- batch token price map updates sent back to UI
- wait until initial token price fetch completes before requesting again
- add checks to exclude nfts from token price requests: some of those checks
are probably redundant today, but it's good to be defensive to make sure it
doesn't break again in the future

other changes:
- do not bother the user about 429 errors: it's a bug on client-side,
we can't fix it without extension update

Author: mkazlauskas

apps/browser-extension-wallet/src/api/transformers.ts

@@ -14,6 +14,7 @@ import { formatDate, formatTime } from '../utils/format-date';
 import { TokenInfo } from '@src/utils/get-assets-information';
 import { getTokenAmountInFiat, parseFiat } from '@src/utils/assets-transformers';
 import { PriceResult } from '@hooks';
+import { mayBeNFT } from '@src/utils/is-nft';
 
 export const walletBalanceTransformer = (lovelaceBalance: string, fiat?: number): WalletBalance => {
   const adaValue = Wallet.util.lovelacesToAdaString(lovelaceBalance);
@@ -61,7 +62,7 @@ export const tokenTransformer = (
   const { name } = { ...tokenMetadata, ...nftMetadata };
   const [assetId, bigintBalance] = assetBalance;
   const amount = Wallet.util.calculateAssetBalance(bigintBalance, assetInfo);
-  const tokenPriceInAda = prices?.cardano.getTokenPrice(assetId)?.priceInAda;
+  const tokenPriceInAda = mayBeNFT(assetInfo) ? undefined : prices?.cardano.getTokenPrice(assetId)?.priceInAda;
   const fiatBalance =
     tokenMetadata !== undefined &&
     tokenPriceInAda &&

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

@@ -1,11 +1,9 @@
 import { useMemo } from 'react';
-import { logger, useObservable } from '@lace/common';
+import { useObservable } from '@lace/common';
 import { TokenPrices, StatusTypes, ADAPricesKeys, TokenPrice } from '@lib/scripts/types';
 import { useBackgroundServiceAPIContext, useCurrencyStore } from '../providers';
 import { CARDANO_COIN_SYMBOL } from '@src/utils/constants';
 import { Wallet } from '@lace/cardano';
-import { config } from '@src/config';
-import { useWalletStore } from '@stores';
 
 export interface PriceResult {
   cardano: {
@@ -27,15 +25,12 @@ export interface UseFetchCoinPrice {
   timestamp?: number;
 }
 
-const { TOKEN_PRICE_CHECK_INTERVAL } = config();
-
 export const useFetchCoinPrice = (): UseFetchCoinPrice => {
-  const { coinPrices, trackCardanoTokenPrice } = useBackgroundServiceAPIContext();
+  const { coinPrices } = useBackgroundServiceAPIContext();
   const { fiatCurrency } = useCurrencyStore();
   const tokenPrices = useObservable(coinPrices.tokenPrices$);
   const adaPrices = useObservable(coinPrices.adaPrices$);
   const bitcoinPrices = useObservable(coinPrices.bitcoinPrices$);
-  const networkId = useWalletStore((state) => state.currentChain?.networkId);
 
   const isAdaCurrency = fiatCurrency.code === CARDANO_COIN_SYMBOL[Wallet.Cardano.NetworkId.Mainnet];
 
@@ -50,35 +45,13 @@ export const useFetchCoinPrice = (): UseFetchCoinPrice => {
 
   const cardano = useMemo(
     () => ({
-      getTokenPrice: (assetId: Wallet.Cardano.AssetId): TokenPrice | undefined => {
-        const tokenPrice = tokenPrices?.tokens.get(assetId);
-        // Actually track the price only for token in Cardano mainnet, otherwise just do nothing
-        const trackPrice = () =>
-          networkId === Wallet.Cardano.NetworkId.Mainnet
-            ? trackCardanoTokenPrice(assetId).catch((error) => logger.error(error))
-            : undefined;
-
-        // If the price for this token was never fetched, wee need to track it
-        if (!tokenPrice) {
-          trackPrice();
-
-          return undefined;
-        }
-
-        const { lastFetchTime, price } = tokenPrice;
-
-        // If the price was fetched, but it is still not present, it means the price for this token is not tracked by CoinGecko:
-        // let's retry a new fetch only after the TOKEN_PRICE_CHECK_INTERVAL to check if now the price is being tracked.
-        if (!price && lastFetchTime < Date.now() - TOKEN_PRICE_CHECK_INTERVAL) trackPrice();
-
-        // eslint-disable-next-line consistent-return
-        return price;
-      },
+      getTokenPrice: (assetId: Wallet.Cardano.AssetId): TokenPrice | undefined =>
+        tokenPrices?.tokens.get(assetId)?.price,
       price: isAdaCurrency ? 1 : adaPrices?.prices?.[fiatCurrency.code.toLowerCase() as ADAPricesKeys],
       priceVariationPercentage24h:
         adaPrices?.prices?.[`${fiatCurrency.code.toLowerCase()}_24h_change` as ADAPricesKeys] || 0
     }),
-    [adaPrices?.prices, fiatCurrency.code, isAdaCurrency, tokenPrices?.tokens, trackCardanoTokenPrice, networkId]
+    [adaPrices?.prices, fiatCurrency.code, isAdaCurrency, tokenPrices?.tokens]
   );
 
   return useMemo(

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

@@ -19,7 +19,6 @@ export const backgroundServiceProperties: RemoteApiProperties<BackgroundService>
     adaPrices$: RemoteApiPropertyType.HotObservable,
     tokenPrices$: RemoteApiPropertyType.HotObservable
   },
-  trackCardanoTokenPrice: RemoteApiPropertyType.MethodReturningPromise,
   handleOpenBrowser: RemoteApiPropertyType.MethodReturningPromise,
   handleOpenNamiBrowser: RemoteApiPropertyType.MethodReturningPromise,
   closeAllTabsAndOpenPopup: RemoteApiPropertyType.MethodReturningPromise,

apps/browser-extension-wallet/src/lib/scripts/background/expose-background-service.ts

@@ -0,0 +1,4 @@
+import { wallet$ } from './wallet';
+import { exposeBackgroundService } from './services/utilityServices';
+
+exposeBackgroundService(wallet$);

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

@@ -3,6 +3,7 @@ import './onError';
 import './onUpdate';
 import './services';
 import './services/expose';
+import './expose-background-service';
 import './keep-alive-sw';
 import './onUninstall';
 import './nami-migration';

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

@@ -8,6 +8,7 @@ const INTERNAL_SERVER_ERROR_STATUS_CODE = 500;
 const GATEWAY_TIMEOUT_STATUS_CODE = 503;
 const UNAUTHORIZED_STATUS_CODE = 401;
 const NOT_FOUND_STATUS_CODE = 404;
+const TOO_MANY_REQUESTS_STATUS_CODE = 429;
 
 // eslint-disable-next-line unicorn/no-null
 let sentryUrl: string | null = '';
@@ -21,7 +22,10 @@ const isSentryRequest = (url: string) => !!sentryUrl && url.startsWith(sentryUrl
 const handleProviderServerErrors = (data: WebRequest.OnCompletedDetailsType) => {
   if (data?.type === 'xmlhttprequest' && runtime.getURL('').startsWith(data.initiator)) {
     const statusCodeQualifiedAsFailure =
+      // normal response for empty/no data from Blockfrost
       data.statusCode !== NOT_FOUND_STATUS_CODE &&
+      // client's fault, not server's fault
+      data.statusCode !== TOO_MANY_REQUESTS_STATUS_CODE &&
       data.statusCode > UNAUTHORIZED_STATUS_CODE &&
       data.statusCode < GATEWAY_TIMEOUT_STATUS_CODE;
     if (statusCodeQualifiedAsFailure) {