[PRO-134] Add Bridge Volume pie chart in project overview page (#8488)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the analytics components by refining data formatting, adding currency support, and improving the UI for better data visualization in the dashboard.

### Detailed summary
- Added `maximumFractionDigits` to formatting utilities.
- Integrated currency formatting in `PieChart` and `TotalValueChartHeader`.
- Updated `ProjectHighlightsCard` to remove total volume and adjust labels.
- Introduced `BridgeChartCard` for displaying bridge usage data.
- Enhanced `TotalVolumePieChart` to conditionally display total volume and adjusted data handling.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/analytics/empty-chart-state.tsx

@@ -28,14 +28,14 @@ export function EmptyChartState({
   type,
 }: {
   children?: React.ReactNode;
-  type: "bar" | "area";
+  type: "bar" | "area" | "none";
 }) {
   const barChartData = useMemo(() => generateRandomData(), []);
 
   return (
     <div className="relative z-0 h-full w-full">
       <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center text-base text-muted-foreground">
-        {children ?? (
+        {children || (
           <div className="flex items-center gap-3 flex-col">
             <div className="rounded-full border p-2 bg-background">
               <XIcon className="size-4" />
@@ -44,7 +44,7 @@ export function EmptyChartState({
           </div>
         )}
       </div>
-      <SkeletonBarChart data={barChartData} type={type} />
+      {type !== "none" && <SkeletonBarChart data={barChartData} type={type} />}
     </div>
   );
 }

apps/dashboard/src/@/components/blocks/charts/chart-header.tsx

@@ -6,6 +6,7 @@ import { SkeletonContainer } from "@/components/ui/skeleton";
 export function TotalValueChartHeader(props: {
   total: number;
   title: string;
+  isUsd?: boolean;
   isPending: boolean;
   viewMoreLink: string | undefined;
 }) {
@@ -18,7 +19,9 @@ export function TotalValueChartHeader(props: {
           render={(value) => {
             return (
               <p className="text-3xl font-semibold tracking-tight">
-                {compactNumberFormatter.format(value)}
+                {props.isUsd
+                  ? compactUSDFormatter.format(value)
+                  : compactNumberFormatter.format(value)}
               </p>
             );
           }}
@@ -48,3 +51,10 @@ const compactNumberFormatter = new Intl.NumberFormat("en-US", {
   notation: "compact",
   maximumFractionDigits: 2,
 });
+
+const compactUSDFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 2,
+  style: "currency",
+  currency: "USD",
+});

apps/dashboard/src/@/utils/format-utils.ts

@@ -1,5 +1,6 @@
 const compactNumberFormatter = new Intl.NumberFormat("en-US", {
   notation: "compact",
+  maximumFractionDigits: 2,
 });
 
 export const formatTickerNumber = (value: number) => {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/bridge-card.tsx

@@ -0,0 +1,83 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getUniversalBridgeUsage } from "@/api/analytics";
+import { LoadingChartState } from "@/components/analytics/empty-chart-state";
+import { TotalValueChartHeader } from "@/components/blocks/charts/chart-header";
+import type { UniversalBridgeStats } from "@/types/analytics";
+import { TotalVolumePieChart } from "../payments/components/TotalVolumePieChart";
+
+async function AsyncBridgeCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const data = await getUniversalBridgeUsage(
+    {
+      from: props.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: props.to,
+    },
+    props.authToken,
+  ).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  return (
+    <BridgeChartCardUI
+      data={data}
+      teamSlug={props.teamSlug}
+      projectSlug={props.projectSlug}
+    />
+  );
+}
+
+export function BridgeChartCard(props: {
+  from: Date;
+  to: Date;
+  interval: "day" | "week";
+  projectId: string;
+  teamId: string;
+  authToken: string;
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  return (
+    <ResponsiveSuspense
+      fallback={<LoadingChartState className="min-h-[40px] h-full border" />}
+      searchParamsUsed={["from", "to", "interval"]}
+    >
+      <AsyncBridgeCard {...props} />
+    </ResponsiveSuspense>
+  );
+}
+
+function BridgeChartCardUI(props: {
+  data: UniversalBridgeStats[];
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  const total =
+    props.data.reduce((acc, curr) => acc + curr.amountUsdCents, 0) / 100;
+
+  return (
+    <div className="flex flex-col bg-card border rounded-lg">
+      <TotalValueChartHeader
+        title="Bridge Volume"
+        total={total}
+        isUsd={true}
+        isPending={false}
+        viewMoreLink={`/team/${props.teamSlug}/${props.projectSlug}/bridge`}
+      />
+      <div className="p-6 grow flex items-center justify-center">
+        <TotalVolumePieChart data={props.data} hideTotal={true} />
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card-ui.tsx

@@ -8,7 +8,6 @@ import { CombinedBarChartCard } from "../../../../components/Analytics/CombinedB
 type AggregatedMetrics = {
   activeUsers: number;
   newUsers: number;
-  totalVolume: number;
   feesCollected: number;
 };
 
@@ -37,18 +36,6 @@ export function ProjectHighlightsCard(props: {
   const chartConfig = {
     activeUsers: { color: "hsl(var(--chart-1))", label: "Active Users" },
     newUsers: { color: "hsl(var(--chart-3))", label: "New Users" },
-    totalVolume: {
-      color: "hsl(var(--chart-2))",
-      emptyContent: (
-        <EmptyStateContent
-          description="Onramp, swap, and bridge with thirdweb's Payments."
-          link="https://portal.thirdweb.com/payments"
-          metric="Payments"
-        />
-      ),
-      isCurrency: true,
-      label: "Total Volume",
-    },
     feesCollected: {
       color: "hsl(var(--chart-4))",
       emptyContent: (
@@ -59,7 +46,7 @@ export function ProjectHighlightsCard(props: {
         />
       ),
       isCurrency: true,
-      label: "Bridge Fee Revenue",
+      label: "Bridge Revenue",
     },
   } as const;
 
@@ -129,14 +116,6 @@ function processTimeSeriesData(
       .filter((u) => new Date(u.date).toISOString().slice(0, 10) === date)
       .reduce((acc, curr) => acc + curr.newUsers, 0);
 
-    const volume = volumeStats
-      .filter(
-        (v) =>
-          new Date(v.date).toISOString().slice(0, 10) === date &&
-          v.status === "completed",
-      )
-      .reduce((acc, curr) => acc + curr.amountUsdCents / 100, 0);
-
     const fees = volumeStats
       .filter(
         (v) =>
@@ -150,7 +129,6 @@ function processTimeSeriesData(
       date: date,
       feesCollected: fees,
       newUsers: newUsers,
-      totalVolume: volume,
     });
   }
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/project-analytics.tsx

@@ -6,6 +6,7 @@ import { LoadingChartState } from "@/components/analytics/empty-chart-state";
 import { TransactionsChartCardAsync } from "../components/Transactions";
 import { AIAnalyticsChartCard } from "./ai-card";
 import { AllWalletConnectionsChart } from "./all-wallet-connections-chart";
+import { BridgeChartCard } from "./bridge-card";
 import { ProjectHighlightCard } from "./highlights-card";
 import { IndexerRequestsChartCard } from "./indexer-card";
 import { RPCRequestsChartCard } from "./rpc-card";
@@ -37,17 +38,31 @@ export async function ProjectAnalytics(props: {
         searchParams={searchParams}
       />
 
-      {/* wallets */}
-      <AllWalletConnectionsChart
-        teamSlug={params.team_slug}
-        projectSlug={params.project_slug}
-        authToken={authToken}
-        projectId={project.id}
-        from={range.from}
-        to={range.to}
-        interval={interval}
-        teamId={project.teamId}
-      />
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* wallets */}
+        <AllWalletConnectionsChart
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          authToken={authToken}
+          projectId={project.id}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          teamId={project.teamId}
+        />
+
+        {/* bridge */}
+        <BridgeChartCard
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
+          from={range.from}
+          to={range.to}
+          interval={interval}
+          projectId={project.id}
+          teamId={project.teamId}
+          authToken={authToken}
+        />
+      </div>
 
       <div className="grid gap-6 md:grid-cols-2">
         {/* Indexer */}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx

@@ -67,24 +67,9 @@ export async function PayAnalytics(props: {
     walletDataPromise,
   ]);
 
-  const hasVolume = volumeData.some((d) => d.amountUsdCents > 0);
-  const hasWallet = walletData.some((d) => d.count > 0);
-
-  if (!hasVolume && !hasWallet) {
-    return null;
-  }
-
   return (
     <div>
       <div>
-        <div>
-          <h2 className="text-xl font-semibold tracking-tight mb-1">
-            Analytics
-          </h2>
-          <p className="text-muted-foreground mb-4 text-sm">
-            Track Bridge volume, customers, payouts, and success rates.
-          </p>
-        </div>
         <div className="mb-4 flex justify-start">
           <PayAnalyticsFilter />
         </div>