diff --git a/apps/dashboard/src/app/checkout/components/client/CheckoutEmbed.client.tsx b/apps/dashboard/src/app/checkout/components/client/CheckoutEmbed.client.tsx index 6075885dbec..2cd1ff43b14 100644 --- a/apps/dashboard/src/app/checkout/components/client/CheckoutEmbed.client.tsx +++ b/apps/dashboard/src/app/checkout/components/client/CheckoutEmbed.client.tsx @@ -11,7 +11,8 @@ import { } from "constants/urls"; import { useV5DashboardChain } from "lib/v5-adapter"; import { getVercelEnv } from "lib/vercel-utils"; -import { useMemo } from "react"; +import { useTheme } from "next-themes"; +import { useEffect, useMemo } from "react"; import { NATIVE_TOKEN_ADDRESS, createThirdwebClient, toTokens } from "thirdweb"; import { AutoConnect, PayEmbed } from "thirdweb/react"; import { setThirdwebDomains } from "thirdweb/utils"; @@ -35,8 +36,17 @@ export function CheckoutEmbed({ image?: string; redirectUri?: string; clientId: string; - theme: "light" | "dark"; + theme?: "light" | "dark"; }) { + const { theme: browserTheme, setTheme } = useTheme(); + + // eslint-disable-next-line no-restricted-syntax + useEffect(() => { + if (theme) { + setTheme(theme); + } + }, [theme, setTheme]); + const client = useMemo(() => { if (getVercelEnv() !== "production") { setThirdwebDomains({ @@ -59,7 +69,7 @@ export function CheckoutEmbed({ { - const theme = searchParams.get("theme"); - if (theme === "light") { - setTheme("light"); - } else { - setTheme("dark"); - } - }, [searchParams, setTheme]); - - return null; -} diff --git a/apps/dashboard/src/app/checkout/error.tsx b/apps/dashboard/src/app/checkout/error.tsx new file mode 100644 index 00000000000..ac573c3cec1 --- /dev/null +++ b/apps/dashboard/src/app/checkout/error.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; + +export default function ErrorPage({ + error, +}: { + error: Error & { digest?: string }; +}) { + return ( + + + + Something went wrong + + + + {error.message} + + + ); +} diff --git a/apps/dashboard/src/app/checkout/layout.tsx b/apps/dashboard/src/app/checkout/layout.tsx index da694be96ae..72a8dc5fb50 100644 --- a/apps/dashboard/src/app/checkout/layout.tsx +++ b/apps/dashboard/src/app/checkout/layout.tsx @@ -1,9 +1,8 @@ +import "../../global.css"; import { cn } from "@/lib/utils"; import { ThemeProvider } from "next-themes"; import { Inter } from "next/font/google"; -import { Suspense } from "react"; import { Providers } from "./components/client/Providers.client"; -import { ThemeHandler } from "./components/client/ThemeHandler.client"; const fontSans = Inter({ subsets: ["latin"], @@ -27,14 +26,22 @@ export default async function CheckoutLayout({ > - - - - {children} +
+
+ {children} +
+ + {/* eslint-disable-next-line @next/next/no-img-element */} + +
diff --git a/apps/dashboard/src/app/checkout/page.tsx b/apps/dashboard/src/app/checkout/page.tsx index 62bfd302b72..8ed47472370 100644 --- a/apps/dashboard/src/app/checkout/page.tsx +++ b/apps/dashboard/src/app/checkout/page.tsx @@ -1,4 +1,3 @@ -import "../../global.css"; import { getThirdwebClient } from "@/constants/thirdweb.server"; import type { Metadata } from "next"; import { createThirdwebClient, defineChain, getContract } from "thirdweb"; @@ -71,27 +70,16 @@ export default async function RoutesPage({ }; return ( -
-
- -
- - {/* eslint-disable-next-line @next/next/no-img-element */} - -
+ ); }