Move /connect/account-abstraction to app router

Author: MananTank

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/layout.tsx

@@ -0,0 +1,34 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { getAbsoluteUrl } from "../../../../../lib/vercel-utils";
+
+export default function Layout(props: { children: React.ReactNode }) {
+  return (
+    <ChakraProviderSetup>
+      <Suspense fallback={null}>{props.children}</Suspense>
+    </ChakraProviderSetup>
+  );
+}
+
+const seo = {
+  title: "The Complete Account Abstraction Toolkit | thirdweb",
+  desc: "Add account abstraction to your web3 app & unlock powerful features for seamless onboarding, customizable transactions, & maximum security. Get started.",
+};
+
+export const metadata: Metadata = {
+  title: seo.title,
+  description: seo.desc,
+  openGraph: {
+    title: seo.title,
+    description: seo.desc,
+    images: [
+      {
+        url: `${getAbsoluteUrl()}/assets/og-image/dashboard-wallets-smart-wallet.png`,
+        width: 1200,
+        height: 630,
+        alt: seo.title,
+      },
+    ],
+  },
+};

apps/dashboard/src/pages/dashboard/connect/account-abstraction.tsx renamed to apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/page.tsx

@@ -9,22 +9,16 @@ import {
   useApiKeys,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { AppLayout } from "components/app-layouts/app";
 import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
 import { ApiKeysMenu } from "components/settings/ApiKeys/Menu";
 import { NoApiKeys } from "components/settings/ApiKeys/NoApiKeys";
 import { ConnectSDKCard } from "components/shared/ConnectSDKCard";
 import { SmartWallets } from "components/smart-wallets";
-import { getAbsoluteUrl } from "lib/vercel-utils";
 import { CircleAlertIcon } from "lucide-react";
-import { NextSeo } from "next-seo";
-import { useRouter } from "next/router";
-import { PageId } from "page-id";
+import { useSearchParams } from "next/navigation";
 import { useMemo, useState } from "react";
 import { useActiveWalletChain } from "thirdweb/react";
-import type { ThirdwebNextPage } from "utils/types";
-import { ConnectSidebarLayout } from "../../../app/(dashboard)/dashboard/connect/DashboardConnectLayout";
-import { isOpChainId } from "../../../app/team/[team_slug]/[project_slug]/connect/account-abstraction/isOpChain";
+import { isOpChainId } from "../../../../team/[team_slug]/[project_slug]/connect/account-abstraction/isOpChain";
 
 const TRACKING_CATEGORY = "smart-wallet";
 
@@ -33,9 +27,9 @@ export type SmartWalletFormData = {
   clientId: string;
 };
 
-const DashboardConnectAccountAbstraction: ThirdwebNextPage = () => {
-  const router = useRouter();
-  const defaultClientId = router.query.clientId?.toString();
+export default function Page() {
+  const searchParams = useSearchParams();
+  const defaultClientId = searchParams?.get("clientId");
   const looggedInUserQuery = useLoggedInUser();
   const keysQuery = useApiKeys();
   const [selectedKey_, setSelectedKey] = useState<undefined | ApiKey>();
@@ -80,32 +74,10 @@ const DashboardConnectAccountAbstraction: ThirdwebNextPage = () => {
 
   const isOpChain = chain?.id ? isOpChainId(chain.id) : false;
 
-  const seo = {
-    title: "The Complete Account Abstraction Toolkit | thirdweb",
-    desc: "Add account abstraction to your web3 app & unlock powerful features for seamless onboarding, customizable transactions, & maximum security. Get started.",
-  };
-
   const isPending = looggedInUserQuery.isPending || keysQuery.isPending;
 
   return (
     <div className="flex flex-col gap-10">
-      <NextSeo
-        title={seo.title}
-        description={seo.desc}
-        openGraph={{
-          title: seo.title,
-          description: seo.desc,
-          images: [
-            {
-              url: `${getAbsoluteUrl()}/assets/og-image/dashboard-wallets-smart-wallet.png`,
-              width: 1200,
-              height: 630,
-              alt: seo.title,
-            },
-          ],
-        }}
-      />
-
       <div className="flex flex-col content-start justify-between gap-4 lg:flex-row">
         <div className="flex flex-col gap-1.5">
           <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
@@ -181,19 +153,4 @@ const DashboardConnectAccountAbstraction: ThirdwebNextPage = () => {
       />
     </div>
   );
-};
-
-DashboardConnectAccountAbstraction.getLayout = (page, props) => (
-  <AppLayout
-    {...props}
-    pageContainerClassName="!max-w-full !px-0"
-    mainClassName="!pt-0"
-  >
-    <ConnectSidebarLayout>{page}</ConnectSidebarLayout>
-  </AppLayout>
-);
-
-DashboardConnectAccountAbstraction.pageId =
-  PageId.DashboardConnectAccountAbstraction;
-
-export default DashboardConnectAccountAbstraction;
+}

apps/dashboard/src/page-id.ts

@@ -96,8 +96,6 @@ export enum PageId {
   // thirdweb.com/dashboard/infrastructure/storage
   DashboardSettingsStorage = "dashboard-storage",
 
-  // thirdweb.com/dashboard/connect/smart-wallet
-  DashboardConnectAccountAbstraction = "dashboard-wallets-smart-wallet",
   // thirdweb.com/dashboard/contracts/build
   DashboardContractsBuild = "dashboard-contracts-build",