Dashboard, Portal, Playground: Add Bridge Product

Author: MananTank

apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx

@@ -132,7 +132,7 @@ export function ProjectPageHeader(props: ProjectPageHeaderProps) {
             {props.title}
           </h2>
           {/* description */}
-          <p className="text-sm text-muted-foreground line-clamp-3 md:line-clamp-2">
+          <p className="text-sm text-muted-foreground text-pretty">
             {props.description}
           </p>
         </div>

apps/dashboard/src/@/icons/BridgeIcon.tsx

@@ -0,0 +1 @@
+export { BringToFrontIcon as BridgeIcon } from "lucide-react";

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/QuickstartSection.client.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { BadgeDollarSignIcon, CodeIcon } from "lucide-react";
+import { FeatureCard } from "../payments/components/FeatureCard.client";
+
+export function QuickStartSection(props: {
+  teamSlug: string;
+  projectSlug: string;
+  clientId: string;
+  teamId: string;
+}) {
+  return (
+    <section>
+      <div className="mb-4">
+        <h2 className="font-semibold text-xl tracking-tight">Quick Start</h2>
+        <p className="text-muted-foreground text-sm">
+          Choose how to integrate bridge into your project.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <FeatureCard
+          title="Earn Fees"
+          description="Setup fees to earn any time a user swaps or bridges funds."
+          icon={BadgeDollarSignIcon}
+          id="fees"
+          setupTime={1}
+          features={[
+            "Fees on every purchase",
+            "Custom percentage",
+            "Directly to your wallet",
+          ]}
+          link={{
+            href: `/team/${props.teamSlug}/${props.projectSlug}/settings/payments`,
+            label: "Configure Fees",
+          }}
+        />
+        <FeatureCard
+          title="UI Components"
+          description="Instantly add bridging to your React app with prebuilt components."
+          icon={CodeIcon}
+          id="components"
+          setupTime={2}
+          features={[
+            "Drop-in components",
+            "Supports custom user data",
+            "Transactions, products, and direct payments",
+          ]}
+          link={{
+            href: "https://portal.thirdweb.com/payments/products",
+            label: "Get Started",
+          }}
+        />
+      </div>
+    </section>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/page.tsx

@@ -0,0 +1,185 @@
+import { Button } from "@workspace/ui/components/button";
+import { PlusIcon } from "lucide-react";
+import { redirect } from "next/navigation";
+import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+import { getAuthToken } from "@/api/auth-token";
+import { getProject } from "@/api/project/projects";
+import { ProjectPage } from "@/components/blocks/project-page/project-page";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { BridgeIcon } from "@/icons/BridgeIcon";
+import { loginRedirect } from "@/utils/redirects";
+import { AdvancedSection } from "../payments/components/AdvancedSection.client";
+import { PayAnalytics } from "../payments/components/PayAnalytics";
+import { getUniversalBridgeFiltersFromSearchParams } from "../payments/components/time";
+import { CreatePaymentLinkButton } from "../payments/links/components/CreatePaymentLinkButton.client";
+import { QuickStartSection } from "./QuickstartSection.client";
+
+export default async function Page(props: {
+  params: Promise<{
+    team_slug: string;
+    project_slug: string;
+  }>;
+  searchParams: Promise<{
+    from?: string | undefined | string[];
+    to?: string | undefined | string[];
+    interval?: string | undefined | string[];
+  }>;
+}) {
+  const [params, authToken] = await Promise.all([props.params, getAuthToken()]);
+
+  const project = await getProject(params.team_slug, params.project_slug);
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/payments`);
+  }
+
+  if (!project) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  const searchParams = await props.searchParams;
+
+  const { range, interval } = getUniversalBridgeFiltersFromSearchParams({
+    defaultRange: "last-30",
+    from: searchParams.from,
+    interval: searchParams.interval,
+    to: searchParams.to,
+  });
+
+  const client = getClientThirdwebClient({
+    jwt: authToken,
+    teamId: project.teamId,
+  });
+
+  return (
+    <ProjectPage
+      header={{
+        client,
+        title: "Bridge",
+        icon: BridgeIcon,
+        description: (
+          <>
+            Bridge allows you to enable seamless onramps, swaps, and cross-chain
+            transfers <br className="max-sm:hidden" /> to move funds
+            effortlessly across any EVM network
+          </>
+        ),
+        actions: {
+          primary: {
+            component: (
+              <CreatePaymentLinkButton
+                clientId={project.publishableKey}
+                teamId={project.teamId}
+              >
+                <Button className="gap-1.5 rounded-full" size="sm">
+                  <PlusIcon className="size-4" />
+                  Create Payment
+                </Button>
+              </CreatePaymentLinkButton>
+            ),
+          },
+        },
+        settings: {
+          href: `/team/${params.team_slug}/${params.project_slug}/settings/payments`,
+        },
+        links: [
+          {
+            type: "docs",
+            href: "https://portal.thirdweb.com/payments",
+          },
+          {
+            type: "playground",
+            href: "https://playground.thirdweb.com/payments/ui-components",
+          },
+          {
+            type: "api",
+            href: "https://api.thirdweb.com/reference#tag/payments",
+          },
+          {
+            type: "webhooks",
+            href: `/team/${params.team_slug}/${params.project_slug}/webhooks/payments`,
+          },
+        ],
+      }}
+      footer={{
+        center: {
+          links: [
+            {
+              href: "https://playground.thirdweb.com/payments/ui-components",
+              label: "UI Component",
+            },
+            {
+              href: "https://playground.thirdweb.com/connect/payments/fund-wallet",
+              label: "Buy Crypto",
+            },
+            {
+              href: "https://playground.thirdweb.com/connect/payments/commerce",
+              label: "Checkout",
+            },
+            {
+              href: "https://playground.thirdweb.com/connect/payments/transactions",
+              label: "Transactions",
+            },
+          ],
+          title: "Demos",
+        },
+        left: {
+          links: [
+            {
+              href: "https://portal.thirdweb.com/payments",
+              label: "Overview",
+            },
+            {
+              href: "https://portal.thirdweb.com/typescript/v5/convertCryptoToFiat",
+              label: "TypeScript",
+            },
+            {
+              href: "https://portal.thirdweb.com/react/v5/pay/fund-wallets",
+              label: "React",
+            },
+            {
+              href: "https://portal.thirdweb.com/dotnet/universal-bridge/quickstart",
+              label: ".NET",
+            },
+          ],
+          title: "Documentation",
+        },
+        right: {
+          links: [
+            {
+              href: "https://www.youtube.com/watch?v=aBu175-VsNY",
+              label: "Implement cross-chain payments in any app",
+            },
+          ],
+          title: "Tutorials",
+        },
+      }}
+    >
+      <div className="flex flex-col gap-12">
+        <ResponsiveSearchParamsProvider value={searchParams}>
+          <PayAnalytics
+            client={client}
+            interval={interval}
+            projectClientId={project.publishableKey}
+            projectId={project.id}
+            range={range}
+            teamId={project.teamId}
+            authToken={authToken}
+          />
+        </ResponsiveSearchParamsProvider>
+
+        <QuickStartSection
+          projectSlug={params.project_slug}
+          teamSlug={params.team_slug}
+          clientId={project.publishableKey}
+          teamId={project.teamId}
+        />
+
+        <AdvancedSection
+          projectSlug={params.project_slug}
+          teamSlug={params.team_slug}
+        />
+      </div>
+    </ProjectPage>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import { FullWidthSidebarLayout } from "@/components/blocks/full-width-sidebar-layout";
 import { Badge } from "@/components/ui/badge";
+import { BridgeIcon } from "@/icons/BridgeIcon";
 import { ContractIcon } from "@/icons/ContractIcon";
 import { InsightIcon } from "@/icons/InsightIcon";
 import { NebulaIcon } from "@/icons/NebulaIcon";
@@ -72,6 +73,11 @@ export function ProjectSidebarLayout(props: {
               icon: PayIcon,
               label: "Payments",
             },
+            {
+              href: `${props.layoutPath}/bridge`,
+              icon: BridgeIcon,
+              label: "Bridge",
+            },
             {
               href: `${props.layoutPath}/tokens`,
               icon: TokenIcon,

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx

@@ -24,7 +24,6 @@ export function AdvancedSection({
           description="Build your own branded experiences with the HTTP API or TypeScript SDK."
           icon={CodeIcon}
           setupTime={10}
-          color="green"
           id="http_api"
           features={["Route discovery", "Real-time token prices"]}
           link={{
@@ -37,7 +36,6 @@ export function AdvancedSection({
           description="Create Webhooks to get notified on each purchase or transaction."
           icon={WebhookIcon}
           setupTime={5}
-          color="green"
           id="webhooks"
           features={["Instant events", "Transaction verification"]}
           link={{
@@ -49,14 +47,12 @@ export function AdvancedSection({
           title="Swap Tokens"
           icon={ArrowRightLeftIcon}
           setupTime={5}
-          color="green"
           id="swap_tokens"
           features={["Swap any token", "Cross-chain swaps"]}
           description="Swap tokens cross-chain with dedicated swapping endpoints."
           link={{
             href: `https://portal.thirdweb.com/payments/swap`,
             label: "Setup Swaps",
-            target: "_blank",
           }}
         />
       </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/EmptyState.tsx

@@ -1,18 +1,20 @@
+import { XIcon } from "lucide-react";
 import { Card } from "@/components/ui/card";
 
 export function EmptyState(props: {
-  icon: React.FC<{ className?: string }>;
   title: string;
   description: string;
   buttons: Array<React.ReactNode>;
 }) {
   return (
-    <Card className="flex flex-col p-16 gap-8 items-center justify-center">
-      <div className="bg-violet-800/25 text-muted-foreground rounded-full size-16 flex items-center justify-center">
-        <props.icon className="size-8 text-violet-500" />
+    <Card className="flex flex-col p-16 gap-5 items-center justify-center">
+      <div className="rounded-full p-2.5 border bg-background">
+        <XIcon className="size-5 text-muted-foreground" />
       </div>
       <div className="flex flex-col gap-1 items-center text-center">
-        <h3 className="text-foreground font-medium text-xl">{props.title}</h3>
+        <h3 className="text-foreground font-medium text-lg tracking-tight">
+          {props.title}
+        </h3>
         <p className="text-muted-foreground text-sm max-w-md">
           {props.description}
         </p>