Add Pay page in teams layout (#4387)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to enhance the `PayConfig` component and update related components to use `clientId` instead of `apiKey.key`.

### Detailed summary
- Updated `PayConfig` to use `clientId` instead of `apiKey.key`
- Updated `PayAnalytics` to accept `clientId` instead of `apiKey`
- Updated `WebhooksPage` to use `clientId` instead of `apiKey.key`

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/ui/skeleton.tsx

@@ -36,7 +36,12 @@ function SkeletonContainer<T>(props: {
             isLoading ? "opacity-0" : "opacity-100",
           )}
         >
-          {props.render(props.loadedData ?? props.skeletonData, !isLoading)}
+          {props.render(
+            props.loadedData === undefined
+              ? props.skeletonData
+              : props.loadedData,
+            !isLoading,
+          )}
         </div>
       </div>
     </div>

apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/pay-ui.client.tsx

@@ -73,9 +73,9 @@ export function PayUI(props: {
       </div>
 
       {/* TODO: split this into sub-pages */}
-      {activeTab === "analytics" && <PayAnalytics apiKey={selectedKey} />}
+      {activeTab === "analytics" && <PayAnalytics clientId={selectedKey.key} />}
       {activeTab === "settings" && <PayConfig apiKey={selectedKey} />}
-      {activeTab === "webhooks" && <WebhooksPage apiKey={selectedKey} />}
+      {activeTab === "webhooks" && <WebhooksPage clientId={selectedKey.key} />}
     </>
   );
 }

apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/webhooks.client.tsx

@@ -35,7 +35,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
@@ -56,15 +55,15 @@ type Webhook = {
 };
 
 export type WebhooksPageProps = {
-  apiKey: ApiKey;
+  clientId: string;
 };
 
 export function WebhooksPage(props: WebhooksPageProps) {
   const webhooksQuery = useQuery({
-    queryKey: ["webhooks", props.apiKey.key],
+    queryKey: ["webhooks", props.clientId],
     queryFn: async () => {
       const res = await fetch(
-        `/api/server-proxy/pay/webhooks/get-all?clientId=${props.apiKey.key}`,
+        `/api/server-proxy/pay/webhooks/get-all?clientId=${props.clientId}`,
         {
           headers: {
             "Content-Type": "application/json",
@@ -84,7 +83,7 @@ export function WebhooksPage(props: WebhooksPageProps) {
     return (
       <div className="border border-border rounded-lg p-8 text-center flex flex-col items-center gap-8">
         <h2 className="text-xl font-semibold">No webhooks configured yet.</h2>
-        <CreateWebhookButton apiKey={props.apiKey}>
+        <CreateWebhookButton clientId={props.clientId}>
           <Button variant="primary" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -104,7 +103,7 @@ export function WebhooksPage(props: WebhooksPageProps) {
             <TableHead>Secret</TableHead>
             <TableHead>Created</TableHead>
             <TableHead className="text-right">
-              <CreateWebhookButton apiKey={props.apiKey}>
+              <CreateWebhookButton clientId={props.clientId}>
                 <Button size="sm" variant="primary" className="gap-1">
                   <PlusIcon className="size-4" />
                   <span>Create New Webhook</span>
@@ -133,7 +132,7 @@ export function WebhooksPage(props: WebhooksPageProps) {
               </TableCell>
               <TableCell className="text-right">
                 <DeleteWebhookButton
-                  apiKey={props.apiKey}
+                  clientId={props.clientId}
                   webhookId={webhook.id}
                 >
                   <Button variant="ghost" size="icon">
@@ -171,13 +170,13 @@ function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ ...values, clientId: props.apiKey.key }),
+        body: JSON.stringify({ ...values, clientId: props.clientId }),
       });
       const json = await res.json();
       return json.result as string;
     },
     onSuccess: () => {
-      return queryClient.invalidateQueries(["webhooks", props.apiKey.key]);
+      return queryClient.invalidateQueries(["webhooks", props.clientId]);
     },
   });
   return (
@@ -287,13 +286,13 @@ function DeleteWebhookButton(
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ id, clientId: props.apiKey.key }),
+        body: JSON.stringify({ id, clientId: props.clientId }),
       });
       const json = await res.json();
       return json.result as string;
     },
     onSuccess: () => {
-      return queryClient.invalidateQueries(["webhooks", props.apiKey.key]);
+      return queryClient.invalidateQueries(["webhooks", props.clientId]);
     },
   });
   return (

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/PayPageUI.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import {} from "@/components/ui/select";
+import { TabButtons } from "@/components/ui/tabs";
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+import { PayAnalytics } from "components/pay/PayAnalytics/PayAnalytics";
+import { PayConfig } from "components/pay/PayConfig";
+import { useState } from "react";
+import { WebhooksPage } from "../../../../../(dashboard)/dashboard/connect/pay/components/webhooks.client";
+
+export function PayPageUI(props: {
+  apiKey: Pick<
+    ApiKey,
+    | "key"
+    | "services"
+    | "id"
+    | "name"
+    | "domains"
+    | "bundleIds"
+    | "services"
+    | "redirectUrls"
+  >;
+}) {
+  const [activeTab, setActiveTab] = useState<
+    "settings" | "analytics" | "webhooks"
+  >("analytics");
+
+  return (
+    <>
+      <div className="flex-col gap-4 flex lg:flex-row w-full relative">
+        <TabButtons
+          containerClassName="w-full"
+          tabs={[
+            {
+              name: "Analytics",
+              isActive: activeTab === "analytics",
+              onClick: () => setActiveTab("analytics"),
+              isEnabled: true,
+            },
+            {
+              name: "Webhooks",
+              isActive: activeTab === "webhooks",
+              onClick: () => setActiveTab("webhooks"),
+              isEnabled: true,
+            },
+            {
+              name: "Settings",
+              isActive: activeTab === "settings",
+              onClick: () => setActiveTab("settings"),
+              isEnabled: true,
+            },
+          ]}
+        />
+      </div>
+
+      {/* TODO: split this into sub-pages */}
+      {activeTab === "analytics" && (
+        <PayAnalytics clientId={props.apiKey.key} />
+      )}
+      {activeTab === "settings" && <PayConfig apiKey={props.apiKey} />}
+      {activeTab === "webhooks" && <WebhooksPage clientId={props.apiKey.key} />}
+    </>
+  );
+}

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

@@ -1,7 +1,53 @@
-export default function Page() {
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getProject } from "../../../../../../@/api/projects";
+import { PayPageUI } from "./PayPageUI";
+
+export default async function Page(props: {
+  params: {
+    team_slug: string;
+    project_slug: string;
+  };
+}) {
+  const project = await getProject(
+    props.params.team_slug,
+    props.params.project_slug,
+  );
+
+  if (!project) {
+    return notFound();
+  }
+
   return (
-    <div className="h-full py-6 container flex items-center justify-center">
-      <h1 className="text-4xl tracking-tighter text-muted-foreground">Pay</h1>
+    <div className="max-sm:pt-6 pb-10">
+      <div className="flex flex-col gap-8 w-full">
+        <div className="flex flex-col lg:flex-row gap-6 justify-between items-start">
+          <div className="max-w-[700px]">
+            <h1 className="text-3xl md:text-4xl tracking-tight font-bold mb-3">
+              Pay
+            </h1>
+            <p className="text-sm md:text-base text-muted-foreground leading-relaxed">
+              Pay allows your users to purchase cryptocurrencies and execute
+              transactions with their credit card or debit card, or with any
+              token via cross-chain routing.{" "}
+              <Link
+                target="_blank"
+                href="https://portal.thirdweb.com/connect/pay/overview"
+                className="!text-link-foreground"
+              >
+                Learn more
+              </Link>
+            </p>
+          </div>
+        </div>
+
+        <PayPageUI
+          apiKey={{
+            ...project,
+            key: project.publishableKey, // clientId
+          }}
+        />
+      </div>
     </div>
   );
 }

apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx

@@ -6,7 +6,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import { format } from "date-fns";
 import { useState } from "react";
 import { PayCustomersTable } from "./components/PayCustomersTable";
@@ -49,8 +48,8 @@ type Range = {
   to: Date;
 };
 
-export function PayAnalytics(props: { apiKey: ApiKey }) {
-  const clientId = props.apiKey.key;
+export function PayAnalytics(props: { clientId: string }) {
+  const clientId = props.clientId;
   const [range, setRange] = useState<Range>(() =>
     getLastNDaysRange("last-120"),
   );

apps/dashboard/src/components/pay/PayAnalytics/components/PaymentsSuccessRate.tsx

@@ -103,7 +103,7 @@ export function PaymentsSuccessRate(props: {
     <div className="w-full relative flex flex-col">
       <div className="flex justify-between gap-2 items-center">
         <CardHeading> Payments </CardHeading>
-        {uiQuery.data && (
+        {!uiQuery.isLoading && (
           <Select
             value={type}
             onValueChange={(value: PayVolumeType) => {
@@ -197,7 +197,7 @@ function InfoRow(props: {
       <div className="flex items-center gap-2">
         <div
           className={`size-5 rounded-lg ${
-            !props.amount
+            props.amount === undefined
               ? "bg-accent"
               : props.type === "success"
                 ? "bg-success-text"
@@ -210,7 +210,7 @@ function InfoRow(props: {
         loadedData={
           props.isEmpty
             ? "$-"
-            : props.amount
+            : props.amount !== undefined
               ? `$${props.amount.toLocaleString()}`
               : undefined
         }

apps/dashboard/src/components/pay/PayConfig.tsx

@@ -26,7 +26,16 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 
 interface PayConfigProps {
-  apiKey: ApiKey;
+  apiKey: Pick<
+    ApiKey,
+    | "services"
+    | "id"
+    | "name"
+    | "domains"
+    | "bundleIds"
+    | "services"
+    | "redirectUrls"
+  >;
 }
 
 const TRACKING_CATEGORY = "pay";