feat: coingecko token price API

Author: iccicci

apps/browser-extension-wallet/.env.defaults

@@ -16,7 +16,6 @@ USE_BITCOIN_NETWORK_SWITCHING=false
 USE_PASSWORD_VERIFICATION=false
 USE_DAPP_CONNECTOR=true
 USE_TREZOR_HW=true
-USE_TOKEN_PRICING=true
 USE_NFT_FOLDERS=true
 USE_MULTI_CURRENCY=true
 USE_HIDE_MY_BALANCE=true
@@ -106,6 +105,10 @@ MAESTRO_URL_TESTNET=https://xbt-testnet.gomaestro-api.org
 MAESTRO_PROJECT_ID_MAINNET=
 MAESTRO_PROJECT_ID_TESTNET=
 
+# Lace proxy to CoinGecko
+
+TOKEN_PRICES_URL=https://coingecko.live-mainnet.eks.lw.iog.io/api/v3/onchain/networks
+
 # Bitcoin Explorer URLs
 MEMPOOL_URL_MAINNET=https://mempool.space/tx
 MEMPOOL_URL_TESTNET4=https://mempool.space/testnet4/tx

apps/browser-extension-wallet/.env.developerpreview

@@ -14,7 +14,6 @@ SAVED_PRICE_DURATION_IN_MINUTES=720
 USE_PASSWORD_VERIFICATION=false
 USE_DAPP_CONNECTOR=true
 USE_TREZOR_HW=false
-USE_TOKEN_PRICING=true
 USE_NFT_FOLDERS=true
 USE_MULTI_CURRENCY=true
 USE_HIDE_MY_BALANCE=true

apps/browser-extension-wallet/.env.example

@@ -14,7 +14,6 @@ WALLET_POLLING_INTERVAL_IN_SEC=45
 USE_PASSWORD_VERIFICATION=false
 USE_DAPP_CONNECTOR=true
 USE_TREZOR_HW=true
-USE_TOKEN_PRICING=true
 USE_NFT_FOLDERS=true
 USE_MULTI_CURRENCY=true
 USE_HIDE_MY_BALANCE=true

apps/browser-extension-wallet/src/api/__tests__/token-transformer.test.ts

@@ -40,16 +40,11 @@ describe('Testing tokenTransformer function', () => {
   test('should format token with fiatBalance', () => {
     const prices = {
       ...mockPrices,
-      tokens: new Map([
-        [
-          balance[0],
-          {
-            id: balance[0].toString(),
-            priceInAda: 1.2,
-            priceVariationPercentage24h: 2.9
-          }
-        ]
-      ])
+      cardano: {
+        ...mockPrices.cardano,
+        getTokenPrice: (assetId: Wallet.Cardano.AssetId) =>
+          assetId === balance[0] ? { priceInAda: 1.2, priceVariationPercentage24h: 2.9 } : undefined
+      }
     };
     const result = tokenTransformer(mockAsset, balance, prices, defaultCurrency);
     const tokenPrice = 1.2;

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

@@ -61,7 +61,7 @@ export const tokenTransformer = (
   const { name } = { ...tokenMetadata, ...nftMetadata };
   const [assetId, bigintBalance] = assetBalance;
   const amount = Wallet.util.calculateAssetBalance(bigintBalance, assetInfo);
-  const tokenPriceInAda = prices?.tokens?.get(assetId)?.priceInAda;
+  const tokenPriceInAda = prices?.cardano.getTokenPrice(assetId)?.priceInAda;
   const fiatBalance =
     tokenMetadata !== undefined &&
     tokenPriceInAda &&

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

@@ -8,6 +8,7 @@ import { act } from 'react-dom/test-utils';
 import { BehaviorSubject } from 'rxjs';
 
 import { BackgroundServiceAPIProviderProps } from '@src/providers';
+import { Wallet } from '@lace/cardano';
 
 const tokenPrices$ = new BehaviorSubject({});
 const adaPrices$ = new BehaviorSubject({});
@@ -17,6 +18,14 @@ jest.mock('@providers/currency', (): typeof CurrencyProvider => ({
   useCurrencyStore: mockUseCurrencyStore
 }));
 
+jest.mock('../../stores', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ...jest.requireActual<any>('../../stores'),
+  useWalletStore: () => ({
+    currentChain: { networkId: Wallet.Cardano.NetworkId.Mainnet }
+  })
+}));
+
 const backgroundServices = {
   getBackgroundStorage: jest.fn(),
   setBackgroundStorage: jest.fn(),
@@ -32,9 +41,11 @@ jest.mock('@providers/BackgroundServiceAPI', () => ({
 describe('Testing useFetchCoinPrice hook', () => {
   test('should return proper state', async () => {
     const hook = renderHook(() => useFetchCoinPrice());
+    expect(typeof hook.result.current.priceResult.cardano.getTokenPrice).toBe('function');
     expect(hook.result.current).toEqual({
       priceResult: {
         cardano: {
+          getTokenPrice: hook.result.current.priceResult.cardano.getTokenPrice,
           price: 1,
           priceVariationPercentage24h: 0
         },
@@ -108,12 +119,14 @@ describe('Testing useFetchCoinPrice hook', () => {
           priceVariationPercentage24h: 0
         },
         cardano: {
+          getTokenPrice: hook.result.current.priceResult.cardano.getTokenPrice,
           price: 1,
           priceVariationPercentage24h: 0
         },
         tokens
       },
-      status: 'fetched'
+      status: 'fetched',
+      timestamp: undefined
     });
 
     const fiatCurrency = { code: 'USD', symbol: '$' };
@@ -130,6 +143,7 @@ describe('Testing useFetchCoinPrice hook', () => {
           priceVariationPercentage24h: 0
         },
         cardano: {
+          getTokenPrice: hook.result.current.priceResult.cardano.getTokenPrice,
           price: prices.usd,
           priceVariationPercentage24h: prices.usd_24h_change
         },

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

@@ -1,19 +1,23 @@
 import { useMemo } from 'react';
-import { useObservable } from '@lace/common';
-import { TokenPrices, StatusTypes, ADAPricesKeys } from '@lib/scripts/types';
+import { logger, 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: {
+    getTokenPrice: (assetId: Wallet.Cardano.AssetId) => TokenPrice | undefined;
     price: number;
     priceVariationPercentage24h: number;
   };
   bitcoin: {
     price: number;
     priceVariationPercentage24h: number;
   };
+  /** @deprecated Use `cardano.getTokenPrice` instead. */
   tokens: TokenPrices;
 }
 
@@ -23,13 +27,15 @@ export interface UseFetchCoinPrice {
   timestamp?: number;
 }
 
+const { TOKEN_PRICE_CHECK_INTERVAL } = config();
+
 export const useFetchCoinPrice = (): UseFetchCoinPrice => {
-  const backgroundServices = useBackgroundServiceAPIContext();
+  const { coinPrices, trackCardanoTokenPrice } = useBackgroundServiceAPIContext();
   const { fiatCurrency } = useCurrencyStore();
-  const { coinPrices } = backgroundServices;
   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];
 
@@ -42,25 +48,49 @@ export const useFetchCoinPrice = (): UseFetchCoinPrice => {
     [bitcoinPrices?.prices, fiatCurrency.code]
   );
 
-  const price = useMemo(
+  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;
+      },
       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]
+    [adaPrices?.prices, fiatCurrency.code, isAdaCurrency, tokenPrices?.tokens, trackCardanoTokenPrice, networkId]
   );
 
   return useMemo(
     () => ({
       priceResult: {
-        cardano: price,
+        cardano,
         bitcoin: bitcoinPrice,
         tokens: tokenPrices?.tokens
       },
       status: adaPrices?.status,
       timestamp: adaPrices?.timestamp
     }),
-    [tokenPrices, adaPrices, price, bitcoinPrice]
+    [tokenPrices, adaPrices, cardano, bitcoinPrice]
   );
 };

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

@@ -19,6 +19,7 @@ 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/services/cardanoTokenPrices.ts

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { BehaviorSubject } from 'rxjs';
+import { storage } from 'webextension-polyfill';
+import { TokenPrices, Status } from '../../types';
+import { Wallet } from '@lace/cardano';
+import { Cardano } from '@cardano-sdk/core';
+import { config } from '@src/config';
+
+/** The subset of token data from CoinGecko relevant for Lace to show token prices. */
+type PriceData = [priceInAda: number, priceVariationPercentage24h: number];
+
+/** The structure to store token data and when given data for a token was fetched optimized to have the thinnest size once stringified. */
+type FetchedPriceData = [lastFetchTime: number] | [lastFetchTime: number, priceData: PriceData];
+
+const CACHE_KEY = 'cardano-token-prices';
+const { TOKEN_PRICE_CHECK_INTERVAL } = config();
+
+/**
+ * Given the total amount of token prices data is quite small, rather than fetching it from cache every time it is required,
+ * the entire data is cached in RAM by `priceData` to make read accesses as cheap as possible.
+ *
+ * Write accesses are centralized through `updatePriceData` to ensure data consistency.
+ */
+let priceData: Record<string, FetchedPriceData>;
+
+const tokenPrices$ = new BehaviorSubject<{ tokens: TokenPrices } & Status>({
+  tokens: new Map(),
+  status: 'idle'
+});
+
+const emitPrices = () =>
+  tokenPrices$.next({
+    status: 'fetched',
+    tokens: new Map(
+      Object.entries(priceData)
+        .filter(([, data]) => data)
+        .map(([assetId, [lastFetchTime, data]]) => {
+          const asset = assetId as Wallet.Cardano.AssetId;
+
+          if (!data) return [asset, { lastFetchTime }];
+
+          const [priceInAda, priceVariationPercentage24h] = data;
+
+          return [asset, { lastFetchTime, price: { priceInAda, priceVariationPercentage24h } }];
+        })
+    )
+  });
+
+const updatePriceData = (assetId: string, data?: PriceData) => {
+  const now = Date.now();
+
+  priceData[assetId] = data ? [now, data] : [now];
+  emitPrices();
+  storage.local
+    .set({ [CACHE_KEY]: priceData })
+    .catch((error) => console.error('Error setting cached cardano token prices', error));
+};
+
+const fetchPrice = async (assetId: Cardano.AssetId) => {
+  const [lastFetchTime, cachedData] = priceData[assetId] || [0];
+
+  // If recently fetched, do nothing
+  if (lastFetchTime > Date.now() - TOKEN_PRICE_CHECK_INTERVAL) return;
+
+  // Immediately set the lastFetchTime to avoid other events fetching the same token price to actually perform the request
+  updatePriceData(assetId, cachedData);
+
+  try {
+    const url = `${process.env.TOKEN_PRICES_URL}/cardano/tokens/${assetId}/pools`;
+    const response = await fetch(url);
+    const body = await response.json();
+    const data = body.data?.[0]?.attributes;
+
+    // If not the expected data, do nothing
+    if (typeof data !== 'object') return;
+
+    const {
+      base_token_price_native_currency: priceInAda,
+      price_change_percentage: { h24: h24Change }
+    } = data;
+
+    // If not the expected data, do nothing
+    if (typeof priceInAda !== 'string' || typeof h24Change !== 'string') return;
+
+    updatePriceData(assetId, [Number.parseFloat(priceInAda), Number.parseFloat(h24Change)]);
+  } catch (error) {
+    console.error('Error fetching cardano token price', assetId, error);
+  }
+};
+
+const fetchPrices = async () => {
+  for (const assetId in priceData) await fetchPrice(assetId as Cardano.AssetId);
+
+  setTimeout(fetchPrices, TOKEN_PRICE_CHECK_INTERVAL);
+};
+
+export const initCardanoTokenPrices = () => {
+  storage.local
+    .get(CACHE_KEY)
+    .then((data) => {
+      priceData = data[CACHE_KEY] || {};
+
+      emitPrices();
+      fetchPrices();
+    })
+    .catch((error) => {
+      console.error('Error getting cached cardano token prices', error);
+      tokenPrices$.next({ tokens: new Map(), status: 'error' });
+    });
+
+  return tokenPrices$;
+};
+
+export const trackCardanoTokenPrice = async (assetId: Cardano.AssetId) => {
+  // If init not yet completed, do nothing
+  if (!priceData) return;
+
+  fetchPrice(assetId);
+};