From 2ebba6139a3075fb786fd031822d162279169ef4 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 6 Oct 2025 19:51:08 +0000
Subject: [PATCH] [MNY-235] Dashboard: Fix payment page theme issues (#8199)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on integrating the `ThemeProvider` from `next-themes` into multiple components within the payment module, enhancing theming support across the application.

### Detailed summary
- Removed `ThemeProvider` from `PayLayout` in `layout.tsx`.
- Added `ThemeProvider` wrapping to `PayPage` in `page.tsx`.
- Integrated `ThemeProvider` in `PayPageWidget` to manage theme settings.
- Updated theme handling logic in `PayPageWidget` to use `getSDKTheme`.
- Wrapped the main structure in `ThemeProvider` in `[id]/page.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- New Features
  - Consistent light/dark theme across all Pay pages, with support for forcing a theme per link and reduced visual flicker from system theme changes.
- Style
  - Refined header layout: project image, name, and description grouped; “Secured by thirdweb” badge retained.
  - Improved details on large screens: clearer “Network” label with icon and chain name; seller shown as ENS or shortened address, reordered for readability.
- Refactor
  - Consolidated theming at the page level for consistent behavior across views.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/dashboard/src/app/pay/[id]/page.tsx      | 235 +++++++++---------
 .../client/PayPageWidget.client.tsx           |  14 +-
 apps/dashboard/src/app/pay/layout.tsx         |  14 +-
 apps/dashboard/src/app/pay/page.tsx           |  42 +++-
 4 files changed, 156 insertions(+), 149 deletions(-)

diff --git a/apps/dashboard/src/app/pay/[id]/page.tsx b/apps/dashboard/src/app/pay/[id]/page.tsx
index 239f1da201d..19a809bb5af 100644
--- a/apps/dashboard/src/app/pay/[id]/page.tsx
+++ b/apps/dashboard/src/app/pay/[id]/page.tsx
@@ -1,5 +1,6 @@
 import { ShieldCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
 import { Bridge, defineChain, toTokens } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
 import { shortenAddress } from "thirdweb/utils";
@@ -80,131 +81,137 @@ export default async function PayPage({
   }
 
   return (
-    <div className="flex z-10 flex-col lg:flex-row h-full w-full">
-      <header className="min-w-full lg:min-w-[500px] border-b lg:border-r lg:h-full bg-card flex flex-col gap-4 items-start p-4 lg:p-8">
-        <div>
-          <div className="flex flex-row items-center justify-start gap-4">
-            {projectMetadata.image && (
-              <img
-                src={
-                  resolveSchemeWithErrorHandler({
-                    uri: projectMetadata.image,
-                    client: payAppThirdwebClient,
-                  }) || ""
-                }
-                alt={projectMetadata.name}
-                width={25}
-                height={25}
-                className="rounded-full overflow-hidden"
-              />
+    <ThemeProvider
+      forcedTheme={theme === "light" ? "light" : "dark"}
+      attribute="class"
+      disableTransitionOnChange
+      enableSystem={false}
+    >
+      <div className="flex z-10 flex-col lg:flex-row h-full w-full">
+        <header className="min-w-full lg:min-w-[500px] border-b lg:border-r lg:h-full bg-card flex flex-col gap-4 items-start p-4 lg:p-8">
+          <div>
+            <div className="flex flex-row items-center justify-start gap-4">
+              {projectMetadata.image && (
+                <img
+                  src={
+                    resolveSchemeWithErrorHandler({
+                      uri: projectMetadata.image,
+                      client: payAppThirdwebClient,
+                    }) || ""
+                  }
+                  alt={projectMetadata.name}
+                  width={25}
+                  height={25}
+                  className="rounded-full overflow-hidden"
+                />
+              )}
+              <h2 className="text-xl font-bold">{projectMetadata.name}</h2>
+            </div>
+            {projectMetadata.description && (
+              <p className="mt-2 text-sm text-muted-foreground">
+                {projectMetadata.description}
+              </p>
             )}
-            <h2 className="text-xl font-bold">{projectMetadata.name}</h2>
           </div>
-          {projectMetadata.description && (
-            <p className="mt-2 text-sm text-muted-foreground">
-              {projectMetadata.description}
-            </p>
-          )}
-        </div>
 
-        <div className="hidden lg:block my-4 w-full">
-          {paymentLink.amount && (
-            <div className="flex flex-col gap-1 w-full my-4">
-              <span className="text-muted-foreground text-xs">Details</span>
-              <div className="font-medium flex-row flex justify-between items-center w-full">
-                <div className="flex flex-row items-center gap-2">
-                  {token.iconUri && (
-                    <img
-                      src={resolveSchemeWithErrorHandler({
-                        uri: token.iconUri,
-                        client: getConfiguredThirdwebClient({
-                          secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-                          teamId: undefined,
-                        }),
-                      })}
-                      alt={token.name}
-                      width={25}
-                      height={25}
-                      className="size-5 rounded-full overflow-hidden"
-                    />
-                  )}
-                  {toTokens(BigInt(paymentLink.amount), token.decimals)}{" "}
-                  {token.symbol}
-                </div>
-                {token.prices.USD && (
-                  <span>
-                    $
-                    {(
-                      Number(token.prices.USD) *
-                      Number(
-                        toTokens(BigInt(paymentLink.amount), token.decimals),
-                      )
-                    ).toFixed(2)}
-                  </span>
-                )}
-              </div>
-            </div>
-          )}
-          {chain && (
-            <div className="flex flex-col gap-1 w-full my-4">
-              <span className="text-muted-foreground text-xs">Network</span>
-              <div className="font-medium flex-row flex justify-between items-center w-full">
-                <div className="flex flex-row items-center gap-2">
-                  {chain.icon?.url && (
-                    <img
-                      src={resolveSchemeWithErrorHandler({
-                        uri: chain.icon.url,
-                        client: getConfiguredThirdwebClient({
-                          secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-                          teamId: undefined,
-                        }),
-                      })}
-                      alt={chain.name}
-                      width={chain.icon.width}
-                      height={chain.icon.height}
-                      className="size-5 rounded-full overflow-hidden"
-                    />
+          <div className="hidden lg:block my-4 w-full">
+            {paymentLink.amount && (
+              <div className="flex flex-col gap-1 w-full my-4">
+                <span className="text-muted-foreground text-xs">Details</span>
+                <div className="font-medium flex-row flex justify-between items-center w-full">
+                  <div className="flex flex-row items-center gap-2">
+                    {token.iconUri && (
+                      <img
+                        src={resolveSchemeWithErrorHandler({
+                          uri: token.iconUri,
+                          client: getConfiguredThirdwebClient({
+                            secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
+                            teamId: undefined,
+                          }),
+                        })}
+                        alt={token.name}
+                        width={25}
+                        height={25}
+                        className="size-5 rounded-full overflow-hidden"
+                      />
+                    )}
+                    {toTokens(BigInt(paymentLink.amount), token.decimals)}{" "}
+                    {token.symbol}
+                  </div>
+                  {token.prices.USD && (
+                    <span>
+                      $
+                      {(
+                        Number(token.prices.USD) *
+                        Number(
+                          toTokens(BigInt(paymentLink.amount), token.decimals),
+                        )
+                      ).toFixed(2)}
+                    </span>
                   )}
-                  {chain.name}
                 </div>
               </div>
-            </div>
-          )}
-          {recipientEnsOrAddress.ensName ||
-            (recipientEnsOrAddress.address && (
+            )}
+            {chain && (
               <div className="flex flex-col gap-1 w-full my-4">
-                <span className="text-muted-foreground text-xs">Seller</span>
+                <span className="text-muted-foreground text-xs">Network</span>
                 <div className="font-medium flex-row flex justify-between items-center w-full">
-                  {recipientEnsOrAddress.ensName ??
-                    shortenAddress(recipientEnsOrAddress.address)}
+                  <div className="flex flex-row items-center gap-2">
+                    {chain.icon?.url && (
+                      <img
+                        src={resolveSchemeWithErrorHandler({
+                          uri: chain.icon.url,
+                          client: getConfiguredThirdwebClient({
+                            secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
+                            teamId: undefined,
+                          }),
+                        })}
+                        alt={chain.name}
+                        width={chain.icon.width}
+                        height={chain.icon.height}
+                        className="size-5 rounded-full overflow-hidden"
+                      />
+                    )}
+                    {chain.name}
+                  </div>
                 </div>
               </div>
-            ))}
-        </div>
+            )}
+            {recipientEnsOrAddress.ensName ||
+              (recipientEnsOrAddress.address && (
+                <div className="flex flex-col gap-1 w-full my-4">
+                  <span className="text-muted-foreground text-xs">Seller</span>
+                  <div className="font-medium flex-row flex justify-between items-center w-full">
+                    {recipientEnsOrAddress.ensName ??
+                      shortenAddress(recipientEnsOrAddress.address)}
+                  </div>
+                </div>
+              ))}
+          </div>
 
-        <div className="mt-auto hidden lg:block">
-          <Badge className="flex items-center gap-1.5 bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800">
-            <ShieldCheckIcon className="size-3" />
-            Secured by thirdweb
-          </Badge>
-        </div>
-      </header>
-      <main className="flex justify-center p-12 w-full items-center">
-        <PayPageWidget
-          amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
-          chainId={Number(paymentLink.destinationToken.chainId)}
-          clientId={undefined} // Payment links don't need to use the same client ID to be executed
-          image={paymentLink.imageUrl}
-          name={paymentLink.title}
-          paymentLinkId={id}
-          purchaseData={paymentLink.purchaseData}
-          recipientAddress={paymentLink.receiver}
-          redirectUri={redirectUri}
-          theme={theme}
-          token={token}
-        />
-      </main>
-    </div>
+          <div className="mt-auto hidden lg:block">
+            <Badge className="flex items-center gap-1.5 bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800">
+              <ShieldCheckIcon className="size-3" />
+              Secured by thirdweb
+            </Badge>
+          </div>
+        </header>
+        <main className="flex justify-center p-12 w-full items-center">
+          <PayPageWidget
+            amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
+            chainId={Number(paymentLink.destinationToken.chainId)}
+            clientId={undefined} // Payment links don't need to use the same client ID to be executed
+            image={paymentLink.imageUrl}
+            name={paymentLink.title}
+            paymentLinkId={id}
+            purchaseData={paymentLink.purchaseData}
+            recipientAddress={paymentLink.receiver}
+            redirectUri={redirectUri}
+            token={token}
+          />
+        </main>
+      </div>
+    </ThemeProvider>
   );
 }
 
diff --git a/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
index 2cd71f91e08..c2b50f91b65 100644
--- a/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
+++ b/apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx
@@ -1,7 +1,6 @@
 "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";
@@ -11,6 +10,7 @@ import {
   reportPaymentLinkBuySuccessful,
 } from "@/analytics/report";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
 
 export function PayPageWidget({
   chainId,
@@ -21,7 +21,6 @@ export function PayPageWidget({
   name,
   image,
   redirectUri,
-  theme,
   purchaseData,
   clientId,
 }: {
@@ -34,17 +33,10 @@ export function PayPageWidget({
   image?: string;
   redirectUri?: string;
   clientId: string | undefined;
-  theme?: "light" | "dark";
   purchaseData: Record<string, unknown> | undefined;
 }) {
-  const { theme: browserTheme, setTheme } = useTheme();
+  const { theme } = useTheme();
 
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (theme) {
-      setTheme(theme);
-    }
-  }, [theme, setTheme]);
   const chain = useV5DashboardChain(chainId);
 
   return (
@@ -55,6 +47,7 @@ export function PayPageWidget({
         }
       />
       <CheckoutWidget
+        theme={getSDKTheme(theme === "light" ? "light" : "dark")}
         connectOptions={{
           wallets: [
             createWallet("io.metamask"),
@@ -87,7 +80,6 @@ export function PayPageWidget({
         paymentLinkId={paymentLinkId}
         purchaseData={purchaseData}
         seller={checksumAddress(recipientAddress)}
-        theme={theme ?? (browserTheme === "light" ? "light" : "dark")}
         tokenAddress={
           token.address === NATIVE_TOKEN_ADDRESS
             ? undefined
diff --git a/apps/dashboard/src/app/pay/layout.tsx b/apps/dashboard/src/app/pay/layout.tsx
index 119ea343ac2..932d52c675c 100644
--- a/apps/dashboard/src/app/pay/layout.tsx
+++ b/apps/dashboard/src/app/pay/layout.tsx
@@ -1,6 +1,5 @@
 import "@workspace/ui/global.css";
 import { Inter } from "next/font/google";
-import { ThemeProvider } from "next-themes";
 import { cn } from "@/lib/utils";
 import { PayProviders } from "./components/client/Providers.client";
 
@@ -24,16 +23,9 @@ export default async function PayLayout({
         )}
       >
         <PayProviders>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="dark"
-            disableTransitionOnChange
-            enableSystem={false}
-          >
-            <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-x-hidden overflow-y-scroll">
-              {children}
-            </div>
-          </ThemeProvider>
+          <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-x-hidden overflow-y-scroll">
+            {children}
+          </div>
         </PayProviders>
       </body>
     </html>
diff --git a/apps/dashboard/src/app/pay/page.tsx b/apps/dashboard/src/app/pay/page.tsx
index 787741d3bdf..7e6d6e60e65 100644
--- a/apps/dashboard/src/app/pay/page.tsx
+++ b/apps/dashboard/src/app/pay/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
 import { createThirdwebClient, defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { checksumAddress } from "thirdweb/utils";
@@ -33,7 +34,16 @@ export default async function PayPage({
     !params.tokenAddress &&
     !params.amount
   ) {
-    return <PaymentLinkForm />;
+    return (
+      <ThemeProvider
+        forcedTheme={params.theme === "light" ? "light" : "dark"}
+        attribute="class"
+        disableTransitionOnChange
+        enableSystem={false}
+      >
+        <PaymentLinkForm />
+      </ThemeProvider>
+    );
   }
 
   // Validate query parameters
@@ -84,17 +94,23 @@ export default async function PayPage({
   };
 
   return (
-    <PayPageWidget
-      amount={BigInt(params.amount)}
-      chainId={Number(params.chainId)}
-      clientId={client.clientId}
-      image={params.image}
-      name={params.name}
-      purchaseData={undefined}
-      recipientAddress={params.recipientAddress}
-      redirectUri={params.redirectUri}
-      theme={params.theme}
-      token={token}
-    />
+    <ThemeProvider
+      forcedTheme={params.theme === "light" ? "light" : "dark"}
+      attribute="class"
+      disableTransitionOnChange
+      enableSystem={false}
+    >
+      <PayPageWidget
+        amount={BigInt(params.amount)}
+        chainId={Number(params.chainId)}
+        clientId={client.clientId}
+        image={params.image}
+        name={params.name}
+        purchaseData={undefined}
+        recipientAddress={params.recipientAddress}
+        redirectUri={params.redirectUri}
+        token={token}
+      />
+    </ThemeProvider>
   );
 }