Skip to content

Commit c8b8b2f

Browse files
gregfromstlgregfromstl
authored
Fix: Adds checkout error boundary (#6962)
1 parent 9d40b13 commit c8b8b2f

File tree

5 files changed

+60
-55
lines changed

5 files changed

+60
-55
lines changed

‎apps/dashboard/src/app/checkout/components/client/CheckoutEmbed.client.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
} from "constants/urls";
1212
import { useV5DashboardChain } from "lib/v5-adapter";
1313
import { getVercelEnv } from "lib/vercel-utils";
14-
import { useMemo } from "react";
14+
import { useTheme } from "next-themes";
15+
import { useEffect, useMemo } from "react";
1516
import { NATIVE_TOKEN_ADDRESS, createThirdwebClient, toTokens } from "thirdweb";
1617
import { AutoConnect, PayEmbed } from "thirdweb/react";
1718
import { setThirdwebDomains } from "thirdweb/utils";
@@ -35,8 +36,17 @@ export function CheckoutEmbed({
3536
image?: string;
3637
redirectUri?: string;
3738
clientId: string;
38-
theme: "light" | "dark";
39+
theme?: "light" | "dark";
3940
}) {
41+
const { theme: browserTheme, setTheme } = useTheme();
42+
43+
// eslint-disable-next-line no-restricted-syntax
44+
useEffect(() => {
45+
if (theme) {
46+
setTheme(theme);
47+
}
48+
}, [theme, setTheme]);
49+
4050
const client = useMemo(() => {
4151
if (getVercelEnv() !== "production") {
4252
setThirdwebDomains({
@@ -59,7 +69,7 @@ export function CheckoutEmbed({
5969
<AutoConnect client={client} />
6070
<PayEmbed
6171
client={client}
62-
theme={theme === "light" ? "light" : "dark"}
72+
theme={theme ?? (browserTheme === "light" ? "light" : "dark")}
6373
payOptions={{
6474
metadata: {
6575
name,

‎apps/dashboard/src/app/checkout/components/client/ThemeHandler.client.tsx

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎apps/dashboard/src/app/checkout/error.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use client";
2+
3+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4+
5+
export default function ErrorPage({
6+
error,
7+
}: {
8+
error: Error & { digest?: string };
9+
}) {
10+
return (
11+
<Card className="overflow-hidden text-center">
12+
<CardHeader className="border-b md:border-b-0">
13+
<CardTitle className="font-bold text-destructive text-lg">
14+
Something went wrong
15+
</CardTitle>
16+
</CardHeader>
17+
<CardContent className="text-muted-foreground">
18+
{error.message}
19+
</CardContent>
20+
</Card>
21+
);
22+
}

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1+
import "../../global.css";
12
import { cn } from "@/lib/utils";
23
import { ThemeProvider } from "next-themes";
34
import { Inter } from "next/font/google";
4-
import { Suspense } from "react";
55
import { Providers } from "./components/client/Providers.client";
6-
import { ThemeHandler } from "./components/client/ThemeHandler.client";
76

87
const fontSans = Inter({
98
subsets: ["latin"],
@@ -27,14 +26,22 @@ export default async function CheckoutLayout({
2726
>
2827
<body
2928
className={cn(
30-
"bg-background font-sans antialiased",
29+
"h-screen w-screen bg-background font-sans antialiased",
3130
fontSans.variable,
3231
)}
3332
>
34-
<Suspense>
35-
<ThemeHandler />
36-
</Suspense>
37-
{children}
33+
<div className="relative mx-auto flex h-full w-full flex-col items-center justify-center overflow-hidden border py-10">
34+
<main className="container z-10 flex justify-center">
35+
{children}
36+
</main>
37+
38+
{/* eslint-disable-next-line @next/next/no-img-element */}
39+
<img
40+
alt=""
41+
src="/assets/login/background.svg"
42+
className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
43+
/>
44+
</div>
3845
</body>
3946
</ThemeProvider>
4047
</Providers>

‎apps/dashboard/src/app/checkout/page.tsx

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import "../../global.css";
21
import { getThirdwebClient } from "@/constants/thirdweb.server";
32
import type { Metadata } from "next";
43
import { createThirdwebClient, defineChain, getContract } from "thirdweb";
@@ -71,27 +70,16 @@ export default async function RoutesPage({
7170
};
7271

7372
return (
74-
<div className="relative mx-auto flex h-screen w-screen flex-col items-center justify-center overflow-hidden border py-10">
75-
<main className="container z-10 flex justify-center">
76-
<CheckoutEmbed
77-
redirectUri={params.redirectUri}
78-
chainId={Number(params.chainId)}
79-
recipientAddress={params.recipientAddress}
80-
amount={BigInt(params.amount)}
81-
token={token}
82-
clientId={client.clientId}
83-
name={params.name}
84-
image={params.image}
85-
theme={params.theme === "light" ? "light" : "dark"}
86-
/>
87-
</main>
88-
89-
{/* eslint-disable-next-line @next/next/no-img-element */}
90-
<img
91-
alt=""
92-
src="/assets/login/background.svg"
93-
className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
94-
/>
95-
</div>
73+
<CheckoutEmbed
74+
redirectUri={params.redirectUri}
75+
chainId={Number(params.chainId)}
76+
recipientAddress={params.recipientAddress}
77+
amount={BigInt(params.amount)}
78+
token={token}
79+
clientId={client.clientId}
80+
name={params.name}
81+
image={params.image}
82+
theme={params.theme}
83+
/>
9684
);
9785
}

0 commit comments

Comments
 (0)