Move /connect/analytics to app router

Author: MananTank

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

@@ -0,0 +1,89 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+import { ApiKeysMenu } from "components/settings/ApiKeys/Menu";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { ConnectSDKCard } from "../../../../../components/shared/ConnectSDKCard";
+import { ConnectAnalyticsDashboard } from "../../../../team/[team_slug]/[project_slug]/connect/analytics/ConnectAnalyticsDashboard";
+
+export function ConnectAnalyticsPage(props: {
+  defaultClientId: string | undefined;
+  apiKeys: ApiKey[];
+}) {
+  const { defaultClientId, apiKeys } = props;
+  const [selectedKey_, setSelectedKey] = useState<undefined | ApiKey>();
+
+  const selectedKey = useMemo(() => {
+    if (selectedKey_) {
+      return selectedKey_;
+    }
+    if (apiKeys.length) {
+      if (defaultClientId) {
+        return apiKeys.find((k) => k.key === defaultClientId);
+      }
+      return apiKeys[0];
+    }
+    return undefined;
+  }, [apiKeys, defaultClientId, selectedKey_]);
+
+  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>
+
+        {/* API selector */}
+        {selectedKey && (
+          <div>
+            <ApiKeysMenu
+              apiKeys={apiKeys}
+              selectedKey={selectedKey}
+              onSelect={(key) => {
+                // add clientId search param to the url without affecting router
+                window.history.replaceState(
+                  {},
+                  "",
+                  `/dashboard/connect/analytics?clientId=${key.key}`,
+                );
+                setSelectedKey(key);
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="h-4 lg:h-8" />
+
+      {selectedKey ? (
+        <ConnectAnalyticsDashboard clientId={selectedKey.key} />
+      ) : (
+        <NoAPIFoundCard />
+      )}
+
+      <div className="h-4 lg:h-8" />
+      <ConnectSDKCard description="Add the Connect SDK to your app to start collecting analytics." />
+    </div>
+  );
+}
+
+function NoAPIFoundCard() {
+  return (
+    <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>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { ConnectAnalyticsPage } from "./ConnectAnalyticsPage";
+
+export default async function Page(props: {
+  searchParams: {
+    clientId?: string;
+  };
+}) {
+  const authToken = getAuthToken();
+  const { clientId } = props.searchParams;
+
+  if (!authToken) {
+    const params = new URLSearchParams();
+    params.append("next", "/dashboard/connect/analytics");
+    if (clientId) {
+      params.append("clientId", clientId);
+    }
+    redirect(`/login?${params.toString()}`);
+  }
+
+  const apiKeys = await getApiKeys();
+
+  return <ConnectAnalyticsPage defaultClientId={clientId} apiKeys={apiKeys} />;
+}
+
+export const dynamic = "force-dynamic";

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",