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

package/package.json

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

package/src/app/(dashboard)/settings/org/page.tsx

@@ -36,6 +36,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useIsAdminOrOwner } from "@/hooks/use-my-org-role";
 import type { Organization, OrgMember } from "@/lib/api";
 import {
   changeRole,
@@ -58,6 +59,7 @@ export default function OrgPage() {
   const routerRef = useRef(router);
   routerRef.current = router;
   const [org, setOrg] = useState<Organization | null>(null);
+  const isAdminOrOwner = useIsAdminOrOwner(org);
   const [loading, setLoading] = useState(true);
   const [saveError, setSaveError] = useState<string | null>(null);
 
@@ -219,82 +221,102 @@ export default function OrgPage() {
         )}
       </AnimatePresence>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Organization Details</CardTitle>
-          <CardDescription>Update your organization name and billing email</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSave} className="flex flex-col gap-4">
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="org-name">Organization name</Label>
-              <Input
-                id="org-name"
-                value={orgName}
-                onChange={(e) => setOrgName(e.target.value)}
-                required
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="org-slug">Slug</Label>
-              <Input
-                id="org-slug"
-                value={orgSlug}
-                onChange={(e) => setOrgSlug(e.target.value)}
-                placeholder="my-org"
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="billing-email">Billing email</Label>
-              <Input
-                id="billing-email"
-                type="email"
-                value={billingEmail}
-                onChange={(e) => setBillingEmail(e.target.value)}
-                required
-              />
-            </div>
-            <AnimatePresence>
-              {saveMsg && (
-                <motion.p
-                  initial={{ opacity: 0, y: -4 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -4 }}
-                  transition={{ duration: 0.15 }}
-                  className="text-sm text-terminal"
-                >
-                  {saveMsg}
-                </motion.p>
-              )}
-            </AnimatePresence>
-            <Button type="submit" variant="terminal" className="w-fit" disabled={saving}>
-              <AnimatePresence mode="wait">
-                {saveSuccess ? (
-                  <motion.span
-                    key="success"
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.8 }}
-                    className="flex items-center gap-1"
+      {isAdminOrOwner ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>Organization Details</CardTitle>
+            <CardDescription>Update your organization name and billing email</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSave} className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="org-name">Organization name</Label>
+                <Input
+                  id="org-name"
+                  value={orgName}
+                  onChange={(e) => setOrgName(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="org-slug">Slug</Label>
+                <Input
+                  id="org-slug"
+                  value={orgSlug}
+                  onChange={(e) => setOrgSlug(e.target.value)}
+                  placeholder="my-org"
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="billing-email">Billing email</Label>
+                <Input
+                  id="billing-email"
+                  type="email"
+                  value={billingEmail}
+                  onChange={(e) => setBillingEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <AnimatePresence>
+                {saveMsg && (
+                  <motion.p
+                    initial={{ opacity: 0, y: -4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -4 }}
+                    transition={{ duration: 0.15 }}
+                    className="text-sm text-terminal"
                   >
-                    <CheckIcon className="size-4" />
-                    Saved
-                  </motion.span>
-                ) : (
-                  <motion.span
-                    key="save"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                  >
-                    {saving ? "Saving..." : "Save changes"}
-                  </motion.span>
+                    {saveMsg}
+                  </motion.p>
                 )}
               </AnimatePresence>
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+              <Button type="submit" variant="terminal" className="w-fit" disabled={saving}>
+                <AnimatePresence mode="wait">
+                  {saveSuccess ? (
+                    <motion.span
+                      key="success"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.8 }}
+                      className="flex items-center gap-1"
+                    >
+                      <CheckIcon className="size-4" />
+                      Saved
+                    </motion.span>
+                  ) : (
+                    <motion.span
+                      key="save"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                    >
+                      {saving ? "Saving..." : "Save changes"}
+                    </motion.span>
+                  )}
+                </AnimatePresence>
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle>Organization Details</CardTitle>
+            <CardDescription>You are a member of this organization</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col gap-2 text-sm">
+              <div>
+                <span className="font-medium text-muted-foreground">Name:</span> {org.name}
+              </div>
+              <div>
+                <span className="font-medium text-muted-foreground">Slug:</span>{" "}
+                {org.slug ?? <span className="text-muted-foreground italic">not set</span>}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
 
       <Separator />
 
@@ -326,7 +348,7 @@ export default function OrgPage() {
             {org.members.length} member{org.members.length !== 1 ? "s" : ""}
           </p>
         </div>
-        <InviteDialog orgId={org.id} onInvited={load} />
+        {isAdminOrOwner && <InviteDialog orgId={org.id} onInvited={load} />}
       </div>
 
       <div className="rounded-md border overflow-x-auto">
@@ -337,7 +359,7 @@ export default function OrgPage() {
               <TableHead>Email</TableHead>
               <TableHead>Role</TableHead>
               <TableHead>Joined</TableHead>
-              <TableHead className="w-[160px]" />
+              {isAdminOrOwner && <TableHead className="w-[160px]" />}
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -355,31 +377,33 @@ export default function OrgPage() {
                     year: "numeric",
                   })}
                 </TableCell>
-                <TableCell>
-                  {member.role !== "owner" && (
-                    <div className="flex gap-1">
-                      <ChangeRoleSelect
-                        currentRole={member.role}
-                        onChangeRole={(role) => handleChangeRole(member.userId, role)}
-                      />
-                      <TransferDialog
-                        memberName={member.name}
-                        onTransfer={() => handleTransfer(member.userId)}
-                      />
-                      <RemoveMemberDialog
-                        memberName={member.name}
-                        onRemove={() => handleRemove(member.userId)}
-                      />
-                    </div>
-                  )}
-                </TableCell>
+                {isAdminOrOwner && (
+                  <TableCell>
+                    {member.role !== "owner" && (
+                      <div className="flex gap-1">
+                        <ChangeRoleSelect
+                          currentRole={member.role}
+                          onChangeRole={(role) => handleChangeRole(member.userId, role)}
+                        />
+                        <TransferDialog
+                          memberName={member.name}
+                          onTransfer={() => handleTransfer(member.userId)}
+                        />
+                        <RemoveMemberDialog
+                          memberName={member.name}
+                          onRemove={() => handleRemove(member.userId)}
+                        />
+                      </div>
+                    )}
+                  </TableCell>
+                )}
               </TableRow>
             ))}
           </TableBody>
         </Table>
       </div>
 
-      {org.invites.length > 0 && (
+      {isAdminOrOwner && org.invites.length > 0 && (
         <>
           <Separator />
           <div>

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

@@ -1,11 +1,16 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Bitcoin } from "lucide-react";
-import { useState } from "react";
+import { Bitcoin, Check, CircleDollarSign, Copy } from "lucide-react";
+import { useCallback, useEffect, useRef, 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 { createCryptoCheckout } from "@/lib/api";
+import {
+  createCryptoCheckout,
+  createStablecoinCheckout,
+  type StablecoinCheckoutResult,
+} from "@/lib/api";
 import { cn } from "@/lib/utils";
 import { isAllowedRedirectUrl } from "@/lib/validate-redirect-url";
 
@@ -16,12 +21,109 @@ const CRYPTO_AMOUNTS = [
   { value: 100, label: "$100" },
 ];
 
+const STABLECOIN_TOKENS = [
+  { token: "USDC", label: "USDC", chain: "base", chainLabel: "Base" },
+  { token: "USDT", label: "USDT", chain: "base", chainLabel: "Base" },
+  { token: "DAI", label: "DAI", chain: "base", chainLabel: "Base" },
+];
+
+type PaymentMethod = "btc" | "stablecoin";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [text]);
+
+  return (
+    <Button variant="ghost" size="sm" onClick={handleCopy} className="h-7 px-2">
+      {copied ? <Check className="h-3.5 w-3.5 text-primary" /> : <Copy className="h-3.5 w-3.5" />}
+    </Button>
+  );
+}
+
+function StablecoinDeposit({
+  checkout,
+  onReset,
+}: {
+  checkout: StablecoinCheckoutResult;
+  onReset: () => void;
+}) {
+  const [confirmed, setConfirmed] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    // TODO: poll charge status via tRPC query when backend endpoint exists
+    // For now, show the deposit address and let the user confirm manually
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, []);
+
+  const displayAmount = `${checkout.amountUsd} ${checkout.token}`;
+
+  if (confirmed) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="rounded-md border border-primary/25 bg-primary/5 p-4 text-center"
+      >
+        <Check className="mx-auto h-8 w-8 text-primary" />
+        <p className="mt-2 text-sm font-medium">Payment detected. Credits will appear shortly.</p>
+      </motion.div>
+    );
+  }
+
+  return (
+    <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 exactly{" "}
+            <span className="font-mono font-bold text-foreground">{displayAmount}</span> to:
+          </p>
+          <Badge variant="outline" className="text-xs">
+            {checkout.token} on {checkout.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">
+            {checkout.depositAddress}
+          </code>
+          <CopyButton text={checkout.depositAddress} />
+        </div>
+
+        <p className="text-xs text-muted-foreground">
+          Only send {checkout.token} on the {checkout.chain} network. Other tokens or chains will be
+          lost.
+        </p>
+      </div>
+
+      <div className="flex gap-2">
+        <Button variant="ghost" size="sm" onClick={onReset}>
+          Cancel
+        </Button>
+      </div>
+    </motion.div>
+  );
+}
+
 export function BuyCryptoCreditPanel() {
+  const [method, setMethod] = useState<PaymentMethod>("stablecoin");
   const [selected, setSelected] = useState<number | null>(null);
+  const [selectedToken, setSelectedToken] = useState(STABLECOIN_TOKENS[0]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [stablecoinCheckout, setStablecoinCheckout] = useState<StablecoinCheckoutResult | null>(
+    null,
+  );
 
-  async function handleCheckout() {
+  async function handleBtcCheckout() {
     if (selected === null) return;
     setLoading(true);
     setError(null);
@@ -39,6 +141,30 @@ export function BuyCryptoCreditPanel() {
     }
   }
 
+  async function handleStablecoinCheckout() {
+    if (selected === null) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await createStablecoinCheckout(
+        selected,
+        selectedToken.token,
+        selectedToken.chain,
+      );
+      setStablecoinCheckout(result);
+    } catch {
+      setError("Checkout failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleReset() {
+    setStablecoinCheckout(null);
+    setSelected(null);
+    setError(null);
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 8 }}
@@ -48,47 +174,108 @@ export function BuyCryptoCreditPanel() {
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            <Bitcoin className="h-4 w-4 text-amber-500" />
+            {method === "btc" ? (
+              <Bitcoin className="h-4 w-4 text-amber-500" />
+            ) : (
+              <CircleDollarSign className="h-4 w-4 text-blue-500" />
+            )}
             Pay with Crypto
           </CardTitle>
-          <p className="text-xs text-muted-foreground">
-            Pay with BTC or other cryptocurrencies. Minimum $10.
-          </p>
+          <div className="flex gap-2 pt-1">
+            <button
+              type="button"
+              onClick={() => {
+                setMethod("stablecoin");
+                handleReset();
+              }}
+              className={cn(
+                "rounded-full px-3 py-1 text-xs font-medium transition-colors",
+                method === "stablecoin"
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              Stablecoin
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setMethod("btc");
+                handleReset();
+              }}
+              className={cn(
+                "rounded-full px-3 py-1 text-xs font-medium transition-colors",
+                method === "btc"
+                  ? "bg-amber-500/10 text-amber-500"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              BTC
+            </button>
+          </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-            {CRYPTO_AMOUNTS.map((amt) => (
-              <motion.button
-                key={amt.value}
-                type="button"
-                onClick={() => setSelected(amt.value)}
-                whileHover={{ scale: 1.03 }}
-                whileTap={{ scale: 0.98 }}
-                transition={{
-                  type: "spring",
-                  stiffness: 400,
-                  damping: 25,
-                }}
-                className={cn(
-                  "flex flex-col items-center gap-1 rounded-md border p-3 text-sm font-medium transition-colors hover:bg-accent",
-                  selected === amt.value
-                    ? "border-primary bg-primary/5 ring-1 ring-primary shadow-[0_0_15px_rgba(0,255,65,0.3)]"
-                    : "border-border",
-                )}
+          {stablecoinCheckout ? (
+            <StablecoinDeposit checkout={stablecoinCheckout} onReset={handleReset} />
+          ) : (
+            <>
+              {method === "stablecoin" && (
+                <div className="flex gap-2">
+                  {STABLECOIN_TOKENS.map((t) => (
+                    <button
+                      key={`${t.token}:${t.chain}`}
+                      type="button"
+                      onClick={() => setSelectedToken(t)}
+                      className={cn(
+                        "rounded-md border px-3 py-1.5 text-xs font-medium transition-colors",
+                        selectedToken.token === t.token && selectedToken.chain === t.chain
+                          ? "border-primary bg-primary/5 text-primary"
+                          : "border-border text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                {CRYPTO_AMOUNTS.map((amt) => (
+                  <motion.button
+                    key={amt.value}
+                    type="button"
+                    onClick={() => setSelected(amt.value)}
+                    whileHover={{ scale: 1.03 }}
+                    whileTap={{ scale: 0.98 }}
+                    transition={{ type: "spring", stiffness: 400, damping: 25 }}
+                    className={cn(
+                      "flex flex-col items-center gap-1 rounded-md border p-3 text-sm font-medium transition-colors hover:bg-accent",
+                      selected === amt.value
+                        ? "border-primary bg-primary/5 ring-1 ring-primary shadow-[0_0_15px_rgba(0,255,65,0.3)]"
+                        : "border-border",
+                    )}
+                  >
+                    <span className="text-lg font-bold">{amt.label}</span>
+                  </motion.button>
+                ))}
+              </div>
+
+              {error && <p className="text-sm text-destructive">{error}</p>}
+
+              <Button
+                onClick={method === "btc" ? handleBtcCheckout : handleStablecoinCheckout}
+                disabled={selected === null || loading}
+                variant="outline"
+                className="w-full sm:w-auto"
               >
-                <span className="text-lg font-bold">{amt.label}</span>
-              </motion.button>
-            ))}
-          </div>
-          {error && <p className="text-sm text-destructive">{error}</p>}
-          <Button
-            onClick={handleCheckout}
-            disabled={selected === null || loading}
-            variant="outline"
-            className="w-full sm:w-auto"
-          >
-            {loading ? "Opening checkout..." : "Pay with crypto"}
-          </Button>
+                {loading
+                  ? "Creating checkout..."
+                  : method === "btc"
+                    ? "Pay with BTC"
+                    : `Pay with ${selectedToken.label}`}
+              </Button>
+            </>
+          )}
         </CardContent>
       </Card>
     </motion.div>

package/src/hooks/use-my-org-role.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useMemo } from "react";
+import type { Organization, OrgMember } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
+
+/**
+ * Derives the current user's role from an already-fetched org object.
+ * Does NOT fetch org data — avoids duplicate requests and role-flash.
+ * Pass the org from the page's own load() call.
+ */
+export function useMyOrgRole(org: Organization | null): OrgMember["role"] | null {
+  const { data: session } = useSession();
+
+  return useMemo(() => {
+    if (!org || !session?.user?.id) return null;
+
+    const me = org.members?.find(
+      (m: OrgMember) => m.userId === session.user.id || m.email === session.user.email,
+    );
+    return me?.role ?? null;
+  }, [org, session?.user?.id, session?.user?.email]);
+}
+
+/**
+ * Returns true if the current user is an admin or owner of the given org.
+ * Pass the org from the page's own load() call.
+ */
+export function useIsAdminOrOwner(org: Organization | null): boolean {
+  const role = useMyOrgRole(org);
+  return role === "admin" || role === "owner";
+}

package/src/lib/api.ts

@@ -1336,6 +1336,23 @@ export async function createCryptoCheckout(
   return trpcVanilla.billing.cryptoCheckout.mutate({ amountUsd });
 }
 
+export interface StablecoinCheckoutResult {
+  depositAddress: string;
+  amountRaw: string;
+  amountUsd: number;
+  chain: string;
+  token: string;
+  referenceId: string;
+}
+
+export async function createStablecoinCheckout(
+  amountUsd: number,
+  token: string,
+  chain: string,
+): Promise<StablecoinCheckoutResult> {
+  return trpcVanilla.billing.stablecoinCheckout.mutate({ amountUsd, token, chain });
+}
+
 // --- Dividend types ---
 
 export interface DividendWalletStats {

package/src/lib/org-api.ts

@@ -72,3 +72,13 @@ export async function createOrganization(data: {
 }): Promise<{ id: string; name: string; slug: string }> {
   return trpcVanilla.org.createOrganization.mutate(data);
 }
+
+export async function listMyOrganizations(): Promise<
+  Array<{ id: string; name: string; slug: string; role: "owner" | "admin" | "member" }>
+> {
+  return trpcVanilla.org.listMyOrganizations.query(undefined);
+}
+
+export async function acceptInvite(token: string): Promise<{ orgId: string; orgName: string }> {
+  return trpcVanilla.org.acceptInvite.mutate({ token });
+}

package/src/lib/trpc-types.ts

@@ -113,6 +113,7 @@ type AppRouterRecord = {
     affiliateStats: AnyTRPCQueryProcedure;
     affiliateReferrals: AnyTRPCQueryProcedure;
     cryptoCheckout: AnyTRPCMutationProcedure;
+    stablecoinCheckout: AnyTRPCMutationProcedure;
     autoTopupSettings: AnyTRPCQueryProcedure;
     updateAutoTopupSettings: AnyTRPCMutationProcedure;
     accountStatus: AnyTRPCQueryProcedure;
@@ -157,6 +158,7 @@ type AppRouterRecord = {
     transferOwnership: AnyTRPCMutationProcedure;
     deleteOrganization: AnyTRPCMutationProcedure;
     listMyOrganizations: AnyTRPCQueryProcedure;
+    acceptInvite: AnyTRPCMutationProcedure;
     orgBillingBalance: AnyTRPCQueryProcedure;
     orgMemberUsage: AnyTRPCQueryProcedure;
     orgBillingInfo: AnyTRPCQueryProcedure;