Show token prices

.env

@@ -16,5 +16,7 @@ NEXT_PUBLIC_INFURA_IPFS_API_SECRET=""
 NEXT_PUBLIC_SITE_URL="https://app.dev.fractalframework.xyz/"
 # WalletConnect Cloud Project ID
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=""
+# CoinGecko API key
+COINGECKO_API_KEY=""
 # Shutter Public Key
 NEXT_PUBLIC_SHUTTER_EON_PUBKEY=0x0e6493bbb4ee8b19aa9b70367685049ff01dc9382c46aed83f8bc07d2a5ba3e6030bd83b942c1fd3dff5b79bef3b40bf6b666e51e7f0be14ed62daaffad47435265f5c9403b1a801921981f7d8659a9bd91fe92fb1cf9afdb16178a532adfaf51a237103874bb03afafe9cab2118dae1be5f08a0a28bf488c1581e9db4bc23ca

netlify/functions/tokensPrices.mts

@@ -0,0 +1,80 @@
+import { getStore } from '@netlify/blobs';
+
+type TokenPriceMetadata = {
+  expiration: number;
+};
+
+export default async function getTokenprices(request: Request) {
+  const store = getStore('fractal-token-prices-store');
+  const tokensString = new URL(request.url).searchParams.get('tokens');
+
+  if (!tokensString) {
+    Response.json({ error: 'Tokens to request were not provided' });
+  }
+  const tokens = tokensString!.split(',');
+  try {
+    const now = new Date().getTime();
+    const cachedPrices = await Promise.all(
+      tokens.map(tokenAddress => store.getWithMetadata(tokenAddress, { type: 'json' }))
+    );
+    const cachedUnexpiredPrices = cachedPrices
+      .filter(
+        tokenPrice =>
+          tokenPrice && (tokenPrice?.metadata as any as TokenPriceMetadata).expiration <= now
+      )
+      .map(tokenPrice => ({
+        tokenAddress: tokenPrice?.data.tokenAddress,
+        price: tokenPrice?.data.price,
+      }));
+    const nonCachedTokensAddresses = tokens.filter(
+      address => !cachedUnexpiredPrices.find(tokenPrice => tokenPrice.tokenAddress === address)
+    );
+    const responseBody: Record<string, number> = {};
+    cachedUnexpiredPrices.forEach(tokenPrice => {
+      responseBody[tokenPrice.tokenAddress] = tokenPrice.price;
+    });
+    if (nonCachedTokensAddresses.length === 0) {
+      return Response.json({ data: responseBody });
+    }
+    if (!process.env.COINGECKO_API_KEY) {
+      console.error('CoinGecko API key is missing');
+      return { error: 'Unknown error while fetching prices' };
+    }
+    const PUBLIC_DEMO_API_BASE_URL = 'https://api.coingecko.com/api/v3/';
+    const AUTH_QUERY_PARAM = `?x_cg_demo_api_key=${process.env.COINGECKO_API_KEY}`;
+    const tokenPricesUrl = `${PUBLIC_DEMO_API_BASE_URL}simple/token_price/ethereum/${AUTH_QUERY_PARAM}&vs_currencies=usd&contract_addresses=${nonCachedTokensAddresses.join(
+      ','
+    )}`;
+
+    const tokenPricesResponse = await fetch(tokenPricesUrl);
+    const tokenPricesResponseJson = await tokenPricesResponse.json();
+    const tokenPriceMetadata = { metadata: { expiration: now + 1000 * 60 * 30 } };
+    Object.keys(tokenPricesResponseJson).forEach(tokenAddress => {
+      const price = tokenPricesResponseJson[tokenAddress].usd;
+      responseBody[tokenAddress] = price;
+      store.setJSON(tokenAddress, { tokenAddress, price }, tokenPriceMetadata);
+    });
+
+    const ethAsset = nonCachedTokensAddresses.find(token => token === 'ethereum');
+    if (ethAsset) {
+      // Unfortunately, there's no way avoiding 2 requests. We either need to fetch asset IDs from CoinGecko for given token contract addresses
+      // And then use this endpoint to get all the prices. But that brings us way more bandwidth
+      // Or, we are doing this "hardcoded" call for ETH price. But our request for token prices simpler.
+      const ethPriceUrl = `${PUBLIC_DEMO_API_BASE_URL}simple/price${AUTH_QUERY_PARAM}&ids=ethereum&vs_currencies=usd`;
+      const ethPriceResponse = await fetch(ethPriceUrl);
+      const ethPriceResponseJson = await ethPriceResponse.json();
+      store.setJSON(
+        'ethereum',
+        { tokenAddress: 'ethereum', price: ethPriceResponseJson.ethereum.usd },
+        tokenPriceMetadata
+      );
+      responseBody.ethereum = ethPriceResponseJson.ethereum;
+    }
+    return Response.json({ data: responseBody });
+  } catch (e) {
+    console.error('Error while fetching prices', e);
+    return Response.json({
+      error: 'Unknown error while fetching prices',
+    });
+  }
+}

package.json

@@ -16,6 +16,8 @@
     "@fractal-framework/fractal-contracts": "^0.4.0",
     "@graphprotocol/client-apollo": "^1.0.16",
     "@lido-sdk/contracts": "^3.0.2",
+    "@netlify/blobs": "^6.5.0",
+    "@netlify/functions": "^2.6.0",
     "@rainbow-me/rainbowkit": "^1.3.3",
     "@safe-global/safe-deployments": "^1.23.0",
     "@safe-global/safe-ethers-lib": "^1.9.2",

src/components/pages/DAOTreasury/hooks/useFormatCoins.tsx

@@ -1,5 +1,7 @@
 import { SafeBalanceUsdResponse } from '@safe-global/safe-service-client';
-import { ethers } from 'ethers';
+import { BigNumber, ethers } from 'ethers';
+import { useEffect, useState } from 'react';
+import usePriceAPI from '../../../../providers/App/hooks/usePriceAPI';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { formatCoin, formatUSD } from '../../../../utils/numberFormats';
 
@@ -17,27 +19,55 @@ export interface TokenDisplayData {
 
 export function useFormatCoins(assets: SafeBalanceUsdResponse[]) {
   const { nativeTokenSymbol, nativeTokenIcon } = useNetworkConfig();
-  let totalFiatValue = 0;
-  let displayData: TokenDisplayData[] = [];
-  for (let i = 0; i < assets.length; i++) {
-    let asset = assets[i];
-    if (asset.balance === '0') continue;
-    totalFiatValue += Number(asset.fiatBalance);
-    let symbol = asset.token === null ? nativeTokenSymbol : asset.token.symbol;
-    const formatted: TokenDisplayData = {
-      iconUri: asset.token === null ? nativeTokenIcon : asset.token.logoUri,
-      address: asset.tokenAddress === null ? ethers.constants.AddressZero : asset.tokenAddress,
-      truncatedCoinTotal: formatCoin(asset.balance, true, asset?.token?.decimals, symbol),
-      fiatValue: Number(asset.fiatBalance),
-      symbol: symbol,
-      fiatConversion: `1 ${symbol} = ${formatUSD(Number(asset.fiatConversion))}`,
-      fullCoinTotal: formatCoin(asset.balance, false, asset?.token?.decimals, symbol),
-      fiatDisplayValue: formatUSD(Number(asset.fiatBalance)),
-      rawValue: asset.balance,
-    };
-    displayData.push(formatted);
-  }
-  displayData.sort((a, b) => b.fiatValue - a.fiatValue); // sort by USD value
+  const [totalFiatValue, setTotalFiatValue] = useState(0);
+  const [displayData, setDisplayData] = useState<TokenDisplayData[]>([]);
+  const { getTokenPrices } = usePriceAPI();
+
+  useEffect(() => {
+    async function loadDisplayData() {
+      let newTotalFiatValue = 0;
+      let newDisplayData = [];
+      const tokenPrices = await getTokenPrices(assets);
+      for (let i = 0; i < assets.length; i++) {
+        let asset = assets[i];
+        if (asset.balance === '0') continue;
+        const tokenPrice = asset.tokenAddress
+          ? tokenPrices[asset.tokenAddress.toLowerCase()]
+          : tokenPrices.ethereum;
+
+        let tokenFiatBalance = 0;
+        if (tokenPrice && asset.balance) {
+          const multiplicator = 1000000000;
+          tokenFiatBalance =
+            BigNumber.from(asset.balance)
+              .mul(Math.round(tokenPrice * multiplicator)) // We'll be loosing precision with super small prices like for meme coins. But that shouldn't be awfully off - maybe up to 1%
+              .div(BigNumber.from(10).pow(asset.token?.decimals || 18))
+              .toNumber() / multiplicator;
+          newTotalFiatValue += tokenFiatBalance;
+        }
+
+        let symbol = asset.token === null ? nativeTokenSymbol : asset.token.symbol;
+        const formatted: TokenDisplayData = {
+          iconUri: asset.token === null ? nativeTokenIcon : asset.token.logoUri,
+          address: asset.tokenAddress === null ? ethers.constants.AddressZero : asset.tokenAddress,
+          truncatedCoinTotal: formatCoin(asset.balance, true, asset?.token?.decimals, symbol),
+          fiatValue: tokenFiatBalance,
+          symbol: symbol,
+          fiatConversion: tokenPrice ? `1 ${symbol} = ${formatUSD(tokenPrice)}` : 'N/A',
+          fullCoinTotal: formatCoin(asset.balance, false, asset?.token?.decimals, symbol),
+          fiatDisplayValue: formatUSD(tokenFiatBalance),
+          rawValue: asset.balance,
+        };
+        newDisplayData.push(formatted);
+      }
+      newDisplayData.sort((a, b) => b.fiatValue - a.fiatValue); // sort by USD value
+      setTotalFiatValue(newTotalFiatValue);
+      setDisplayData(newDisplayData);
+    }
+
+    loadDisplayData();
+  }, [assets, nativeTokenIcon, nativeTokenSymbol, getTokenPrices]);
+
   return {
     totalFiatValue,
     displayData,

src/components/pages/DaoDashboard/Info/InfoTreasury.tsx

@@ -3,18 +3,19 @@ import { Treasury } from '@decent-org/fractal-ui';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { BarLoader } from '../../../ui/loaders/BarLoader';
-import { useTreasuryTotalUSD } from '../../DAOTreasury/hooks/useTreasuryTotalUSD';
+import { useFormatCoins } from '../../DAOTreasury/hooks/useFormatCoins';
 
 interface IDAOGovernance {}
 
 export function InfoTreasury({}: IDAOGovernance) {
-  const { t } = useTranslation('dashboard');
-  const totalUSD = useTreasuryTotalUSD();
-
   const {
     node: { daoAddress },
+    treasury: { assetsFungible },
   } = useFractal();
 
+  const { t } = useTranslation('dashboard');
+  const { totalFiatValue } = useFormatCoins(assetsFungible);
+
   if (!daoAddress) {
     return (
       <Flex
@@ -48,7 +49,7 @@ export function InfoTreasury({}: IDAOGovernance) {
         textStyle="text-lg-mono-semibold"
         color="grayscale.100"
       >
-        {totalUSD}
+        {totalFiatValue}
       </Text>
     </Box>
   );

src/i18n/locales/en/treasury.json

@@ -21,5 +21,6 @@
     "stake": "Stake",
     "unstake": "Unstake",
     "claimUnstakedETH": "Claim ETH",
-    "nonClaimableYet": "Your ETH cannot yet be claimed from Lido"
+    "nonClaimableYet": "Your ETH cannot yet be claimed from Lido",
+    "tokenPriceFetchingError": "There was an error obtaining token prices. Please, try visiting Treasury page later."
 }

src/providers/App/hooks/usePriceAPI.ts

@@ -0,0 +1,46 @@
+import { SafeBalanceUsdResponse } from '@safe-global/safe-service-client';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { logError } from '../../../helpers/errorLogging';
+import { useNetworkConfig } from '../../NetworkConfig/NetworkConfigProvider';
+
+export default function usePriceAPI() {
+  const { chainId } = useNetworkConfig();
+  const { t } = useTranslation('treasury');
+
+  const getTokenPrices = useCallback(
+    async (tokens: SafeBalanceUsdResponse[]) => {
+      if (chainId !== 1) {
+        // Support only mainnet for now. CoinGecko does not support Sepolia (obviously, I guess :D) and we don't want to burn API credits to "simulate" prices display
+        return;
+      }
+
+      try {
+        const tokensAddresses = tokens
+          .filter(token => token.balance !== '0' && !!token.tokenAddress)
+          .map(token => token.tokenAddress);
+        const ethAsset = tokens.find(token => !token.tokenAddress);
+        if (ethAsset) {
+          tokensAddresses.push('ethereum');
+        }
+        const pricesResponse = await fetch(
+          `/.netlify/functions/tokensPrices?tokens=${tokensAddresses.join(',')}`
+        );
+
+        const pricesResponseBody = await pricesResponse.json();
+        if (pricesResponseBody.error) {
+          // We don't need to log error here as it is supposed to be logged through Netlify function anyway
+          toast.warning(t('tokenPriceFetchingError'));
+        } else {
+          return pricesResponseBody.data;
+        }
+      } catch (e) {
+        logError('Error while getting tokens prices', e);
+        return;
+      }
+    },
+    [chainId, t]
+  );
+  return { getTokenPrices };
+}

tsconfig.json

@@ -34,6 +34,7 @@
     "tests",
     "test",
     "app",
+    "netlify/functions",
     ".next/types/**/*.ts",
     "next-env.d.ts",
     "next.config.js",