@wopr-network/platform-ui-core 1.27.8 → 1.27.9

package/src/components/billing/dividend-pool-stats.tsx

@@ -11,11 +11,7 @@ interface DividendPoolStatsProps {
   perUserCents: number;
 }
 
-export function DividendPoolStats({
-  poolCents,
-  activeUsers,
-  perUserCents,
-}: DividendPoolStatsProps) {
+export function DividendPoolStats({ poolCents, activeUsers, perUserCents }: DividendPoolStatsProps) {
   if (poolCents === 0 && activeUsers === 0) {
     return (
       <motion.div
@@ -28,9 +24,7 @@ export function DividendPoolStats({
             <CardTitle className="text-base">Community Pool</CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground">
-              Pool building... check back after the first purchase day.
-            </p>
+            <p className="text-sm text-muted-foreground">Pool building... check back after the first purchase day.</p>
           </CardContent>
         </Card>
       </motion.div>
@@ -53,27 +47,19 @@ export function DividendPoolStats({
         <CardContent>
           <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:gap-6 text-sm">
             <div>
-              <span className="block text-xs uppercase tracking-wider text-primary/60">
-                Today&apos;s pool
-              </span>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">Today&apos;s pool</span>
               <span className="font-bold text-lg font-mono text-terminal">{poolDollars}</span>
             </div>
             <div>
-              <span className="block text-xs uppercase tracking-wider text-primary/60">
-                Active users
-              </span>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">Active users</span>
               <span className="font-bold text-lg font-mono flex items-center gap-1.5">
                 <UsersIcon className="size-4 text-muted-foreground" />
                 {activeUsers}
               </span>
             </div>
             <div>
-              <span className="block text-xs uppercase tracking-wider text-primary/60">
-                Your share
-              </span>
-              <span className="font-bold text-lg font-mono text-terminal">
-                {perUserDollars}/day
-              </span>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">Your share</span>
+              <span className="font-bold text-lg font-mono text-terminal">{perUserDollars}/day</span>
             </div>
           </div>
           <p className="mt-3 text-xs text-muted-foreground">

package/src/components/billing/first-dividend-dialog.tsx

@@ -93,8 +93,8 @@ export function FirstDividendDialog({ todayAmountCents }: FirstDividendDialogPro
               <span className="font-mono tabular-nums">{formatCreditStandard(animatedAmount)}</span>
             </DialogTitle>
             <DialogDescription>
-              This is your community dividend &mdash; a share of the platform&apos;s daily margin,
-              distributed equally to all active users. Stay active to keep earning.
+              This is your community dividend &mdash; a share of the platform&apos;s daily margin, distributed equally
+              to all active users. Stay active to keep earning.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter className="justify-center sm:justify-center">

package/src/components/billing/org-billing-page.tsx

@@ -23,14 +23,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { CreditDetailed } from "@/components/ui/credit-detailed";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { toUserMessage } from "@/lib/errors";
 import { formatCreditStandard } from "@/lib/format-credit";
 import type { OrgCreditBalance, OrgMemberUsageRow } from "@/lib/org-billing-api";
@@ -108,9 +101,7 @@ export function OrgBillingPage({ orgId, orgName, isAdmin }: OrgBillingPageProps)
   const handleSetDefault = useCallback(
     async (paymentMethodId: string) => {
       setSettingDefault(paymentMethodId);
-      setPaymentMethods((pms) =>
-        pms.map((pm) => ({ ...pm, isDefault: pm.id === paymentMethodId })),
-      );
+      setPaymentMethods((pms) => pms.map((pm) => ({ ...pm, isDefault: pm.id === paymentMethodId })));
       try {
         await setOrgDefaultPaymentMethod(orgId, paymentMethodId);
       } catch {
@@ -204,9 +195,7 @@ export function OrgBillingPage({ orgId, orgName, isAdmin }: OrgBillingPageProps)
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4, delay: sectionDelays.balance, ease: "easeOut" }}
       >
-        <CreditBalance
-          data={{ balance: balance.balance, dailyBurn: balance.dailyBurn, runway: balance.runway }}
-        />
+        <CreditBalance data={{ balance: balance.balance, dailyBurn: balance.dailyBurn, runway: balance.runway }} />
       </motion.div>
 
       {/* Buy Credits (admin only) */}
@@ -237,9 +226,7 @@ export function OrgBillingPage({ orgId, orgName, isAdmin }: OrgBillingPageProps)
             </CardHeader>
             <CardContent>
               {members.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  No usage data for this billing period.
-                </p>
+                <p className="text-sm text-muted-foreground">No usage data for this billing period.</p>
               ) : (
                 <div className="overflow-x-auto">
                   <Table>
@@ -310,17 +297,11 @@ export function OrgBillingPage({ orgId, orgName, isAdmin }: OrgBillingPageProps)
             ) : (
               <div className="space-y-3">
                 {paymentMethods.map((pm) => (
-                  <div
-                    key={pm.id}
-                    className="flex items-center justify-between rounded-md border p-3"
-                  >
+                  <div key={pm.id} className="flex items-center justify-between rounded-md border p-3">
                     <p className="text-sm font-medium font-mono">
                       **** {pm.last4}
                       {pm.isDefault && (
-                        <Badge
-                          variant="outline"
-                          className="ml-2 border-primary/25 text-primary text-xs"
-                        >
+                        <Badge variant="outline" className="ml-2 border-primary/25 text-primary text-xs">
                           Default
                         </Badge>
                       )}
@@ -365,16 +346,12 @@ export function OrgBillingPage({ orgId, orgName, isAdmin }: OrgBillingPageProps)
               </>
             )}
           </CardContent>
-          <AlertDialog
-            open={!!deletingPmId}
-            onOpenChange={(open) => !open && setDeletingPmId(null)}
-          >
+          <AlertDialog open={!!deletingPmId} onOpenChange={(open) => !open && setDeletingPmId(null)}>
             <AlertDialogContent>
               <AlertDialogHeader>
                 <AlertDialogTitle>Remove Payment Method</AlertDialogTitle>
                 <AlertDialogDescription>
-                  This payment method will be permanently removed from your organization. This
-                  action cannot be undone.
+                  This payment method will be permanently removed from your organization. This action cannot be undone.
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>

package/src/components/billing/payment-method-picker.tsx

@@ -56,19 +56,11 @@ export function PaymentMethodPicker({ methods, onSelect, onBack }: PaymentMethod
   return (
     <div className="space-y-3">
       {onBack && (
-        <button
-          type="button"
-          onClick={onBack}
-          className="text-sm text-muted-foreground hover:text-foreground"
-        >
+        <button type="button" onClick={onBack} className="text-sm text-muted-foreground hover:text-foreground">
           &larr; Back
         </button>
       )}
-      <Input
-        placeholder="Search token or network..."
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-      />
+      <Input placeholder="Search token or network..." value={search} onChange={(e) => setSearch(e.target.value)} />
       <div className="flex flex-wrap gap-2">
         {FILTERS.map((f) => (
           <button

package/src/components/billing/suspension-banner.tsx

@@ -16,10 +16,7 @@ export function SuspensionBanner() {
 
   const load = useCallback(async () => {
     try {
-      const [data, summaryData] = await Promise.all([
-        getCreditBalance(),
-        getBillingUsageSummary().catch(() => null),
-      ]);
+      const [data, summaryData] = await Promise.all([getCreditBalance(), getBillingUsageSummary().catch(() => null)]);
       setBalance(data.balance);
       setRunway(data.runway);
       setSummary(summaryData);
@@ -40,9 +37,7 @@ export function SuspensionBanner() {
       <LowBalanceBanner balance={balance} runway={runway} global />
       {summary && summary.amountDue > 0 && (
         <Banner variant="warning" role="alert">
-          <span className="flex-1">
-            {formatCreditStandard(summary.amountDue)} due this billing period
-          </span>
+          <span className="flex-1">{formatCreditStandard(summary.amountDue)} due this billing period</span>
           <Link href="/billing/usage" className="font-semibold underline underline-offset-4">
             View usage
           </Link>

package/src/components/billing/transaction-history.tsx

@@ -11,20 +11,22 @@ import {
   SparklesIcon,
   WrenchIcon,
 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { CreditTransaction, CreditTransactionType } from "@/lib/api";
-import { getCreditHistory } from "@/lib/api";
+import { mapTransactionRows } from "@/lib/api";
 import { formatCreditStandard } from "@/lib/format-credit";
+import { trpc } from "@/lib/trpc";
 import { cn } from "@/lib/utils";
 
 const TYPE_CONFIG: Record<CreditTransactionType, { icon: typeof ArrowUpIcon; label: string }> = {
   purchase: { icon: ArrowUpIcon, label: "Purchase" },
   signup_credit: { icon: GiftIcon, label: "Signup credit" },
   bot_runtime: { icon: WrenchIcon, label: "Bot runtime" },
+  adapter_usage: { icon: ArrowDownIcon, label: "LLM Inference" },
   refund: { icon: RotateCcwIcon, label: "Refund" },
   bonus: { icon: SparklesIcon, label: "Bonus" },
   adjustment: { icon: SlidersHorizontalIcon, label: "Adjustment" },
@@ -41,44 +43,12 @@ const staggerItem = {
 };
 
 export function TransactionHistory() {
-  const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
-  const [cursor, setCursor] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
 
-  const loadInitial = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await getCreditHistory();
-      setTransactions(res.transactions);
-      setCursor(res.nextCursor);
-    } catch {
-      setError("Failed to load transactions.");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    loadInitial();
-  }, [loadInitial]);
-
-  async function loadMore() {
-    if (!cursor) return;
-    setLoadingMore(true);
-    try {
-      const res = await getCreditHistory(cursor);
-      setTransactions((prev) => [...prev, ...res.transactions]);
-      setCursor(res.nextCursor);
-    } catch {
-      setError("Failed to load more transactions.");
-    } finally {
-      setLoadingMore(false);
-    }
-  }
+  const { data: raw, isLoading: loading, error: queryError, refetch } = trpc.billing.creditsDailySummary.useQuery({});
+  const rows = Array.isArray((raw as { rows?: unknown[] })?.rows) ? (raw as { rows: unknown[] }).rows : [];
+  const transactions: CreditTransaction[] = mapTransactionRows(rows as Parameters<typeof mapTransactionRows>[0]);
+  const error = queryError ? "Failed to load transactions." : null;
 
   if (loading) {
     return (
@@ -115,13 +85,7 @@ export function TransactionHistory() {
         <CardContent>
           <div className="flex h-20 flex-col items-center justify-center gap-2 text-muted-foreground">
             <p>{error}</p>
-            <Button
-              type="button"
-              variant="link"
-              size="sm"
-              onClick={loadInitial}
-              className="h-auto p-0"
-            >
+            <Button type="button" variant="link" size="sm" onClick={() => refetch()} className="h-auto p-0">
               Retry
             </Button>
           </div>
@@ -185,12 +149,7 @@ export function TransactionHistory() {
                           </div>
                         </div>
                       </div>
-                      <span
-                        className={cn(
-                          "font-mono font-medium",
-                          isPositive ? "text-emerald-500" : "text-red-500",
-                        )}
-                      >
+                      <span className={cn("font-mono font-medium", isPositive ? "text-emerald-500" : "text-red-500")}>
                         {isPositive ? "+" : "-"}
                         {formatCreditStandard(Math.abs(tx.amount))}
                       </span>
@@ -224,13 +183,6 @@ export function TransactionHistory() {
               })}
             </div>
             {error && <p className="text-sm text-destructive">{error}</p>}
-            {cursor && (
-              <div className="pt-2">
-                <Button variant="outline" size="sm" onClick={loadMore} disabled={loadingMore}>
-                  {loadingMore ? "Loading more..." : "Load more"}
-                </Button>
-              </div>
-            )}
           </>
         )}
       </CardContent>