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

package/src/components/billing/byok-callout.tsx

@@ -34,8 +34,7 @@ export function ByokCallout({ compact }: { compact?: boolean }) {
   if (compact) {
     return (
       <p className="text-xs text-muted-foreground">
-        All plans are BYOK — you pay your AI provider directly. {brandName()} never touches your
-        inference.
+        All plans are BYOK — you pay your AI provider directly. {brandName()} never touches your inference.
       </p>
     );
   }
@@ -49,8 +48,8 @@ export function ByokCallout({ compact }: { compact?: boolean }) {
         <div className="space-y-1">
           <p className="text-sm font-medium">Bring Your Own Keys</p>
           <p className="text-sm text-muted-foreground">
-            All plans are BYOK — you pay your AI provider directly. {brandName()} never touches your
-            inference. We only charge for the orchestration layer: containers, plugins, and support.
+            All plans are BYOK — you pay your AI provider directly. {brandName()} never touches your inference. We only
+            charge for the orchestration layer: containers, plugins, and support.
           </p>
         </div>
       </CardContent>
@@ -62,8 +61,7 @@ function HostedCallout({ compact }: { compact?: boolean }) {
   if (compact) {
     return (
       <p className="text-xs text-muted-foreground">
-        Hosted adapter — transparent per-use pricing with no markup surprises. Switch to BYOK
-        anytime in settings.
+        Hosted adapter — transparent per-use pricing with no markup surprises. Switch to BYOK anytime in settings.
       </p>
     );
   }
@@ -77,8 +75,8 @@ function HostedCallout({ compact }: { compact?: boolean }) {
         <div className="space-y-1">
           <p className="text-sm font-medium">Hosted AI Adapter</p>
           <p className="text-sm text-muted-foreground">
-            BYOK users pay their providers directly. Hosted users pay per use — transparent pricing,
-            no markup surprises. Each plan includes a monthly hosted credit.
+            BYOK users pay their providers directly. Hosted users pay per use — transparent pricing, no markup
+            surprises. Each plan includes a monthly hosted credit.
           </p>
         </div>
       </CardContent>

package/src/components/billing/confirmation-tracker.tsx

@@ -17,17 +17,12 @@ export function ConfirmationTracker({
   credited,
   txHash,
 }: ConfirmationTrackerProps) {
-  const pct =
-    confirmationsRequired > 0
-      ? Math.min(100, Math.round((confirmations / confirmationsRequired) * 100))
-      : 0;
+  const pct = confirmationsRequired > 0 ? Math.min(100, Math.round((confirmations / confirmationsRequired) * 100)) : 0;
   const detected = confirmations > 0 || credited;
 
   return (
     <div className="space-y-4 text-center">
-      <p className="text-sm text-muted-foreground">
-        {credited ? "Payment complete!" : "Payment received!"}
-      </p>
+      <p className="text-sm text-muted-foreground">{credited ? "Payment complete!" : "Payment received!"}</p>
       <p className="text-xl font-semibold">{displayAmount}</p>
 
       <div className="rounded-lg border border-border p-3 space-y-2">
@@ -44,10 +39,7 @@ export function ConfirmationTracker({
           aria-valuemin={0}
           aria-valuemax={100}
         >
-          <div
-            className="h-full rounded-full bg-primary transition-all duration-500"
-            style={{ width: `${pct}%` }}
-          />
+          <div className="h-full rounded-full bg-primary transition-all duration-500" style={{ width: `${pct}%` }} />
         </div>
       </div>
 
@@ -58,9 +50,7 @@ export function ConfirmationTracker({
           >
             {detected && <Check className="h-2.5 w-2.5" />}
           </div>
-          <span
-            className={`text-xs ${detected ? "text-muted-foreground" : "text-muted-foreground/50"}`}
-          >
+          <span className={`text-xs ${detected ? "text-muted-foreground" : "text-muted-foreground/50"}`}>
             Payment detected
           </span>
         </div>

package/src/components/billing/credit-balance-badge.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useCreditBalance } from "@/hooks/use-credit-balance";
+import { formatCreditStandard } from "@/lib/format-credit";
+import { cn } from "@/lib/utils";
+
+function balanceColorClass(balance: number): string {
+  if (balance <= 0) return "text-red-500";
+  if (balance <= 2) return "text-amber-500";
+  return "text-emerald-500";
+}
+
+/** Compact credit balance badge — use in sidebar, nav, etc. */
+export function CreditBalanceBadge({ className }: { className?: string }) {
+  const { balance } = useCreditBalance();
+  if (balance == null) return null;
+  return (
+    <span className={cn("text-xs font-mono", balanceColorClass(balance), className)}>
+      {formatCreditStandard(balance)}
+    </span>
+  );
+}

package/src/components/billing/credit-balance.tsx

@@ -53,19 +53,13 @@ export function CreditBalance({ data }: { data: CreditBalanceData }) {
           <CardTitle>Credit Balance</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div
-            className={cn("text-4xl font-bold font-mono", balanceColor(data.balance, data.runway))}
-          >
+          <div className={cn("text-4xl font-bold font-mono", balanceColor(data.balance, data.runway))}>
             {formatCreditStandard(animatedBalance)}
           </div>
           <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
             <div>
-              <span className="block text-xs uppercase tracking-wider text-primary/60">
-                Daily burn
-              </span>
-              <span className="font-medium text-foreground">
-                {formatCreditStandard(data.dailyBurn)}/day
-              </span>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">Daily burn</span>
+              <span className="font-medium text-foreground">{formatCreditStandard(data.dailyBurn)}/day</span>
             </div>
             <div>
               <span className="block text-xs uppercase tracking-wider text-primary/60">Runway</span>

package/src/components/billing/crypto-checkout.tsx

@@ -51,10 +51,7 @@ export function CryptoCheckout() {
         } else if (res.status === "expired" || res.status === "failed") {
           setStatus(res.status as PaymentStatus);
           clearInterval(interval);
-        } else if (
-          res.amountReceivedCents > 0 &&
-          res.amountReceivedCents >= res.amountExpectedCents
-        ) {
+        } else if (res.amountReceivedCents > 0 && res.amountReceivedCents >= res.amountExpectedCents) {
           setStatus("confirming");
           setStep("confirming");
         } else if (res.amountReceivedCents > 0) {
@@ -100,11 +97,7 @@ export function CryptoCheckout() {
   if (methods.length === 0) return null;
 
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 8 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3 }}
-    >
+    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
@@ -131,16 +124,8 @@ export function CryptoCheckout() {
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: 20 }}
               >
-                <PaymentMethodPicker
-                  methods={methods}
-                  onSelect={handleMethod}
-                  onBack={() => setStep("amount")}
-                />
-                {loading && (
-                  <p className="mt-2 text-xs text-muted-foreground animate-pulse">
-                    Creating checkout...
-                  </p>
-                )}
+                <PaymentMethodPicker methods={methods} onSelect={handleMethod} onBack={() => setStep("amount")} />
+                {loading && <p className="mt-2 text-xs text-muted-foreground animate-pulse">Creating checkout...</p>}
               </motion.div>
             )}
             {step === "deposit" && checkout && (
@@ -167,11 +152,7 @@ export function CryptoCheckout() {
                   credited={status === "credited"}
                 />
                 {status === "credited" && (
-                  <button
-                    type="button"
-                    onClick={handleReset}
-                    className="mt-4 text-sm text-primary hover:underline"
-                  >
+                  <button type="button" onClick={handleReset} className="mt-4 text-sm text-primary hover:underline">
                     Done — buy more credits
                   </button>
                 )}

package/src/components/billing/degraded-state-banner.tsx

@@ -38,9 +38,7 @@ export function DegradedStateBanner() {
       <Banner variant="warning" role="alert">
         <span className="flex-1">
           ACTION REQUIRED —{" "}
-          {days !== null
-            ? `${days} day${days === 1 ? "" : "s"} to resolve`
-            : "resolve soon to avoid suspension"}
+          {days !== null ? `${days} day${days === 1 ? "" : "s"} to resolve` : "resolve soon to avoid suspension"}
           {reason ? ` (${reason})` : ""}
         </span>
         <Link href="/billing" className="font-semibold underline underline-offset-4">

package/src/components/billing/deposit-view.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Check, Copy } from "lucide-react";
+import { Check, Copy, Wallet } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import type { CheckoutResult } from "@/lib/api";
 
@@ -10,11 +10,200 @@ interface DepositViewProps {
   checkout: CheckoutResult;
   status: "waiting" | "partial" | "confirming" | "credited" | "expired" | "failed";
   onBack: () => void;
+  expectedAmount?: string | null;
+  receivedAmount?: string | null;
+  token?: string;
+  decimals?: number;
 }
 
-export function DepositView({ checkout, status, onBack }: DepositViewProps) {
+function formatCrypto(raw: string, decimals: number): string {
+  const n = Number(raw) / 10 ** decimals;
+  return n.toFixed(Math.min(decimals, 8)).replace(/\.?0+$/, "");
+}
+
+// ---------------------------------------------------------------------------
+// Payment URI builder — triggers wallet apps on QR scan
+// ---------------------------------------------------------------------------
+
+const CHAIN_URI_SCHEMES: Record<string, string> = {
+  bitcoin: "bitcoin",
+  litecoin: "litecoin",
+  dogecoin: "dogecoin",
+  ethereum: "ethereum",
+  base: "ethereum",
+  "base-sepolia": "ethereum",
+  sepolia: "ethereum",
+  arbitrum: "ethereum",
+  optimism: "ethereum",
+  polygon: "ethereum",
+  avalanche: "ethereum",
+  solana: "solana",
+  tron: "tron",
+};
+
+function buildPaymentUri(chain: string, address: string, nativeAmount?: string | null, decimals?: number): string {
+  const scheme = CHAIN_URI_SCHEMES[chain.toLowerCase()];
+  if (!scheme) return address;
+
+  if (scheme === "bitcoin" || scheme === "litecoin" || scheme === "dogecoin") {
+    const d = decimals ?? 8;
+    const human = nativeAmount ? formatCrypto(nativeAmount, d) : undefined;
+    return human ? `${scheme}:${address}?amount=${human}` : `${scheme}:${address}`;
+  }
+
+  if (scheme === "ethereum") {
+    return nativeAmount ? `${scheme}:${address}?value=${nativeAmount}` : `${scheme}:${address}`;
+  }
+
+  if (scheme === "solana") {
+    const d = decimals ?? 9;
+    const human = nativeAmount ? formatCrypto(nativeAmount, d) : undefined;
+    return human ? `${scheme}:${address}?amount=${human}` : `${scheme}:${address}`;
+  }
+
+  return `${scheme}:${address}`;
+}
+
+// ---------------------------------------------------------------------------
+// Wallet detection + direct transaction submission
+// ---------------------------------------------------------------------------
+
+type WalletType = "metamask" | "solana" | "tron" | null;
+
+function detectWallet(chain: string): WalletType {
+  if (typeof window === "undefined") return null;
+  const scheme = CHAIN_URI_SCHEMES[chain.toLowerCase()];
+  if (scheme === "ethereum" && (window as { ethereum?: unknown }).ethereum) return "metamask";
+  if (scheme === "solana" && (window as { solana?: { isPhantom?: boolean } }).solana?.isPhantom) return "solana";
+  if (scheme === "tron" && (window as { tronWeb?: unknown }).tronWeb) return "tron";
+  return null;
+}
+
+function walletLabel(type: WalletType): string {
+  switch (type) {
+    case "metamask":
+      return "Pay with Wallet";
+    case "solana":
+      return "Pay with Phantom";
+    case "tron":
+      return "Pay with TronLink";
+    default:
+      return "Pay with Wallet";
+  }
+}
+
+// ERC-20 transfer(address,uint256) function selector
+const TRANSFER_SELECTOR = "0xa9059cbb";
+
+function encodeErc20Transfer(to: string, amount: string): string {
+  const addr = to.slice(2).toLowerCase().padStart(64, "0");
+  const val = BigInt(amount).toString(16).padStart(64, "0");
+  return `${TRANSFER_SELECTOR}${addr}${val}`;
+}
+
+interface WalletTxOpts {
+  walletType: WalletType;
+  depositAddress: string;
+  amount: string | null;
+  tokenType?: string;
+  contractAddress?: string | null;
+}
+
+async function sendViaWallet(opts: WalletTxOpts): Promise<string | null> {
+  const { walletType, depositAddress, amount, tokenType, contractAddress } = opts;
+  if (!amount) return null;
+
+  if (walletType === "metamask") {
+    // Find the REAL MetaMask provider — TronLink and other extensions also inject window.ethereum
+    type EthProvider = {
+      request: (args: { method: string; params?: unknown[] }) => Promise<unknown>;
+      isMetaMask?: boolean;
+    };
+    const root = (window as { ethereum?: EthProvider & { providers?: EthProvider[] } }).ethereum;
+    if (!root) return null;
+    const eth: EthProvider = root.providers?.find((p) => p.isMetaMask) ?? root;
+
+    // Check if already connected (non-prompting), only request if needed
+    let accounts = (await eth.request({ method: "eth_accounts" })) as string[];
+    if (!accounts[0]) {
+      accounts = (await eth.request({ method: "eth_requestAccounts" })) as string[];
+    }
+    if (!accounts[0]) return null;
+
+    // Build the single transaction object
+    const tx: Record<string, string> = { from: accounts[0] };
+    if (tokenType === "erc20" && contractAddress) {
+      tx.to = contractAddress;
+      tx.value = "0x0";
+      tx.data = encodeErc20Transfer(depositAddress, amount);
+    } else {
+      tx.to = depositAddress;
+      tx.value = `0x${BigInt(amount).toString(16)}`;
+    }
+
+    const txHash = (await eth.request({
+      method: "eth_sendTransaction",
+      params: [tx],
+    })) as string;
+    return txHash;
+  }
+
+  if (walletType === "solana") {
+    // Solana requires @solana/web3.js for tx construction — fall back to URI
+    return null;
+  }
+
+  if (walletType === "tron") {
+    type TronWeb = {
+      trx: { sendTransaction: (to: string, amount: number) => Promise<{ txid: string }> };
+      contract: () => {
+        at: (addr: string) => Promise<{ transfer: (to: string, amount: string) => { send: () => Promise<string> } }>;
+      };
+    };
+    const tw = (window as { tronWeb?: TronWeb }).tronWeb;
+    if (!tw) return null;
+
+    // TRC-20: call transfer() on the contract via tronWeb.contract()
+    if (tokenType === "erc20" && contractAddress) {
+      const contract = await tw.contract().at(contractAddress);
+      const txHash = await contract.transfer(depositAddress, amount).send();
+      return txHash;
+    }
+    const result = await tw.trx.sendTransaction(depositAddress, Number(amount));
+    return result.txid;
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function DepositView({
+  checkout,
+  status,
+  onBack,
+  expectedAmount,
+  receivedAmount,
+  token,
+  decimals,
+}: DepositViewProps) {
   const [copied, setCopied] = useState(false);
-  const [timeLeft, setTimeLeft] = useState(30 * 60);
+  const [walletType, setWalletType] = useState<WalletType>(null);
+  const [sending, setSending] = useState(false);
+  const sendingRef = useRef(false);
+  const [walletError, setWalletError] = useState<string | null>(null);
+  const [txSent, setTxSent] = useState(false);
+
+  useEffect(() => {
+    setWalletType(detectWallet(checkout.chain));
+  }, [checkout.chain]);
+
+  const paymentUri = useMemo(
+    () => buildPaymentUri(checkout.chain, checkout.depositAddress, expectedAmount, decimals),
+    [checkout.chain, checkout.depositAddress, expectedAmount, decimals],
+  );
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(checkout.depositAddress);
@@ -22,48 +211,108 @@ export function DepositView({ checkout, status, onBack }: DepositViewProps) {
     setTimeout(() => setCopied(false), 2000);
   }, [checkout.depositAddress]);
 
-  useEffect(() => {
-    if (status !== "waiting") return;
-    const timer = setInterval(() => setTimeLeft((t) => Math.max(0, t - 1)), 1000);
-    return () => clearInterval(timer);
-  }, [status]);
-
-  const mins = Math.floor(timeLeft / 60);
-  const secs = timeLeft % 60;
+  const handleWalletPay = useCallback(async () => {
+    if (sendingRef.current) {
+      return;
+    }
+    sendingRef.current = true;
+    setSending(true);
+    setWalletError(null);
+    try {
+      const amountToSend =
+        expectedAmount && receivedAmount
+          ? String(BigInt(expectedAmount) - BigInt(receivedAmount))
+          : (checkout.expectedAmount ?? expectedAmount);
+      const txHash = await sendViaWallet({
+        walletType,
+        depositAddress: checkout.depositAddress,
+        amount: amountToSend ?? null,
+        tokenType: checkout.type,
+        contractAddress: checkout.contractAddress,
+      });
+      if (txHash) {
+        setTxSent(true);
+      } else if (walletType === "solana") {
+        // Solana needs SDK — fall back to URI
+        window.open(paymentUri);
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Transaction rejected";
+      if (!msg.includes("User denied") && !msg.includes("rejected")) {
+        setWalletError(msg);
+      }
+    } finally {
+      sendingRef.current = false;
+      setSending(false);
+    }
+  }, [
+    walletType,
+    checkout.depositAddress,
+    checkout.type,
+    checkout.contractAddress,
+    checkout.expectedAmount,
+    expectedAmount,
+    receivedAmount,
+    paymentUri,
+  ]);
 
   return (
     <div className="space-y-4 text-center">
-      <button
-        type="button"
-        onClick={onBack}
-        className="text-sm text-muted-foreground hover:text-foreground self-start"
-      >
+      <button type="button" onClick={onBack} className="text-sm text-muted-foreground hover:text-foreground self-start">
         &larr; Back
       </button>
-      <p className="text-sm text-muted-foreground">Send exactly</p>
-      <p className="text-2xl font-semibold">{checkout.displayAmount}</p>
-      <p className="text-xs text-muted-foreground">
-        on {checkout.chain} &middot; ${checkout.amountUsd.toFixed(2)} USD
-      </p>
-      <div
-        className="mx-auto w-fit rounded-lg border border-border bg-background p-3"
-        aria-hidden="true"
-      >
-        <QRCodeSVG
-          value={checkout.depositAddress}
-          size={140}
-          bgColor="hsl(var(--background))"
-          fgColor="hsl(var(--foreground))"
-        />
+      {status === "partial" && expectedAmount && receivedAmount && decimals != null && token ? (
+        BigInt(receivedAmount) >= BigInt(expectedAmount) ? (
+          <>
+            <p className="text-sm text-primary font-medium">Full amount received</p>
+            <p className="text-2xl font-semibold">
+              {formatCrypto(receivedAmount, decimals)} {token}
+            </p>
+            <p className="text-xs text-muted-foreground animate-pulse">Waiting for on-chain confirmation...</p>
+          </>
+        ) : (
+          <>
+            <p className="text-sm text-muted-foreground">Send remaining</p>
+            <p className="text-2xl font-semibold">
+              {formatCrypto(String(BigInt(expectedAmount) - BigInt(receivedAmount)), decimals)} {token}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              on {checkout.chain} &middot; {formatCrypto(receivedAmount, decimals)} of{" "}
+              {formatCrypto(expectedAmount, decimals)} {token} received
+            </p>
+          </>
+        )
+      ) : (
+        <>
+          <p className="text-sm text-muted-foreground">Send exactly</p>
+          <p className="text-2xl font-semibold">{checkout.displayAmount}</p>
+          <p className="text-xs text-muted-foreground">
+            on {checkout.chain} &middot; ${checkout.amountUsd.toFixed(2)} USD
+          </p>
+        </>
+      )}
+
+      {/* Wallet button — primary action when wallet detected */}
+      {walletType && !txSent && (
+        <Button onClick={handleWalletPay} disabled={sending} className="w-full gap-2">
+          <Wallet className="h-4 w-4" />
+          {sending ? "Confirm in wallet..." : walletLabel(walletType)}
+        </Button>
+      )}
+      {txSent && <p className="text-sm text-primary font-medium">Transaction sent — waiting for confirmation...</p>}
+      {walletError && <p className="text-xs text-destructive">{walletError}</p>}
+
+      {/* QR + manual address — fallback or mobile */}
+      <div className="mx-auto w-fit rounded-lg border border-border bg-white p-3" aria-hidden="true">
+        <QRCodeSVG value={paymentUri} size={140} bgColor="#ffffff" fgColor="#000000" />
       </div>
+      <p className="text-[10px] text-muted-foreground">
+        {walletType ? "Or scan with another wallet" : "Scan with your wallet app"}
+      </p>
       <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2">
         <code className="flex-1 truncate text-xs font-mono">{checkout.depositAddress}</code>
         <Button variant="ghost" size="sm" onClick={handleCopy} aria-label="Copy address">
-          {copied ? (
-            <Check className="h-3.5 w-3.5 text-primary" />
-          ) : (
-            <Copy className="h-3.5 w-3.5" />
-          )}
+          {copied ? <Check className="h-3.5 w-3.5 text-primary" /> : <Copy className="h-3.5 w-3.5" />}
         </Button>
       </div>
       <div className="flex items-center justify-center gap-2 rounded-lg border border-border p-2">
@@ -71,15 +320,26 @@ export function DepositView({ checkout, status, onBack }: DepositViewProps) {
           <>
             <span className="h-2 w-2 animate-pulse rounded-full bg-yellow-500" />
             <span className="text-xs text-yellow-500">Waiting for payment...</span>
-            <span className="text-xs text-muted-foreground">
-              &middot; {mins}:{secs.toString().padStart(2, "0")}
-            </span>
           </>
         )}
         {status === "partial" && (
           <>
             <span className="h-2 w-2 rounded-full bg-blue-500" />
-            <span className="text-xs text-blue-500">Partial payment received</span>
+            <span className="text-xs text-blue-500">
+              {expectedAmount && receivedAmount && decimals != null && token ? (
+                BigInt(receivedAmount) >= BigInt(expectedAmount) ? (
+                  "Full amount received — confirming on chain"
+                ) : (
+                  <>
+                    Received {formatCrypto(receivedAmount, decimals)} of {formatCrypto(expectedAmount, decimals)}{" "}
+                    {token} &mdash; send{" "}
+                    {formatCrypto(String(BigInt(expectedAmount) - BigInt(receivedAmount)), decimals)} more
+                  </>
+                )
+              ) : (
+                "Partial payment received"
+              )}
+            </span>
           </>
         )}
         {status === "expired" && <span className="text-xs text-destructive">Payment expired</span>}

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

@@ -46,9 +46,7 @@ export function DividendBanner({ todayAmountCents, stats }: DividendBannerProps)
                 </span>{" "}
                 today.
               </p>
-              <p className="text-sm text-muted-foreground">
-                Community dividend from the daily pool
-              </p>
+              <p className="text-sm text-muted-foreground">Community dividend from the daily pool</p>
             </div>
           </div>
         </motion.div>

package/src/components/billing/dividend-eligibility.tsx

@@ -55,17 +55,10 @@ export function DividendEligibility({ windowExpiresAt, eligible }: DividendEligi
       <Card>
         <CardContent className="p-4 space-y-3">
           <div className="flex items-center gap-2">
-            <ClockIcon
-              className={cn(
-                "size-4 shrink-0",
-                isExpiringSoon ? "text-terminal-dim" : "text-terminal",
-              )}
-            />
+            <ClockIcon className={cn("size-4 shrink-0", isExpiringSoon ? "text-terminal-dim" : "text-terminal")} />
             <p className="text-sm font-medium">
               You&apos;re in the pool for{" "}
-              <span
-                className={cn("font-bold", isExpiringSoon ? "text-terminal-dim" : "text-terminal")}
-              >
+              <span className={cn("font-bold", isExpiringSoon ? "text-terminal-dim" : "text-terminal")}>
                 {daysRemaining}
               </span>{" "}
               more day{daysRemaining === 1 ? "" : "s"}
@@ -76,9 +69,7 @@ export function DividendEligibility({ windowExpiresAt, eligible }: DividendEligi
             className="h-2"
             aria-label={`${daysRemaining} days remaining in dividend pool`}
           />
-          {isExpiringSoon && (
-            <p className="text-xs text-terminal-dim">Buy credits to reset your 7-day window</p>
-          )}
+          {isExpiringSoon && <p className="text-xs text-terminal-dim">Buy credits to reset your 7-day window</p>}
         </CardContent>
       </Card>
     </motion.div>