addys summary for all native assets (#1720)

rainbow-me · Oct 2, 2024 · e297955 · e297955
1 parent b8964d1
commit e297955
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 89 deletions.
diff --git a/src/core/resources/addys/addysSummary.ts b/src/core/resources/addys/addysSummary.ts
@@ -11,17 +11,6 @@ import {
 import { SupportedCurrencyKey } from '~/core/references';
 import { ChainId } from '~/core/types/chains';
 
-enum SummarySupportedChainId {
-  mainnet = ChainId.mainnet as number,
-  optimism = ChainId.optimism as number,
-  polygon = ChainId.polygon as number,
-  arbitrum = ChainId.arbitrum as number,
-  base = ChainId.base as number,
-  zora = ChainId.zora as number,
-  bsc = ChainId.bsc as number,
-  avalanche = ChainId.avalanche as number,
-}
-
 export interface AddySummary {
   data: {
     addresses: {
@@ -38,17 +27,17 @@ export interface AddySummary {
           last_activity: number;
           asset_value: number;
         };
-      };
-      summary_by_chain: {
-        [key in keyof typeof SummarySupportedChainId]: {
-          native_balance: {
-            symbol: string;
-            quantity: string;
-            decimals: number;
+        summary_by_chain: {
+          [key in keyof typeof ChainId]: {
+            native_balance: {
+              symbol: string;
+              quantity: string;
+              decimals: number;
+            };
+            num_erc20s: number;
+            last_activity: number;
+            asset_value: number;
           };
-          num_erc20s: number;
-          last_activity: number;
-          asset_value: number;
         };
       };
     };

diff --git a/src/core/resources/assets/externalToken.ts b/src/core/resources/assets/externalToken.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQueries, useQuery } from '@tanstack/react-query';
 import { Address } from 'viem';
 
 import { metadataClient } from '~/core/graphql';
@@ -34,6 +34,11 @@ type ExternalTokenArgs = {
   currency: SupportedCurrencyKey;
 };
 
+type ExternalTokensArgs = {
+  assets: { address: AddressOrEth; chainId: ChainId }[];
+  currency: SupportedCurrencyKey;
+};
+
 // Query Key for Token Price
 export const externalTokenQueryKey = ({
   address,
@@ -135,3 +140,26 @@ export function useExternalToken(
     ...config,
   });
 }
+
+export function useExternalTokens(
+  { assets, currency }: ExternalTokensArgs,
+  config: QueryConfig<
+    ExternalTokenQueryFunctionResult,
+    Error,
+    ParsedAsset,
+    externalTokenQueryKey
+  > = {},
+) {
+  const queries = useQueries({
+    queries: assets.map(({ address, chainId }) => ({
+      queryKey: externalTokenQueryKey({ address, chainId, currency }),
+      queryFn: () => fetchExternalToken({ address, chainId, currency }),
+      staleTime: EXTERNAL_TOKEN_STALE_TIME,
+      gcTime: EXTERNAL_TOKEN_CACHE_TIME,
+      enabled: !!address && !!chainId,
+      ...config,
+    })),
+  });
+
+  return queries;
+}
diff --git a/src/entries/popup/hooks/useNativeAssets.ts b/src/entries/popup/hooks/useNativeAssets.ts
@@ -1,30 +1,28 @@
 import { chainsNativeAsset } from '~/core/references/chains';
-import { useAssets } from '~/core/resources/assets';
-import { fetchAssets } from '~/core/resources/assets/assets';
-import { currentCurrencyStore, useCurrentCurrencyStore } from '~/core/state';
+import { useExternalTokens } from '~/core/resources/assets/externalToken';
+import { useCurrentCurrencyStore } from '~/core/state';
+import { ParsedAsset } from '~/core/types/assets';
 import { ChainId } from '~/core/types/chains';
 
-const NATIVE_ASSETS = [
-  { address: chainsNativeAsset[ChainId.mainnet], chainId: ChainId.mainnet },
-  { address: chainsNativeAsset[ChainId.bsc], chainId: ChainId.bsc },
-  { address: chainsNativeAsset[ChainId.polygon], chainId: ChainId.polygon },
-  { address: chainsNativeAsset[ChainId.avalanche], chainId: ChainId.avalanche },
-  { address: chainsNativeAsset[ChainId.degen], chainId: ChainId.degen },
-];
-export async function getNativeAssets() {
-  const { currentCurrency } = currentCurrencyStore.getState();
-  const assets = await fetchAssets({
-    assets: NATIVE_ASSETS,
-    currency: currentCurrency,
-  });
-  return assets;
-}
+const NATIVE_ASSETS = Object.keys(chainsNativeAsset).map((chainId) => ({
+  address: chainsNativeAsset[Number(chainId) as ChainId],
+  chainId: Number(chainId) as ChainId,
+}));
 
 export function useNativeAssets() {
   const { currentCurrency: currency } = useCurrentCurrencyStore();
-  const { data: assets } = useAssets({
+  const response = useExternalTokens({
     assets: NATIVE_ASSETS,
     currency,
   });
-  return assets;
+  return response
+    .map((asset) => (asset.data ? asset.data : null))
+    .filter(Boolean)
+    .reduce(
+      (acc, asset) => {
+        acc[asset.chainId] = asset;
+        return acc;
+      },
+      {} as Record<ChainId, ParsedAsset>,
+    );
 }
diff --git a/src/entries/popup/hooks/useWalletsSummary.ts b/src/entries/popup/hooks/useWalletsSummary.ts
@@ -44,56 +44,31 @@ const parseAddressSummary = ({
 }): WalletSummary => {
   const addressData =
     addysSummary?.data.addresses[address.toLowerCase() as Address];
-  const {
-    ETH: ethRawBalance,
-    BNB: bnbRawBalance,
-    POL: polRawBalance,
-    AVAX: avaxRawBalance,
-  } = addressData?.summary.native_balance_by_symbol || {};
+  const summaryByChain = addressData?.summary_by_chain;
 
-  const ethBalance = convertRawAmountToBalance(ethRawBalance?.quantity || 0, {
-    decimals: 18,
-  }).amount;
-  const ethCurrencyBalance = convertAmountAndPriceToNativeDisplay(
-    ethBalance || 0,
-    nativeAssets?.[ChainId.mainnet]?.price?.value || 0,
-    currentCurrency,
-  ).amount;
+  const chainIds = Object.keys(summaryByChain || {}).map((id) =>
+    Number(id),
+  ) as ChainId[];
 
-  const bnbBalance = convertRawAmountToBalance(bnbRawBalance?.quantity || 0, {
-    decimals: 18,
-  }).amount;
-  const bnbCurrencyBalance = convertAmountAndPriceToNativeDisplay(
-    bnbBalance || 0,
-    nativeAssets?.[ChainId.bsc]?.price?.value || 0,
-    currentCurrency,
-  ).amount;
+  const chainBalances = chainIds.map((chainId) => {
+    const chainData = summaryByChain?.[chainId];
+    const chainRawBalance = chainData?.native_balance;
+    const chainBalance = convertRawAmountToBalance(
+      chainRawBalance?.quantity || 0,
+      {
+        decimals: 18,
+      },
+    ).amount;
+    const chainCurrencyBalance = convertAmountAndPriceToNativeDisplay(
+      chainBalance || 0,
+      nativeAssets?.[chainId]?.price?.value || 0,
+      currentCurrency,
+    ).amount;
 
-  const polBalance = convertRawAmountToBalance(
-    polRawBalance?.quantity || 0,
-    {
-      decimals: 18,
-    },
-  ).amount;
-  const polCurrencyBalance = convertAmountAndPriceToNativeDisplay(
-    polBalance || 0,
-    nativeAssets?.[ChainId.polygon]?.price?.value || 0,
-    currentCurrency,
-  ).amount;
+    return chainCurrencyBalance;
+  });
 
-  const avaxBalance = convertRawAmountToBalance(avaxRawBalance?.quantity || 0, {
-    decimals: 18,
-  }).amount;
-  const avaxCurrencyBalance = convertAmountAndPriceToNativeDisplay(
-    avaxBalance || 0,
-    nativeAssets?.[ChainId.avalanche]?.price?.value || 0,
-    currentCurrency,
-  ).amount;
-
-  const balance = add(
-    add(ethCurrencyBalance, bnbCurrencyBalance),
-    add(polCurrencyBalance, avaxCurrencyBalance),
-  );
+  const balance = chainBalances.reduce((prev, curr) => add(prev, curr), '0');
 
   const balanceDisplay = convertAmountToNativeDisplay(balance, currentCurrency);
   const lastTx = addressData?.summary.last_activity;
@@ -115,7 +90,6 @@ export const useWalletsSummary = ({ addresses }: { addresses: Address[] }) => {
     addresses,
     currency: currentCurrency,
   });
-
   const walletsSummary: { [key: Address]: WalletSummary } = useMemo(
     () =>
       addresses?.reduce((prev: { [key: Address]: WalletSummary }, address) => {