Wallet analytics tab (#1800)

* WIP wallet stats

* UI polish

* empty states

* fix merge

Author: joaquim-verges

@3rdweb-sdk/react/cache-keys.ts

@@ -15,6 +15,8 @@ export const accountKeys = {
     [...accountKeys.wallet(walletAddress), "me"] as const,
   usage: (walletAddress: string) =>
     [...accountKeys.wallet(walletAddress), "usage"] as const,
+  walletStats: (walletAddress: string, clientId: string) =>
+    [...accountKeys.wallet(walletAddress), "wallets", clientId] as const,
 };
 
 export const apiKeys = {

@3rdweb-sdk/react/hooks/useApi.ts

@@ -142,6 +142,16 @@ export interface UsageBillableByService {
   };
 }
 
+export interface WalletStats {
+  timeSeries: {
+    dayTime: string;
+    clientId: string;
+    walletType: string;
+    totalWallets: number;
+    uniqueWallets: number;
+  }[];
+}
+
 export function useAccount() {
   const { user, isLoggedIn } = useLoggedInUser();
 
@@ -192,6 +202,34 @@ export function useAccountUsage() {
   );
 }
 
+export function useWalletStats(clientId: string | undefined) {
+  const { user, isLoggedIn } = useLoggedInUser();
+
+  return useQuery(
+    accountKeys.walletStats(user?.address as string, clientId as string),
+    async () => {
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/account/wallets?clientId=${clientId}`,
+        {
+          method: "GET",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      const json = await res.json();
+
+      if (json.error) {
+        throw new Error(json.message);
+      }
+
+      return json.data as WalletStats;
+    },
+    { enabled: !!clientId && !!user?.address && isLoggedIn },
+  );
+}
+
 export function useUpdateAccount() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();

components/analytics/auto-bar-chart.tsx

@@ -27,9 +27,10 @@ export interface AutoBarChartProps<
   };
   showXAxis?: boolean;
   showYAxis?: boolean;
+  stacked?: boolean;
 }
 
-const BAR_COLORS_LIGHT = [
+export const BAR_COLORS_LIGHT = [
   "#649CDD",
   "#92BBE8",
   "#407DCC",
@@ -50,7 +51,7 @@ const BAR_COLORS_LIGHT = [
   "#CEE9E9",
 ];
 
-const BAR_COLORS_DARK = [
+export const BAR_COLORS_DARK = [
   "#3682DA",
   "#6AADF5",
   "#1769D3",
@@ -79,6 +80,7 @@ export const AutoBarChart = <
   index,
   showXAxis,
   showYAxis,
+  stacked,
   ...boxProps
 }: AutoBarChartProps<TData, TIndexKey>) => {
   const { colorMode } = useColorMode();
@@ -161,7 +163,7 @@ export const AutoBarChart = <
             <Bar
               key={`${cat.id as string}`}
               dataKey={cat.id as string}
-              stackId="a"
+              stackId={stacked ? "a" : (cat.id as string)}
               stroke={cat.color || "#3385FF"}
               fill={`url(#bar_color_${id}_${cat.id as string})`}
               opacity={cat.id === hoverKey || !hoverKey ? 1 : 0.5}

contract-ui/tabs/analytics/page.tsx

@@ -274,7 +274,13 @@ export const AnalyticsChart: React.FC<AnalyticsChartProps> = ({
 
   if (categories === "auto") {
     return (
-      <AutoBarChart data={data} index={{ id: index }} showXAxis showYAxis />
+      <AutoBarChart
+        data={data}
+        index={{ id: index }}
+        showXAxis
+        showYAxis
+        stacked
+      />
     );
   }
 

core-ui/sidebar/wallets.tsx

@@ -4,6 +4,7 @@ import { Route } from "./types";
 type WalletsSidebarProps = {
   activePage:
     | "connect"
+    | "analytics"
     | "wallet-sdk"
     | "smart-wallet"
     | "embedded"
@@ -17,6 +18,11 @@ const links: Route[] = [
     title: "Connect",
     name: "connect",
   },
+  {
+    path: "/dashboard/wallets/analytics",
+    title: "Analytics",
+    name: "analytics",
+  },
   {
     path: "/dashboard/wallets/smart-wallet",
     title: "Smart Wallet",

page-id.ts

@@ -134,6 +134,8 @@ export enum PageId {
   DashboardWalletsLocal = "dashboard-wallets-local",
   // thirdweb.com/dashboard/wallets/auth
   DashboardWalletsAuth = "dashboard-wallets-auth",
+  // thirdweb.com/dashboard/wallets/auth
+  DashboardWalletsAnalytics = "dashboard-wallets-analytics",
 
   // thirdweb.com/dashboard/contracts/build
   DashboardContractsBuild = "dashboard-contracts-build",