From d53f8a25b4978a9f92f494f50955765817e31bad Mon Sep 17 00:00:00 2001 From: MananTank Date: Fri, 19 Sep 2025 23:35:04 +0000 Subject: [PATCH] [MNY-191] Dashboard: Add header in /bridge (#8085) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on enhancing the layout and components of the `Bridge` application by improving styling, adding new components, and refactoring existing structures for better usability and aesthetics. ### Detailed summary - Updated `` class in `layout.tsx` for improved layout. - Changed width class in `UniversalBridgeEmbed.tsx` for full responsiveness. - Added `relative z-10` class to the main `
` in `BuyAndSwapEmbed.tsx`. - Introduced a new `PageHeader` component in `header.tsx` with navigation links. - Refactored `BridgePage` in `page.tsx` to include `PageHeader` and remove unnecessary elements. - Added `DotsBackgroundPattern` function for a decorative background effect. - Integrated `AppFooter` in `BridgePage` for consistent footer display. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../@/components/blocks/BuyAndSwapEmbed.tsx | 2 +- .../client/UniversalBridgeEmbed.tsx | 2 +- .../src/app/bridge/components/header.tsx | 39 +++++++++++ apps/dashboard/src/app/bridge/layout.tsx | 2 +- apps/dashboard/src/app/bridge/page.tsx | 65 ++++++++----------- .../web/ui/Bridge/swap-widget/swap-ui.tsx | 5 +- 6 files changed, 73 insertions(+), 42 deletions(-) create mode 100644 apps/dashboard/src/app/bridge/components/header.tsx diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx index f2dc10e9c8a..ae4f30a9955 100644 --- a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx +++ b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx @@ -42,7 +42,7 @@ export function BuyAndSwapEmbed(props: { }, [props.pageType]); return ( -
+
+
+
+
+ + + + thirdweb + + +
+ +
+ + Docs + + + +
+
+
+ ); +} diff --git a/apps/dashboard/src/app/bridge/layout.tsx b/apps/dashboard/src/app/bridge/layout.tsx index bf13c0400a4..70ed95df60f 100644 --- a/apps/dashboard/src/app/bridge/layout.tsx +++ b/apps/dashboard/src/app/bridge/layout.tsx @@ -18,7 +18,7 @@ export default function BridgeLayout({ diff --git a/apps/dashboard/src/app/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx index 6930e98679c..a6474efda9a 100644 --- a/apps/dashboard/src/app/bridge/page.tsx +++ b/apps/dashboard/src/app/bridge/page.tsx @@ -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 ( -
-
+
+ + +
+ -
- - {/* eslint-disable-next-line @next/next/no-img-element */} - +
-
-
-
-
-
-
-

- Get Started with thirdweb Bridge -

-

- thirdweb Bridge allows developers to easily bridge and swap - tokens between chains and wallets. -

-
- - Learn More - - -
-
-
+
+
); } + +function DotsBackgroundPattern(props: { className?: string }) { + return ( +
+ ); +} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx index abf487621a1..8d8a31f48d0 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx @@ -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 ? (
{props.balance.data === undefined || props.selectedToken.data === undefined ? ( - + ) : (