Move /connect/analytics to app router

Author: MananTank

apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/[clientId]/AnalyticsPageAPIKeysMenu.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+import { useDashboardRouter } from "../../../../../../@/lib/DashboardRouter";
+import { ApiKeysMenu } from "../../../../../../components/settings/ApiKeys/Menu";
+
+export function AnalyticsPageAPIKeysMenu(props: {
+  apiKeys: Pick<ApiKey, "name" | "key">[];
+  selectedAPIKey: Pick<ApiKey, "name" | "key">;
+}) {
+  const router = useDashboardRouter();
+  return (
+    <ApiKeysMenu
+      apiKeys={props.apiKeys}
+      selectedKey={props.selectedAPIKey}
+      onSelect={(key) => {
+        router.push(`/dashboard/connect/analytics/${key.key}`);
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,60 @@
+import { redirect } from "next/navigation";
+import { ConnectSDKCard } from "../../../../../../components/shared/ConnectSDKCard";
+import { getApiKeys } from "../../../../../api/lib/getAPIKeys";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { ConnectAnalyticsDashboard } from "../../../../../team/[team_slug]/[project_slug]/connect/analytics/ConnectAnalyticsDashboard";
+import { AnalyticsPageAPIKeysMenu } from "./AnalyticsPageAPIKeysMenu";
+
+export default async function Page(props: {
+  params: {
+    clientId: string;
+  };
+}) {
+  const authToken = getAuthToken();
+  const { clientId } = props.params;
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent(`/dashboard/connect/analytics/${clientId}`)}`,
+    );
+  }
+
+  const _apiKeys = await getApiKeys();
+  // slimmed down version to reduce client side payload
+  const apiKeys = _apiKeys.map((key) => ({
+    name: key.name,
+    key: key.key,
+  }));
+
+  const apiKey = apiKeys.find((key) => key.key === clientId);
+
+  if (!apiKey) {
+    redirect("/dashboard/connect/analytics");
+  }
+
+  return (
+    <div>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h1 className="mb-1 font-semibold text-3xl tracking-tight">
+            Connect Analytics
+          </h1>
+          <p className="text-muted-foreground">
+            Visualize how users are connecting to your apps.
+          </p>
+        </div>
+
+        <div>
+          <AnalyticsPageAPIKeysMenu apiKeys={apiKeys} selectedAPIKey={apiKey} />
+        </div>
+      </div>
+
+      <div className="h-4 lg:h-8" />
+
+      <ConnectAnalyticsDashboard clientId={apiKey.key} />
+
+      <div className="h-4 lg:h-8" />
+      <ConnectSDKCard description="Add the Connect SDK to your app to start collecting analytics." />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/page.tsx

@@ -0,0 +1,61 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { ConnectSDKCard } from "../../../../../components/shared/ConnectSDKCard";
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+
+// base page
+// - if no keys -> show no keys page
+// - else redirect to first key
+
+export default async function Page() {
+  const authToken = getAuthToken();
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent("/dashboard/connect/analytics")}`,
+    );
+  }
+
+  const apiKeys = await getApiKeys();
+  const firstKey = apiKeys[0];
+
+  if (firstKey) {
+    redirect(`/dashboard/connect/analytics/${firstKey.key}`);
+  }
+
+  return <NoKeysCreatedPage />;
+}
+
+function NoKeysCreatedPage() {
+  return (
+    <div>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h1 className="mb-1 font-semibold text-3xl tracking-tight">
+            Connect Analytics
+          </h1>
+          <p className="text-muted-foreground">
+            Visualize how users are connecting to your apps.
+          </p>
+        </div>
+      </div>
+
+      <div className="h-4 lg:h-8" />
+
+      <div className="flex flex-col items-center rounded-lg border border-border bg-muted/50 px-4 py-10 lg:px-6">
+        <h3 className="mb-3 font-semibold text-2xl">No API keys found</h3>
+        <p className="mb-6 text-muted-foreground text-sm">
+          Start using the Connect SDK in your app with a free API key.
+        </p>
+        <Button asChild variant="primary">
+          <Link href="/dashboard/settings/api-keys">Create API Key</Link>
+        </Button>
+      </div>
+
+      <div className="h-4 lg:h-8" />
+      <ConnectSDKCard description="Add the Connect SDK to your app to start collecting analytics." />
+    </div>
+  );
+}

apps/dashboard/src/components/settings/ApiKeys/Menu.tsx

@@ -8,22 +8,21 @@ import {
 import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import { shortenString } from "utils/usedapp-external";
 
-interface ApiKeysMenuProps {
-  apiKeys: ApiKey[];
-  selectedKey: ApiKey | undefined;
-  onSelect: (apiKey: ApiKey) => void;
-}
+type ApiKeysMenuProps<T extends Pick<ApiKey, "name" | "key">> = {
+  apiKeys: T[];
+  selectedKey: T | undefined;
+  onSelect: (apiKey: T) => void;
+};
 
-export const ApiKeysMenu: React.FC<ApiKeysMenuProps> = ({
-  apiKeys,
-  selectedKey,
-  onSelect,
-}) => {
+export function ApiKeysMenu<T extends Pick<ApiKey, "name" | "key">>(
+  props: ApiKeysMenuProps<T>,
+) {
+  const { apiKeys, selectedKey, onSelect } = props;
   return (
     <Select
-      value={selectedKey?.id}
-      onValueChange={(keyId) => {
-        const selectedKey = apiKeys.find((apiKey) => apiKey.id === keyId);
+      value={selectedKey?.key}
+      onValueChange={(key) => {
+        const selectedKey = apiKeys.find((apiKey) => apiKey.key === key);
         if (selectedKey) {
           onSelect(selectedKey);
         }
@@ -34,11 +33,11 @@ export const ApiKeysMenu: React.FC<ApiKeysMenuProps> = ({
       </SelectTrigger>
       <SelectContent>
         {apiKeys.map((apiKey) => (
-          <SelectItem key={apiKey.id} value={apiKey.id}>
+          <SelectItem key={apiKey.key} value={apiKey.key}>
             {apiKey.name} ({shortenString(apiKey.key)})
           </SelectItem>
         ))}
       </SelectContent>
     </Select>
   );
-};
+}

apps/dashboard/src/page-id.ts

@@ -100,8 +100,6 @@ export enum PageId {
   DashboardConnectAccountAbstraction = "dashboard-wallets-smart-wallet",
   // thirdweb.com/dashboard/connect/embedded
   DashboardConnectEmbeddedWallets = "dashboard-wallets-embedded",
-  // thirdweb.com/dashboard/connect/analytics
-  DashboardConnectAnalytics = "dashboard-wallets-analytics",
   // thirdweb.com/dashboard/contracts/build
   DashboardContractsBuild = "dashboard-contracts-build",