diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx index 5ab227d5e3b..bb9c4def403 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/page.tsx @@ -74,7 +74,7 @@ export default async function RoutesPage(props: { diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx new file mode 100644 index 00000000000..17ef52b59cc --- /dev/null +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { CodeIcon, WebhookIcon } from "lucide-react"; +import { FeatureCard } from "./FeatureCard.client"; + +export function AdvancedSection({ + teamSlug, + projectSlug, +}: { + teamSlug: string; + projectSlug: string; +}) { + return ( +
+
+

Going Further

+

+ Advanced features to drive revenue in your app. +

+
+
+ + +
+
+ ); +} diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx index e6ac59f9e92..213fbddb8d0 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx @@ -1,35 +1,80 @@ "use client"; +import { ArrowRightIcon, ClockIcon } from "lucide-react"; import Link from "next/link"; import { reportPaymentCardClick } from "@/analytics/report"; +import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; export function FeatureCard(props: { title: string; description: string; - icon: React.ReactNode; + badge?: { label: string; variant?: "outline" | "success" | "default" }; id: string; + icon: React.FC<{ className?: string }>; + color?: "green" | "violet"; + setupTime?: number; + features?: string[]; link: { href: string; label: string; target?: string }; }) { return ( - -
- {props.icon} -
-
-

{props.title}

-

{props.description}

+ +
+
+
+ +
+ {props.badge && ( + + {props.badge.label} + + )} +
+
+

{props.title}

+

+ {props.description} +

+
+ {(props.setupTime || props.features) && ( +
+ {props.setupTime && ( +

+ + {props.setupTime} minute{props.setupTime > 1 && "s"} setup time +

+ )} + {props.features && ( +
    + {props.features.map((feature) => ( +
  • + + {feature} +
    • + ))} +
+ )} +
+ )}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.tsx index e896757b2c3..40710aea991 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.tsx @@ -118,7 +118,7 @@ export function PaymentHistory(props: { ); } -function TableRow(props: { purchase: Payment; client: ThirdwebClient }) { +export function TableRow(props: { purchase: Payment; client: ThirdwebClient }) { const { purchase } = props; const originAmount = toTokens( purchase.originAmount, @@ -197,7 +197,7 @@ function TableRow(props: { purchase: Payment; client: ThirdwebClient }) { ); } -function SkeletonTableRow() { +export function SkeletonTableRow() { return ( diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx new file mode 100644 index 00000000000..2886c9c3626 --- /dev/null +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx @@ -0,0 +1,89 @@ +"use client"; + +import { BadgeDollarSignIcon, CodeIcon, LinkIcon } from "lucide-react"; +import { FeatureCard } from "./FeatureCard.client"; + +export function QuickStartSection({ + teamSlug, + projectSlug, +}: { + teamSlug: string; + projectSlug: string; +}) { + return ( +
+
+

Quick Start

+

+ Choose how to integrate payments into your project. +

+
+
+ + + +
+
+ ); +} diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/RecentPaymentsSection.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/RecentPaymentsSection.client.tsx new file mode 100644 index 00000000000..078d1d4d151 --- /dev/null +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/RecentPaymentsSection.client.tsx @@ -0,0 +1,119 @@ +"use client"; + +import { useQuery } from "@tanstack/react-query"; +import { ArrowRightIcon, CreditCardIcon } from "lucide-react"; +import Link from "next/link"; +import { useMemo } from "react"; +import type { ThirdwebClient } from "thirdweb"; +import { + getPayments, + type PaymentsResponse, +} from "@/api/universal-bridge/developer"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { TableHeading, TableHeadingRow } from "./common"; +import { SkeletonTableRow, TableRow } from "./PaymentHistory"; + +export function RecentPaymentsSection(props: { + client: ThirdwebClient; + projectClientId: string; + teamId: string; +}) { + const { data: payPurchaseData, isLoading } = useQuery< + PaymentsResponse, + Error + >({ + queryFn: async () => { + const res = await getPayments({ + clientId: props.projectClientId, + limit: 10, + offset: 0, + teamId: props.teamId, + }); + return res; + }, + queryKey: ["recent-payments", props.projectClientId], + refetchInterval: 10_000, + }); + const isEmpty = useMemo( + () => !payPurchaseData?.data.length, + [payPurchaseData], + ); + return ( +
+
+

+ Recent Payments +

+

+ The latest payments from your project. +

+
+ {!isEmpty || isLoading ? ( + + + + + Sent + Received + Type + Status + Recipient + Date + + + + {payPurchaseData && !isLoading + ? payPurchaseData.data.map((purchase) => { + return ( + + ); + }) + : new Array(10).fill(0).map((_, i) => ( + // biome-ignore lint/suspicious/noArrayIndexKey: ok + + ))} + +
+ + ) : ( + +
+ +
+
+

+ No payments yet +

+

+ Start accepting crypto payments with payment links, prebuilt + components, or custom branded experiences. +

+
+
+ + +
+ + )} +
+ ); +} 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 index 86057c14c35..eb52b5a34bc 100644 --- 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 @@ -28,9 +28,7 @@ export default async function Layout(props: { Payments

- Payments allows your users to bridge, swap, and purchase - cryptocurrencies and execute transactions with any fiat options or - tokens via cross-chain routing.{" "} + Send and accept payments with cross-chain token routing.{" "} -

-
- } - id="earn_fees" - link={{ - href: `/team/${params.team_slug}/${params.project_slug}/payments/settings`, - label: "Configure", - }} - /> - } - id="create_payment_links" - link={{ - href: `/pay`, - label: "Create", - }} - /> - } - id="sell_your_token" - link={{ - href: `/team/${params.team_slug}/${params.project_slug}/tokens`, - label: "Launch Token", - }} - /> - } - id="get_notified" - link={{ - href: `/team/${params.team_slug}/${params.project_slug}/payments/webhooks`, - label: "Setup", - }} - /> - } - id="sell_products" - link={{ - href: "https://portal.thirdweb.com/payments/products", - label: "Get Started", - target: "_blank", - }} - /> - } - id="customize_your_experience" - link={{ - href: "https://payments.thirdweb.com/reference", - label: "Docs", - target: "_blank", - }} - /> -
- -
-
-
- -
-
+
+ +
+ +
+ +
); }