new api for updating developer fees

joaquim-verges · joaquim-verges · commit 1d5b6ab59529 · 2025-04-22T12:12:56.000+12:00
diff --git a/apps/dashboard/src/@/api/universal-bridge/developer.ts b/apps/dashboard/src/@/api/universal-bridge/developer.ts
@@ -90,3 +90,59 @@ export async function deleteWebhook(props: {
 
   return;
 }
+
+export type Fee = {
+  feeRecipient: string;
+  feeBps: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export async function getFees(props: {
+  clientId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Fee;
+}
+
+export async function updateFee(props: {
+  clientId: string;
+  feeRecipient: string;
+  feeBps: number;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify({
+      feeRecipient: props.feeRecipient,
+      feeBps: props.feeBps,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/settings/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/settings/page.tsx
@@ -1,5 +1,6 @@
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
+import { getFees } from "@/api/universal-bridge/developer";
 import { redirect } from "next/navigation";
 import { PayConfig } from "../../../../../../../components/pay/PayConfig";
 
@@ -24,5 +25,32 @@ export default async function Page(props: {
     redirect(`/team/${team_slug}`);
   }
 
-  return <PayConfig project={project} teamId={team.id} teamSlug={team_slug} />;
+  let fees = await getFees({
+    clientId: project.publishableKey,
+  }).catch(() => {
+    return {
+      feeRecipient: "",
+      feeBps: 0,
+      createdAt: "",
+      updatedAt: "",
+    };
+  });
+
+  if (!fees) {
+    fees = {
+      feeRecipient: "",
+      feeBps: 0,
+      createdAt: "",
+      updatedAt: "",
+    };
+  }
+
+  return (
+    <PayConfig
+      project={project}
+      teamId={team.id}
+      teamSlug={team_slug}
+      fees={fees}
+    />
+  );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/webhooks/components/webhooks.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/webhooks/components/webhooks.client.tsx
@@ -4,7 +4,7 @@ import {
   createWebhook,
   deleteWebhook,
   getWebhooks,
-} from "@/api/universal-bridge/webhooks";
+} from "@/api/universal-bridge/developer";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
@@ -109,7 +109,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
               <TableHead>Label</TableHead>
               <TableHead>Url</TableHead>
               <TableHead>Created</TableHead>
-              <TableHead>Webhook Version</TableHead>
+              <TableHead>Version</TableHead>
               <TableHead>Delete</TableHead>
             </TableRow>
           </TableHeader>
@@ -249,7 +249,7 @@ function CreateWebhookButton(props: PropsWithChildren<PayWebhooksPageProps>) {
               name="version"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Webhook Version</FormLabel>
+                  <FormLabel>Version</FormLabel>
                   <Select {...field} onValueChange={field.onChange}>
                     <SelectTrigger className="w-full">
                       <SelectValue placeholder="v2" />
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/webhooks/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/webhooks/page.tsx
@@ -15,11 +15,5 @@ export default async function Page(props: {
     redirect(`/team/${params.team_slug}`);
   }
 
-  return (
-    <PayWebhooksPage
-      clientId={project.publishableKey}
-      projectId={project.id}
-      teamId={project.teamId}
-    />
-  );
+  return <PayWebhooksPage clientId={project.publishableKey} />;
 }
diff --git a/apps/dashboard/src/components/pay/PayConfig.tsx b/apps/dashboard/src/components/pay/PayConfig.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import type { Project } from "@/api/projects";
+import { type Fee, updateFee } from "@/api/universal-bridge/developer";
 import { SettingsCard } from "@/components/blocks/SettingsCard";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   Form,
   FormControl,
@@ -12,15 +11,13 @@ import {
   FormLabel,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { updateProjectClient } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import {
   type ApiKeyPayConfigValidationSchema,
   apiKeyPayConfigValidationSchema,
 } from "components/settings/ApiKeys/validations";
 import { useTrack } from "hooks/analytics/useTrack";
-import { CircleAlertIcon } from "lucide-react";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -29,56 +26,41 @@ interface PayConfigProps {
   project: Project;
   teamId: string;
   teamSlug: string;
+  fees: Fee;
 }
 
 const TRACKING_CATEGORY = "pay";
 
 export const PayConfig: React.FC<PayConfigProps> = (props) => {
-  const payService = props.project.services.find(
-    (service) => service.name === "pay",
-  );
-
   const form = useForm<ApiKeyPayConfigValidationSchema>({
     resolver: zodResolver(apiKeyPayConfigValidationSchema),
     values: {
-      payoutAddress: payService?.payoutAddress ?? "",
-      developerFeeBPS: payService?.developerFeeBPS ?? 0,
+      payoutAddress: props.fees.feeRecipient ?? "",
+      developerFeeBPS: props.fees.feeBps ?? 0,
     },
   });
 
   const trackEvent = useTrack();
 
-  const updateProject = useMutation({
-    mutationFn: async (projectValues: Partial<Project>) => {
-      await updateProjectClient(
-        {
-          projectId: props.project.id,
-          teamId: props.teamId,
-        },
-        projectValues,
-      );
+  const updateFeeMutation = useMutation({
+    mutationFn: async (values: {
+      payoutAddress: string;
+      developerFeeBPS: number;
+    }) => {
+      await updateFee({
+        clientId: props.project.publishableKey,
+        feeRecipient: values.payoutAddress,
+        feeBps: values.developerFeeBPS,
+      });
     },
   });
 
   const handleSubmit = form.handleSubmit(
     ({ payoutAddress, developerFeeBPS }) => {
-      const services = props.project.services;
-
-      const newServices = services.map((service) => {
-        if (service.name !== "pay") {
-          return service;
-        }
-
-        return {
-          ...service,
+      updateFeeMutation.mutate(
+        {
           payoutAddress,
           developerFeeBPS: developerFeeBPS ? developerFeeBPS * 100 : 0,
-        };
-      });
-
-      updateProject.mutate(
-        {
-          services: newServices,
         },
         {
           onSuccess: () => {
@@ -110,24 +92,6 @@ export const PayConfig: React.FC<PayConfigProps> = (props) => {
     },
   );
 
-  if (!payService) {
-    return (
-      <Alert variant="warning">
-        <CircleAlertIcon className="size-5" />
-        <AlertTitle>Pay service is disabled</AlertTitle>
-        <AlertDescription>
-          Enable Pay service in{" "}
-          <UnderlineLink
-            href={`/team/${props.teamSlug}/${props.project.slug}/settings`}
-          >
-            project settings
-          </UnderlineLink>{" "}
-          to configure settings
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
   return (
     <Form {...form}>
       <form onSubmit={handleSubmit} autoComplete="off">
@@ -137,7 +101,7 @@ export const PayConfig: React.FC<PayConfigProps> = (props) => {
           saveButton={{
             type: "submit",
             disabled: !form.formState.isDirty,
-            isPending: updateProject.isPending,
+            isPending: updateFeeMutation.isPending,
           }}
           noPermissionText={undefined}
         >

Original file line number	Diff line number	Diff line change
`@@ -15,11 +15,5 @@ export default async function Page(props: {`
`15`	`15`	redirect(`/team/${params.team_slug}`);
`16`	`16`	`}`
`17`	`17`
`18`		`- return (`
`19`		`- <PayWebhooksPage`
`20`		`- clientId={project.publishableKey}`
`21`		`- projectId={project.id}`
`22`		`- teamId={project.teamId}`
`23`		`- />`
`24`		`- );`
	`18`	`+ return <PayWebhooksPage clientId={project.publishableKey} />;`
`25`	`19`	`}`