Skip to content

Commit 2ebba61

Browse files
MananTankMananTank
committed
[MNY-235] Dashboard: Fix payment page theme issues (#8199)
<!-- ## 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 -->
1 parent f3bacc1 commit 2ebba61

File tree

4 files changed

+156
-149
lines changed

4 files changed

+156
-149
lines changed

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

Lines changed: 121 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ShieldCheckIcon } from "lucide-react";
22
import type { Metadata } from "next";
3+
import { ThemeProvider } from "next-themes";
34
import { Bridge, defineChain, toTokens } from "thirdweb";
45
import { getChainMetadata } from "thirdweb/chains";
56
import { shortenAddress } from "thirdweb/utils";
@@ -80,131 +81,137 @@ export default async function PayPage({
8081
}
8182

8283
return (
83-
<div className="flex z-10 flex-col lg:flex-row h-full w-full">
84-
<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">
85-
<div>
86-
<div className="flex flex-row items-center justify-start gap-4">
87-
{projectMetadata.image && (
88-
<img
89-
src={
90-
resolveSchemeWithErrorHandler({
91-
uri: projectMetadata.image,
92-
client: payAppThirdwebClient,
93-
}) || ""
94-
}
95-
alt={projectMetadata.name}
96-
width={25}
97-
height={25}
98-
className="rounded-full overflow-hidden"
99-
/>
84+
<ThemeProvider
85+
forcedTheme={theme === "light" ? "light" : "dark"}
86+
attribute="class"
87+
disableTransitionOnChange
88+
enableSystem={false}
89+
>
90+
<div className="flex z-10 flex-col lg:flex-row h-full w-full">
91+
<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">
92+
<div>
93+
<div className="flex flex-row items-center justify-start gap-4">
94+
{projectMetadata.image && (
95+
<img
96+
src={
97+
resolveSchemeWithErrorHandler({
98+
uri: projectMetadata.image,
99+
client: payAppThirdwebClient,
100+
}) || ""
101+
}
102+
alt={projectMetadata.name}
103+
width={25}
104+
height={25}
105+
className="rounded-full overflow-hidden"
106+
/>
107+
)}
108+
<h2 className="text-xl font-bold">{projectMetadata.name}</h2>
109+
</div>
110+
{projectMetadata.description && (
111+
<p className="mt-2 text-sm text-muted-foreground">
112+
{projectMetadata.description}
113+
</p>
100114
)}
101-
<h2 className="text-xl font-bold">{projectMetadata.name}</h2>
102115
</div>
103-
{projectMetadata.description && (
104-
<p className="mt-2 text-sm text-muted-foreground">
105-
{projectMetadata.description}
106-
</p>
107-
)}
108-
</div>
109116

110-
<div className="hidden lg:block my-4 w-full">
111-
{paymentLink.amount && (
112-
<div className="flex flex-col gap-1 w-full my-4">
113-
<span className="text-muted-foreground text-xs">Details</span>
114-
<div className="font-medium flex-row flex justify-between items-center w-full">
115-
<div className="flex flex-row items-center gap-2">
116-
{token.iconUri && (
117-
<img
118-
src={resolveSchemeWithErrorHandler({
119-
uri: token.iconUri,
120-
client: getConfiguredThirdwebClient({
121-
secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
122-
teamId: undefined,
123-
}),
124-
})}
125-
alt={token.name}
126-
width={25}
127-
height={25}
128-
className="size-5 rounded-full overflow-hidden"
129-
/>
130-
)}
131-
{toTokens(BigInt(paymentLink.amount), token.decimals)}{" "}
132-
{token.symbol}
133-
</div>
134-
{token.prices.USD && (
135-
<span>
136-
$
137-
{(
138-
Number(token.prices.USD) *
139-
Number(
140-
toTokens(BigInt(paymentLink.amount), token.decimals),
141-
)
142-
).toFixed(2)}
143-
</span>
144-
)}
145-
</div>
146-
</div>
147-
)}
148-
{chain && (
149-
<div className="flex flex-col gap-1 w-full my-4">
150-
<span className="text-muted-foreground text-xs">Network</span>
151-
<div className="font-medium flex-row flex justify-between items-center w-full">
152-
<div className="flex flex-row items-center gap-2">
153-
{chain.icon?.url && (
154-
<img
155-
src={resolveSchemeWithErrorHandler({
156-
uri: chain.icon.url,
157-
client: getConfiguredThirdwebClient({
158-
secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
159-
teamId: undefined,
160-
}),
161-
})}
162-
alt={chain.name}
163-
width={chain.icon.width}
164-
height={chain.icon.height}
165-
className="size-5 rounded-full overflow-hidden"
166-
/>
117+
<div className="hidden lg:block my-4 w-full">
118+
{paymentLink.amount && (
119+
<div className="flex flex-col gap-1 w-full my-4">
120+
<span className="text-muted-foreground text-xs">Details</span>
121+
<div className="font-medium flex-row flex justify-between items-center w-full">
122+
<div className="flex flex-row items-center gap-2">
123+
{token.iconUri && (
124+
<img
125+
src={resolveSchemeWithErrorHandler({
126+
uri: token.iconUri,
127+
client: getConfiguredThirdwebClient({
128+
secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
129+
teamId: undefined,
130+
}),
131+
})}
132+
alt={token.name}
133+
width={25}
134+
height={25}
135+
className="size-5 rounded-full overflow-hidden"
136+
/>
137+
)}
138+
{toTokens(BigInt(paymentLink.amount), token.decimals)}{" "}
139+
{token.symbol}
140+
</div>
141+
{token.prices.USD && (
142+
<span>
143+
$
144+
{(
145+
Number(token.prices.USD) *
146+
Number(
147+
toTokens(BigInt(paymentLink.amount), token.decimals),
148+
)
149+
).toFixed(2)}
150+
</span>
167151
)}
168-
{chain.name}
169152
</div>
170153
</div>
171-
</div>
172-
)}
173-
{recipientEnsOrAddress.ensName ||
174-
(recipientEnsOrAddress.address && (
154+
)}
155+
{chain && (
175156
<div className="flex flex-col gap-1 w-full my-4">
176-
<span className="text-muted-foreground text-xs">Seller</span>
157+
<span className="text-muted-foreground text-xs">Network</span>
177158
<div className="font-medium flex-row flex justify-between items-center w-full">
178-
{recipientEnsOrAddress.ensName ??
179-
shortenAddress(recipientEnsOrAddress.address)}
159+
<div className="flex flex-row items-center gap-2">
160+
{chain.icon?.url && (
161+
<img
162+
src={resolveSchemeWithErrorHandler({
163+
uri: chain.icon.url,
164+
client: getConfiguredThirdwebClient({
165+
secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
166+
teamId: undefined,
167+
}),
168+
})}
169+
alt={chain.name}
170+
width={chain.icon.width}
171+
height={chain.icon.height}
172+
className="size-5 rounded-full overflow-hidden"
173+
/>
174+
)}
175+
{chain.name}
176+
</div>
180177
</div>
181178
</div>
182-
))}
183-
</div>
179+
)}
180+
{recipientEnsOrAddress.ensName ||
181+
(recipientEnsOrAddress.address && (
182+
<div className="flex flex-col gap-1 w-full my-4">
183+
<span className="text-muted-foreground text-xs">Seller</span>
184+
<div className="font-medium flex-row flex justify-between items-center w-full">
185+
{recipientEnsOrAddress.ensName ??
186+
shortenAddress(recipientEnsOrAddress.address)}
187+
</div>
188+
</div>
189+
))}
190+
</div>
184191

185-
<div className="mt-auto hidden lg:block">
186-
<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">
187-
<ShieldCheckIcon className="size-3" />
188-
Secured by thirdweb
189-
</Badge>
190-
</div>
191-
</header>
192-
<main className="flex justify-center p-12 w-full items-center">
193-
<PayPageWidget
194-
amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
195-
chainId={Number(paymentLink.destinationToken.chainId)}
196-
clientId={undefined} // Payment links don't need to use the same client ID to be executed
197-
image={paymentLink.imageUrl}
198-
name={paymentLink.title}
199-
paymentLinkId={id}
200-
purchaseData={paymentLink.purchaseData}
201-
recipientAddress={paymentLink.receiver}
202-
redirectUri={redirectUri}
203-
theme={theme}
204-
token={token}
205-
/>
206-
</main>
207-
</div>
192+
<div className="mt-auto hidden lg:block">
193+
<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">
194+
<ShieldCheckIcon className="size-3" />
195+
Secured by thirdweb
196+
</Badge>
197+
</div>
198+
</header>
199+
<main className="flex justify-center p-12 w-full items-center">
200+
<PayPageWidget
201+
amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
202+
chainId={Number(paymentLink.destinationToken.chainId)}
203+
clientId={undefined} // Payment links don't need to use the same client ID to be executed
204+
image={paymentLink.imageUrl}
205+
name={paymentLink.title}
206+
paymentLinkId={id}
207+
purchaseData={paymentLink.purchaseData}
208+
recipientAddress={paymentLink.receiver}
209+
redirectUri={redirectUri}
210+
token={token}
211+
/>
212+
</main>
213+
</div>
214+
</ThemeProvider>
208215
);
209216
}
210217

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22
import { payAppThirdwebClient } from "app/pay/constants";
33
import { useTheme } from "next-themes";
4-
import { useEffect } from "react";
54
import { createThirdwebClient, NATIVE_TOKEN_ADDRESS, toTokens } from "thirdweb";
65
import { AutoConnect, CheckoutWidget } from "thirdweb/react";
76
import { checksumAddress } from "thirdweb/utils";
@@ -11,6 +10,7 @@ import {
1110
reportPaymentLinkBuySuccessful,
1211
} from "@/analytics/report";
1312
import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
13+
import { getSDKTheme } from "@/utils/sdk-component-theme";
1414

1515
export function PayPageWidget({
1616
chainId,
@@ -21,7 +21,6 @@ export function PayPageWidget({
2121
name,
2222
image,
2323
redirectUri,
24-
theme,
2524
purchaseData,
2625
clientId,
2726
}: {
@@ -34,17 +33,10 @@ export function PayPageWidget({
3433
image?: string;
3534
redirectUri?: string;
3635
clientId: string | undefined;
37-
theme?: "light" | "dark";
3836
purchaseData: Record<string, unknown> | undefined;
3937
}) {
40-
const { theme: browserTheme, setTheme } = useTheme();
38+
const { theme } = useTheme();
4139

42-
// eslint-disable-next-line no-restricted-syntax
43-
useEffect(() => {
44-
if (theme) {
45-
setTheme(theme);
46-
}
47-
}, [theme, setTheme]);
4840
const chain = useV5DashboardChain(chainId);
4941

5042
return (
@@ -55,6 +47,7 @@ export function PayPageWidget({
5547
}
5648
/>
5749
<CheckoutWidget
50+
theme={getSDKTheme(theme === "light" ? "light" : "dark")}
5851
connectOptions={{
5952
wallets: [
6053
createWallet("io.metamask"),
@@ -87,7 +80,6 @@ export function PayPageWidget({
8780
paymentLinkId={paymentLinkId}
8881
purchaseData={purchaseData}
8982
seller={checksumAddress(recipientAddress)}
90-
theme={theme ?? (browserTheme === "light" ? "light" : "dark")}
9183
tokenAddress={
9284
token.address === NATIVE_TOKEN_ADDRESS
9385
? undefined

‎apps/dashboard/src/app/pay/layout.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import "@workspace/ui/global.css";
22
import { Inter } from "next/font/google";
3-
import { ThemeProvider } from "next-themes";
43
import { cn } from "@/lib/utils";
54
import { PayProviders } from "./components/client/Providers.client";
65

@@ -24,16 +23,9 @@ export default async function PayLayout({
2423
)}
2524
>
2625
<PayProviders>
27-
<ThemeProvider
28-
attribute="class"
29-
defaultTheme="dark"
30-
disableTransitionOnChange
31-
enableSystem={false}
32-
>
33-
<div className="relative mx-auto flex h-full w-full items-center justify-center overflow-x-hidden overflow-y-scroll">
34-
{children}
35-
</div>
36-
</ThemeProvider>
26+
<div className="relative mx-auto flex h-full w-full items-center justify-center overflow-x-hidden overflow-y-scroll">
27+
{children}
28+
</div>
3729
</PayProviders>
3830
</body>
3931
</html>

0 commit comments

Comments
 (0)