[Dashboard] Refactor PayPage client initialization and enhance OnRampScreen props

- Replaced the client initialization in PayPage to use `payAppThirdwebClient` instead of `getClientThirdwebClient`.
- Updated OnRampScreen to accept and utilize `paymentLinkId` prop, enhancing the component's functionality for payment link handling.

Author: gregfromstl

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

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 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 { PayPageEmbed } from "./components/client/PayPageEmbed.client";
 import { PaymentLinkForm } from "./components/client/PaymentLinkForm.client";
 import type { PayParams } from "./components/types";
@@ -59,7 +58,7 @@ export default async function PayPage({
   const client =
     params.clientId && !Array.isArray(params.clientId)
       ? createThirdwebClient({ clientId: params.clientId })
-      : getClientThirdwebClient(undefined);
+      : payAppThirdwebClient;
 
   const tokenContract = getContract({
     client: payAppThirdwebClient,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/OnRampScreen.tsx

@@ -86,6 +86,7 @@ export function OnRampScreen(props: {
     payer: props.payer,
     theme: props.theme,
     isAutoMode,
+    paymentLinkId: props.paymentLinkId,
   });
   const firstStepChainId = state.steps[0]?.step.token.chainId;
   return (
@@ -289,6 +290,7 @@ function useOnRampScreenState(props: {
   payer: PayerInfo;
   theme: "light" | "dark";
   isAutoMode?: boolean;
+  paymentLinkId?: string;
 }): OnRampScreenState {
   const onRampSteps = getOnRampSteps(props.quote);
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -323,6 +325,7 @@ function useOnRampScreenState(props: {
     client: props.client,
     payer: props.payer,
     isFiatFlow: true,
+    paymentLinkId: props.paymentLinkId,
   });
 
   // Track swap status