Skip to content

Commit 094109b

Browse files
MananTankMananTank
committed
[PRO-48] Dashboard: Bridge page UI updates
1 parent a90569d commit 094109b

File tree

7 files changed

+200
-148
lines changed

7 files changed

+200
-148
lines changed

‎apps/dashboard/src/@/analytics/report.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -683,7 +683,7 @@ export function reportProductFeedback(properties: {
683683
*
684684
*/
685685
export function reportBridgePageLinkClick(params: {
686-
linkType: "integrate-bridge" | "trending-tokens";
686+
linkType: "bridge-docs" | "trending-tokens";
687687
}) {
688688
posthog.capture("bridge page link clicked", params);
689689
}

‎apps/dashboard/src/@/components/blocks/faq-section.tsx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,20 @@ import { Button } from "@/components/ui/button";
55
import { DynamicHeight } from "@/components/ui/DynamicHeight";
66
import { cn } from "@/lib/utils";
77

8-
export function FaqSection(props: {
8+
export function FaqAccordion(props: {
99
faqs: Array<{ title: string; description: string }>;
1010
}) {
1111
return (
12-
<section>
13-
<h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
14-
Frequently asked questions
15-
</h2>
16-
<div className="flex flex-col">
17-
{props.faqs.map((faq, faqIndex) => (
18-
<FaqItem
19-
key={faq.title}
20-
title={faq.title}
21-
description={faq.description}
22-
className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
23-
/>
24-
))}
25-
</div>
26-
</section>
12+
<div className="flex flex-col">
13+
{props.faqs.map((faq, faqIndex) => (
14+
<FaqItem
15+
key={faq.title}
16+
title={faq.title}
17+
description={faq.description}
18+
className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
19+
/>
20+
))}
21+
</div>
2722
);
2823
}
2924

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CircleAlertIcon } from "lucide-react";
22
import { getRawAccount } from "@/api/account/get-account";
3-
import { FaqSection } from "@/components/blocks/faq-section";
3+
import { FaqAccordion } from "@/components/blocks/faq-section";
44
import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
55
import { getChain, getCustomChainMetadata } from "../../utils";
66
import { fetchChainSeo } from "./apis/chain-seo";
@@ -67,10 +67,21 @@ export default async function Page(props: Props) {
6767
)}
6868

6969
{chainSeo?.faqs && chainSeo.faqs.length > 0 && (
70-
<div className="py-10">
71-
<FaqSection faqs={chainSeo.faqs} />
72-
</div>
70+
<FaqSection faqs={chainSeo.faqs} />
7371
)}
7472
</div>
7573
);
7674
}
75+
76+
function FaqSection(props: {
77+
faqs: Array<{ title: string; description: string }>;
78+
}) {
79+
return (
80+
<section className="py-10">
81+
<h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
82+
Frequently asked questions
83+
</h2>
84+
<FaqAccordion faqs={props.faqs} />
85+
</section>
86+
);
87+
}

‎apps/dashboard/src/app/(app)/(dashboard)/tokens/components/header.tsx‎

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
"use client";
2+
import { BookOpenIcon, MoonIcon, SunIcon } from "lucide-react";
13
import Link from "next/link";
2-
import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
4+
import { useTheme } from "next-themes";
5+
import { ClientOnly } from "@/components/blocks/client-only";
6+
import { Button } from "@/components/ui/button";
7+
import { Skeleton } from "@/components/ui/skeleton";
38
import { cn } from "@/lib/utils";
49
import { ThirdwebMiniLogo } from "../../../components/ThirdwebMiniLogo";
510
import { PublicPageConnectButton } from "../../(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
@@ -9,7 +14,7 @@ export function PageHeader(props: { containerClassName?: string }) {
914
<div className="border-b">
1015
<header
1116
className={cn(
12-
"container flex max-w-7xl justify-between py-3",
17+
"container flex max-w-7xl justify-between py-4",
1318
props.containerClassName,
1419
)}
1520
>
@@ -22,18 +27,49 @@ export function PageHeader(props: { containerClassName?: string }) {
2227
</Link>
2328
</div>
2429

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 />
30+
<div className="flex items-center gap-4">
31+
<div className="flex items-center gap-1 lg:gap-2">
32+
<Link
33+
href="https://portal.thirdweb.com/bridge"
34+
target="_blank"
35+
aria-label="View Documentation"
36+
className="text-sm text-muted-foreground hover:text-foreground p-2 hover:bg-accent rounded-full transition-all duration-100"
37+
>
38+
<BookOpenIcon className="size-5" />
39+
</Link>
40+
<ToggleThemeButton />
41+
</div>
3442
<PublicPageConnectButton connectButtonClassName="!rounded-full" />
3543
</div>
3644
</header>
3745
</div>
3846
);
3947
}
48+
49+
function ToggleThemeButton(props: { className?: string }) {
50+
const { setTheme, theme } = useTheme();
51+
52+
return (
53+
<ClientOnly
54+
ssr={<Skeleton className="size-[36px] rounded-full border bg-accent" />}
55+
>
56+
<Button
57+
aria-label="Toggle theme"
58+
className={cn(
59+
"h-auto w-auto rounded-full p-2 text-muted-foreground hover:text-foreground",
60+
props.className,
61+
)}
62+
onClick={() => {
63+
setTheme(theme === "dark" ? "light" : "dark");
64+
}}
65+
variant="ghost"
66+
>
67+
{theme === "light" ? (
68+
<SunIcon className="size-5 " />
69+
) : (
70+
<MoonIcon className="size-5 " />
71+
)}
72+
</Button>
73+
</ClientOnly>
74+
);
75+
}

‎apps/dashboard/src/app/bridge/components/client/pill-link.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

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

Lines changed: 74 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,68 @@
1+
"use client";
2+
import { BookOpenIcon, CoinsIcon, MoonIcon, SunIcon } from "lucide-react";
13
import Link from "next/link";
2-
import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
4+
import { useTheme } from "next-themes";
5+
import { reportBridgePageLinkClick } from "@/analytics/report";
6+
import { ClientOnly } from "@/components/blocks/client-only";
7+
import { Button } from "@/components/ui/button";
8+
import { Skeleton } from "@/components/ui/skeleton";
39
import { cn } from "@/lib/utils";
410
import { PublicPageConnectButton } from "../../(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
511
import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";
612
import { bridgeWallets } from "./client/UniversalBridgeEmbed";
713

8-
export function PageHeader(props: { containerClassName?: string }) {
14+
export function BridgePageHeader(props: { containerClassName?: string }) {
915
return (
10-
<div className="border-b border-dashed">
16+
<div className="border-b border-border/70">
1117
<header
1218
className={cn(
13-
"container flex max-w-7xl justify-between py-4",
19+
"container flex max-w-7xl justify-between py-3 lg:py-4",
1420
props.containerClassName,
1521
)}
1622
>
17-
<div className="flex items-center gap-4">
18-
<Link className="flex items-center gap-2" href="/team">
23+
<div className="flex items-center gap-6">
24+
<Link
25+
className="flex items-center gap-2"
26+
href="/home"
27+
onClick={() =>
28+
reportBridgePageLinkClick({ linkType: "bridge-docs" })
29+
}
30+
>
1931
<ThirdwebMiniLogo className="h-5" />
2032
<span className="hidden font-bold text-2xl tracking-tight lg:block">
2133
thirdweb
2234
</span>
2335
</Link>
2436
</div>
2537

26-
<div className="flex items-center gap-5">
27-
<Link
28-
href="https://portal.thirdweb.com/bridge"
29-
target="_blank"
30-
className="text-sm text-muted-foreground hover:text-foreground"
31-
>
32-
Docs
33-
</Link>
34-
<ToggleThemeButton className="bg-transparent" />
38+
<div className="flex items-center gap-3 lg:gap-5">
39+
<div className="flex items-center gap-1 lg:gap-2">
40+
<Link
41+
onClick={() => {
42+
reportBridgePageLinkClick({ linkType: "trending-tokens" });
43+
}}
44+
target="_blank"
45+
href="/tokens"
46+
className="text-sm text-muted-foreground hover:text-foreground p-2 hover:bg-accent rounded-full transition-all duration-100"
47+
>
48+
<span className="text-sm sr-only md:not-sr-only">
49+
Trending Tokens
50+
</span>
51+
<CoinsIcon className="size-5 md:hidden" />
52+
</Link>
53+
<Link
54+
onClick={() => {
55+
reportBridgePageLinkClick({ linkType: "bridge-docs" });
56+
}}
57+
href="https://portal.thirdweb.com/bridge"
58+
target="_blank"
59+
aria-label="View Documentation"
60+
className="text-sm text-muted-foreground hover:text-foreground p-2 hover:bg-accent rounded-full transition-all duration-100"
61+
>
62+
<BookOpenIcon className="size-5" />
63+
</Link>
64+
<ToggleThemeButton />
65+
</div>
3566
<PublicPageConnectButton
3667
connectButtonClassName="!rounded-full"
3768
wallets={bridgeWallets}
@@ -41,3 +72,31 @@ export function PageHeader(props: { containerClassName?: string }) {
4172
</div>
4273
);
4374
}
75+
76+
function ToggleThemeButton(props: { className?: string }) {
77+
const { setTheme, theme } = useTheme();
78+
79+
return (
80+
<ClientOnly
81+
ssr={<Skeleton className="size-[36px] rounded-full border bg-accent" />}
82+
>
83+
<Button
84+
aria-label="Toggle theme"
85+
className={cn(
86+
"h-auto w-auto rounded-full p-2 text-muted-foreground hover:text-foreground",
87+
props.className,
88+
)}
89+
onClick={() => {
90+
setTheme(theme === "dark" ? "light" : "dark");
91+
}}
92+
variant="ghost"
93+
>
94+
{theme === "light" ? (
95+
<SunIcon className="size-5 " />
96+
) : (
97+
<MoonIcon className="size-5 " />
98+
)}
99+
</Button>
100+
</ClientOnly>
101+
);
102+
}

0 commit comments

Comments
 (0)