add rpc tab with analytics (#7489)

# [Dashboard] Feature: Add RPC Edge analytics page

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the RPC (Remote Procedure Call) analytics feature in the dashboard. It introduces new components, updates existing ones, and adds functionality for fetching and displaying RPC usage data and statistics.

### Detailed summary
- Added `RpcMethodStats` and `RpcUsageTypeStats` interfaces in `analytics.ts`.
- Introduced `getRpcUsageByType` function to fetch RPC usage data.
- Updated `RpcMethodBarChartCardUI` to use new data structure.
- Added new `RPC` link in `ProjectSidebarLayout`.
- Created `RpcAnalyticsFilter` for filtering RPC analytics.
- Implemented `RequestsGraph` to visualize RPC requests over time.
- Developed `TopRPCMethodsTable` to display top EVM methods called.
- Added `RpcFTUX` component for user onboarding in RPC section.
- Updated layout files to integrate new components and improve styling.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Introduced a dedicated "RPC" section in the project sidebar for easy access to RPC analytics.
  * Added a comprehensive RPC analytics dashboard, including:
    * Interactive requests graph and top RPC methods table.
    * Date range and interval filtering for analytics.
    * First-time user experience (FTUX) with ready-to-use code examples and documentation links.
  * Enhanced layout and navigation for the new RPC analytics section.

* **Style**
  * Improved UI spacing, sizing, and visual consistency for analytics components and placeholders.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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)/insight/components/InsightAnalytics.tsx

@@ -121,7 +121,7 @@ export async function InsightAnalytics(props: {
 
   if (!hasVolume) {
     return (
-      <div className="container flex max-w-7xl grow flex-col">
+      <div className="flex grow flex-col">
         <InsightFTUX clientId={props.projectClientId} />
       </div>
     );
@@ -134,22 +134,18 @@ export async function InsightAnalytics(props: {
       </div>
       <ResponsiveSuspense
         fallback={
-          <div className="flex flex-col gap-10 lg:gap-6">
+          <div className="flex flex-col gap-6">
             <div className="grid grid-cols-2 gap-4 lg:gap-6">
-              <Skeleton className="h-[120px] border rounded-xl" />
-              <Skeleton className="h-[120px] border rounded-xl" />
-            </div>
-            <Skeleton className="h-[350px] border rounded-xl" />
-            <div className="relative grid grid-cols-1 gap-6 rounded-xl border border-border bg-card p-4 lg:gap-12 xl:grid-cols-2 xl:p-6">
-              <Skeleton className="h-[350px] border rounded-xl" />
-              <Skeleton className="h-[350px] border rounded-xl" />
-              <div className="absolute top-6 bottom-6 left-[50%] hidden w-[1px] bg-border xl:block" />
+              <Skeleton className="h-[88px] border rounded-xl" />
+              <Skeleton className="h-[88px] border rounded-xl" />
             </div>
+            <Skeleton className="h-[480px] border rounded-xl" />
+            <Skeleton className="h-[376px] border rounded-xl" />
           </div>
         }
         searchParamsUsed={["from", "to", "interval"]}
       >
-        <div className="flex flex-col gap-10 lg:gap-6">
+        <div className="flex flex-col gap-6">
           <div className="grid grid-cols-2 gap-4 lg:gap-6">
             <StatCard
               icon={ActivityIcon}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/layout.tsx

@@ -19,7 +19,7 @@ export default async function Layout(props: {
 
   return (
     <div className="flex grow flex-col">
-      <div className="pt-4 lg:pt-6">
+      <div className="py-8 border-b">
         <div className="container max-w-7xl">
           <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
             Insight
@@ -36,8 +36,6 @@ export default async function Layout(props: {
             </UnderlineLink>
           </p>
         </div>
-
-        <div className="h-4" />
       </div>
 
       <div className="h-6" />

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

@@ -0,0 +1,132 @@
+"use client";
+import { useMemo, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { shortenLargeNumber } from "thirdweb/utils";
+import type { RpcMethodStats } from "@/api/analytics";
+import { PaginationButtons } from "@/components/blocks/pagination-buttons";
+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 [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 30;
+
+  const sortedData = useMemo(() => {
+    return props.data?.sort((a, b) => b.count - a.count) || [];
+  }, [props.data]);
+
+  const totalPages = useMemo(() => {
+    return Math.ceil(sortedData.length / itemsPerPage);
+  }, [sortedData.length]);
+
+  const tableData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return sortedData.slice(startIndex, endIndex);
+  }, [sortedData, currentPage]);
+
+  const isEmpty = useMemo(() => sortedData.length === 0, [sortedData]);
+
+  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>
+
+      {!isEmpty && totalPages > 1 && (
+        <div className="mt-4 flex justify-center">
+          <PaginationButtons
+            activePage={currentPage}
+            onPageClick={setCurrentPage}
+            totalPages={totalPages}
+          />
+        </div>
+      )}
+    </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
+    />
+  );
+}