thirdweb-dev · graphite-app · Nov 8, 2024 · Nov 8, 2024
@@ -380,43 +380,6 @@ export function useAccountCredits() {
   });
 }
 
-async function getWalletUsage(args: {
-  clientId: string;
-  from?: Date;
-  to?: Date;
-  period?: "day" | "week" | "month" | "year" | "all";
-}) {
-  const { clientId, from, to, period } = args;
-
-  const searchParams = new URLSearchParams();
-  searchParams.append("clientId", clientId);
-  if (from) {
-    searchParams.append("from", from.toISOString());
-  }
-  if (to) {
-    searchParams.append("to", to.toISOString());
-  }
-  if (period) {
-    searchParams.append("period", period);
-  }
-  const res = await fetch(
-    `${THIRDWEB_ANALYTICS_API_HOST}/v1/wallets?${searchParams.toString()}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  const json = await res.json();
-
-  if (res.status !== 200) {
-    throw new Error(json.message);
-  }
-
-  return json.data;
-}
-
 async function getUserOpUsage(args: {
   clientId: string;
   from?: Date;
@@ -454,43 +417,6 @@ async function getUserOpUsage(args: {
   return json.data;
 }
 
-export async function getInAppWalletUsage(args: {
-  clientId: string;
-  from?: Date;
-  to?: Date;
-  period?: "day" | "week" | "month" | "year" | "all";
-}) {
-  const { clientId, from, to, period } = args;
-
-  const searchParams = new URLSearchParams();
-  searchParams.append("clientId", clientId);
-  if (from) {
-    searchParams.append("from", from.toISOString());
-  }
-  if (to) {
-    searchParams.append("to", to.toISOString());
-  }
-  if (period) {
-    searchParams.append("period", period);
-  }
-  const res = await fetch(
-    `${THIRDWEB_ANALYTICS_API_HOST}/v1/wallets/in-app?${searchParams.toString()}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  const json = await res?.json();
-
-  if (!res || res.status !== 200) {
-    throw new Error(json.message);
-  }
-
-  return json.data;
-}
-
 export function useUserOpUsageAggregate(args: {
   clientId: string;
   from?: Date;
@@ -574,63 +500,6 @@ export function useUserOpUsagePeriod(args: {
   });
 }
 
-export function useWalletUsageAggregate(args: {
-  clientId: string;
-  from?: Date;
-  to?: Date;
-}) {
-  const { clientId, from, to } = args;
-  const { user, isLoggedIn } = useLoggedInUser();
-
-  return useQuery({
-    queryKey: accountKeys.walletStats(
-      user?.address as string,
-      clientId as string,
-      from?.toISOString() || "",
-      to?.toISOString() || "",
-      "all",
-    ),
-    queryFn: async () => {
-      return getWalletUsage({
-        clientId,
-        from,
-        to,
-        period: "all",
-      });
-    },
-    enabled: !!clientId && !!user?.address && isLoggedIn,
-  });
-}
-
-export function useWalletUsagePeriod(args: {
-  clientId: string;
-  from?: Date;
-  to?: Date;
-  period: "day" | "week" | "month" | "year";
-}) {
-  const { clientId, from, to, period } = args;
-  const { user, isLoggedIn } = useLoggedInUser();
-
-  return useQuery({
-    queryKey: accountKeys.walletStats(
-      user?.address as string,
-      clientId as string,
-      from?.toISOString() || "",
-      to?.toISOString() || "",
-      period,
-    ),
-    queryFn: async () => {
-      return getWalletUsage({
-        clientId,
-        from,
-        to,
-        period,
-      });
-    },
-    enabled: !!clientId && !!user?.address && isLoggedIn,
-  });
-}
-
 export function useUpdateAccount() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();

@@ -59,7 +59,7 @@ export function BarChart({
           }}
         />
         <YAxis
-          width={32}
+          width={48}
           dataKey={activeKey}
           tickLine={false}
           axisLine={false}
@@ -68,7 +68,7 @@ export function BarChart({
         <ChartTooltip
           content={
             <ChartTooltipContent
-              className="w-[150px]"
+              className="w-[200px]"
               nameKey={activeKey}
               labelFormatter={(value) => {
                 return new Date(value).toLocaleDateString("en-US", {
@@ -77,6 +77,7 @@ export function BarChart({
                   year: "numeric",
                 });
               }}
+              valueFormatter={(v: unknown) => formatTickerNumber(v as number)}
             />
           }
         />

@@ -53,6 +53,7 @@ export function CombinedBarChartCard<
                       usersChart: key,
                     },
                   }}
+                  prefetch
                   scroll={false}
                   key={chart}
                   data-active={activeChart === chart}

@@ -6,6 +6,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
+import { formatTickerNumber } from "lib/format-utils";
 import { Pie, PieChart as RechartsPieChart } from "recharts";
 
 export function PieChart({
@@ -39,7 +40,12 @@ export function PieChart({
       <RechartsPieChart>
         <ChartTooltip
           cursor={false}
-          content={<ChartTooltipContent hideLabel />}
+          content={
+            <ChartTooltipContent
+              hideLabel
+              valueFormatter={(v: unknown) => formatTickerNumber(v as number)}
+            />
+          }
         />
         <Pie data={data} dataKey="value" nameKey="label" innerRadius={60} />
       </RechartsPieChart>

@@ -28,7 +28,9 @@ export function PieChartCard({
     const sorted = [...data].sort((a, b) => b.value - a.value);
 
     // Take top 9
-    const top10 = sorted.slice(0, 9);
+    const top10 = sorted.slice(0, 9).map((item) => ({
+      ...item,
+    }));
 
     // Aggregate the rest
     const otherValue = sorted
@@ -44,7 +46,11 @@ export function PieChartCard({
     }
 
     return top10;
-  })();
+  })().map((item, index) => ({
+    ...item,
+    fill: item.fill || `hsl(var(--chart-${index + 1}))`,
+  }));
+
   return (
     <Card className="flex flex-col">
       <CardHeader className="border-border border-b p-0">

@@ -12,11 +12,6 @@ export default async function Layout(props: {
   const { team_slug, project_slug } = await props.params;
 
   const links: SidebarLink[] = [
-    {
-      label: "Analytics",
-      href: `/team/${team_slug}/${project_slug}/connect`,
-      exactMatch: true,
-    },
     {
       label: "In-App Wallets",
       href: `/team/${team_slug}/${project_slug}/connect/in-app-wallets`,

@@ -1,7 +1,5 @@
 import { getProject } from "@/api/projects";
-import { ConnectSDKCard } from "components/shared/ConnectSDKCard";
-import { notFound } from "next/navigation";
-import { ConnectAnalyticsDashboard } from "./analytics/ConnectAnalyticsDashboard";
+import { notFound, redirect } from "next/navigation";
 
 export default async function Page(props: {
   params: Promise<{
@@ -16,23 +14,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  return (
-    <div>
-      <div>
-        <h1 className="mb-1 font-semibold text-2xl tracking-tight md:text-3xl">
-          Connect Analytics
-        </h1>
-        <p className="text-muted-foreground text-sm md:text-base">
-          Visualize how your users are connecting to your app
-        </p>
-      </div>
-      <div className="h-6 lg:h-8" />
-      <ConnectAnalyticsDashboard
-        clientId={project.publishableKey}
-        connectLayoutSlug={`/team/${params.team_slug}/${params.project_slug}/connect`}
-      />
-      <div className="h-4 lg:h-8" />
-      <ConnectSDKCard description="Add the Connect SDK to your app to get started collecting analytics." />
-    </div>
+  redirect(
+    `/team/${params.team_slug}/${params.project_slug}/connect/in-app-wallets`,
   );
 }