add rpc tab with analytics

Author: iuwqyir

apps/dashboard/src/@/api/analytics.ts

@@ -6,7 +6,6 @@ import type {
   EcosystemWalletStats,
   EngineCloudStats,
   InAppWalletStats,
-  RpcMethodStats,
   TransactionStats,
   UniversalBridgeStats,
   UniversalBridgeWalletStats,
@@ -40,6 +39,18 @@ interface InsightUsageStats {
   totalRequests: number;
 }
 
+export interface RpcMethodStats {
+  date: string;
+  evmMethod: string;
+  count: number;
+}
+
+export interface RpcUsageTypeStats {
+  date: string;
+  usageType: string;
+  count: number;
+}
+
 async function fetchAnalytics(
   input: string | URL,
   init?: RequestInit,
@@ -251,6 +262,26 @@ export async function getRpcMethodUsage(
   return json.data as RpcMethodStats[];
 }
 
+export async function getRpcUsageByType(
+  params: AnalyticsQueryParams,
+): Promise<RpcUsageTypeStats[]> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/rpc/usage-types?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    console.error("Failed to fetch RPC usage");
+    return [];
+  }
+
+  const json = await res.json();
+  return json.data as RpcUsageTypeStats[];
+}
+
 export async function getWalletUsers(
   params: AnalyticsQueryParams,
 ): Promise<WalletUserStats[]> {

apps/dashboard/src/@/types/analytics.ts

@@ -39,12 +39,6 @@ export interface TransactionStats {
   count: number;
 }
 
-export interface RpcMethodStats {
-  date: string;
-  evmMethod: string;
-  count: number;
-}
-
 export interface EngineCloudStats {
   date: string;
   chainId: string;

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

@@ -7,6 +7,7 @@ import {
   CoinsIcon,
   HomeIcon,
   LockIcon,
+  RssIcon,
   SettingsIcon,
   WalletIcon,
 } from "lucide-react";
@@ -103,6 +104,11 @@ export function ProjectSidebarLayout(props: {
               icon: SmartAccountIcon,
               label: "Account Abstraction",
             },
+            {
+              href: `${layoutPath}/rpc`,
+              icon: RssIcon,
+              label: "RPC",
+            },
             {
               href: `${layoutPath}/vault`,
               icon: LockIcon,

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
+import type { RpcMethodStats } from "@/api/analytics";
 import { BadgeContainer } from "@/storybook/utils";
-import type { RpcMethodStats } from "@/types/analytics";
 import { RpcMethodBarChartCardUI } from "./RpcMethodBarChartCardUI";
 
 const meta = {

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

@@ -7,14 +7,14 @@ import {
   BarChart as RechartsBarChart,
   XAxis,
 } from "recharts";
+import type { RpcMethodStats } from "@/api/analytics";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import type { RpcMethodStats } from "@/types/analytics";
 import { EmptyStateCard } from "../../../../../components/Analytics/EmptyStateCard";
 
 export function RpcMethodBarChartCardUI({

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

@@ -0,0 +1,107 @@
+"use client";
+import { useMemo } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { shortenLargeNumber } from "thirdweb/utils";
+import type { RpcMethodStats } from "@/api/analytics";
+import { Card } from "@/components/ui/card";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { CardHeading } from "../../universal-bridge/components/common";
+
+export function TopRPCMethodsTable(props: {
+  data: RpcMethodStats[];
+  client: ThirdwebClient;
+}) {
+  const tableData = useMemo(() => {
+    return props.data?.sort((a, b) => b.count - a.count).slice(0, 30);
+  }, [props.data]);
+  const isEmpty = useMemo(() => tableData.length === 0, [tableData]);
+
+  return (
+    <Card className="relative flex flex-col rounded-xl border border-border bg-card p-4">
+      {/* header */}
+      <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+        <CardHeading>Top EVM Methods Called </CardHeading>
+      </div>
+
+      <div className="h-5" />
+      <TableContainer scrollableContainerClassName="h-[280px]">
+        <Table>
+          <TableHeader className="sticky top-0 z-10 bg-background">
+            <TableRow>
+              <TableHead>Method</TableHead>
+              <TableHead>Requests</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {tableData.map((method, i) => {
+              return (
+                <MethodTableRow
+                  client={props.client}
+                  key={method.evmMethod}
+                  method={method}
+                  rowIndex={i}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+        {isEmpty && (
+          <div className="flex min-h-[240px] w-full items-center justify-center text-muted-foreground text-sm">
+            No data available
+          </div>
+        )}
+      </TableContainer>
+    </Card>
+  );
+}
+
+function MethodTableRow(props: {
+  method?: {
+    evmMethod: string;
+    count: number;
+  };
+  client: ThirdwebClient;
+  rowIndex: number;
+}) {
+  const delayAnim = {
+    animationDelay: `${props.rowIndex * 100}ms`,
+  };
+
+  return (
+    <TableRow>
+      <TableCell>
+        <SkeletonContainer
+          className="inline-flex"
+          loadedData={props.method?.evmMethod}
+          render={(v) => (
+            <p className={"truncate max-w-[280px]"} title={v}>
+              {v}
+            </p>
+          )}
+          skeletonData="..."
+          style={delayAnim}
+        />
+      </TableCell>
+      <TableCell>
+        <SkeletonContainer
+          className="inline-flex"
+          loadedData={props.method?.count}
+          render={(v) => {
+            return <p>{shortenLargeNumber(v)}</p>;
+          }}
+          skeletonData={0}
+          style={delayAnim}
+        />
+      </TableCell>
+    </TableRow>
+  );
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { format } from "date-fns";
+import { shortenLargeNumber } from "thirdweb/utils";
+import type { RpcUsageTypeStats } from "@/api/analytics";
+import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
+
+export function RequestsGraph(props: { data: RpcUsageTypeStats[] }) {
+  return (
+    <ThirdwebAreaChart
+      chartClassName="aspect-[1.5] lg:aspect-[4]"
+      config={{
+        requests: {
+          color: "hsl(var(--chart-1))",
+          label: "Count",
+        },
+      }}
+      data={props.data
+        .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+        .reduce(
+          (acc, curr) => {
+            const existingEntry = acc.find((e) => e.time === curr.date);
+            if (existingEntry) {
+              existingEntry.requests += curr.count;
+            } else {
+              acc.push({
+                requests: curr.count,
+                time: curr.date,
+              });
+            }
+            return acc;
+          },
+          [] as { requests: number; time: string }[],
+        )}
+      header={{
+        description: "Requests over time.",
+        title: "RPC Requests",
+      }}
+      hideLabel={false}
+      isPending={false}
+      showLegend
+      toolTipLabelFormatter={(label) => {
+        return format(label, "MMM dd, HH:mm");
+      }}
+      toolTipValueFormatter={(value) => {
+        return shortenLargeNumber(value as number);
+      }}
+      xAxis={{
+        sameDay: true,
+      }}
+      yAxis
+    />
+  );
+}

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

@@ -0,0 +1,100 @@
+import { ActivityIcon } from "lucide-react";
+import { ResponsiveSuspense } from "responsive-rsc";
+import type { ThirdwebClient } from "thirdweb";
+import { getRpcMethodUsage, getRpcUsageByType } from "@/api/analytics";
+import type { Range } from "@/components/analytics/date-range-selector";
+import { StatCard } from "@/components/analytics/stat";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TopRPCMethodsTable } from "./MethodsTable";
+import { RequestsGraph } from "./RequestsGraph";
+import { RpcAnalyticsFilter } from "./RpcAnalyticsFilter";
+import { RpcFTUX } from "./RpcFtux";
+
+export async function RPCAnalytics(props: {
+  projectClientId: string;
+  client: ThirdwebClient;
+  projectId: string;
+  teamId: string;
+  range: Range;
+  interval: "day" | "week";
+}) {
+  const { projectId, teamId, range, interval } = props;
+
+  // TODO: add requests by status code, but currently not performant enough
+  const allRequestsByUsageTypePromise = getRpcUsageByType({
+    from: range.from,
+    period: "all",
+    projectId: projectId,
+    teamId: teamId,
+    to: range.to,
+  });
+  const requestsByUsageTypePromise = getRpcUsageByType({
+    from: range.from,
+    period: interval,
+    projectId: projectId,
+    teamId: teamId,
+    to: range.to,
+  });
+  const evmMethodsPromise = getRpcMethodUsage({
+    from: range.from,
+    period: "all",
+    projectId: projectId,
+    teamId: teamId,
+    to: range.to,
+  }).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  const [allUsageData, usageData, evmMethodsData] = await Promise.all([
+    allRequestsByUsageTypePromise,
+    requestsByUsageTypePromise,
+    evmMethodsPromise,
+  ]);
+
+  const totalRequests = allUsageData.reduce((acc, curr) => acc + curr.count, 0);
+
+  if (totalRequests < 1) {
+    return (
+      <div className="container flex max-w-7xl grow flex-col">
+        <RpcFTUX clientId={props.projectClientId} />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex justify-start">
+        <RpcAnalyticsFilter />
+      </div>
+      <ResponsiveSuspense
+        fallback={
+          <div className="flex flex-col gap-10 lg:gap-6">
+            <div className="flex flex-col gap-4 lg:gap-6">
+              <Skeleton className="h-20 border rounded-xl" />
+            </div>
+            <Skeleton className="h-[350px] border rounded-xl" />
+            <Skeleton className="h-[500px] border rounded-xl" />
+          </div>
+        }
+        searchParamsUsed={["from", "to", "interval"]}
+      >
+        <div className="flex flex-col gap-10 lg:gap-6">
+          <div className="flex flex-col gap-4 lg:gap-6">
+            <StatCard
+              icon={ActivityIcon}
+              isPending={false}
+              label="All Time Requests"
+              value={totalRequests}
+            />
+          </div>
+          <RequestsGraph data={usageData} />
+          <TopRPCMethodsTable
+            client={props.client}
+            data={evmMethodsData || []}
+          />
+        </div>
+      </ResponsiveSuspense>
+    </div>
+  );
+}