feat: payment links table

Author: gregfromstl

apps/dashboard/src/@/api/universal-bridge/developer.ts

@@ -203,6 +203,33 @@ export async function createPaymentLink(props: {
   return;
 }
 
+export async function deletePaymentLink(props: {
+  clientId: string;
+  teamId: string;
+  paymentLinkId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/links/${props.paymentLinkId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+        "x-client-id": props.clientId,
+        "x-team-id": props.teamId,
+      },
+      method: "DELETE",
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
 export type Fee = {
   feeRecipient: string;
   feeBps: number;
@@ -309,28 +336,21 @@ export async function getPayments(props: {
   const authToken = await getAuthToken();
 
   // Build URL with query parameters if provided
-  let url = `${UB_BASE_URL}/v1/developer/payments`;
-  const queryParams = new URLSearchParams();
+  const url = new URL(`${UB_BASE_URL}/v1/developer/payments`);
 
   if (props.limit) {
-    queryParams.append("limit", props.limit.toString());
+    url.searchParams.append("limit", props.limit.toString());
   }
 
   if (props.offset) {
-    queryParams.append("offset", props.offset.toString());
+    url.searchParams.append("offset", props.offset.toString());
   }
 
   if (props.paymentLinkId) {
-    queryParams.append("paymentLinkId", props.paymentLinkId);
-  }
-
-  // Append query params to URL if any exist
-  const queryString = queryParams.toString();
-  if (queryString) {
-    url = `${url}?${queryString}`;
+    url.searchParams.append("paymentLinkId", props.paymentLinkId);
   }
 
-  const res = await fetch(url, {
+  const res = await fetch(url.toString(), {
     headers: {
       Authorization: `Bearer ${authToken}`,
       "Content-Type": "application/json",

apps/dashboard/src/@/components/blocks/TokenSelector.tsx

@@ -190,7 +190,7 @@ export function TokenSelector(props: {
         tokensQuery.isPending ? (
           <div className="flex items-center gap-2">
             <Spinner className="size-4" />
-            <span>Loading Tokens</span>
+            <span>Loading tokens</span>
           </div>
         ) : (
           props.placeholder || "Select Token"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx

@@ -48,7 +48,7 @@ const formSchema = z.object({
 });
 
 export function CreatePaymentLinkButton(
-  props: PropsWithChildren<{ teamId: string }>,
+  props: PropsWithChildren<{ clientId: string; teamId: string }>,
 ) {
   const [open, setOpen] = useState(false);
   const [image, setImage] = useState<File>();
@@ -87,7 +87,7 @@ export function CreatePaymentLinkButton(
       }
 
       await createPaymentLink({
-        clientId: client.clientId,
+        clientId: props.clientId,
         teamId: props.teamId,
         intent: {
           destinationChainId: values.chainId,
@@ -103,7 +103,7 @@ export function CreatePaymentLinkButton(
     onSuccess: () => {
       toast.success("Payment link created successfully.");
       return queryClient.invalidateQueries({
-        queryKey: ["payment-links", client.clientId, props.teamId],
+        queryKey: ["payment-links", props.clientId, props.teamId],
       });
     },
     onError: (err) => {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx

@@ -6,6 +6,7 @@ import { type PropsWithChildren, useState } from "react";
 import { toast } from "sonner";
 import { toTokens } from "thirdweb";
 import {
+  deletePaymentLink,
   deleteWebhook,
   getPaymentLinks,
   getPayments,
@@ -106,6 +107,7 @@ export function PaymentLinksTable(props: { clientId: string; teamId: string }) {
         buttons={[
           <CreatePaymentLinkButton
             key="create-payment-link"
+            clientId={props.clientId}
             teamId={props.teamId}
           >
             <Button className="gap-1" variant="default" size="sm">
@@ -195,15 +197,15 @@ export function PaymentLinksTable(props: { clientId: string; teamId: string }) {
                       />
                     </TableCell>
                     <TableCell className="text-center">
-                      <DeleteWebhookButton
+                      <DeletePaymentLinkButton
                         clientId={props.clientId}
                         teamId={props.teamId}
-                        webhookId={paymentLink.id}
+                        paymentLinkId={paymentLink.id}
                       >
                         <Button size="icon" variant="ghost">
                           <TrashIcon className="size-5" strokeWidth={1} />
                         </Button>
-                      </DeleteWebhookButton>
+                      </DeletePaymentLinkButton>
                     </TableCell>
                   </TableRow>
                 ))
@@ -243,17 +245,21 @@ function SkeletonTableRow() {
   );
 }
 
-function DeleteWebhookButton(
-  props: PropsWithChildren<PayWebhooksPageProps & { webhookId: string }>,
+function DeletePaymentLinkButton(
+  props: PropsWithChildren<{
+    paymentLinkId: string;
+    clientId: string;
+    teamId: string;
+  }>,
 ) {
   const [open, setOpen] = useState(false);
   const queryClient = useQueryClient();
   const deleteMutation = useMutation({
     mutationFn: async (id: string) => {
-      await deleteWebhook({
+      await deletePaymentLink({
         clientId: props.clientId,
         teamId: props.teamId,
-        webhookId: id,
+        paymentLinkId: id,
       });
       return null;
     },
@@ -271,7 +277,7 @@ function DeleteWebhookButton(
           <DialogTitle>Are you sure?</DialogTitle>
           <DialogDescription>
             This action cannot be undone. This will permanently delete the
-            webhook.
+            payment link.
           </DialogDescription>
         </DialogHeader>
 
@@ -280,17 +286,17 @@ function DeleteWebhookButton(
             className="gap-2"
             disabled={deleteMutation.isPending}
             onClick={() => {
-              deleteMutation.mutateAsync(props.webhookId, {
+              deleteMutation.mutateAsync(props.paymentLinkId, {
                 onError(err) {
-                  toast.error("Failed to delete webhook", {
+                  toast.error("Failed to delete payment link.", {
                     description: err instanceof Error ? err.message : undefined,
                   });
                 },
                 onSuccess: () => {
-                  toast.success("Webhook deleted successfully");
+                  toast.success("Payment link deleted successfully.");
                   setOpen(false);
                   return queryClient.invalidateQueries({
-                    queryKey: ["webhooks", props.clientId],
+                    queryKey: ["payment-link", props.clientId],
                   });
                 },
               });

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/page.tsx

@@ -39,6 +39,7 @@ export default async function Page(props: {
         </div>
         <CreatePaymentLinkButton
           key="create-payment-link"
+          clientId={project.publishableKey}
           teamId={project.teamId}
         >
           <Button className="gap-1" variant="default" size="sm">