Move /connect/in-app-wallets to app router

Author: MananTank

apps/dashboard/src/pages/dashboard/connect/in-app-wallets.tsx renamed to apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/InAppWalletsPage.tsx

@@ -1,37 +1,30 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+"use client";
+
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { type ApiKey, useApiKeys } from "@3rdweb-sdk/react/hooks/useApi";
-import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { AppLayout } from "components/app-layouts/app";
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import { EmbeddedWallets } from "components/embedded-wallets";
 import { ApiKeysMenu } from "components/settings/ApiKeys/Menu";
 import { NoApiKeys } from "components/settings/ApiKeys/NoApiKeys";
-// import { ConnectSidebar } from "core-ui/sidebar/connect";
-import { useRouter } from "next/router";
-import { PageId } from "page-id";
 import { useMemo, useState } from "react";
-import type { ThirdwebNextPage } from "utils/types";
-import { ConnectSidebarLayout } from "../../../app/(dashboard)/dashboard/connect/DashboardConnectLayout";
-import { AnalyticsCallout } from "../../../app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/AnalyticsCallout";
-import { InAppWaletFooterSection } from "../../../app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer";
+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";
 
 const TRACKING_CATEGORY = "embedded-wallet";
 
-const DashboardConnectEmbeddedWallets: ThirdwebNextPage = () => {
-  const router = useRouter();
-  const defaultClientId = router.query.clientId?.toString();
-  const { isPending } = useLoggedInUser();
-  const keysQuery = useApiKeys();
-
+export function InAppWalletsPage(props: {
+  defaultClientId: string | undefined;
+  apiKeys: ApiKey[];
+}) {
+  const { defaultClientId, apiKeys: allApiKeys } = props;
   const [selectedKey_, setSelectedKey] = useState<undefined | ApiKey>();
 
   const apiKeys = useMemo(() => {
-    return (keysQuery?.data || []).filter((key) => {
+    return allApiKeys.filter((key) => {
       return !!(key.services || []).find(
         (srv) => srv.name === "embeddedWallets",
       );
     });
-  }, [keysQuery]);
+  }, [allApiKeys]);
 
   const hasApiKeys = apiKeys.length > 0;
 
@@ -49,14 +42,6 @@ const DashboardConnectEmbeddedWallets: ThirdwebNextPage = () => {
     return undefined;
   }, [apiKeys, defaultClientId, selectedKey_]);
 
-  if (isPending) {
-    return (
-      <div className="grid w-full place-items-center">
-        <Spinner className="size-14" />
-      </div>
-    );
-  }
-
   return (
     <div>
       <div className="flex flex-col gap-4 lg:flex-row lg:justify-between">
@@ -88,50 +73,35 @@ const DashboardConnectEmbeddedWallets: ThirdwebNextPage = () => {
             <ApiKeysMenu
               apiKeys={apiKeys}
               selectedKey={selectedKey}
-              onSelect={setSelectedKey}
+              onSelect={(key) => {
+                setSelectedKey(key);
+                // add clientId search param to the url without affecting router
+                window.history.replaceState(
+                  {},
+                  "",
+                  `/dashboard/connect/in-app-wallets?clientId=${key.key}`,
+                );
+              }}
             />
           )}
         </div>
       </div>
 
       <div className="h-8" />
 
-      {keysQuery.isPending ? (
-        <div className="flex h-[500px] items-center justify-center">
-          <Spinner className="size-10" />
-        </div>
-      ) : (
-        <>
-          {!hasApiKeys && <NoApiKeys service="in-app wallets" />}
+      {!hasApiKeys && <NoApiKeys service="in-app wallets" />}
 
-          {hasApiKeys && selectedKey && (
-            <EmbeddedWallets
-              apiKey={selectedKey}
-              trackingCategory={TRACKING_CATEGORY}
-            />
-          )}
-        </>
+      {hasApiKeys && selectedKey && (
+        <EmbeddedWallets
+          apiKey={selectedKey}
+          trackingCategory={TRACKING_CATEGORY}
+        />
       )}
 
       <div className="h-16" />
       <AnalyticsCallout trackingCategory={TRACKING_CATEGORY} />
       <div className="h-5" />
-
       <InAppWaletFooterSection trackingCategory={TRACKING_CATEGORY} />
     </div>
   );
-};
-
-DashboardConnectEmbeddedWallets.getLayout = (page, props) => (
-  <AppLayout
-    {...props}
-    pageContainerClassName="!max-w-full !px-0"
-    mainClassName="!pt-0"
-  >
-    <ConnectSidebarLayout>{page}</ConnectSidebarLayout>
-  </AppLayout>
-);
-
-DashboardConnectEmbeddedWallets.pageId = PageId.DashboardConnectEmbeddedWallets;
-
-export default DashboardConnectEmbeddedWallets;
+}

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

@@ -0,0 +1,5 @@
+import { Suspense } from "react";
+
+export default function Layout(props: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{props.children}</Suspense>;
+}

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

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { InAppWalletsPage } from "./InAppWalletsPage";
+
+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/in-app-wallets");
+    if (clientId) {
+      params.append("clientId", clientId);
+    }
+    redirect(`/login?${params.toString()}`);
+  }
+
+  const apiKeys = await getApiKeys();
+
+  return <InAppWalletsPage defaultClientId={clientId} apiKeys={apiKeys} />;
+}
+
+export const dynamic = "force-dynamic";

apps/dashboard/src/page-id.ts

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