[Dashboard] Fix: Use x-client-id + x-team-id for all UB requests (#6999)

Signed-off-by: greg <gregfromstl@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: 3 people

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

@@ -14,12 +14,17 @@ type Webhook = {
   version?: number; // TODO (UB) make this mandatory after migration
 };
 
-export async function getWebhooks() {
+export async function getWebhooks(props: {
+  clientId: string;
+  teamId: string;
+}) {
   const authToken = await getAuthToken();
   const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
       Authorization: `Bearer ${authToken}`,
     },
   });
@@ -35,12 +40,20 @@ export async function getWebhooks() {
 
 export async function createWebhook(props: {
   clientId: string;
+  teamId: string;
   version?: number;
   url: string;
   label: string;
   secret?: string;
 }) {
   const authToken = await getAuthToken();
+  console.log(
+    "UB_BASE_URL",
+    UB_BASE_URL,
+    props.clientId,
+    props.teamId,
+    authToken,
+  );
   const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
     method: "POST",
     body: JSON.stringify({
@@ -51,6 +64,8 @@ export async function createWebhook(props: {
     }),
     headers: {
       "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
       Authorization: `Bearer ${authToken}`,
     },
   });
@@ -65,6 +80,7 @@ export async function createWebhook(props: {
 
 export async function deleteWebhook(props: {
   clientId: string;
+  teamId: string;
   webhookId: string;
 }) {
   const authToken = await getAuthToken();
@@ -74,7 +90,8 @@ export async function deleteWebhook(props: {
       method: "DELETE",
       headers: {
         "Content-Type": "application/json",
-        "x-client-id-override": props.clientId,
+        "x-client-id": props.clientId,
+        "x-team-id": props.teamId,
         Authorization: `Bearer ${authToken}`,
       },
     },
@@ -105,6 +122,7 @@ export async function getFees(props: {
     headers: {
       "Content-Type": "application/json",
       "x-team-id": props.teamId,
+      "x-client-id": props.clientId,
       Authorization: `Bearer ${authToken}`,
     },
   });
@@ -130,6 +148,7 @@ export async function updateFee(props: {
     headers: {
       "Content-Type": "application/json",
       "x-team-id": props.teamId,
+      "x-client-id": props.clientId,
       Authorization: `Bearer ${authToken}`,
     },
     body: JSON.stringify({
@@ -187,6 +206,7 @@ export type Payment = {
 
 export async function getPayments(props: {
   clientId: string;
+  teamId: string;
   limit?: number;
   offset?: number;
 }) {
@@ -214,7 +234,8 @@ export async function getPayments(props: {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
-      "x-client-id-override": props.clientId,
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
       Authorization: `Bearer ${authToken}`,
     },
   });

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/universal-bridge/webhooks/components/webhooks.client.tsx

@@ -58,13 +58,17 @@ import { z } from "zod";
 
 type PayWebhooksPageProps = {
   clientId: string;
+  teamId: string;
 };
 
 export function PayWebhooksPage(props: PayWebhooksPageProps) {
   const webhooksQuery = useQuery({
-    queryKey: ["webhooks", props.clientId],
+    queryKey: ["webhooks", props.clientId, props.teamId],
     queryFn: async () => {
-      return await getWebhooks();
+      return await getWebhooks({
+        clientId: props.clientId,
+        teamId: props.teamId,
+      });
     },
   });
 
@@ -76,7 +80,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
     return (
       <div className="flex flex-col items-center gap-8 rounded-lg border border-border p-8 text-center">
         <h2 className="font-semibold text-xl">No webhooks configured yet.</h2>
-        <CreateWebhookButton clientId={props.clientId}>
+        <CreateWebhookButton clientId={props.clientId} teamId={props.teamId}>
           <Button variant="primary" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -90,7 +94,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
     <div>
       <div className="flex items-center justify-between">
         <h2 className="font-semibold text-xl tracking-tight">Webhooks</h2>
-        <CreateWebhookButton clientId={props.clientId}>
+        <CreateWebhookButton clientId={props.clientId} teamId={props.teamId}>
           <Button size="sm" variant="default" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -123,6 +127,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
                 <TableCell className="text-right">
                   <DeleteWebhookButton
                     clientId={props.clientId}
+                    teamId={props.teamId}
                     webhookId={webhook.id}
                   >
                     <Button variant="ghost" size="icon">
@@ -167,6 +172,7 @@ function CreateWebhookButton(props: PropsWithChildren<PayWebhooksPageProps>) {
     mutationFn: async (values: z.infer<typeof formSchema>) => {
       await createWebhook({
         clientId: props.clientId,
+        teamId: props.teamId,
         url: values.url,
         label: values.label,
         version: Number(values.version),
@@ -317,6 +323,7 @@ function DeleteWebhookButton(
     mutationFn: async (id: string) => {
       await deleteWebhook({
         clientId: props.clientId,
+        teamId: props.teamId,
         webhookId: id,
       });
       return null;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/universal-bridge/webhooks/page.tsx

@@ -1,5 +1,6 @@
 import { getProject } from "@/api/projects";
 import { redirect } from "next/navigation";
+import { getTeamBySlug } from "../../../../../../../../@/api/team";
 import { PayWebhooksPage } from "./components/webhooks.client";
 
 export default async function Page(props: {
@@ -9,11 +10,14 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.params;
-  const project = await getProject(params.team_slug, params.project_slug);
+  const [project, team] = await Promise.all([
+    getProject(params.team_slug, params.project_slug),
+    getTeamBySlug(params.team_slug),
+  ]);
 
-  if (!project) {
+  if (!project || !team) {
     redirect(`/team/${params.team_slug}`);
   }
 
-  return <PayWebhooksPage clientId={project.publishableKey} />;
+  return <PayWebhooksPage clientId={project.publishableKey} teamId={team.id} />;
 }

apps/dashboard/src/app/checkout/components/client/CheckoutEmbed.client.tsx renamed to apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx

@@ -17,7 +17,7 @@ import { NATIVE_TOKEN_ADDRESS, createThirdwebClient, toTokens } from "thirdweb";
 import { AutoConnect, PayEmbed } from "thirdweb/react";
 import { setThirdwebDomains } from "thirdweb/utils";
 
-export function CheckoutEmbed({
+export function PayPageEmbed({
   chainId,
   recipientAddress,
   amount,

apps/dashboard/src/app/checkout/components/client/CheckoutLinkForm.client.tsx renamed to apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx

@@ -12,6 +12,7 @@ import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
   type ThirdwebClient,
+  createThirdwebClient,
   defineChain,
   getContract,
   toUnits,
@@ -21,7 +22,7 @@ import { resolveScheme, upload } from "thirdweb/storage";
 import { FileInput } from "../../../../components/shared/FileInput";
 import { resolveEns } from "../../../../lib/ens";
 
-export function CheckoutLinkForm({ client }: { client: ThirdwebClient }) {
+export function PaymentLinkForm({ client }: { client: ThirdwebClient }) {
   const [chainId, setChainId] = useState<number>();
   const [recipientAddress, setRecipientAddress] = useState("");
   const [tokenAddressWithChain, setTokenAddressWithChain] = useState("");
@@ -38,35 +39,35 @@ export function CheckoutLinkForm({ client }: { client: ThirdwebClient }) {
     return chainId && recipientAddress && tokenAddressWithChain && amount;
   }, [chainId, recipientAddress, tokenAddressWithChain, amount]);
 
-  const handleImageUpload = useCallback(
-    async (file: File) => {
-      try {
-        setImage(file);
-        setUploadingImage(true);
+  const handleImageUpload = useCallback(async (file: File) => {
+    try {
+      setImage(file);
+      setUploadingImage(true);
 
-        const uri = await upload({
-          client,
-          files: [file],
-        });
+      const uploadClient = createThirdwebClient({
+        clientId: "7ae789153cf9ecde8f35649f2d8a4333",
+      });
+      const uri = await upload({
+        client: uploadClient,
+        files: [file],
+      });
 
-        // eslint-disable-next-line no-restricted-syntax
-        const resolvedUrl = resolveScheme({
-          uri,
-          client,
-        });
+      // eslint-disable-next-line no-restricted-syntax
+      const resolvedUrl = resolveScheme({
+        uri,
+        client: uploadClient,
+      });
 
-        setImageUri(resolvedUrl);
-        toast.success("Image uploaded successfully");
-      } catch (error) {
-        console.error("Error uploading image:", error);
-        toast.error("Failed to upload image");
-        setImage(null);
-      } finally {
-        setUploadingImage(false);
-      }
-    },
-    [client],
-  );
+      setImageUri(resolvedUrl);
+      toast.success("Image uploaded successfully");
+    } catch (error) {
+      console.error("Error uploading image:", error);
+      toast.error("Failed to upload image");
+      setImage(null);
+    } finally {
+      setUploadingImage(false);
+    }
+  }, []);
 
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {

apps/dashboard/src/app/checkout/components/client/Providers.client.tsx renamed to apps/dashboard/src/app/pay/components/client/Providers.client.tsx

@@ -1,4 +1,4 @@
-export type CheckoutParams = {
+export type PayParams = {
   chainId: string;
   recipientAddress: string;
   tokenAddress: string;

apps/dashboard/src/app/checkout/components/types.ts renamed to apps/dashboard/src/app/pay/components/types.ts

@@ -5,11 +5,11 @@ import { createThirdwebClient, defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { checksumAddress } from "thirdweb/utils";
 import { getClientThirdwebClient } from "../../@/constants/thirdweb-client.client";
-import { CheckoutEmbed } from "./components/client/CheckoutEmbed.client";
-import { CheckoutLinkForm } from "./components/client/CheckoutLinkForm.client";
-import type { CheckoutParams } from "./components/types";
+import { PayPageEmbed } from "./components/client/PayPageEmbed.client";
+import { PaymentLinkForm } from "./components/client/PaymentLinkForm.client";
+import type { PayParams } from "./components/types";
 
-const title = "thirdweb Checkout";
+const title = "thirdweb Pay";
 const description = "Fast, secure, and simple payments.";
 
 export const metadata: Metadata = {
@@ -23,7 +23,7 @@ export const metadata: Metadata = {
 
 export default async function RoutesPage({
   searchParams,
-}: { searchParams: Promise<CheckoutParams> }) {
+}: { searchParams: Promise<PayParams> }) {
   const params = await searchParams;
 
   // If no query parameters are provided, show the form
@@ -37,15 +37,15 @@ export default async function RoutesPage({
 
     if (!authToken) {
       const searchParams = new URLSearchParams(params);
-      return loginRedirect(`/checkout?${searchParams.toString()}`);
+      return loginRedirect(`/pay?${searchParams.toString()}`);
     }
 
     const client = getClientThirdwebClient({
       jwt: authToken,
       teamId: undefined,
     });
 
-    return <CheckoutLinkForm client={client} />;
+    return <PaymentLinkForm client={client} />;
   }
 
   // Validate query parameters
@@ -96,7 +96,7 @@ export default async function RoutesPage({
   };
 
   return (
-    <CheckoutEmbed
+    <PayPageEmbed
       redirectUri={params.redirectUri}
       chainId={Number(params.chainId)}
       recipientAddress={params.recipientAddress}