Fix: Include correct client in payment link UI (#7449)

Author: gregfromstl

apps/dashboard/src/app/pay/[id]/page.tsx

@@ -4,7 +4,7 @@ import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { checksumAddress } from "thirdweb/utils";
 import { getPaymentLink } from "@/api/universal-bridge/links";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import { PayPageEmbed } from "../components/client/PayPageEmbed.client";
+import { PayPageWidget } from "../components/client/PayPageWidget.client";
 
 const title = "thirdweb Pay";
 const description = "Fast, secure, and simple payments.";
@@ -54,7 +54,7 @@ export default async function PayPage({
   };
 
   return (
-    <PayPageEmbed
+    <PayPageWidget
       amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
       chainId={Number(paymentLink.destinationToken.chainId)}
       clientId={paymentLink.clientId}

apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { payAppThirdwebClient } from "app/pay/constants";
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import { createThirdwebClient, NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
+import { AutoConnect, CheckoutWidget } from "thirdweb/react";
+import { checksumAddress } from "thirdweb/utils";
+import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
+
+export function PayPageWidget({
+  chainId,
+  recipientAddress,
+  paymentLinkId,
+  amount,
+  token,
+  name,
+  image,
+  redirectUri,
+  theme,
+  purchaseData,
+  clientId,
+}: {
+  chainId: number;
+  recipientAddress: string;
+  paymentLinkId?: string;
+  amount?: bigint;
+  token: { name: string; symbol: string; address: string; decimals: number };
+  name?: string;
+  image?: string;
+  redirectUri?: string;
+  clientId: string;
+  theme?: "light" | "dark";
+  purchaseData: Record<string, unknown> | undefined;
+}) {
+  const { theme: browserTheme, setTheme } = useTheme();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (theme) {
+      setTheme(theme);
+    }
+  }, [theme, setTheme]);
+  const chain = useV5DashboardChain(chainId);
+
+  return (
+    <>
+      <AutoConnect
+        client={
+          clientId ? createThirdwebClient({ clientId }) : payAppThirdwebClient
+        }
+      />
+      <CheckoutWidget
+        amount={amount ? toTokens(amount, token.decimals) : "0"}
+        chain={chain}
+        client={
+          clientId ? createThirdwebClient({ clientId }) : payAppThirdwebClient
+        }
+        image={image}
+        name={name}
+        onSuccess={() => {
+          if (!redirectUri) return;
+          const url = new URL(redirectUri);
+          return window.open(url.toString());
+        }}
+        paymentLinkId={paymentLinkId}
+        purchaseData={purchaseData}
+        seller={checksumAddress(recipientAddress)}
+        theme={theme ?? (browserTheme === "light" ? "light" : "dark")}
+        tokenAddress={
+          token.address === NATIVE_TOKEN_ADDRESS
+            ? undefined
+            : checksumAddress(token.address)
+        }
+      />
+    </>
+  );
+}

apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx

@@ -3,7 +3,7 @@ import { createThirdwebClient, defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { checksumAddress } from "thirdweb/utils";
 import { PaymentLinkForm } from "./components/client/PaymentLinkForm.client";
-import { PayPageEmbed } from "./components/client/PayPageEmbed.client";
+import { PayPageWidget } from "./components/client/PayPageWidget.client";
 import type { PayParams } from "./components/types";
 import { payAppThirdwebClient } from "./constants";
 
@@ -84,7 +84,7 @@ export default async function PayPage({
   };
 
   return (
-    <PayPageEmbed
+    <PayPageWidget
       amount={BigInt(params.amount)}
       chainId={Number(params.chainId)}
       clientId={client.clientId}