[Dashboard] Feature: Adds analytics to in-app-wallets page

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -235,6 +235,12 @@ export interface WalletStats {
   walletType: string;
 }
 
+export interface InAppWalletStats {
+  date: string;
+  authenticationMethod: string;
+  uniqueWalletsConnected: number;
+}
+
 export interface UserOpStats {
   date: string;
   successful: number;

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/_components/tabs.tsx

@@ -0,0 +1,32 @@
+"use client";
+import { TabLinks } from "@/components/ui/tabs";
+import { usePathname } from "next/navigation";
+
+export function Tabs({ clientId }: { clientId: string }) {
+  const path = usePathname();
+
+  return (
+    <TabLinks
+      links={[
+        {
+          name: "Analytics",
+          href: `/dashboard/connect/in-app-wallets/${clientId}/analytics`,
+          isActive: path?.endsWith("/analytics") || false,
+          isDisabled: false,
+        },
+        {
+          name: "Users",
+          href: `/dashboard/connect/in-app-wallets/${clientId}/users`,
+          isActive: path?.endsWith("/users") || false,
+          isDisabled: false,
+        },
+        {
+          name: "Configuration",
+          href: `/dashboard/connect/in-app-wallets/${clientId}/config`,
+          isActive: path?.endsWith("/config") || false,
+          isDisabled: false,
+        },
+      ]}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/_constants.tsx

@@ -0,0 +1 @@
+export const TRACKING_CATEGORY = "embedded-wallet";

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/analytics/page.tsx

@@ -0,0 +1,37 @@
+import type { Range } from "components/analytics/date-range-selector";
+import { InAppWalletAnalytics } from "components/embedded-wallets/Analytics";
+
+export default function Page({
+  params,
+  searchParams,
+}: {
+  params: { team_slug: string; project_slug: string };
+  searchParams: {
+    from?: string;
+    to?: string;
+    type?: string;
+    interval?: string;
+  };
+}) {
+  const range =
+    searchParams.from && searchParams.to
+      ? {
+          type: searchParams.type ?? "last-120",
+          from: new Date(searchParams.from),
+          to: new Date(searchParams.to),
+        }
+      : undefined;
+
+  const interval: "day" | "week" = ["day", "week"].includes(
+    searchParams.interval ?? "",
+  )
+    ? (searchParams.interval as "day" | "week")
+    : "week";
+  return (
+    <InAppWalletAnalytics
+      clientId={params.project_slug}
+      interval={interval}
+      range={range as Range}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/config/page.tsx

@@ -0,0 +1,21 @@
+import { InAppWalletSettingsPage } from "components/embedded-wallets/Configure";
+import { redirect } from "next/navigation";
+import { getInAppWalletSupportedAPIKeys } from "../../getInAppWalletSupportedAPIKeys";
+import { TRACKING_CATEGORY } from "../_constants";
+
+export default async function Page({
+  params: { clientId },
+}: { params: { clientId: string } }) {
+  const apiKeys = await getInAppWalletSupportedAPIKeys();
+  const apiKey = apiKeys.find((key) => key.key === clientId);
+
+  if (!apiKey) {
+    redirect("/dashboard/connect/in-app-wallets");
+  }
+  return (
+    <InAppWalletSettingsPage
+      apiKey={apiKey}
+      trackingCategory={TRACKING_CATEGORY}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/layout.tsx

@@ -0,0 +1,78 @@
+import { InAppWalletsSummary } from "components/embedded-wallets/Analytics/Summary";
+import { getInAppWalletUsage } from "data/analytics/wallets/in-app";
+import { redirect } from "next/navigation";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { PageHeader } from "../PageHeader";
+import { getInAppWalletSupportedAPIKeys } from "../getInAppWalletSupportedAPIKeys";
+import { InAppWalletsAPIKeysMenu } from "../inAppWalletsAPIKeysMenu";
+import { Tabs } from "./_components/tabs";
+
+export default async function Page(props: {
+  params: {
+    clientId: string;
+  };
+  searchParams: {
+    tab?: string;
+  };
+  children: React.ReactNode;
+}) {
+  const authToken = getAuthToken();
+  const { clientId } = props.params;
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent(`/dashboard/connect/in-app-wallets/${clientId}`)}`,
+    );
+  }
+
+  const apiKeys = await getInAppWalletSupportedAPIKeys();
+  const apiKey = apiKeys.find((key) => key.key === clientId);
+
+  if (!apiKey) {
+    redirect("/dashboard/connect/in-app-wallets");
+  }
+
+  const allTimeStats = await getInAppWalletUsage({
+    clientId,
+    from: new Date(2022, 0, 1),
+    to: new Date(),
+    period: "all",
+  });
+
+  const monthlyStats = await getInAppWalletUsage({
+    clientId,
+    from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+    to: new Date(),
+    period: "month",
+  });
+
+  return (
+    <div>
+      {/* header */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:justify-between">
+        <PageHeader />
+        <div>
+          <InAppWalletsAPIKeysMenu
+            apiKeys={apiKeys.map((x) => ({
+              name: x.name,
+              key: x.key,
+            }))}
+            selectedAPIKey={apiKey}
+          />
+        </div>
+      </div>
+
+      <div className="h-8" />
+
+      <InAppWalletsSummary
+        allTimeStats={allTimeStats}
+        monthlyStats={monthlyStats}
+      />
+
+      <div className="h-8" />
+      <Tabs clientId={clientId} />
+      <div className="h-8" />
+      {props.children}
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/page.tsx

@@ -1,9 +1,4 @@
 import { redirect } from "next/navigation";
-import { EmbeddedWallets } from "../../../../../../components/embedded-wallets";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
-import { PageHeader } from "../PageHeader";
-import { getInAppWalletSupportedAPIKeys } from "../getInAppWalletSupportedAPIKeys";
-import { InAppWalletsAPIKeysMenu } from "../inAppWalletsAPIKeysMenu";
 
 export default async function Page(props: {
   params: {
@@ -13,44 +8,7 @@ export default async function Page(props: {
     tab?: string;
   };
 }) {
-  const authToken = getAuthToken();
   const { clientId } = props.params;
 
-  if (!authToken) {
-    redirect(
-      `/login?next=${encodeURIComponent(`/dashboard/connect/in-app-wallets/${clientId}`)}`,
-    );
-  }
-
-  const apiKeys = await getInAppWalletSupportedAPIKeys();
-  const apiKey = apiKeys.find((key) => key.key === clientId);
-
-  if (!apiKey) {
-    redirect("/dashboard/connect/in-app-wallets");
-  }
-
-  return (
-    <div>
-      {/* header */}
-      <div className="flex flex-col gap-4 lg:flex-row lg:justify-between">
-        <PageHeader />
-        <div>
-          <InAppWalletsAPIKeysMenu
-            apiKeys={apiKeys.map((x) => ({
-              name: x.name,
-              key: x.key,
-            }))}
-            selectedAPIKey={apiKey}
-          />
-        </div>
-      </div>
-
-      <div className="h-8" />
-      <EmbeddedWallets
-        apiKey={apiKey}
-        trackingCategory="embedded-wallet"
-        defaultTab={props.searchParams.tab === "1" ? 1 : 0}
-      />
-    </div>
-  );
+  redirect(`/dashboard/connect/in-app-wallets/${clientId}/analytics`);
 }

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/users/page.tsx

@@ -0,0 +1,24 @@
+import { InAppWalletUsersPageContent } from "components/embedded-wallets/Users";
+import { redirect } from "next/navigation";
+import { getInAppWalletSupportedAPIKeys } from "../../getInAppWalletSupportedAPIKeys";
+import { TRACKING_CATEGORY } from "../_constants";
+
+export default async function Page(props: {
+  params: {
+    clientId: string;
+  };
+}) {
+  const { clientId } = props.params;
+  const apiKeys = await getInAppWalletSupportedAPIKeys();
+  const apiKey = apiKeys.find((key) => key.key === clientId);
+
+  if (!apiKey) {
+    redirect("/dashboard/connect/in-app-wallets");
+  }
+  return (
+    <InAppWalletUsersPageContent
+      clientId={apiKey.key}
+      trackingCategory={TRACKING_CATEGORY}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/layout.tsx

@@ -1,4 +1,3 @@
-import { AnalyticsCallout } from "../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/AnalyticsCallout";
 import { InAppWaletFooterSection } from "../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer";
 
 export default function Layout(props: {
@@ -9,7 +8,6 @@ export default function Layout(props: {
       {props.children}
       <div className="h-16" />
       {/* Footer */}
-      <AnalyticsCallout trackingCategory="embedded-wallet" />
       <div className="h-5" />
       <InAppWaletFooterSection trackingCategory="embedded-wallet" />
     </div>