Move /connect/in-app-wallets to app router (#4894)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `in-app-wallets` feature by adding new components and functionalities, including API key management and layout improvements.

### Detailed summary
- Added `getInAppWalletSupportedAPIKeys` function to fetch and filter API keys.
- Created `Layout` component with footer sections.
- Implemented `InAppWalletsAPIKeysMenu` for API key selection.
- Added `PageHeader` with description and link.
- Enhanced `Page` component to handle redirects and display API keys.
- Updated `EmbeddedWallets` component to use `defaultTab` prop instead of search params.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

@@ -0,0 +1,24 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+
+export function PageHeader() {
+  return (
+    <div>
+      <h1 className="font-semibold text-3xl tracking-tigher">In-App Wallets</h1>
+      <div className="h-3" />
+      <p className="max-w-[500px] text-muted-foreground ">
+        A wallet infrastructure that enables apps to create, manage, and control
+        their users wallets. Email login, social login, and bring-your-own auth
+        supported.{" "}
+        <TrackedLinkTW
+          target="_blank"
+          href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
+          label="learn-more"
+          category="embedded-wallet"
+          className="text-link-foreground hover:text-foreground"
+        >
+          Learn more
+        </TrackedLinkTW>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,56 @@
+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: {
+    clientId: string;
+  };
+  searchParams: {
+    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>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/getInAppWalletSupportedAPIKeys.ts

@@ -0,0 +1,7 @@
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";
+
+export async function getInAppWalletSupportedAPIKeys() {
+  return (await getApiKeys()).filter((key) => {
+    return !!(key.services || []).find((srv) => srv.name === "embeddedWallets");
+  });
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+import { ApiKeysMenu } from "../../../../../components/settings/ApiKeys/Menu";
+
+export function InAppWalletsAPIKeysMenu(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/in-app-wallets/${key.key}`);
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,17 @@
+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: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      {props.children}
+      <div className="h-16" />
+      {/* Footer */}
+      <AnalyticsCallout trackingCategory="embedded-wallet" />
+      <div className="h-5" />
+      <InAppWaletFooterSection trackingCategory="embedded-wallet" />
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { redirect } from "next/navigation";
+import { NoApiKeys } from "../../../../../components/settings/ApiKeys/NoApiKeys";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { PageHeader } from "./PageHeader";
+import { getInAppWalletSupportedAPIKeys } from "./getInAppWalletSupportedAPIKeys";
+
+export default async function Page() {
+  const authToken = getAuthToken();
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent("/dashboard/connect/in-app-wallets")}`,
+    );
+  }
+
+  const apiKeys = await getInAppWalletSupportedAPIKeys();
+  const firstKey = apiKeys[0];
+
+  if (firstKey) {
+    redirect(`/dashboard/connect/in-app-wallets/${firstKey.key}`);
+  }
+
+  return (
+    <div>
+      <PageHeader />
+      <div className="h-8" />
+      <NoApiKeys service="in-app wallets" />
+    </div>
+  );
+}

apps/dashboard/src/components/embedded-wallets/index.tsx

@@ -2,7 +2,6 @@
 
 import { TabButtons } from "@/components/ui/tabs";
 import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
-import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { InAppWalletSettingsPage } from "./Configure";
 import { InAppWalletUsersPageContent } from "./Users";
@@ -19,16 +18,16 @@ interface EmbeddedWalletsProps {
     | "key"
   >;
   trackingCategory: string;
+  defaultTab: 0 | 1;
 }
 
 export const EmbeddedWallets: React.FC<EmbeddedWalletsProps> = ({
   apiKey,
   trackingCategory,
+  defaultTab,
 }) => {
-  const searchParams = useSearchParams();
-  const defaultTabIndex = searchParams?.get("tab") === "1" ? 1 : 0;
   const [selectedTab, setSelectedTab] = useState<"users" | "config">(
-    defaultTabIndex === 0 ? "users" : "config",
+    defaultTab === 0 ? "users" : "config",
   );
 
   function updateSearchParams(value: string) {

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