[Dashboard] perf: Optimize chain and contract data processing

Author: joaquim-verges

apps/dashboard/src/app/team/[team_slug]/(team)/_components/TransactionsCard.tsx

@@ -23,11 +23,13 @@ export async function TransactionsChartCardUI({
   title?: string;
   description?: string;
 }) {
+  const uniqueChainIds = [
+    ...new Set(data.map((item) => item.chainId).filter(Boolean)),
+  ];
   const chains = await Promise.all(
-    data.map(
-      (item) =>
-        // eslint-disable-next-line no-restricted-syntax
-        item.chainId && getChainMetadata(defineChain(Number(item.chainId))),
+    uniqueChainIds.map((chainId) =>
+      // eslint-disable-next-line no-restricted-syntax
+      getChainMetadata(defineChain(Number(chainId))),
     ),
   ).then((chains) => chains.filter((c) => c) as ChainMetadata[]);
 

apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

@@ -31,7 +31,6 @@ import {
   defineChain,
   getChainMetadata,
 } from "thirdweb/chains";
-import { shortenAddress } from "thirdweb/utils";
 import { type WalletId, getWalletInfo } from "thirdweb/wallets";
 import { TransactionsChartCardUI } from "../(team)/_components/TransactionsCard";
 import { getThirdwebClient } from "../../../../@/constants/thirdweb.server";
@@ -383,29 +382,25 @@ function AuthMethodDistributionCard({ data }: { data: InAppWalletStats[] }) {
 }
 
 async function ChainDistributionCard({ data }: { data: TransactionStats[] }) {
-  const formattedData = await Promise.all(
-    data.map(async (w) => {
+  const reducedData = await Promise.all(
+    Object.entries(
+      data.reduce(
+        (acc, curr) => {
+          acc[curr.chainId] = (acc[curr.chainId] || 0) + curr.count;
+          return acc;
+        },
+        {} as Record<string, number>,
+      ),
+    ).map(async ([key, value]) => {
       // eslint-disable-next-line no-restricted-syntax
-      const chain = await getChainMetadata(defineChain(Number(w.chainId)));
+      const chain = defineChain(Number(key));
+      const chainMeta = await getChainMetadata(chain);
       return {
-        chainId: w.chainId,
-        count: w.count,
-        chainName: chain?.slug,
+        label: chainMeta?.slug || chain.id.toString(),
+        value,
       };
     }),
   );
-  const reducedData = Object.entries(
-    formattedData.reduce(
-      (acc, curr) => {
-        acc[curr.chainName] = (acc[curr.chainName] || 0) + curr.count;
-        return acc;
-      },
-      {} as Record<string, number>,
-    ),
-  ).map(([key, value]) => ({
-    label: key,
-    value,
-  }));
 
   const aggregateFn = () => reducedData.length;
 
@@ -417,53 +412,38 @@ async function ChainDistributionCard({ data }: { data: TransactionStats[] }) {
 async function ContractDistributionCard({
   data,
 }: { data: TransactionStats[] }) {
-  const formattedData = (
-    await Promise.all(
-      data.map(async (w) => {
-        // eslint-disable-next-line no-restricted-syntax
-        const chain = defineChain(Number(w.chainId));
-        const chainMeta = await getChainMetadata(chain);
-        if (!w.contractAddress) {
-          return null;
-        }
-        const contractData = await fetchDashboardContractMetadata(
-          getContract({
-            chain,
-            address: w.contractAddress,
-            client: getThirdwebClient(),
-          }),
-        ).catch(() => undefined);
-        return {
-          chainId: w.chainId,
-          count: w.count,
-          chainName: chainMeta?.slug || w.chainId.toString(),
-          contractAddress: w.contractAddress,
-          contractLabel:
-            contractData?.name || shortenAddress(w.contractAddress),
-        };
-      }),
-    )
-  ).filter((d) => d !== null);
-
-  const reducedData = Object.entries(
-    formattedData.reduce(
-      (acc, curr) => {
-        acc[`${curr.chainName}:${curr.contractAddress}:${curr.contractLabel}`] =
-          (acc[
-            `${curr.chainName}:${curr.contractAddress}:${curr.contractLabel}`
-          ] || 0) + curr.count;
-        return acc;
-      },
-      {} as Record<string, number>,
-    ),
-  ).map(([key, value]) => {
-    const [chainName, contractAddress, contractLabel] = key.split(":");
-    return {
-      label: `${contractLabel} (${chainName})`,
-      link: `/${chainName}/${contractAddress}`,
-      value,
-    };
-  });
+  const reducedData = await Promise.all(
+    Object.entries(
+      data
+        .filter((d) => d.contractAddress)
+        .reduce(
+          (acc, curr) => {
+            acc[`${curr.chainId}:${curr.contractAddress}`] =
+              (acc[`${curr.chainId}:${curr.contractAddress}`] || 0) +
+              curr.count;
+            return acc;
+          },
+          {} as Record<string, number>,
+        ),
+    ).map(async ([key, value]) => {
+      const [chainId, contractAddress] = key.split(":");
+      // eslint-disable-next-line no-restricted-syntax
+      const chain = defineChain(Number(chainId));
+      const chainMeta = await getChainMetadata(chain);
+      const contractData = await fetchDashboardContractMetadata(
+        getContract({
+          chain,
+          address: contractAddress as string, // we filter above
+          client: getThirdwebClient(),
+        }),
+      ).catch(() => undefined);
+      return {
+        label: `${contractData?.name} (${chainMeta?.slug})`,
+        link: `/${chainId}/${contractAddress}`,
+        value,
+      };
+    }),
+  );
 
   const aggregateFn = () => reducedData.length;