@wopr-network/platform-ui-core 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

package/src/app/(auth)/invite/[token]/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { BuildingIcon, CheckCircleIcon, Loader2Icon, XCircleIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { use, useCallback, useEffect, useRef, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useSession } from "@/lib/auth-client";
+import { productName } from "@/lib/brand-config";
+import { acceptInvite } from "@/lib/org-api";
+
+type InviteState = "loading" | "accepting" | "success" | "error" | "login-required";
+
+export default function InviteAcceptPage({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = use(params);
+  const { data: session, isPending: sessionLoading } = useSession();
+  const router = useRouter();
+  const [state, setState] = useState<InviteState>("loading");
+  const [orgName, setOrgName] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const acceptedRef = useRef(false);
+
+  const doAccept = useCallback(async () => {
+    if (acceptedRef.current) return;
+    acceptedRef.current = true;
+
+    setState("accepting");
+    try {
+      const result = await acceptInvite(token);
+      setOrgName(result.orgName ?? "your organization");
+      setState("success");
+      // Redirect to dashboard after brief success message
+      setTimeout(() => router.push("/"), 2000);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to accept invite";
+      // Surface specific error messages from the backend
+      if (msg.includes("already a member")) {
+        setErrorMessage("You are already a member of this organization.");
+      } else if (msg.includes("expired")) {
+        setErrorMessage("This invite has expired. Please ask the admin to send a new one.");
+      } else if (msg.includes("revoked")) {
+        setErrorMessage("This invite has been revoked.");
+      } else if (msg.includes("not found")) {
+        setErrorMessage("Invalid invite link. It may have already been used.");
+      } else {
+        setErrorMessage(msg);
+      }
+      setState("error");
+      acceptedRef.current = false;
+    }
+  }, [token, router]);
+
+  useEffect(() => {
+    if (sessionLoading) return;
+
+    if (!session?.user) {
+      // Not logged in — redirect to login with callback
+      setState("login-required");
+      const callbackUrl = encodeURIComponent(`/invite/${token}`);
+      router.push(`/login?callbackUrl=${callbackUrl}`);
+      return;
+    }
+
+    // User is logged in — accept the invite
+    doAccept();
+  }, [session, sessionLoading, token, router, doAccept]);
+
+  return (
+    <Card className="border-terminal/20 bg-card/80 backdrop-blur-sm">
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-terminal/10">
+          <BuildingIcon className="h-6 w-6 text-terminal" />
+        </div>
+        <CardTitle className="text-lg font-semibold tracking-tight">Organization Invite</CardTitle>
+        <CardDescription>
+          {state === "loading" && "Checking your session..."}
+          {state === "login-required" && "Redirecting to sign in..."}
+          {state === "accepting" && `Joining organization on ${productName()}...`}
+          {state === "success" && `Welcome to ${orgName}!`}
+          {state === "error" && "Something went wrong"}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col items-center gap-4 pb-8">
+        {(state === "loading" || state === "login-required" || state === "accepting") && (
+          <Loader2Icon className="h-8 w-8 animate-spin text-terminal/60" />
+        )}
+
+        {state === "success" && (
+          <>
+            <CheckCircleIcon className="h-8 w-8 text-emerald-500" />
+            <p className="text-sm text-muted-foreground">Redirecting to your dashboard...</p>
+          </>
+        )}
+
+        {state === "error" && (
+          <>
+            <XCircleIcon className="h-8 w-8 text-destructive" />
+            <p className="text-sm text-muted-foreground text-center">{errorMessage}</p>
+            <button
+              type="button"
+              onClick={() => router.push("/")}
+              className="mt-2 text-sm font-medium text-terminal hover:text-terminal/80 underline underline-offset-4"
+            >
+              Go to dashboard
+            </button>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/billing/buy-crypto-credits-panel.tsx

@@ -8,7 +8,9 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   createCryptoCheckout,
+  createEthCheckout,
   createStablecoinCheckout,
+  type EthCheckoutResult,
   type StablecoinCheckoutResult,
 } from "@/lib/api";
 import { cn } from "@/lib/utils";
@@ -27,7 +29,17 @@ const STABLECOIN_TOKENS = [
   { token: "DAI", label: "DAI", chain: "base", chainLabel: "Base" },
 ];
 
-type PaymentMethod = "btc" | "stablecoin";
+type PaymentMethod = "btc" | "stablecoin" | "eth";
+
+/** Format wei (BigInt string) to ETH string without Number precision loss. */
+function formatWeiToEth(weiStr: string): string {
+  const wei = BigInt(weiStr);
+  const divisor = BigInt("1000000000000000000");
+  const whole = wei / divisor;
+  const frac = wei % divisor;
+  const fracStr = frac.toString().padStart(18, "0").slice(0, 6);
+  return `${whole}.${fracStr}`;
+}
 
 function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
@@ -52,7 +64,7 @@ function StablecoinDeposit({
   checkout: StablecoinCheckoutResult;
   onReset: () => void;
 }) {
-  const [confirmed, setConfirmed] = useState(false);
+  const [confirmed, _setConfirmed] = useState(false);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   useEffect(() => {
@@ -122,6 +134,21 @@ export function BuyCryptoCreditPanel() {
   const [stablecoinCheckout, setStablecoinCheckout] = useState<StablecoinCheckoutResult | null>(
     null,
   );
+  const [ethCheckout, setEthCheckout] = useState<EthCheckoutResult | null>(null);
+
+  async function handleEthCheckout() {
+    if (selected === null) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await createEthCheckout(selected, "base");
+      setEthCheckout(result);
+    } catch {
+      setError("Checkout failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
 
   async function handleBtcCheckout() {
     if (selected === null) return;
@@ -161,6 +188,7 @@ export function BuyCryptoCreditPanel() {
 
   function handleReset() {
     setStablecoinCheckout(null);
+    setEthCheckout(null);
     setSelected(null);
     setError(null);
   }
@@ -176,6 +204,8 @@ export function BuyCryptoCreditPanel() {
           <CardTitle className="flex items-center gap-2">
             {method === "btc" ? (
               <Bitcoin className="h-4 w-4 text-amber-500" />
+            ) : method === "eth" ? (
+              <CircleDollarSign className="h-4 w-4 text-indigo-500" />
             ) : (
               <CircleDollarSign className="h-4 w-4 text-blue-500" />
             )}
@@ -197,6 +227,21 @@ export function BuyCryptoCreditPanel() {
             >
               Stablecoin
             </button>
+            <button
+              type="button"
+              onClick={() => {
+                setMethod("eth");
+                handleReset();
+              }}
+              className={cn(
+                "rounded-full px-3 py-1 text-xs font-medium transition-colors",
+                method === "eth"
+                  ? "bg-indigo-500/10 text-indigo-500"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              ETH
+            </button>
             <button
               type="button"
               onClick={() => {
@@ -215,7 +260,41 @@ export function BuyCryptoCreditPanel() {
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          {stablecoinCheckout ? (
+          {ethCheckout ? (
+            <motion.div
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="space-y-4"
+            >
+              <div className="rounded-md border p-4 space-y-3">
+                <div className="flex items-center justify-between">
+                  <p className="text-sm text-muted-foreground">
+                    Send approximately{" "}
+                    <span className="font-mono font-bold text-foreground">
+                      {formatWeiToEth(ethCheckout.expectedWei)} ETH
+                    </span>{" "}
+                    (${ethCheckout.amountUsd}) to:
+                  </p>
+                  <Badge variant="outline" className="text-xs">
+                    ETH on {ethCheckout.chain}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2 rounded-md bg-muted/50 px-3 py-2">
+                  <code className="flex-1 text-xs font-mono break-all text-foreground">
+                    {ethCheckout.depositAddress}
+                  </code>
+                  <CopyButton text={ethCheckout.depositAddress} />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  ETH price at checkout: ${(ethCheckout.priceCents / 100).toFixed(2)}. Only send ETH
+                  on the {ethCheckout.chain} network.
+                </p>
+              </div>
+              <Button variant="ghost" size="sm" onClick={handleReset}>
+                Cancel
+              </Button>
+            </motion.div>
+          ) : stablecoinCheckout ? (
             <StablecoinDeposit checkout={stablecoinCheckout} onReset={handleReset} />
           ) : (
             <>
@@ -263,7 +342,13 @@ export function BuyCryptoCreditPanel() {
               {error && <p className="text-sm text-destructive">{error}</p>}
 
               <Button
-                onClick={method === "btc" ? handleBtcCheckout : handleStablecoinCheckout}
+                onClick={
+                  method === "btc"
+                    ? handleBtcCheckout
+                    : method === "eth"
+                      ? handleEthCheckout
+                      : handleStablecoinCheckout
+                }
                 disabled={selected === null || loading}
                 variant="outline"
                 className="w-full sm:w-auto"
@@ -272,7 +357,9 @@ export function BuyCryptoCreditPanel() {
                   ? "Creating checkout..."
                   : method === "btc"
                     ? "Pay with BTC"
-                    : `Pay with ${selectedToken.label}`}
+                    : method === "eth"
+                      ? "Pay with ETH"
+                      : `Pay with ${selectedToken.label}`}
               </Button>
             </>
           )}

package/src/lib/api.ts

@@ -1353,6 +1353,22 @@ export async function createStablecoinCheckout(
   return trpcVanilla.billing.stablecoinCheckout.mutate({ amountUsd, token, chain });
 }
 
+export interface EthCheckoutResult {
+  depositAddress: string;
+  expectedWei: string;
+  amountUsd: number;
+  priceCents: number;
+  chain: string;
+  referenceId: string;
+}
+
+export async function createEthCheckout(
+  amountUsd: number,
+  chain: string,
+): Promise<EthCheckoutResult> {
+  return trpcVanilla.billing.ethCheckout.mutate({ amountUsd, chain });
+}
+
 // --- Dividend types ---
 
 export interface DividendWalletStats {

package/src/lib/trpc-types.ts

@@ -114,6 +114,7 @@ type AppRouterRecord = {
     affiliateReferrals: AnyTRPCQueryProcedure;
     cryptoCheckout: AnyTRPCMutationProcedure;
     stablecoinCheckout: AnyTRPCMutationProcedure;
+    ethCheckout: AnyTRPCMutationProcedure;
     autoTopupSettings: AnyTRPCQueryProcedure;
     updateAutoTopupSettings: AnyTRPCMutationProcedure;
     accountStatus: AnyTRPCQueryProcedure;