Add in-app wallet settings on project settings layout (#4667)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the `Configure` component to `InAppWalletSettingsPage` and update its usage throughout the codebase.

### Detailed summary
- Renamed `Configure` component to `InAppWalletSettingsPage`
- Updated references to `Configure` component to `InAppWalletSettingsPage`
- Updated component props and types for consistency
- Added a new page file for in-app wallet settings with API key retrieval logic

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

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/in-app-wallets/page.tsx

@@ -1,9 +1,29 @@
-export default function Page() {
+import { getProject } from "@/api/projects";
+import { notFound } from "next/navigation";
+import { InAppWalletSettingsPage } from "../../../../../../components/embedded-wallets/Configure";
+import { getAPIKey } from "../../../../../api/lib/getAPIKeys";
+
+export default async function Page(props: {
+  params: { team_slug: string; project_slug: string };
+}) {
+  const { team_slug, project_slug } = props.params;
+  const project = await getProject(team_slug, project_slug);
+
+  if (!project) {
+    notFound();
+  }
+
+  // THIS IS A WORKAROUND - project does not have `services` info - so we fetch APIKey object.
+  const apiKey = await getAPIKey(project.id);
+
+  if (!apiKey) {
+    notFound();
+  }
+
   return (
-    <div className="grow flex flex-col items-center justify-center">
-      <h1 className="text-4xl tracking-tighter text-muted-foreground">
-        In-App wallet Settings
-      </h1>
-    </div>
+    <InAppWalletSettingsPage
+      apiKey={apiKey}
+      trackingCategory="in-app-wallet-project-settings"
+    />
   );
 }

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

@@ -38,13 +38,13 @@ import { type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { toArrFromList } from "utils/string";
 
-interface ConfigureProps {
+type InAppWalletSettingsPageProps = {
   apiKey: Pick<
     ApiKey,
     "id" | "name" | "domains" | "bundleIds" | "services" | "redirectUrls"
   >;
   trackingCategory: string;
-}
+};
 
 const TRACKING_CATEGORY = "embedded-wallet";
 
@@ -54,7 +54,7 @@ type UpdateAPIKeyTrackingData = {
   hasCustomAuthEndpoint: boolean;
 };
 
-export const Configure: React.FC<ConfigureProps> = (props) => {
+export function InAppWalletSettingsPage(props: InAppWalletSettingsPageProps) {
   const { data: dashboardAccount } = useAccount();
   const mutation = useUpdateApiKey();
   const { trackingCategory } = props;
@@ -109,10 +109,10 @@ export const Configure: React.FC<ConfigureProps> = (props) => {
       isUpdating={mutation.isPending}
     />
   );
-};
+}
 
 export const InAppWalletSettingsUI: React.FC<
-  ConfigureProps & {
+  InAppWalletSettingsPageProps & {
     canEditAdvancedFeatures: boolean;
     updateApiKey: (
       apiKey: UpdateKeyInput,

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

@@ -4,7 +4,7 @@ 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 { Configure } from "./Configure";
+import { InAppWalletSettingsPage } from "./Configure";
 import { Users } from "./Users";
 
 interface EmbeddedWalletsProps {
@@ -69,7 +69,10 @@ export const EmbeddedWallets: React.FC<EmbeddedWalletsProps> = ({
       )}
 
       {selectedTab === "config" && (
-        <Configure apiKey={apiKey} trackingCategory={trackingCategory} />
+        <InAppWalletSettingsPage
+          apiKey={apiKey}
+          trackingCategory={trackingCategory}
+        />
       )}
     </div>
   );