Skip to content

Commit d53f8a2

Browse files
MananTankMananTank
committed
[MNY-191] Dashboard: Add header in /bridge (#8085)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## 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 `<body>` class in `layout.tsx` for improved layout. - Changed width class in `UniversalBridgeEmbed.tsx` for full responsiveness. - Added `relative z-10` class to the main `<div>` 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}` <!-- end pr-codex -->
1 parent dd69316 commit d53f8a2

File tree

6 files changed

+73
-42
lines changed

6 files changed

+73
-42
lines changed

‎apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function BuyAndSwapEmbed(props: {
4242
}, [props.pageType]);
4343

4444
return (
45-
<div className="bg-card rounded-2xl border overflow-hidden flex flex-col">
45+
<div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10">
4646
<div className="flex gap-2.5 p-4 border-b border-dashed">
4747
<TabButton
4848
label="Swap"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function UniversalBridgeEmbed({
1717
const chain = useV5DashboardChain(chainId || 1);
1818

1919
return (
20-
<div className="lg:w-[400px]">
20+
<div className="w-full lg:w-[400px]">
2121
<BuyAndSwapEmbed
2222
client={bridgeAppThirdwebClient}
2323
chain={chain}

‎apps/dashboard/src/app/bridge/components/header.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Link from "next/link";
2+
import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
3+
import { cn } from "@/lib/utils";
4+
import { PublicPageConnectButton } from "../../(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
5+
import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";
6+
7+
export function PageHeader(props: { containerClassName?: string }) {
8+
return (
9+
<div className="border-b border-dashed">
10+
<header
11+
className={cn(
12+
"container flex max-w-7xl justify-between py-3",
13+
props.containerClassName,
14+
)}
15+
>
16+
<div className="flex items-center gap-4">
17+
<Link className="flex items-center gap-2" href="/team">
18+
<ThirdwebMiniLogo className="h-5" />
19+
<span className="hidden font-bold text-2xl tracking-tight lg:block">
20+
thirdweb
21+
</span>
22+
</Link>
23+
</div>
24+
25+
<div className="flex items-center gap-5">
26+
<Link
27+
href="https://portal.thirdweb.com/bridge"
28+
target="_blank"
29+
className="text-sm text-muted-foreground hover:text-foreground"
30+
>
31+
Docs
32+
</Link>
33+
<ToggleThemeButton />
34+
<PublicPageConnectButton connectButtonClassName="!rounded-full" />
35+
</div>
36+
</header>
37+
</div>
38+
);
39+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function BridgeLayout({
1818
<html lang="en" suppressHydrationWarning>
1919
<body
2020
className={cn(
21-
"h-screen w-screen bg-background font-sans antialiased",
21+
"min-h-dvh bg-background font-sans antialiased flex flex-col",
2222
fontSans.variable,
2323
)}
2424
>

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

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { ArrowUpRightIcon } from "lucide-react";
1+
import { cn } from "@workspace/ui/lib/utils";
22
import type { Metadata } from "next";
33
import type { Address } from "thirdweb";
44
import { defineChain } from "thirdweb/chains";
55
import { getContract } from "thirdweb/contract";
66
import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
7+
import { AppFooter } from "@/components/footers/app-footer";
78
import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
9+
import { PageHeader } from "./components/header";
810
import { bridgeAppThirdwebClient } from "./constants";
911

1012
const title = "thirdweb Payments: Swap, Bridge, and Onramp";
@@ -49,8 +51,11 @@ export default async function BridgePage({
4951
}
5052

5153
return (
52-
<div className="relative mx-auto flex h-dvh w-full flex-col items-center justify-center overflow-hidden border py-10">
53-
<main className="container z-10 flex justify-center">
54+
<div className="grow flex flex-col relative overflow-hidden">
55+
<PageHeader />
56+
57+
<div className="flex grow flex-col items-center justify-center py-36 px-4 min-h-dvh relative overflow-hidden">
58+
<DotsBackgroundPattern />
5459
<UniversalBridgeEmbed
5560
amount={amount as string}
5661
chainId={chainId ? Number(chainId) : undefined}
@@ -64,42 +69,28 @@ export default async function BridgePage({
6469
: undefined
6570
}
6671
/>
67-
</main>
68-
69-
{/* eslint-disable-next-line @next/next/no-img-element */}
70-
<img
71-
alt=""
72-
className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0 opacity-20"
73-
src="/assets/login/background.svg"
74-
/>
72+
</div>
7573

76-
<div className="absolute inset-x-0 bottom-8 z-20">
77-
<div className="container mx-auto px-4">
78-
<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)]">
79-
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
80-
<div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
81-
<div className="flex flex-col gap-1">
82-
<h3 className="font-semibold text-base tracking-tight">
83-
Get Started with thirdweb Bridge
84-
</h3>
85-
<p className="text-muted-foreground text-sm">
86-
thirdweb Bridge allows developers to easily bridge and swap
87-
tokens between chains and wallets.
88-
</p>
89-
</div>
90-
<a
91-
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"
92-
href="https://portal.thirdweb.com/bridge"
93-
rel="noopener noreferrer"
94-
target="_blank"
95-
>
96-
Learn More
97-
<ArrowUpRightIcon className="size-4" />
98-
</a>
99-
</div>
100-
</div>
101-
</div>
74+
<div className="bg-background relative z-10">
75+
<AppFooter />
10276
</div>
10377
</div>
10478
);
10579
}
80+
81+
function DotsBackgroundPattern(props: { className?: string }) {
82+
return (
83+
<div
84+
className={cn(
85+
"pointer-events-none absolute inset-0 text-foreground/30 dark:text-foreground/10",
86+
props.className,
87+
)}
88+
style={{
89+
backgroundImage: "radial-gradient(currentColor 1px, transparent 1px)",
90+
backgroundSize: "24px 24px",
91+
maskImage:
92+
"radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 50%)",
93+
}}
94+
/>
95+
);
96+
}

‎packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -684,6 +684,7 @@ function DecimalInput(props: {
684684
paddingInline: 0,
685685
paddingBlock: 0,
686686
letterSpacing: "-0.025em",
687+
height: "30px",
687688
}}
688689
type="text"
689690
value={props.value}
@@ -825,7 +826,7 @@ function TokenSection(props: {
825826
{props.amount.isFetching ? (
826827
<div style={{ flexGrow: 1 }}>
827828
<Skeleton
828-
height={fontSize.xxl}
829+
height="30px"
829830
width="140px"
830831
style={{
831832
borderRadius: radius.lg,
@@ -890,7 +891,7 @@ function TokenSection(props: {
890891
<div>
891892
{props.balance.data === undefined ||
892893
props.selectedToken.data === undefined ? (
893-
<Skeleton height={fontSize.xs} width="50px" />
894+
<Skeleton height={fontSize.xs} width="100px" />
894895
) : (
895896
<div
896897
style={{

0 commit comments

Comments
 (0)