Fix APIKey fetch in project layout (#4912)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new function, `getAPIKeyForProjectId`, to streamline the retrieval of API keys for projects. It replaces the previous usage of `getAPIKey` across multiple components, ensuring consistent handling of project IDs.

### Detailed summary
- Added `getAPIKeyForProjectId` function in `getAPIKeys.ts`.
- Replaced calls to `getAPIKey` with `getAPIKeyForProjectId` in:
  - `apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/page.tsx`
  - `apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/pay/page.tsx`
  - `apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx`
  - `apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/in-app-wallets/page.tsx`
  - `apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/account-abstraction/page.tsx`

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/api/lib/getAPIKeys.ts

@@ -37,9 +37,9 @@ export async function getAPIKey(apiKeyId: string) {
 
 export async function getApiKeys() {
   const authToken = getAuthToken();
+
   const res = await fetch(`${API_SERVER_URL}/v1/keys`, {
     method: "GET",
-
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${authToken}`,
@@ -53,3 +53,11 @@ export async function getApiKeys() {
 
   return json.data as ApiKey[];
 }
+
+export function getAPIKeyForProjectId(projectId: string) {
+  if (projectId.startsWith("prj_")) {
+    return getAPIKey(projectId.slice("prj_".length));
+  }
+
+  return getAPIKey(projectId);
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx

@@ -1,7 +1,7 @@
 import { getProject } from "@/api/projects";
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { notFound } from "next/navigation";
-import { getAPIKey } from "../../../../../api/lib/getAPIKeys";
+import { getAPIKeyForProjectId } from "../../../../../api/lib/getAPIKeys";
 import { AccountAbstractionPage } from "./AccountAbstractionPage";
 
 export default async function Page(props: {
@@ -14,8 +14,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  // THIS IS A WORKAROUND - project does not have `services` info - so we fetch APIKey object.
-  const apiKey = await getAPIKey(project.id);
+  const apiKey = await getAPIKeyForProjectId(project.id);
 
   if (!apiKey) {
     notFound();

apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/account-abstraction/page.tsx

@@ -2,7 +2,7 @@ import { getProject } from "@/api/projects";
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { notFound } from "next/navigation";
 import { AccountAbstractionSettingsPage } from "../../../../../../components/smart-wallets/SponsorshipPolicies";
-import { getAPIKey } from "../../../../../api/lib/getAPIKeys";
+import { getAPIKeyForProjectId } from "../../../../../api/lib/getAPIKeys";
 
 export default async function Page(props: {
   params: { team_slug: string; project_slug: string };
@@ -14,8 +14,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  // THIS IS A WORKAROUND - project does not have `services` info - so we fetch APIKey object.
-  const apiKey = await getAPIKey(project.id);
+  const apiKey = await getAPIKeyForProjectId(project.id);
 
   if (!apiKey) {
     notFound();

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

@@ -1,7 +1,7 @@
 import { getProject } from "@/api/projects";
 import { notFound } from "next/navigation";
 import { InAppWalletSettingsPage } from "../../../../../../components/embedded-wallets/Configure";
-import { getAPIKey } from "../../../../../api/lib/getAPIKeys";
+import { getAPIKeyForProjectId } from "../../../../../api/lib/getAPIKeys";
 
 export default async function Page(props: {
   params: { team_slug: string; project_slug: string };
@@ -13,8 +13,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  // THIS IS A WORKAROUND - project does not have `services` info - so we fetch APIKey object.
-  const apiKey = await getAPIKey(project.id);
+  const apiKey = await getAPIKeyForProjectId(project.id);
 
   if (!apiKey) {
     notFound();

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

@@ -1,6 +1,6 @@
 import { getProject } from "@/api/projects";
 import { notFound } from "next/navigation";
-import { getAPIKey } from "../../../../api/lib/getAPIKeys";
+import { getAPIKeyForProjectId } from "../../../../api/lib/getAPIKeys";
 import { ProjectGeneralSettingsPageForTeams } from "./ProjectGeneralSettingsPageForTeams";
 
 export default async function Page(props: {
@@ -13,8 +13,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  // THIS IS A WORKAROUND - project does not have `services` info - so we fetch APIKey object.
-  const apiKey = await getAPIKey(project.id);
+  const apiKey = await getAPIKeyForProjectId(project.id);
 
   if (!apiKey) {
     notFound();

apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/pay/page.tsx

@@ -1,7 +1,7 @@
 import { getProject } from "@/api/projects";
 import { notFound } from "next/navigation";
 import { PayConfig } from "../../../../../../components/pay/PayConfig";
-import { getAPIKey } from "../../../../../api/lib/getAPIKeys";
+import { getAPIKeyForProjectId } from "../../../../../api/lib/getAPIKeys";
 
 export default async function Page(props: {
   params: {
@@ -16,8 +16,7 @@ export default async function Page(props: {
     notFound();
   }
 
-  // THIS IS A WORKAROUND - project does not have `services` info - so we fetch APIKey object.
-  const apiKey = await getAPIKey(project.id);
+  const apiKey = await getAPIKeyForProjectId(project.id);
 
   if (!apiKey) {
     notFound();