thirdweb-dev · graphite-app · Sep 19, 2025 · Sep 19, 2025
@@ -42,7 +42,7 @@ export function BuyAndSwapEmbed(props: {
   }, [props.pageType]);
 
   return (
-    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col">
+    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10">
       <div className="flex gap-2.5 p-4 border-b border-dashed">
         <TabButton
           label="Swap"

@@ -17,7 +17,7 @@ export function UniversalBridgeEmbed({
   const chain = useV5DashboardChain(chainId || 1);
 
   return (
-    <div className="lg:w-[400px]">
+    <div className="w-full lg:w-[400px]">
       <BuyAndSwapEmbed
         client={bridgeAppThirdwebClient}
         chain={chain}

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
+import { cn } from "@/lib/utils";
+import { PublicPageConnectButton } from "../../(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
+import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";
+
+export function PageHeader(props: { containerClassName?: string }) {
+  return (
+    <div className="border-b border-dashed">
+      <header
+        className={cn(
+          "container flex max-w-7xl justify-between py-3",
+          props.containerClassName,
+        )}
+      >
+        <div className="flex items-center gap-4">
+          <Link className="flex items-center gap-2" href="/team">
+            <ThirdwebMiniLogo className="h-5" />
+            <span className="hidden font-bold text-2xl tracking-tight lg:block">
+              thirdweb
+            </span>
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-5">
+          <Link
+            href="https://portal.thirdweb.com/bridge"
+            target="_blank"
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            Docs
+          </Link>
+          <ToggleThemeButton />
+          <PublicPageConnectButton connectButtonClassName="!rounded-full" />
+        </div>
+      </header>
+    </div>
+  );
+}
@@ -18,7 +18,7 @@ export default function BridgeLayout({
     <html lang="en" suppressHydrationWarning>
       <body
         className={cn(
-          "h-screen w-screen bg-background font-sans antialiased",
+          "min-h-dvh bg-background font-sans antialiased flex flex-col",
           fontSans.variable,
         )}
       >

@@ -1,10 +1,12 @@
-import { ArrowUpRightIcon } from "lucide-react";
+import { cn } from "@workspace/ui/lib/utils";
 import type { Metadata } from "next";
 import type { Address } from "thirdweb";
 import { defineChain } from "thirdweb/chains";
 import { getContract } from "thirdweb/contract";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
+import { AppFooter } from "@/components/footers/app-footer";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
+import { PageHeader } from "./components/header";
 import { bridgeAppThirdwebClient } from "./constants";
 
 const title = "thirdweb Payments: Swap, Bridge, and Onramp";
@@ -49,8 +51,11 @@ export default async function BridgePage({
   }
 
   return (
-    <div className="relative mx-auto flex h-dvh w-full flex-col items-center justify-center overflow-hidden border py-10">
-      <main className="container z-10 flex justify-center">
+    <div className="grow flex flex-col relative overflow-hidden">
+      <PageHeader />
+
+      <div className="flex grow flex-col items-center justify-center py-36 px-4 min-h-dvh relative overflow-hidden">
+        <DotsBackgroundPattern />
         <UniversalBridgeEmbed
           amount={amount as string}
           chainId={chainId ? Number(chainId) : undefined}
@@ -64,42 +69,28 @@ export default async function BridgePage({
               : undefined
           }
         />
-      </main>
-
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        alt=""
-        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0 opacity-20"
-        src="/assets/login/background.svg"
-      />
+      </div>
 
-      <div className="absolute inset-x-0 bottom-8 z-20">
-        <div className="container mx-auto px-4">
-          <div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">
-            <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
-            <div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex flex-col gap-1">
-                <h3 className="font-semibold text-base tracking-tight">
-                  Get Started with thirdweb Bridge
-                </h3>
-                <p className="text-muted-foreground text-sm">
-                  thirdweb Bridge allows developers to easily bridge and swap
-                  tokens between chains and wallets.
-                </p>
-              </div>
-              <a
-                className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
-                href="https://portal.thirdweb.com/bridge"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Learn More
-                <ArrowUpRightIcon className="size-4" />
-              </a>
-            </div>
-          </div>
-        </div>
+      <div className="bg-background relative z-10">
+        <AppFooter />
       </div>
     </div>
   );
 }
+
+function DotsBackgroundPattern(props: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 text-foreground/30 dark:text-foreground/10",
+        props.className,
+      )}
+      style={{
+        backgroundImage: "radial-gradient(currentColor 1px, transparent 1px)",
+        backgroundSize: "24px 24px",
+        maskImage:
+          "radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 50%)",
+      }}
+    />
+  );
+}
@@ -684,6 +684,7 @@ function DecimalInput(props: {
         paddingInline: 0,
         paddingBlock: 0,
         letterSpacing: "-0.025em",
+        height: "30px",
       }}
       type="text"
       value={props.value}
@@ -825,7 +826,7 @@ function TokenSection(props: {
               {props.amount.isFetching ? (
                 <div style={{ flexGrow: 1 }}>
                   <Skeleton
-                    height={fontSize.xxl}
+                    height="30px"
                     width="140px"
                     style={{
                       borderRadius: radius.lg,
@@ -890,7 +891,7 @@ function TokenSection(props: {
                 <div>
                   {props.balance.data === undefined ||
                   props.selectedToken.data === undefined ? (
-                    <Skeleton height={fontSize.xs} width="50px" />
+                    <Skeleton height={fontSize.xs} width="100px" />
                   ) : (
                     <div
                       style={{