From 3a32f3fc2792d9fb0aa53716edd5d5ddd080eccb Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Mon, 26 May 2025 17:40:20 -0700
Subject: [PATCH 1/2] Implement Universal Bridge components and layout for
 enhanced user experience

- Added `constants.ts` to configure Thirdweb client for the bridge application.
- Created `BridgeLayout` component to structure the bridge page layout.
- Developed `BridgePage` to handle the main functionality of the Universal Bridge, including metadata and dynamic content.
- Introduced `Providers.client.tsx` to wrap the application with necessary context providers.
- Implemented `UniversalBridgeEmbed` component for embedding payment functionalities with theme support.

This commit establishes the foundational components for the Universal Bridge feature, improving the overall user interface and experience.
---
 .../components/client/Providers.client.tsx    | 20 ++++++++
 .../client/UniversalBridgeEmbed.tsx           | 13 ++----
 apps/dashboard/src/app/bridge/constants.ts    | 46 +++++++++++++++++++
 apps/dashboard/src/app/bridge/layout.tsx      | 29 ++++++++++++
 .../(dashboard)/(bridge) => }/bridge/page.tsx | 15 ++----
 5 files changed, 105 insertions(+), 18 deletions(-)
 create mode 100644 apps/dashboard/src/app/bridge/components/client/Providers.client.tsx
 rename apps/dashboard/src/app/{(app)/(dashboard)/(bridge) => }/bridge/components/client/UniversalBridgeEmbed.tsx (57%)
 create mode 100644 apps/dashboard/src/app/bridge/constants.ts
 create mode 100644 apps/dashboard/src/app/bridge/layout.tsx
 rename apps/dashboard/src/app/{(app)/(dashboard)/(bridge) => }/bridge/page.tsx (82%)

diff --git a/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx b/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx
new file mode 100644
index 00000000000..f76044fbf44
--- /dev/null
+++ b/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx
@@ -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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
similarity index 57%
rename from apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx
rename to apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
index 000ccd47908..0ba8ed0ba1d 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx
+++ b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
@@ -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: {
diff --git a/apps/dashboard/src/app/bridge/constants.ts b/apps/dashboard/src/app/bridge/constants.ts
new file mode 100644
index 00000000000..1a0db33635f
--- /dev/null
+++ b/apps/dashboard/src/app/bridge/constants.ts
@@ -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();
diff --git a/apps/dashboard/src/app/bridge/layout.tsx b/apps/dashboard/src/app/bridge/layout.tsx
new file mode 100644
index 00000000000..fd657fd3380
--- /dev/null
+++ b/apps/dashboard/src/app/bridge/layout.tsx
@@ -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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx
similarity index 82%
rename from apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/page.tsx
rename to apps/dashboard/src/app/bridge/page.tsx
index 7301c834584..0b3d256c6d4 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/page.tsx
+++ b/apps/dashboard/src/app/bridge/page.tsx
@@ -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" />

From a4d1da175c877b28f2be2e6801171a43dc514bd2 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Mon, 26 May 2025 18:43:06 -0700
Subject: [PATCH 2/2] Enhance error handling in confirmation screens for
 insufficient funds

- Added specific error messages for insufficient native funds in both `SwapConfirmationScreen` and `TransferConfirmationScreen`.
- Improved user feedback by providing clear titles and messages when transactions cannot be approved or confirmed due to lack of funds for gas.
---
 .../screens/Buy/swap/ConfirmationScreen.tsx   | 15 ++++++++++++++
 .../Buy/swap/TransferConfirmationScreen.tsx   | 20 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
index ce437bdfdb1..5b948c09299 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
@@ -78,6 +78,13 @@ export function SwapConfirmationScreen(props: {
           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 @@ export function SwapConfirmationScreen(props: {
           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 @@ export function SwapConfirmationScreen(props: {
                 } catch (e) {
                   console.error(e);
                   setStatus("error");
+                  setError((e as Error).message);
                 }
               }
             }}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
index 1118c8cc296..e90cb641fdf 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
@@ -126,6 +126,13 @@ export function TransferConfirmationScreen(
           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 @@ export function TransferConfirmationScreen(
       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: