Fix: Auth method for checkout page api requests to ub service (#6996)

Author: gregfromstl

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

@@ -14,15 +14,12 @@ type Webhook = {
   version?: number; // TODO (UB) make this mandatory after migration
 };
 
-export async function getWebhooks(props: {
-  clientId: string;
-}) {
+export async function getWebhooks() {
   const authToken = await getAuthToken();
   const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
-      "x-client-id-override": props.clientId,
       Authorization: `Bearer ${authToken}`,
     },
   });
@@ -54,7 +51,6 @@ export async function createWebhook(props: {
     }),
     headers: {
       "Content-Type": "application/json",
-      "x-client-id-override": props.clientId,
       Authorization: `Bearer ${authToken}`,
     },
   });
@@ -109,7 +105,6 @@ export async function getFees(props: {
     headers: {
       "Content-Type": "application/json",
       "x-team-id": props.teamId,
-      "x-client-id-override": props.clientId,
       Authorization: `Bearer ${authToken}`,
     },
   });
@@ -134,7 +129,6 @@ export async function updateFee(props: {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",
-      "x-client-id-override": props.clientId,
       "x-team-id": props.teamId,
       Authorization: `Bearer ${authToken}`,
     },

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

@@ -1,5 +1,5 @@
 "use server";
-import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { UB_BASE_URL } from "./constants";
 
 export type TokenMetadata = {
@@ -12,10 +12,8 @@ export type TokenMetadata = {
 };
 
 export async function getUniversalBridgeTokens(props: {
-  clientId?: string;
   chainId?: number;
 }) {
-  const authToken = await getAuthToken();
   const url = new URL(`${UB_BASE_URL}/v1/tokens`);
 
   if (props.chainId) {
@@ -27,8 +25,7 @@ export async function getUniversalBridgeTokens(props: {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
-      "x-client-id-override": props.clientId,
-      Authorization: `Bearer ${authToken}`,
+      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
     } as Record<string, string>,
   });
 

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

@@ -26,7 +26,6 @@ export function TokenSelector(props: {
   enabled?: boolean;
 }) {
   const { tokens, isFetching } = useTokensData({
-    clientId: props.client.clientId,
     chainId: props.chainId,
     enabled: props.enabled,
   });

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

@@ -64,9 +64,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
   const webhooksQuery = useQuery({
     queryKey: ["webhooks", props.clientId],
     queryFn: async () => {
-      return await getWebhooks({
-        clientId: props.clientId,
-      });
+      return await getWebhooks();
     },
   });
 

apps/dashboard/src/app/checkout/components/client/CheckoutLinkForm.client.tsx

@@ -189,7 +189,7 @@ export function CheckoutLinkForm() {
             <CreditCardIcon className="size-5 sm:size-6" />
           </div>
           <CardTitle className="text-center sm:text-left">
-            Create a Checkout Link
+            Create a Payment Link
           </CardTitle>
         </div>
       </CardHeader>
@@ -300,6 +300,7 @@ export function CheckoutLinkForm() {
                         value={image || imageUri}
                         className="!rounded-md aspect-square h-24 w-full"
                         isDisabled={uploadingImage}
+                        isDisabledText="Uploading..."
                         selectOrUpload="Upload"
                         helperText="image"
                         fileUrl={imageUri}

apps/dashboard/src/app/checkout/page.tsx

@@ -1,3 +1,5 @@
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { loginRedirect } from "app/(app)/login/loginRedirect";
 import type { Metadata } from "next";
 import { createThirdwebClient, defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
@@ -26,11 +28,18 @@ export default async function RoutesPage({
 
   // If no query parameters are provided, show the form
   if (
-    !params.chainId ||
-    !params.recipientAddress ||
-    !params.tokenAddress ||
+    !params.chainId &&
+    !params.recipientAddress &&
+    !params.tokenAddress &&
     !params.amount
   ) {
+    const authToken = await getAuthToken();
+
+    if (!authToken) {
+      const searchParams = new URLSearchParams(params);
+      return loginRedirect(`/checkout?${searchParams.toString()}`);
+    }
+
     return <CheckoutLinkForm />;
   }
 

apps/dashboard/src/hooks/tokens/tokens.ts

@@ -82,13 +82,12 @@ const tokensStore = /* @__PURE__ */ createStore<TokenMetadata[]>([]);
 const structuredTokensStore = /* @__PURE__ */ createStructuredTokensStore();
 
 export function useTokensData({
-  clientId,
   chainId,
   enabled,
-}: { clientId: string; chainId?: number; enabled?: boolean }) {
+}: { chainId?: number; enabled?: boolean }) {
   const tokensQuery = useQuery({
     queryKey: ["universal-bridge-tokens", chainId],
-    queryFn: () => getUniversalBridgeTokens({ clientId, chainId }),
+    queryFn: () => getUniversalBridgeTokens({ chainId }),
     enabled,
   });