[Dashboard] perf: Optimize chain and contract data processing (#6035)

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))).catch(() => undefined),
     ),
   ).then((chains) => chains.filter((c) => c) as ChainMetadata[]);
 

apps/dashboard/src/app/team/[team_slug]/(team)/~/analytics/page.tsx

@@ -35,7 +35,7 @@ import { TotalSponsoredChartCardUI } from "../../_components/TotalSponsoredCard"
 import { TransactionsChartCardUI } from "../../_components/TransactionsCard";
 
 // revalidate every 5 minutes
-export const revalidate = 300;
+export const maxDuration = 300;
 
 type SearchParams = {
   usersChart?: string;

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/Transactions/TransactionCharts.tsx

@@ -0,0 +1,119 @@
+import { defineChain, getContract } from "thirdweb";
+import { getChainMetadata } from "thirdweb/chains";
+import { TransactionsChartCardUI } from "../../../(team)/_components/TransactionsCard";
+import { getThirdwebClient } from "../../../../../../@/constants/thirdweb.server";
+import { fetchDashboardContractMetadata } from "../../../../../../@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
+import type { TransactionStats } from "../../../../../../types/analytics";
+import { PieChartCard } from "../../../../components/Analytics/PieChartCard";
+
+export function TransactionsChartsUI({
+  data,
+  aggregatedData,
+  searchParams,
+}: {
+  data: TransactionStats[];
+  aggregatedData: TransactionStats[];
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  return (
+    <>
+      <TransactionsChartCardUI
+        searchParams={searchParams}
+        data={data}
+        aggregatedData={aggregatedData}
+        className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
+      />
+      <div className="grid gap-6 max-md:px-6 md:grid-cols-2">
+        <ChainDistributionCard data={aggregatedData} />
+        <ContractDistributionCard data={aggregatedData} />
+      </div>
+    </>
+  );
+}
+
+async function ChainDistributionCard({ data }: { data: TransactionStats[] }) {
+  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>,
+      ),
+    )
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 10) // only top ten
+      .map(async ([key, value]) => {
+        // eslint-disable-next-line no-restricted-syntax
+        const chain = defineChain(Number(key));
+        const chainMeta = await getChainMetadata(chain).catch(() => undefined);
+        return {
+          label: chainMeta?.slug || chain.id.toString(),
+          value,
+          link: `/${chain.id}`,
+        };
+      }),
+  );
+
+  const aggregateFn = () => new Set(data.map((d) => `${d.chainId}`)).size;
+
+  return (
+    <PieChartCard title="Chains" data={reducedData} aggregateFn={aggregateFn} />
+  );
+}
+
+async function ContractDistributionCard({
+  data,
+}: { data: TransactionStats[] }) {
+  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>,
+        ),
+    )
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 10) // only top ten
+      .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).catch(() => undefined);
+        const contractData = await fetchDashboardContractMetadata(
+          getContract({
+            chain,
+            address: contractAddress as string, // we filter above
+            client: getThirdwebClient(),
+          }),
+        ).catch(() => undefined);
+        return {
+          label: `${contractData?.name} (${chainMeta?.slug || chainId})`,
+          link: `/${chainId}/${contractAddress}`,
+          value,
+        };
+      }),
+  );
+
+  const aggregateFn = () =>
+    new Set(
+      data
+        .filter((d) => d.contractAddress)
+        .map((d) => `${d.chainId}:${d.contractAddress}`),
+    ).size;
+
+  return (
+    <PieChartCard
+      title="Contracts"
+      data={reducedData}
+      aggregateFn={aggregateFn}
+    />
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/Transactions/index.tsx

@@ -0,0 +1,50 @@
+import { LoadingChartState } from "components/analytics/empty-chart-state";
+import { Suspense } from "react";
+import type { AnalyticsQueryParams } from "types/analytics";
+import { getClientTransactions } from "../../../../../../@/api/analytics";
+import { TransactionsChartsUI } from "./TransactionCharts";
+
+export function TransactionsCharts(
+  props: AnalyticsQueryParams & {
+    searchParams: { [key: string]: string | string[] | undefined };
+  },
+) {
+  return (
+    // TODO: Add better LoadingChartState
+    <Suspense
+      fallback={
+        <div className="h-[400px]">
+          <LoadingChartState />
+        </div>
+      }
+    >
+      <TransactionsChartCardAsync {...props} />
+    </Suspense>
+  );
+}
+
+async function TransactionsChartCardAsync(
+  props: AnalyticsQueryParams & {
+    searchParams: { [key: string]: string | string[] | undefined };
+  },
+) {
+  const [data, aggregatedData] = await Promise.all([
+    getClientTransactions(props),
+    getClientTransactions({
+      ...props,
+      period: "all",
+    }),
+  ]);
+
+  if (!aggregatedData.length) {
+    return null;
+  }
+
+  return (
+    <TransactionsChartsUI
+      data={data}
+      aggregatedData={aggregatedData}
+      searchParams={props.searchParams}
+    />
+  );
+}