[Dashboard] Add detailed usage breakdown and billing preview (#7290)

Author: jnsdls

apps/dashboard/src/@/api/usage/billing-preview.ts

@@ -0,0 +1,66 @@
+import "server-only";
+
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "../../../app/(app)/api/lib/getAuthToken";
+
+type LineItem = {
+  quantity: number;
+  amountUsdCents: number;
+  unitAmountUsdCents: string;
+  description: string;
+};
+
+export type UsageCategory = {
+  category: string;
+  unitName: string;
+  lineItems: LineItem[];
+};
+
+type UsageApiResponse = {
+  result: UsageCategory[];
+  periodStart: string;
+  periodEnd: string;
+  planVersion: number;
+};
+
+export async function getBilledUsage(teamSlug: string) {
+  const authToken = await getAuthToken();
+  if (!authToken) {
+    throw new Error("No auth token found");
+  }
+  const response = await fetch(
+    new URL(
+      `/v1/teams/${teamSlug}/billing/billed-usage`,
+      NEXT_PUBLIC_THIRDWEB_API_HOST,
+    ),
+    {
+      next: {
+        // revalidate this query once per minute (does not need to be more granular than that)
+        revalidate: 60,
+      },
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+  if (!response.ok) {
+    // if the status is 404, the most likely reason is that the team is on a free plan
+    if (response.status === 404) {
+      return {
+        status: "error",
+        reason: "free_plan",
+      } as const;
+    }
+    const body = await response.text();
+    return {
+      status: "error",
+      reason: "unknown",
+      body,
+    } as const;
+  }
+  const data = (await response.json()) as UsageApiResponse;
+  return {
+    status: "success",
+    data,
+  } as const;
+}

apps/dashboard/src/@/api/usage/rpc.ts

@@ -2,58 +2,6 @@ import "server-only";
 import { unstable_cache } from "next/cache";
 import { ANALYTICS_SERVICE_URL } from "../../constants/server-envs";
 
-export type RPCUsageDataItem = {
-  date: string;
-  usageType: "included" | "overage" | "rate-limit";
-  count: string;
-};
-
-export const fetchRPCUsage = unstable_cache(
-  async (params: {
-    teamId: string;
-    projectId?: string;
-    authToken: string;
-    from: string;
-    to: string;
-    period: "day" | "week" | "month" | "year" | "all";
-  }) => {
-    const analyticsEndpoint = ANALYTICS_SERVICE_URL;
-    const url = new URL(`${analyticsEndpoint}/v2/rpc/usage-types`);
-    url.searchParams.set("teamId", params.teamId);
-    if (params.projectId) {
-      url.searchParams.set("projectId", params.projectId);
-    }
-    url.searchParams.set("from", params.from);
-    url.searchParams.set("to", params.to);
-    url.searchParams.set("period", params.period);
-
-    const res = await fetch(url, {
-      headers: {
-        Authorization: `Bearer ${params.authToken}`,
-      },
-    });
-
-    if (!res.ok) {
-      const error = await res.text();
-      return {
-        ok: false as const,
-        error: error,
-      };
-    }
-
-    const resData = await res.json();
-
-    return {
-      ok: true as const,
-      data: resData.data as RPCUsageDataItem[],
-    };
-  },
-  ["rpc-usage"],
-  {
-    revalidate: 60 * 60, // 1 hour
-  },
-);
-
 type Last24HoursRPCUsageApiResponse = {
   peakRate: {
     date: string;

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

@@ -20,7 +20,7 @@ import {
   EmptyChartState,
   LoadingChartState,
 } from "components/analytics/empty-chart-state";
-import { formatDate } from "date-fns";
+import { format } from "date-fns";
 import { useMemo } from "react";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
@@ -94,7 +94,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                 axisLine={false}
                 tickMargin={20}
                 tickFormatter={(value) =>
-                  formatDate(
+                  format(
                     new Date(value),
                     props.xAxis?.sameDay ? "MMM dd, HH:mm" : "MMM dd",
                   )

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

@@ -22,7 +22,7 @@ import {
   EmptyChartState,
   LoadingChartState,
 } from "components/analytics/empty-chart-state";
-import { formatDate } from "date-fns";
+import { format } from "date-fns";
 import { useMemo } from "react";
 
 type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
@@ -86,7 +86,7 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                 tickLine={false}
                 axisLine={false}
                 tickMargin={10}
-                tickFormatter={(value) => formatDate(new Date(value), "MMM d")}
+                tickFormatter={(value) => format(new Date(value), "MMM d")}
               />
               <ChartTooltip
                 content={

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx

@@ -1,7 +1,7 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
 import { Flex, SimpleGrid, useBreakpointValue } from "@chakra-ui/react";
-import { formatDistance } from "date-fns/formatDistance";
+import { formatDistance } from "date-fns";
 import { useAllChainsData } from "hooks/chains/allChains";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/ContractAnalyticsPage.tsx

@@ -19,7 +19,7 @@ import {
   useTotalContractTransactionAnalytics,
   useTotalContractUniqueWallets,
 } from "data/analytics/hooks";
-import { formatDate } from "date-fns";
+import { format } from "date-fns";
 import { useMemo, useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 
@@ -125,7 +125,7 @@ type ChartProps = {
 function toolTipLabelFormatter(_v: string, item: unknown) {
   if (Array.isArray(item)) {
     const time = item[0].payload.time as number;
-    return formatDate(new Date(time), "MMM d, yyyy");
+    return format(new Date(time), "MMM d, yyyy");
   }
   return undefined;
 }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx

@@ -7,7 +7,7 @@ import {
   useContractTransactionAnalytics,
   useContractUniqueWalletAnalytics,
 } from "data/analytics/hooks";
-import { differenceInCalendarDays, formatDate } from "date-fns";
+import { differenceInCalendarDays, format } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
@@ -200,7 +200,7 @@ export function toolTipLabelFormatterWithPrecision(precision: "day" | "hour") {
   return function toolTipLabelFormatter(_v: string, item: unknown) {
     if (Array.isArray(item)) {
       const time = item[0].payload.time as number;
-      return formatDate(
+      return format(
         new Date(time),
         precision === "day" ? "MMM d, yyyy" : "MMM d, yyyy hh:mm a",
       );

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PriceChart.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { differenceInCalendarDays, formatDate } from "date-fns";
+import { differenceInCalendarDays, format } from "date-fns";
 import { ArrowUpIcon, InfoIcon } from "lucide-react";
 import { ArrowDownIcon } from "lucide-react";
 import { useMemo, useState } from "react";
@@ -81,7 +81,7 @@ function getTooltipLabelFormatter(includeTimeOfDay: boolean) {
   return (_v: string, item: unknown) => {
     if (Array.isArray(item)) {
       const time = item[0].payload.time as number;
-      return formatDate(
+      return format(
         new Date(time),
         includeTimeOfDay ? "MMM d, yyyy hh:mm a" : "MMM d, yyyy",
       );

apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/opengraph-image.tsx

@@ -1,5 +1,5 @@
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { format } from "date-fns/format";
+import { format } from "date-fns";
 import { resolveEns } from "lib/ens";
 import { correctAndUniqueLicenses } from "lib/licenses";
 import { getSocialProfiles } from "thirdweb/social";

apps/dashboard/src/app/(app)/(dashboard)/published-contract/[publisher]/[contract_id]/opengraph-image.tsx

@@ -1,5 +1,5 @@
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { format } from "date-fns/format";
+import { format } from "date-fns";
 import { resolveEns } from "lib/ens";
 import { correctAndUniqueLicenses } from "lib/licenses";
 import { getSocialProfiles } from "thirdweb/social";