diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts index 0e7520d8f0f..3e31d53a325 100644 --- a/apps/dashboard/src/@/analytics/report.ts +++ b/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); } diff --git a/apps/dashboard/src/@/components/blocks/faq-section.tsx b/apps/dashboard/src/@/components/blocks/faq-section.tsx index 9fd1fb6fc24..a06315888c6 100644 --- a/apps/dashboard/src/@/components/blocks/faq-section.tsx +++ b/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 ( -
-

- Frequently asked questions -

-
- {props.faqs.map((faq, faqIndex) => ( - - ))} -
-
+
+ {props.faqs.map((faq, faqIndex) => ( + + ))} +
); } diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx index 3ba73e13dd2..374ab1eaae1 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx +++ b/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 && ( -
- -
+ )} ); } + +function FaqSection(props: { + faqs: Array<{ title: string; description: string }>; +}) { + return ( +
+

+ Frequently asked questions +

+ +
+ ); +} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/tokens/components/header.tsx b/apps/dashboard/src/app/(app)/(dashboard)/tokens/components/header.tsx index 31232ca0583..8431dc35b15 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/tokens/components/header.tsx +++ b/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 }) {
@@ -22,18 +27,49 @@ export function PageHeader(props: { containerClassName?: string }) {
-
- - Docs - - +
+
+ + + + +
); } + +function ToggleThemeButton(props: { className?: string }) { + const { setTheme, theme } = useTheme(); + + return ( + } + > + + + ); +} diff --git a/apps/dashboard/src/app/bridge/components/client/pill-link.tsx b/apps/dashboard/src/app/bridge/components/client/pill-link.tsx deleted file mode 100644 index 111fa6e8a28..00000000000 --- a/apps/dashboard/src/app/bridge/components/client/pill-link.tsx +++ /dev/null @@ -1,33 +0,0 @@ -"use client"; -import { ChevronRightIcon, DollarSignIcon, TrendingUpIcon } from "lucide-react"; -import Link from "next/link"; -import { reportBridgePageLinkClick } from "@/analytics/report"; -import { cn } from "@/lib/utils"; - -export function PillLink(props: { - children: React.ReactNode; - href: string; - linkType: "integrate-bridge" | "trending-tokens"; -}) { - const Icon = - props.linkType === "integrate-bridge" ? DollarSignIcon : TrendingUpIcon; - return ( - reportBridgePageLinkClick({ linkType: props.linkType })} - className={cn( - "shadow-sm text-center justify-center inline-flex items-center gap-4 text-foreground group", - "text-sm bg-card/50 backdrop-blur-lg border border-border/70", - "rounded-full px-4 py-2.5 transition-colors duration-300 text-pretty leading-5", - "hover:bg-pink-300/20 dark:hover:bg-pink-950/30 hover:text-foreground hover:border-pink-400 dark:hover:border-pink-800", - )} - > -
- - {props.children} -
- - - ); -} diff --git a/apps/dashboard/src/app/bridge/components/header.tsx b/apps/dashboard/src/app/bridge/components/header.tsx index 7a6554c9825..c5e08317ee1 100644 --- a/apps/dashboard/src/app/bridge/components/header.tsx +++ b/apps/dashboard/src/app/bridge/components/header.tsx @@ -1,21 +1,27 @@ +"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 ( -
+
-
- +
+ thirdweb @@ -23,15 +29,34 @@ export function PageHeader(props: { containerClassName?: string }) {
-
- - Docs - - +
+
+ { + 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" + > + + Trending Tokens + + + + { + 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" + > + + + +
); } + +function ToggleThemeButton(props: { className?: string }) { + const { setTheme, theme } = useTheme(); + + return ( + } + > + + + ); +} diff --git a/apps/dashboard/src/app/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx index d69328daff2..b7f93a48269 100644 --- a/apps/dashboard/src/app/bridge/page.tsx +++ b/apps/dashboard/src/app/bridge/page.tsx @@ -1,15 +1,12 @@ import { cn } from "@workspace/ui/lib/utils"; -import { DotIcon } from "lucide-react"; 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 { FaqSection } from "@/components/blocks/faq-section"; -import { AppFooter } from "@/components/footers/app-footer"; -import { PillLink } from "./components/client/pill-link"; +import { FaqAccordion } from "@/components/blocks/faq-section"; import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed"; -import { PageHeader } from "./components/header"; +import { BridgePageHeader } from "./components/header"; import { bridgeAppThirdwebClient } from "./constants"; const title = "thirdweb Bridge: Buy, Bridge & Swap Crypto on 85+ Chains"; @@ -56,74 +53,54 @@ export default async function BridgePage({ return (
- - -
- -
-
-

- Bridge and Swap tokens
across any - chain, instantly -

- -
- 85+ Chains Supported - - 4500+ Tokens Supported - 9+ Million Routes Available -
-
- -
- -
- - -
+ + +
+ +
-
+ -
- - Accept Payments in Any Token Right Inside Your App - - - - Discover Trending Tokens - -
+
-
- -
- -
+
+
+
+ ); +} -
- -
+function HeadingSection() { + return ( +
+

+ Bridge and Swap tokens
across any + chain, instantly +

+ +

+ Seamlessly move your assets across 85+ chains with the best rates and + fastest execution +

+ +
+ 85+ Chains Supported + 4500+ Tokens Supported + 9+ Million Routes Available
); @@ -131,7 +108,7 @@ export default async function BridgePage({ function DataPill(props: { children: React.ReactNode }) { return ( -

+

{props.children}

); @@ -183,5 +160,12 @@ const bridgeFaqs: Array<{ title: string; description: string }> = [ ]; function BridgeFaqSection() { - return ; + return ( +
+

+ Frequently Asked Questions +

+ +
+ ); }