Skip to content

Commit 80207ae

Browse files
gregfromstlgregfromstl
authored
[Dashboard] Refactor: Bridge UI Cleanup and Fixes (#7165)
1 parent ec7bc2b commit 80207ae

File tree

7 files changed

+139
-19
lines changed

7 files changed

+139
-19
lines changed

‎apps/dashboard/src/app/bridge/components/client/Providers.client.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use client";
2+
import { ThemeProvider } from "next-themes";
3+
import { Toaster } from "sonner";
4+
import { ThirdwebProvider } from "thirdweb/react";
5+
6+
export function Providers({ children }: { children: React.ReactNode }) {
7+
return (
8+
<ThirdwebProvider>
9+
<ThemeProvider
10+
attribute="class"
11+
disableTransitionOnChange
12+
enableSystem={false}
13+
defaultTheme="dark"
14+
>
15+
{children}
16+
<Toaster richColors theme="dark" />
17+
</ThemeProvider>
18+
</ThirdwebProvider>
19+
);
20+
}

‎apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx‎ renamed to ‎apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
"use client";
22

3-
import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
4-
import { useV5DashboardChain } from "lib/v5-adapter";
53
import { useTheme } from "next-themes";
6-
import type { ThirdwebClient } from "thirdweb";
74
import { PayEmbed } from "thirdweb/react";
5+
import { getSDKTheme } from "../../../(app)/components/sdk-component-theme";
6+
import { useV5DashboardChain } from "../../../../lib/v5-adapter";
7+
import { bridgeAppThirdwebClient } from "../../constants";
88

9-
export function UniversalBridgeEmbed({
10-
chainId,
11-
client,
12-
}: { chainId?: number; client: ThirdwebClient }) {
9+
export function UniversalBridgeEmbed({ chainId }: { chainId?: number }) {
1310
const { theme } = useTheme();
1411
const chain = useV5DashboardChain(chainId || 1);
1512

1613
return (
1714
<PayEmbed
18-
client={client}
15+
client={bridgeAppThirdwebClient}
1916
payOptions={{
2017
mode: "fund_wallet",
2118
prefillBuy: {

‎apps/dashboard/src/app/bridge/constants.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
3+
NEXT_PUBLIC_IPFS_GATEWAY_URL,
4+
} from "@/constants/public-envs";
5+
import {
6+
THIRDWEB_BRIDGE_URL,
7+
THIRDWEB_BUNDLER_DOMAIN,
8+
THIRDWEB_INAPP_WALLET_DOMAIN,
9+
THIRDWEB_INSIGHT_API_DOMAIN,
10+
THIRDWEB_PAY_DOMAIN,
11+
THIRDWEB_RPC_DOMAIN,
12+
THIRDWEB_SOCIAL_API_DOMAIN,
13+
THIRDWEB_STORAGE_DOMAIN,
14+
} from "constants/urls";
15+
import { getVercelEnv } from "lib/vercel-utils";
16+
import { createThirdwebClient } from "thirdweb";
17+
import { setThirdwebDomains } from "thirdweb/utils";
18+
19+
function getBridgeThirdwebClient() {
20+
if (getVercelEnv() !== "production") {
21+
console.log("Setting domains for bridge app", THIRDWEB_BRIDGE_URL);
22+
// if not on production: run this when creating a client to set the domains
23+
setThirdwebDomains({
24+
rpc: THIRDWEB_RPC_DOMAIN,
25+
inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
26+
pay: THIRDWEB_PAY_DOMAIN,
27+
storage: THIRDWEB_STORAGE_DOMAIN,
28+
social: THIRDWEB_SOCIAL_API_DOMAIN,
29+
bundler: THIRDWEB_BUNDLER_DOMAIN,
30+
insight: THIRDWEB_INSIGHT_API_DOMAIN,
31+
bridge: THIRDWEB_BRIDGE_URL,
32+
});
33+
}
34+
35+
return createThirdwebClient({
36+
secretKey: undefined,
37+
clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
38+
config: {
39+
storage: {
40+
gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
41+
},
42+
},
43+
});
44+
}
45+
46+
export const bridgeAppThirdwebClient = getBridgeThirdwebClient();

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { cn } from "@/lib/utils";
2+
import { Inter } from "next/font/google";
3+
import "../../global.css";
4+
import { Providers } from "./components/client/Providers.client";
5+
6+
const fontSans = Inter({
7+
subsets: ["latin"],
8+
variable: "--font-sans",
9+
display: "swap",
10+
});
11+
12+
export default function BridgeLayout({
13+
children,
14+
}: {
15+
children: React.ReactNode;
16+
}) {
17+
return (
18+
<html lang="en" suppressHydrationWarning>
19+
<body
20+
className={cn(
21+
"h-screen w-screen bg-background font-sans antialiased",
22+
fontSans.variable,
23+
)}
24+
>
25+
<Providers>{children}</Providers>
26+
</body>
27+
</html>
28+
);
29+
}

‎apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/page.tsx‎ renamed to ‎apps/dashboard/src/app/bridge/page.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ArrowUpRightIcon } from "lucide-react";
22
import type { Metadata } from "next";
3-
import { getClientThirdwebClient } from "../../../../../@/constants/thirdweb-client.client";
43
import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
54

65
const title = "Universal Bridge: Swap, Bridge, and Onramp";
@@ -16,18 +15,14 @@ export const metadata: Metadata = {
1615
},
1716
};
1817

19-
export default async function RoutesPage({
18+
export default async function BridgePage({
2019
searchParams,
21-
}: { searchParams: Record<string, string | string[]> }) {
22-
const { chainId } = searchParams;
23-
const client = getClientThirdwebClient(undefined);
20+
}: { searchParams: Promise<Record<string, string | string[]>> }) {
21+
const { chainId } = await searchParams;
2422
return (
2523
<div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center overflow-hidden border py-10">
2624
<main className="container z-10 flex justify-center">
27-
<UniversalBridgeEmbed
28-
chainId={chainId ? Number(chainId) : undefined}
29-
client={client}
30-
/>
25+
<UniversalBridgeEmbed chainId={chainId ? Number(chainId) : undefined} />
3126
</main>
3227

3328
{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -37,7 +32,7 @@ export default async function RoutesPage({
3732
className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
3833
/>
3934

40-
<div className="absolute inset-x-0 bottom-24 z-20">
35+
<div className="absolute inset-x-0 bottom-8 z-20">
4136
<div className="container mx-auto px-4">
4237
<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)]">
4338
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,13 @@ export function SwapConfirmationScreen(props: {
7878
message: "Your wallet rejected the approval request.",
7979
};
8080
}
81+
if (error.toLowerCase().includes("insufficient funds for gas")) {
82+
return {
83+
title: "Insufficient Native Funds",
84+
message:
85+
"You do not have enough native funds to approve the transaction.",
86+
};
87+
}
8188
return {
8289
title: "Failed to Approve",
8390
message:
@@ -96,6 +103,13 @@ export function SwapConfirmationScreen(props: {
96103
message: "Your wallet rejected the confirmation request.",
97104
};
98105
}
106+
if (error.toLowerCase().includes("insufficient funds for gas")) {
107+
return {
108+
title: "Insufficient Native Funds",
109+
message:
110+
"You do not have enough native funds to confirm the transaction.",
111+
};
112+
}
99113
return {
100114
title: "Failed to Confirm",
101115
message:
@@ -333,6 +347,7 @@ export function SwapConfirmationScreen(props: {
333347
} catch (e) {
334348
console.error(e);
335349
setStatus("error");
350+
setError((e as Error).message);
336351
}
337352
}
338353
}}

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,13 @@ export function TransferConfirmationScreen(
126126
message: "Your wallet rejected the approval request.",
127127
};
128128
}
129+
if (status.error.toLowerCase().includes("insufficient funds for gas")) {
130+
return {
131+
title: "Insufficient Native Funds",
132+
message:
133+
"You do not have enough native funds to approve the transaction.",
134+
};
135+
}
129136
return {
130137
title: "Failed to Approve",
131138
message:
@@ -138,12 +145,23 @@ export function TransferConfirmationScreen(
138145
status.id === "error" &&
139146
status.error
140147
) {
141-
if (status.error.toLowerCase().includes("user rejected")) {
148+
if (
149+
status.error.toLowerCase().includes("user rejected") ||
150+
status.error.toLowerCase().includes("user closed modal") ||
151+
status.error.toLowerCase().includes("user denied")
152+
) {
142153
return {
143154
title: "Failed to Confirm",
144155
message: "Your wallet rejected the confirmation request.",
145156
};
146157
}
158+
if (status.error.toLowerCase().includes("insufficient funds for gas")) {
159+
return {
160+
title: "Insufficient Native Funds",
161+
message:
162+
"You do not have enough native funds to confirm the transaction.",
163+
};
164+
}
147165
return {
148166
title: "Failed to Confirm",
149167
message:

0 commit comments

Comments
 (0)