[PRO-48] Dashboard: Bridge page UI updates

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

@@ -683,7 +683,7 @@ export function reportProductFeedback(properties: {
  *
  */
 export function reportBridgePageLinkClick(params: {
-  linkType: "integrate-bridge" | "trending-tokens";
+  linkType: "bridge-docs" | "trending-tokens";
 }) {
   posthog.capture("bridge page link clicked", params);
 }

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

@@ -5,25 +5,20 @@ import { Button } from "@/components/ui/button";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { cn } from "@/lib/utils";
 
-export function FaqSection(props: {
+export function FaqAccordion(props: {
   faqs: Array<{ title: string; description: string }>;
 }) {
   return (
-    <section>
-      <h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
-        Frequently asked questions
-      </h2>
-      <div className="flex flex-col">
-        {props.faqs.map((faq, faqIndex) => (
-          <FaqItem
-            key={faq.title}
-            title={faq.title}
-            description={faq.description}
-            className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
-          />
-        ))}
-      </div>
-    </section>
+    <div className="flex flex-col">
+      {props.faqs.map((faq, faqIndex) => (
+        <FaqItem
+          key={faq.title}
+          title={faq.title}
+          description={faq.description}
+          className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
+        />
+      ))}
+    </div>
   );
 }
 

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

@@ -1,6 +1,6 @@
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "@/api/account/get-account";
-import { FaqSection } from "@/components/blocks/faq-section";
+import { FaqAccordion } from "@/components/blocks/faq-section";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { getChain, getCustomChainMetadata } from "../../utils";
 import { fetchChainSeo } from "./apis/chain-seo";
@@ -67,10 +67,21 @@ export default async function Page(props: Props) {
       )}
 
       {chainSeo?.faqs && chainSeo.faqs.length > 0 && (
-        <div className="py-10">
-          <FaqSection faqs={chainSeo.faqs} />
-        </div>
+        <FaqSection faqs={chainSeo.faqs} />
       )}
     </div>
   );
 }
+
+function FaqSection(props: {
+  faqs: Array<{ title: string; description: string }>;
+}) {
+  return (
+    <section className="py-10">
+      <h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
+        Frequently asked questions
+      </h2>
+      <FaqAccordion faqs={props.faqs} />
+    </section>
+  );
+}

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

@@ -1,5 +1,10 @@
+"use client";
+import { BookOpenIcon, MoonIcon, SunIcon } from "lucide-react";
 import Link from "next/link";
-import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
+import { useTheme } from "next-themes";
+import { ClientOnly } from "@/components/blocks/client-only";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../components/ThirdwebMiniLogo";
 import { PublicPageConnectButton } from "../../(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
@@ -9,7 +14,7 @@ export function PageHeader(props: { containerClassName?: string }) {
     <div className="border-b">
       <header
         className={cn(
-          "container flex max-w-7xl justify-between py-3",
+          "container flex max-w-7xl justify-between py-4",
           props.containerClassName,
         )}
       >
@@ -22,18 +27,49 @@ export function PageHeader(props: { containerClassName?: string }) {
           </Link>
         </div>
 
-        <div className="flex items-center gap-5">
-          <Link
-            href="https://portal.thirdweb.com/bridge"
-            target="_blank"
-            className="text-sm text-muted-foreground hover:text-foreground"
-          >
-            Docs
-          </Link>
-          <ToggleThemeButton />
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-1 lg:gap-2">
+            <Link
+              href="https://portal.thirdweb.com/bridge"
+              target="_blank"
+              aria-label="View Documentation"
+              className="text-sm text-muted-foreground hover:text-foreground p-2 hover:bg-accent rounded-full transition-all duration-100"
+            >
+              <BookOpenIcon className="size-5" />
+            </Link>
+            <ToggleThemeButton />
+          </div>
           <PublicPageConnectButton connectButtonClassName="!rounded-full" />
         </div>
       </header>
     </div>
   );
 }
+
+function ToggleThemeButton(props: { className?: string }) {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <ClientOnly
+      ssr={<Skeleton className="size-[36px] rounded-full border bg-accent" />}
+    >
+      <Button
+        aria-label="Toggle theme"
+        className={cn(
+          "h-auto w-auto rounded-full p-2 text-muted-foreground hover:text-foreground",
+          props.className,
+        )}
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+        variant="ghost"
+      >
+        {theme === "light" ? (
+          <SunIcon className="size-5 " />
+        ) : (
+          <MoonIcon className="size-5 " />
+        )}
+      </Button>
+    </ClientOnly>
+  );
+}

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

@@ -1,37 +1,62 @@
+"use client";
+import { BookOpenIcon, CoinsIcon, MoonIcon, SunIcon } from "lucide-react";
 import Link from "next/link";
-import { ToggleThemeButton } from "@/components/blocks/color-mode-toggle";
+import { useTheme } from "next-themes";
+import { reportBridgePageLinkClick } from "@/analytics/report";
+import { ClientOnly } from "@/components/blocks/client-only";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import { PublicPageConnectButton } from "../../(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton";
 import { ThirdwebMiniLogo } from "../../(app)/components/ThirdwebMiniLogo";
 import { bridgeWallets } from "./client/UniversalBridgeEmbed";
 
-export function PageHeader(props: { containerClassName?: string }) {
+export function BridgePageHeader(props: { containerClassName?: string }) {
   return (
-    <div className="border-b border-dashed">
+    <div className="border-b border-border/70">
       <header
         className={cn(
-          "container flex max-w-7xl justify-between py-4",
+          "container flex max-w-7xl justify-between py-3 lg:py-4",
           props.containerClassName,
         )}
       >
-        <div className="flex items-center gap-4">
-          <Link className="flex items-center gap-2" href="/team">
+        <div className="flex items-center gap-6">
+          <Link className="flex items-center gap-2" href="/home">
             <ThirdwebMiniLogo className="h-5" />
             <span className="hidden font-bold text-2xl tracking-tight lg:block">
               thirdweb
             </span>
           </Link>
         </div>
 
-        <div className="flex items-center gap-5">
-          <Link
-            href="https://portal.thirdweb.com/bridge"
-            target="_blank"
-            className="text-sm text-muted-foreground hover:text-foreground"
-          >
-            Docs
-          </Link>
-          <ToggleThemeButton className="bg-transparent" />
+        <div className="flex items-center gap-3 lg:gap-5">
+          <div className="flex items-center gap-1 lg:gap-2">
+            <Link
+              onClick={() => {
+                reportBridgePageLinkClick({ linkType: "trending-tokens" });
+              }}
+              target="_blank"
+              href="/tokens"
+              className="text-sm text-muted-foreground hover:text-foreground p-2 hover:bg-accent rounded-full transition-all duration-100"
+            >
+              <span className="text-sm sr-only md:not-sr-only">
+                Trending Tokens
+              </span>
+              <CoinsIcon className="size-5 md:hidden" />
+            </Link>
+            <Link
+              onClick={() => {
+                reportBridgePageLinkClick({ linkType: "bridge-docs" });
+              }}
+              href="https://portal.thirdweb.com/bridge"
+              target="_blank"
+              aria-label="View Documentation"
+              className="text-sm text-muted-foreground hover:text-foreground p-2 hover:bg-accent rounded-full transition-all duration-100"
+            >
+              <BookOpenIcon className="size-5" />
+            </Link>
+            <ToggleThemeButton />
+          </div>
           <PublicPageConnectButton
             connectButtonClassName="!rounded-full"
             wallets={bridgeWallets}
@@ -41,3 +66,31 @@ export function PageHeader(props: { containerClassName?: string }) {
     </div>
   );
 }
+
+function ToggleThemeButton(props: { className?: string }) {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <ClientOnly
+      ssr={<Skeleton className="size-[36px] rounded-full border bg-accent" />}
+    >
+      <Button
+        aria-label="Toggle theme"
+        className={cn(
+          "h-auto w-auto rounded-full p-2 text-muted-foreground hover:text-foreground",
+          props.className,
+        )}
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+        variant="ghost"
+      >
+        {theme === "light" ? (
+          <SunIcon className="size-5 " />
+        ) : (
+          <MoonIcon className="size-5 " />
+        )}
+      </Button>
+    </ClientOnly>
+  );
+}