thirdweb-dev · gregfromstl · May 27, 2025 · May 27, 2025 · May 27, 2025
@@ -0,0 +1,20 @@
+"use client";
+import { ThemeProvider } from "next-themes";
+import { Toaster } from "sonner";
+import { ThirdwebProvider } from "thirdweb/react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThirdwebProvider>
+      <ThemeProvider
+        attribute="class"
+        disableTransitionOnChange
+        enableSystem={false}
+        defaultTheme="dark"
+      >
+        {children}
+        <Toaster richColors theme="dark" />
+      </ThemeProvider>
+    </ThirdwebProvider>
+  );
+}
@@ -1,21 +1,18 @@
 "use client";
 
-import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
-import { useV5DashboardChain } from "lib/v5-adapter";
 import { useTheme } from "next-themes";
-import type { ThirdwebClient } from "thirdweb";
 import { PayEmbed } from "thirdweb/react";
+import { getSDKTheme } from "../../../(app)/components/sdk-component-theme";
+import { useV5DashboardChain } from "../../../../lib/v5-adapter";
+import { bridgeAppThirdwebClient } from "../../constants";
 
-export function UniversalBridgeEmbed({
-  chainId,
-  client,
-}: { chainId?: number; client: ThirdwebClient }) {
+export function UniversalBridgeEmbed({ chainId }: { chainId?: number }) {
   const { theme } = useTheme();
   const chain = useV5DashboardChain(chainId || 1);
 
   return (
     <PayEmbed
-      client={client}
+      client={bridgeAppThirdwebClient}
       payOptions={{
         mode: "fund_wallet",
         prefillBuy: {

@@ -0,0 +1,46 @@
+import {
+  NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+  NEXT_PUBLIC_IPFS_GATEWAY_URL,
+} from "@/constants/public-envs";
+import {
+  THIRDWEB_BRIDGE_URL,
+  THIRDWEB_BUNDLER_DOMAIN,
+  THIRDWEB_INAPP_WALLET_DOMAIN,
+  THIRDWEB_INSIGHT_API_DOMAIN,
+  THIRDWEB_PAY_DOMAIN,
+  THIRDWEB_RPC_DOMAIN,
+  THIRDWEB_SOCIAL_API_DOMAIN,
+  THIRDWEB_STORAGE_DOMAIN,
+} from "constants/urls";
+import { getVercelEnv } from "lib/vercel-utils";
+import { createThirdwebClient } from "thirdweb";
+import { setThirdwebDomains } from "thirdweb/utils";
+
+function getBridgeThirdwebClient() {
+  if (getVercelEnv() !== "production") {
+    console.log("Setting domains for bridge app", THIRDWEB_BRIDGE_URL);
+    // if not on production: run this when creating a client to set the domains
+    setThirdwebDomains({
+      rpc: THIRDWEB_RPC_DOMAIN,
+      inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
+      pay: THIRDWEB_PAY_DOMAIN,
+      storage: THIRDWEB_STORAGE_DOMAIN,
+      social: THIRDWEB_SOCIAL_API_DOMAIN,
+      bundler: THIRDWEB_BUNDLER_DOMAIN,
+      insight: THIRDWEB_INSIGHT_API_DOMAIN,
+      bridge: THIRDWEB_BRIDGE_URL,
+    });
+  }
+
+  return createThirdwebClient({
+    secretKey: undefined,
+    clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+    config: {
+      storage: {
+        gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
+      },
+    },
+  });
+}
+
+export const bridgeAppThirdwebClient = getBridgeThirdwebClient();
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+import { Inter } from "next/font/google";
+import "../../global.css";
+import { Providers } from "./components/client/Providers.client";
+
+const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+});
+
+export default function BridgeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={cn(
+          "h-screen w-screen bg-background font-sans antialiased",
+          fontSans.variable,
+        )}
+      >
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
@@ -1,6 +1,5 @@
 import { ArrowUpRightIcon } from "lucide-react";
 import type { Metadata } from "next";
-import { getClientThirdwebClient } from "../../../../../@/constants/thirdweb-client.client";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
 
 const title = "Universal Bridge: Swap, Bridge, and Onramp";
@@ -16,18 +15,14 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function RoutesPage({
+export default async function BridgePage({
   searchParams,
-}: { searchParams: Record<string, string | string[]> }) {
-  const { chainId } = searchParams;
-  const client = getClientThirdwebClient(undefined);
+}: { searchParams: Promise<Record<string, string | string[]>> }) {
+  const { chainId } = await searchParams;
   return (
     <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center overflow-hidden border py-10">
       <main className="container z-10 flex justify-center">
-        <UniversalBridgeEmbed
-          chainId={chainId ? Number(chainId) : undefined}
-          client={client}
-        />
+        <UniversalBridgeEmbed chainId={chainId ? Number(chainId) : undefined} />
       </main>
 
       {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -37,7 +32,7 @@ export default async function RoutesPage({
         className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
       />
 
-      <div className="absolute inset-x-0 bottom-24 z-20">
+      <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" />

@@ -78,6 +78,13 @@
           message: "Your wallet rejected the approval request.",
         };
       }
+      if (error.toLowerCase().includes("insufficient funds for gas")) {
+        return {
+          title: "Insufficient Native Funds",
+          message:
+            "You do not have enough native funds to approve the transaction.",
+        };
+      }
       return {
         title: "Failed to Approve",
         message:
@@ -96,6 +103,13 @@
           message: "Your wallet rejected the confirmation request.",
         };
       }
+      if (error.toLowerCase().includes("insufficient funds for gas")) {
+        return {
+          title: "Insufficient Native Funds",
+          message:
+            "You do not have enough native funds to confirm the transaction.",
+        };
+      }
       return {
         title: "Failed to Confirm",
         message:
@@ -333,6 +347,7 @@
                 } catch (e) {
                   console.error(e);
                   setStatus("error");
+                  setError((e as Error).message);
                 }
               }
             }}

@@ -126,6 +126,13 @@
           message: "Your wallet rejected the approval request.",
         };
       }
+      if (status.error.toLowerCase().includes("insufficient funds for gas")) {
+        return {
+          title: "Insufficient Native Funds",
+          message:
+            "You do not have enough native funds to approve the transaction.",
+        };
+      }
       return {
         title: "Failed to Approve",
         message:
@@ -138,12 +145,23 @@
       status.id === "error" &&
       status.error
     ) {
-      if (status.error.toLowerCase().includes("user rejected")) {
+      if (
+        status.error.toLowerCase().includes("user rejected") ||
+        status.error.toLowerCase().includes("user closed modal") ||
+        status.error.toLowerCase().includes("user denied")
+      ) {
         return {
           title: "Failed to Confirm",
           message: "Your wallet rejected the confirmation request.",
         };
       }
+      if (status.error.toLowerCase().includes("insufficient funds for gas")) {
+        return {
+          title: "Insufficient Native Funds",
+          message:
+            "You do not have enough native funds to confirm the transaction.",
+        };
+      }
       return {
         title: "Failed to Confirm",
         message: