wip: payment link creation

Author: gregfromstl

apps/dashboard/src/@/api/universal-bridge/developer.ts

@@ -1,4 +1,5 @@
 "use server";
+import type { Address } from "thirdweb";
 import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";
 
@@ -96,6 +97,112 @@ export async function deleteWebhook(props: {
   return;
 }
 
+export type PaymentLink = {
+  id: string;
+  link: string;
+  title: string;
+  imageUrl: string;
+  createdAt: string;
+  updatedAt: string;
+  destinationToken: {
+    chainId: number;
+    address: Address;
+    symbol: string;
+    name: string;
+    decimals: number;
+    iconUri: string;
+  };
+  receiver: Address;
+  amount: bigint;
+};
+
+export async function getPaymentLinks(props: {
+  clientId: string;
+  teamId: string;
+}): Promise<Array<PaymentLink>> {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
+    },
+    method: "GET",
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = (await res.json()) as {
+    data: Array<PaymentLink & { amount: string }>;
+  };
+  return json.data.map((link) => ({
+    id: link.id,
+    link: link.link,
+    title: link.title,
+    imageUrl: link.imageUrl,
+    createdAt: link.createdAt,
+    updatedAt: link.updatedAt,
+    destinationToken: {
+      chainId: link.destinationToken.chainId,
+      address: link.destinationToken.address,
+      symbol: link.destinationToken.symbol,
+      name: link.destinationToken.name,
+      decimals: link.destinationToken.decimals,
+      iconUri: link.destinationToken.iconUri,
+    },
+    receiver: link.receiver,
+    amount: BigInt(link.amount),
+  }));
+}
+
+export async function createPaymentLink(props: {
+  clientId: string;
+  teamId: string;
+  title: string;
+  imageUrl: string;
+  intent: {
+    destinationChainId: number;
+    destinationTokenAddress: Address;
+    receiver: Address;
+    amount: bigint;
+    purchaseData?: unknown;
+  };
+}) {
+  const authToken = await getAuthToken();
+
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/links`, {
+    body: JSON.stringify({
+      title: props.title,
+      imageUrl: props.imageUrl,
+      intent: {
+        destinationChainId: props.intent.destinationChainId,
+        destinationTokenAddress: props.intent.destinationTokenAddress,
+        receiver: props.intent.receiver,
+        amount: props.intent.amount.toString(),
+        purchaseData: props.intent.purchaseData,
+      },
+    }),
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
+    },
+    method: "POST",
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
 export type Fee = {
   feeRecipient: string;
   feeBps: number;

apps/dashboard/src/@/api/universal-bridge/tokens.ts

@@ -13,12 +13,18 @@ export type TokenMetadata = {
   iconUri?: string;
 };
 
-export async function getUniversalBridgeTokens(props: { chainId?: number }) {
+export async function getUniversalBridgeTokens(props: {
+  chainId?: number;
+  address?: string;
+}) {
   const url = new URL(`${UB_BASE_URL}/v1/tokens`);
 
   if (props.chainId) {
     url.searchParams.append("chainId", String(props.chainId));
   }
+  if (props.address) {
+    url.searchParams.append("tokenAddress", props.address);
+  }
   url.searchParams.append("limit", "1000");
 
   const res = await fetch(url.toString(), {

apps/dashboard/src/@/components/blocks/TokenSelector.tsx

@@ -14,6 +14,7 @@ import { useTokensData } from "@/hooks/tokens";
 import { replaceIpfsUrl } from "@/lib/sdk";
 import { cn } from "@/lib/utils";
 import { fallbackChainIcon } from "@/utils/chain-icons";
+import { Spinner } from "../ui/Spinner/Spinner";
 
 type Option = { label: string; value: string };
 
@@ -186,9 +187,14 @@ export function TokenSelector(props: {
       options={options}
       overrideSearchFn={searchFn}
       placeholder={
-        tokensQuery.isPending
-          ? "Loading Tokens"
-          : props.placeholder || "Select Token"
+        tokensQuery.isPending ? (
+          <div className="flex items-center gap-2">
+            <Spinner className="size-4" />
+            <span>Loading Tokens</span>
+          </div>
+        ) : (
+          props.placeholder || "Select Token"
+        )
       }
       popoverContentClassName={props.popoverContentClassName}
       renderOption={renderOption}

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -22,7 +22,7 @@ interface SelectWithSearchProps
   }[];
   value: string | undefined;
   onValueChange: (value: string) => void;
-  placeholder: string;
+  placeholder: string | React.ReactNode;
   searchPlaceholder?: string;
   className?: string;
   overrideSearchFn?: (

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -56,7 +56,7 @@ export function TabLinks(props: {
                 <Link
                   aria-disabled={tab.isDisabled}
                   className={cn(
-                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-accent lg:text-sm",
+                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm lg:text-sm",
                     !tab.isActive && !tab.isDisabled && "hover:text-foreground",
                     tab.isDisabled && "pointer-events-none",
                     tab.isActive && "!text-foreground",

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

@@ -0,0 +1,23 @@
+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" />
+      </div>
+      <div className="flex flex-col gap-1 items-center text-center">
+        <h3 className="text-foreground font-medium text-xl">{props.title}</h3>
+        <p className="text-muted-foreground text-sm max-w-md">
+          {props.description}
+        </p>
+      </div>
+      <div className="flex gap-4">{props.buttons.map((button) => button)}</div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { OctagonAlertIcon } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+export function ErrorState(props: {
+  title: string;
+  description: string;
+  buttons: Array<React.ReactNode>;
+}) {
+  return (
+    <Card className="flex flex-col p-16 gap-8 items-center justify-center">
+      <OctagonAlertIcon className="size-8 text-red-500" />
+      <div className="flex flex-col gap-1 items-center text-center">
+        <h3 className="text-foreground font-medium text-xl">{props.title}</h3>
+        <p className="text-muted-foreground text-sm max-w-md">
+          {props.description}
+        </p>
+      </div>
+      {props.buttons && (
+        <div className="flex gap-4">
+          {props.buttons.map((button) => button)}
+        </div>
+      )}
+    </Card>
+  );
+}

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

@@ -5,6 +5,7 @@ import {
   getUniversalBridgeWalletUsage,
 } from "@/api/analytics";
 import type { Range } from "@/components/analytics/date-range-selector";
+import { Card } from "@/components/ui/card";
 import { CodeServer } from "@/components/ui/code/code.server";
 import { Skeleton } from "@/components/ui/skeleton";
 import { BuyWidgetFTUX } from "./BuyWidgetFTUX";
@@ -17,7 +18,6 @@ import { PayNewCustomers } from "./PayNewCustomers";
 import { Payouts } from "./Payouts";
 import { TotalPayVolume } from "./TotalPayVolume";
 import { TotalVolumePieChart } from "./TotalVolumePieChart";
-import { Card } from "@/components/ui/card";
 
 export async function PayAnalytics(props: {
   projectClientId: string;

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

@@ -11,9 +11,10 @@ import {
 import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
 import { PaginationButtons } from "@/components/blocks/pagination-buttons";
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
-import { TableRow, SkeletonTableRow } from "./PaymentsTableRow";
-import { CardHeading, TableHeading, TableHeadingRow } from "./common";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TableData, TableHeading, TableHeadingRow } from "./common";
 import { formatTokenAmount } from "./format";
+import { TableRow } from "./PaymentsTableRow";
 
 const pageSize = 50;
 
@@ -158,3 +159,28 @@ function getCSVData(data: Payment[]) {
 
   return { header, rows };
 }
+
+function SkeletonTableRow() {
+  return (
+    <tr className="border-border border-b">
+      <TableData>
+        <Skeleton className="h-7 w-20" />
+      </TableData>
+      <TableData>
+        <Skeleton className="h-7 w-20" />
+      </TableData>
+      <TableData>
+        <Skeleton className="h-7 w-20 rounded-2xl" />
+      </TableData>
+      <TableData>
+        <Skeleton className="h-7 w-20 rounded-2xl" />
+      </TableData>
+      <TableData>
+        <Skeleton className="h-7 w-[140px]" />
+      </TableData>
+      <TableData>
+        <Skeleton className="h-7 w-[200px]" />
+      </TableData>
+    </tr>
+  );
+}

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

@@ -3,7 +3,6 @@ import { type ThirdwebClient, toTokens } from "thirdweb";
 import type { Payment } from "@/api/universal-bridge/developer";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
-import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import { TableData } from "./common";
 import { formatTokenAmount } from "./format";
@@ -86,28 +85,3 @@ export function TableRow(props: { purchase: Payment; client: ThirdwebClient }) {
     </tr>
   );
 }
-
-export function SkeletonTableRow() {
-  return (
-    <tr className="border-border border-b">
-      <TableData>
-        <Skeleton className="h-7 w-20" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-7 w-20" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-7 w-20 rounded-2xl" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-7 w-20 rounded-2xl" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-7 w-[140px]" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-7 w-[200px]" />
-      </TableData>
-    </tr>
-  );
-}