Add project wallet integration to payments UI

0xFirekeeper · 0xFirekeeper · commit 945ac3d87830 · 2025-10-07T22:29:26.000+07:00
Introduces a server utility to fetch the project wallet and propagates the project wallet address to payment-related components. Updates payment link creation and payout address forms to allow users to autofill with the project wallet address, improving usability and consistency across the dashboard.
diff --git a/apps/dashboard/src/@/lib/server/project-wallet.ts b/apps/dashboard/src/@/lib/server/project-wallet.ts
@@ -0,0 +1,92 @@
+import "server-only";
+
+import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import type { Project } from "@/api/project/projects";
+import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
+import { getProjectWalletLabel } from "@/lib/project-wallet";
+
+export type ProjectWalletSummary = {
+  id: string;
+  address: string;
+  label?: string;
+};
+
+type VaultWalletListItem = {
+  id: string;
+  address: string;
+  metadata?: {
+    label?: string;
+    projectId?: string;
+    teamId?: string;
+    type?: string;
+  };
+};
+
+export async function getProjectWallet(
+  project: Project,
+): Promise<ProjectWalletSummary | undefined> {
+  const engineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  const managementAccessToken =
+    engineCloudService?.managementAccessToken || undefined;
+
+  if (!managementAccessToken || !NEXT_PUBLIC_THIRDWEB_VAULT_URL) {
+    return undefined;
+  }
+
+  try {
+    const vaultClient = await createVaultClient({
+      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
+    });
+
+    const response = await listEoas({
+      client: vaultClient,
+      request: {
+        auth: {
+          accessToken: managementAccessToken,
+        },
+        options: {
+          page: 0,
+          // @ts-expect-error - SDK expects snake_case for pagination arguments
+          page_size: 25,
+        },
+      },
+    });
+
+    if (!response.success || !response.data) {
+      return undefined;
+    }
+
+    const items = response.data.items as VaultWalletListItem[] | undefined;
+
+    if (!items?.length) {
+      return undefined;
+    }
+
+    const expectedLabel = getProjectWalletLabel(project.name);
+
+    const serverWallets = items.filter(
+      (item) => item.metadata?.projectId === project.id,
+    );
+
+    const defaultWallet =
+      serverWallets.find((item) => item.metadata?.label === expectedLabel) ??
+      serverWallets.find((item) => item.metadata?.type === "server-wallet") ??
+      serverWallets[0];
+
+    if (!defaultWallet) {
+      return undefined;
+    }
+
+    return {
+      id: defaultWallet.id,
+      address: defaultWallet.address,
+      label: defaultWallet.metadata?.label,
+    };
+  } catch (error) {
+    console.error("Failed to load project wallet", error);
+    return undefined;
+  }
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
@@ -1,4 +1,3 @@
-import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
 import {
   ArrowLeftRightIcon,
   ChevronRightIcon,
@@ -11,7 +10,6 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { CodeServer } from "@/components/ui/code/code.server";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
 import { DotNetIcon } from "@/icons/brand-icons/DotNetIcon";
 import { GithubIcon } from "@/icons/brand-icons/GithubIcon";
 import { ReactIcon } from "@/icons/brand-icons/ReactIcon";
@@ -23,21 +21,19 @@ import { InsightIcon } from "@/icons/InsightIcon";
 import { PayIcon } from "@/icons/PayIcon";
 import { WalletProductIcon } from "@/icons/WalletProductIcon";
 import { getProjectWalletLabel } from "@/lib/project-wallet";
+import {
+  getProjectWallet,
+  type ProjectWalletSummary,
+} from "@/lib/server/project-wallet";
 import { ClientIDSection } from "./ClientIDSection";
 import { IntegrateAPIKeyCodeTabs } from "./IntegrateAPIKeyCodeTabs";
 import { SecretKeySection } from "./SecretKeySection";
 
-type ProjectWalletSummary = {
-  id: string;
-  address: string;
-  label?: string;
-};
-
 export async function ProjectFTUX(props: {
   project: Project;
   teamSlug: string;
 }) {
-  const projectWallet = await fetchProjectWallet(props.project);
+  const projectWallet = await getProjectWallet(props.project);
 
   return (
     <div className="flex flex-col gap-10">
@@ -139,86 +135,6 @@ function ProjectWalletSection(props: {
   );
 }
 
-type VaultWalletListItem = {
-  id: string;
-  address: string;
-  metadata?: {
-    label?: string;
-    projectId?: string;
-    teamId?: string;
-    type?: string;
-  };
-};
-
-async function fetchProjectWallet(
-  project: Project,
-): Promise<ProjectWalletSummary | undefined> {
-  const engineCloudService = project.services.find(
-    (service) => service.name === "engineCloud",
-  );
-
-  const managementAccessToken =
-    engineCloudService?.managementAccessToken || undefined;
-
-  if (!managementAccessToken || !NEXT_PUBLIC_THIRDWEB_VAULT_URL) {
-    return undefined;
-  }
-
-  try {
-    const vaultClient = await createVaultClient({
-      baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
-    });
-
-    const response = await listEoas({
-      client: vaultClient,
-      request: {
-        auth: {
-          accessToken: managementAccessToken,
-        },
-        options: {
-          page: 0,
-          // @ts-expect-error - SDK expects snake_case for pagination arguments
-          page_size: 25,
-        },
-      },
-    });
-
-    if (!response.success || !response.data) {
-      return undefined;
-    }
-
-    const items = response.data.items as VaultWalletListItem[] | undefined;
-
-    if (!items?.length) {
-      return undefined;
-    }
-
-    const expectedLabel = getProjectWalletLabel(project.name);
-
-    const serverWallets = items.filter(
-      (item) => item.metadata?.projectId === project.id,
-    );
-
-    const defaultWallet =
-      serverWallets.find((item) => item.metadata?.label === expectedLabel) ||
-      serverWallets.find((item) => item.metadata?.type === "server-wallet") ||
-      serverWallets[0];
-
-    if (!defaultWallet) {
-      return undefined;
-    }
-
-    return {
-      id: defaultWallet.id,
-      address: defaultWallet.address,
-      label: defaultWallet.metadata?.label,
-    };
-  } catch (error) {
-    console.error("Failed to load project wallet", error);
-    return undefined;
-  }
-}
-
 // Integrate API key section ------------------------------------------------------------
 
 function IntegrateAPIKeySection({
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx
@@ -15,6 +15,7 @@ export function QuickStartSection(props: {
   projectSlug: string;
   clientId: string;
   teamId: string;
+  projectWalletAddress?: string;
 }) {
   return (
     <section>
@@ -43,6 +44,7 @@ export function QuickStartSection(props: {
           action={
             <CreatePaymentLinkButton
               clientId={props.clientId}
+              projectWalletAddress={props.projectWalletAddress}
               teamId={props.teamId}
             >
               <Button
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
@@ -45,7 +45,11 @@ const formSchema = z.object({
 });
 
 export function CreatePaymentLinkButton(
-  props: PropsWithChildren<{ clientId: string; teamId: string }>,
+  props: PropsWithChildren<{
+    clientId: string;
+    teamId: string;
+    projectWalletAddress?: string;
+  }>,
 ) {
   const [open, setOpen] = useState(false);
 
@@ -55,6 +59,7 @@ export function CreatePaymentLinkButton(
       <DialogContent className="p-0 !max-w-lg">
         <CreatePaymentLinkDialogContent
           clientId={props.clientId}
+          projectWalletAddress={props.projectWalletAddress}
           setOpen={setOpen}
           teamId={props.teamId}
         />
@@ -67,6 +72,7 @@ function CreatePaymentLinkDialogContent(props: {
   clientId: string;
   teamId: string;
   setOpen: (open: boolean) => void;
+  projectWalletAddress?: string;
 }) {
   const client = getClientThirdwebClient();
 
@@ -182,14 +188,41 @@ function CreatePaymentLinkDialogContent(props: {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Recipient Address</FormLabel>
-                  <Input
-                    className="w-full bg-card"
-                    {...field}
-                    onChange={field.onChange}
-                    value={field.value}
-                    placeholder="Address or ENS"
-                    required
-                  />
+                  <div className="flex flex-col gap-2 sm:flex-row">
+                    <Input
+                      className="w-full bg-card sm:flex-1"
+                      {...field}
+                      onChange={field.onChange}
+                      value={field.value}
+                      placeholder="Address or ENS"
+                      required
+                    />
+                    {props.projectWalletAddress && (
+                      <Button
+                        className="sm:w-auto"
+                        onClick={() => {
+                          if (!props.projectWalletAddress) {
+                            return;
+                          }
+
+                          form.setValue(
+                            "recipient",
+                            props.projectWalletAddress,
+                            {
+                              shouldDirty: true,
+                              shouldTouch: true,
+                              shouldValidate: true,
+                            },
+                          );
+                        }}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                      >
+                        Use Project Wallet
+                      </Button>
+                    )}
+                  </div>
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
@@ -40,7 +40,11 @@ import { ErrorState } from "../../components/ErrorState";
 import { formatTokenAmount } from "../../components/format";
 import { CreatePaymentLinkButton } from "./CreatePaymentLinkButton.client";
 
-export function PaymentLinksTable(props: { clientId: string; teamId: string }) {
+export function PaymentLinksTable(props: {
+  clientId: string;
+  teamId: string;
+  projectWalletAddress?: string;
+}) {
   return (
     <section>
       <div className="mb-4">
@@ -49,12 +53,20 @@ export function PaymentLinksTable(props: { clientId: string; teamId: string }) {
           The payments you have created in this project
         </p>
       </div>
-      <PaymentLinksTableInner clientId={props.clientId} teamId={props.teamId} />
+      <PaymentLinksTableInner
+        clientId={props.clientId}
+        projectWalletAddress={props.projectWalletAddress}
+        teamId={props.teamId}
+      />
     </section>
   );
 }
 
-function PaymentLinksTableInner(props: { clientId: string; teamId: string }) {
+function PaymentLinksTableInner(props: {
+  clientId: string;
+  teamId: string;
+  projectWalletAddress?: string;
+}) {
   const paymentLinksQuery = useQuery({
     queryFn: async () => {
       return getPaymentLinks({
@@ -120,6 +132,7 @@ function PaymentLinksTableInner(props: { clientId: string; teamId: string }) {
           <CreatePaymentLinkButton
             key="create-payment-link"
             clientId={props.clientId}
+            projectWalletAddress={props.projectWalletAddress}
             teamId={props.teamId}
           >
             <Button className="gap-2 rounded-full" variant="default" size="sm">
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
@@ -6,6 +6,7 @@ import { getProject } from "@/api/project/projects";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { PayIcon } from "@/icons/PayIcon";
+import { getProjectWallet } from "@/lib/server/project-wallet";
 import { loginRedirect } from "@/utils/redirects";
 import { AdvancedSection } from "./components/AdvancedSection.client";
 import { QuickStartSection } from "./components/QuickstartSection.client";
@@ -29,6 +30,8 @@ export default async function Page(props: {
     redirect(`/team/${params.team_slug}`);
   }
 
+  const projectWallet = await getProjectWallet(project);
+
   const client = getClientThirdwebClient({
     jwt: authToken,
     teamId: project.teamId,
@@ -51,6 +54,7 @@ export default async function Page(props: {
             component: (
               <CreatePaymentLinkButton
                 clientId={project.publishableKey}
+                projectWalletAddress={projectWallet?.address}
                 teamId={project.teamId}
               >
                 <Button className="gap-1.5 rounded-full" size="sm">
@@ -141,12 +145,14 @@ export default async function Page(props: {
       <div className="flex flex-col gap-12">
         <PaymentLinksTable
           clientId={project.publishableKey}
+          projectWalletAddress={projectWallet?.address}
           teamId={project.teamId}
         />
         <QuickStartSection
           projectSlug={params.project_slug}
           teamSlug={params.team_slug}
           clientId={project.publishableKey}
+          projectWalletAddress={projectWallet?.address}
           teamId={project.teamId}
         />
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/PayConfig.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsx
