Skip to content

Commit b12943e

Browse files
MananTankMananTank
committed
[MNY-243] Update /pay page to render BuyWidget
1 parent 77e1de7 commit b12943e

File tree

8 files changed

+290
-624
lines changed

8 files changed

+290
-624
lines changed

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

Lines changed: 129 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -81,137 +81,146 @@ export default async function PayPage({
8181
}
8282

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

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

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>
198+
<div className="mt-auto hidden lg:block">
199+
<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">
200+
<ShieldCheckIcon className="size-3" />
201+
Secured by thirdweb
202+
</Badge>
203+
</div>
204+
</header>
205+
<main className="flex justify-center p-12 w-full items-center">
206+
<PayPageWidget
207+
amount={
208+
paymentLink.amount ? BigInt(paymentLink.amount) : undefined
209+
}
210+
chainId={Number(paymentLink.destinationToken.chainId)}
211+
clientId={undefined} // Payment links don't need to use the same client ID to be executed
212+
image={paymentLink.imageUrl}
213+
name={paymentLink.title}
214+
paymentLinkId={id}
215+
purchaseData={paymentLink.purchaseData}
216+
recipientAddress={paymentLink.receiver}
217+
redirectUri={redirectUri}
218+
token={token}
219+
/>
220+
</main>
221+
</div>
222+
</ThemeProvider>
223+
</div>
215224
);
216225
}
217226

0 commit comments

Comments
 (0)