feat: payments overview page

gregfromstl · gregfromstl · commit 036409c4309b · 2025-07-23T16:52:18.000-07:00
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/analytics/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/analytics/page.tsx
@@ -0,0 +1,85 @@
+import { ArrowUpRightIcon } from "lucide-react";
+import { redirect } from "next/navigation";
+import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+import { getAuthToken } from "@/api/auth-token";
+import { getProject } from "@/api/projects";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { loginRedirect } from "@/utils/redirects";
+import { PayAnalytics } from "../components/PayAnalytics";
+import { getUniversalBridgeFiltersFromSearchParams } from "../components/time";
+
+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}/universal-bridge`,
+    );
+  }
+
+  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 (
+    <ResponsiveSearchParamsProvider value={searchParams}>
+      <div>
+        <PayAnalytics
+          client={client}
+          interval={interval}
+          projectClientId={project.publishableKey}
+          projectId={project.id}
+          range={range}
+          teamId={project.teamId}
+        />
+
+        <div className="h-10" />
+        <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)]">
+          <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
+          <div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex flex-col gap-1">
+              <h3 className="font-medium text-lg">Get Started with Payments</h3>
+              <p className="text-muted-foreground text-sm">
+                Simple, instant, and secure payments across any token and chain.
+              </p>
+            </div>
+            <a
+              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"
+              href="https://portal.thirdweb.com/payments"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Learn More
+              <ArrowUpRightIcon className="size-4" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </ResponsiveSearchParamsProvider>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx
@@ -8,7 +8,7 @@ import { TabButtons } from "@/components/ui/tabs";
 
 type Tab = "embed" | "sdk" | "api";
 
-export function PayEmbedFTUX(props: {
+export function BuyWidgetFTUX(props: {
   clientId: string;
   codeExamples: {
     embed: React.ReactNode;
@@ -21,7 +21,7 @@ export function PayEmbedFTUX(props: {
     <div className="rounded-lg border bg-card">
       <div className="border-b border-dashed p-4">
         <h2 className="font-semibold text-lg tracking-tight">
-          Start Monetizing Your App
+          Setup Payments to View Analytics
         </h2>
       </div>
 
@@ -56,7 +56,7 @@ export function PayEmbedFTUX(props: {
           <Button asChild size="sm" variant="outline">
             <Link
               className="gap-2"
-              href="https://portal.thirdweb.com/pay"
+              href="https://portal.thirdweb.com/payments"
               rel="noopener noreferrer"
               target="_blank"
             >
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx
@@ -7,10 +7,10 @@ import {
 import type { Range } from "@/components/analytics/date-range-selector";
 import { CodeServer } from "@/components/ui/code/code.server";
 import { Skeleton } from "@/components/ui/skeleton";
+import { BuyWidgetFTUX } from "./BuyWidgetFTUX";
 import { apiCode, embedCode, sdkCode } from "./code-examples";
 import { PayAnalyticsFilter } from "./PayAnalyticsFilter";
 import { PayCustomersTable } from "./PayCustomersTable";
-import { PayEmbedFTUX } from "./PayEmbedFTUX";
 import { PaymentHistory } from "./PaymentHistory";
 import { PaymentsSuccessRate } from "./PaymentsSuccessRate";
 import { PayNewCustomers } from "./PayNewCustomers";
@@ -67,7 +67,7 @@ export async function PayAnalytics(props: {
 
   if (!hasVolume && !hasWallet) {
     return (
-      <PayEmbedFTUX
+      <BuyWidgetFTUX
         clientId={props.projectClientId}
         codeExamples={
           {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/layout.tsx
@@ -18,7 +18,7 @@ export default async function Layout(props: {
     redirect(`/team/${params.team_slug}`);
   }
 
-  const payLayoutPath = `/team/${params.team_slug}/${params.project_slug}/universal-bridge`;
+  const payLayoutPath = `/team/${params.team_slug}/${params.project_slug}/payments`;
 
   return (
     <div className="flex grow flex-col">
@@ -32,7 +32,7 @@ export default async function Layout(props: {
             cryptocurrencies and execute transactions with any fiat options or
             tokens via cross-chain routing.{" "}
             <UnderlineLink
-              href="https://portal.thirdweb.com/pay"
+              href="https://portal.thirdweb.com/payments"
               rel="noopener noreferrer"
               target="_blank"
             >
@@ -45,10 +45,15 @@ export default async function Layout(props: {
         <TabPathLinks
           className="w-full"
           links={[
+            {
+              exactMatch: true,
+              name: "Overview",
+              path: `${payLayoutPath}`,
+            },
             {
               exactMatch: true,
               name: "Analytics",
-              path: payLayoutPath,
+              path: `${payLayoutPath}/analytics`,
             },
             {
               name: "Webhooks",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
@@ -1,12 +1,20 @@
-import { ArrowUpRightIcon } from "lucide-react";
+import {
+  ArrowLeftRightIcon,
+  ArrowUpRightIcon,
+  BadgeDollarSignIcon,
+  BellDotIcon,
+  CoinsIcon,
+  HammerIcon,
+  LinkIcon,
+} from "lucide-react";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ResponsiveSearchParamsProvider } from "responsive-rsc";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/projects";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { loginRedirect } from "@/utils/redirects";
-import { PayAnalytics } from "./components/PayAnalytics";
-import { getUniversalBridgeFiltersFromSearchParams } from "./components/time";
 
 export default async function Page(props: {
   params: Promise<{
@@ -34,29 +42,68 @@ export default async function Page(props: {
   }
 
   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 (
     <ResponsiveSearchParamsProvider value={searchParams}>
       <div>
-        <PayAnalytics
-          client={client}
-          interval={interval}
-          projectClientId={project.publishableKey}
-          projectId={project.id}
-          range={range}
-          teamId={project.teamId}
-        />
+        <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 className="size-5" />}
+            link={{
+              href: `/team/${params.team_slug}/${params.project_slug}/payments/settings`,
+              label: "Configure",
+            }}
+          />
+          <FeatureCard
+            title="Create Payment Links"
+            description="Create shareable URLs to receive any token in seconds."
+            icon={<LinkIcon className="size-5" />}
+            link={{
+              href: `/pay`,
+              label: "Create",
+            }}
+          />
+          <FeatureCard
+            title="Sell Your Token"
+            description="Allow users to swap from any token to your token from your app."
+            icon={<ArrowLeftRightIcon className="size-5" />}
+            link={{
+              href: `/team/${params.team_slug}/${params.project_slug}/tokens`,
+              label: "Launch Token",
+            }}
+          />
+          <FeatureCard
+            title="Get Notified"
+            description="Create Webhooks to get notified on each purchase or transaction."
+            icon={<BellDotIcon className="size-5" />}
+            link={{
+              href: `/team/${params.team_slug}/${params.project_slug}/payments/webhooks`,
+              label: "Setup",
+            }}
+          />
+          <FeatureCard
+            title="Sell Products"
+            description="Sell physical or digital products with an easy-to-configure component."
+            icon={<CoinsIcon className="size-5" />}
+            link={{
+              href: "https://portal.thirdweb.com/payments/products",
+              label: "Get Started",
+              target: "_blank",
+            }}
+          />
+          <FeatureCard
+            title="Customize Your Experience"
+            description="Fully customizable backend API to create your own branded flows."
+            icon={<HammerIcon className="size-5" />}
+            link={{
+              href: "https://payments.thirdweb.com/reference",
+              label: "Docs",
+              target: "_blank",
+            }}
+          />
+        </div>
 
         <div className="h-10" />
         <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)]">
@@ -70,7 +117,7 @@ export default async function Page(props: {
             </div>
             <a
               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"
-              href="https://portal.thirdweb.com/pay"
+              href="https://portal.thirdweb.com/payments"
               rel="noopener noreferrer"
               target="_blank"
             >
@@ -83,3 +130,27 @@ export default async function Page(props: {
     </ResponsiveSearchParamsProvider>
   );
 }
+
+function FeatureCard(props: {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  link: { href: string; label: string; target?: string };
+}) {
+  return (
+    <Card className="p-4 flex flex-col items-start gap-4">
+      <div className="text-muted-foreground rounded-full border bg-background size-12 flex items-center justify-center">
+        {props.icon}
+      </div>
+      <div className="flex flex-col gap-0.5">
+        <h3 className="font-semibold">{props.title}</h3>
+        <p className="text-muted-foreground text-sm">{props.description}</p>
+      </div>
+      <Button size="sm" variant="default" className="h-8" asChild>
+        <Link href={props.link.href} target={props.link.target}>
+          {props.link.label}
+        </Link>
+      </Button>
+    </Card>
+  );
+}
