@bufinance/web3-signin 0.1.6 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bufinance/web3-signin",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "description": "Headless cross-app Web3 wallet sign-in for BUFI: EIP-6963 wallet discovery + Supabase signInWithWeb3 (EIP-4361) + Turnstile captcha. Shared by desk-v1 and defi-web-app. Source of truth lives here; both apps consume it.",
   "type": "module",
   "main": "./src/index.ts",

package/src/react/index.ts

@@ -24,3 +24,10 @@ export {
   type WalletBalancePanelTab,
   type WalletBalancePanelClassNames,
 } from "./wallet-balance-panel";
+export {
+  WalletPanel,
+  type WalletPanelProps,
+  type WalletPanelCurrency,
+  type WalletPanelChain,
+  type WalletPanelTab,
+} from "./wallet-panel";

package/src/react/wallet-panel.tsx

@@ -0,0 +1,600 @@
+"use client";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+/**
+ * WalletPanel — the desk-v1-AUTHORITATIVE wallet-dropdown body, ported into the
+ * shared package so defi-web INHERITS desk's UI (desk is the source of truth;
+ * defi-web is not authoritative for the wallet UI).
+ *
+ * Faithful to desk-v1 `header/wallet-dropdown.tsx` `content`:
+ *   - Total Balance row  → [label] [all-currency-icons dropdown] [pill: label + amount]
+ *   - dashed separator
+ *   - Select Chains row   → [label] [all-chain-icons dropdown] [pill: address + copy + explorer]
+ *   - team summary cards  → 2-col Operations/Treasury selector (label + token icons + balance)
+ *
+ * SELF-CONTAINED by design. The package's Tailwind classes are NOT in either
+ * app's `content` glob, so desk's arbitrary-hex utilities (`text-[#6954cf]`,
+ * `dark:bg-[#1E1633]`, `hover:bg-[#f5f3ff]`) would never be generated. Instead
+ * this ships desk's EXACT theme as a scoped `<style>` block (full `:hover` +
+ * dark support, zero Tailwind/framer-motion/lucide/Radix deps). The host injects
+ * icons (`renderCurrencyIcon`/`renderChainIcon`), the live total + ghost as
+ * ReactNode slots, and the theme via `theme="light"|"dark"`.
+ */
+
+// ── desk theme tokens (verbatim from wallet-dropdown.tsx) ──────────────────
+//   ink           #6954cf / dark #E2D0FD     accent #9E84FF
+//   surface       bg #fff  border #dad4f4    dark bg #1E1633 border #3A2E63
+//   interactive   hover bg #f5f3ff           dark hover bg #2B224B
+// Dark mode follows EITHER an ancestor `.dark` class (Tailwind's class strategy,
+// which both apps use) OR an explicit data-theme="dark" on the root — so the
+// host never has to thread a theme prop; it just works under the app's `.dark`.
+const STYLE_ID = "bufi-wallet-panel-style";
+const PANEL_CSS = `
+.bwp-root{
+  --bwp-bg:#fff;--bwp-border:#dad4f4;--bwp-ink:#6954cf;--bwp-ink-60:rgba(105,84,207,.6);
+  --bwp-ink-30:rgba(105,84,207,.3);--bwp-hover:#f5f3ff;--bwp-menu-bg:#fff;
+  --bwp-menu-shadow:0 8px 24px rgba(60,40,120,.16);--bwp-check:#6954cf;--bwp-more:rgba(105,84,207,.5);
+  --bwp-tab-hover:rgba(245,243,255,.5);--bwp-tab-on-border:#6954cf;--bwp-tab-on-bg:#f5f3ff;
+  --bwp-tab-label:rgba(105,84,207,.7);--bwp-tab-label-on:#6a55cf;--bwp-spin:rgba(105,84,207,.4);
+  --bwp-empty:rgba(105,84,207,.3);
+  box-sizing:border-box;width:calc(100vw - 32px);max-width:340px;padding:16px;border-radius:9px;
+  border:1px solid var(--bwp-border);background:var(--bwp-bg);color:var(--bwp-ink);
+  font-family:inherit;-webkit-font-smoothing:antialiased;}
+.bwp-root.bwp-team{max-width:380px;}
+.bwp-root[data-theme="dark"], .dark .bwp-root{
+  --bwp-bg:#1E1633;--bwp-border:#3A2E63;--bwp-ink:#E2D0FD;--bwp-ink-60:rgba(226,208,253,.6);
+  --bwp-ink-30:rgba(226,208,253,.35);--bwp-hover:#2B224B;--bwp-menu-bg:#221a36;
+  --bwp-menu-shadow:0 8px 24px rgba(0,0,0,.5);--bwp-check:#9E84FF;--bwp-more:rgba(226,208,253,.5);
+  --bwp-tab-hover:rgba(30,22,51,.6);--bwp-tab-on-border:#3A2E63;--bwp-tab-on-bg:#1E1633;
+  --bwp-tab-label:rgba(226,208,253,.7);--bwp-tab-label-on:#E2D0FD;--bwp-spin:rgba(226,208,253,.4);
+  --bwp-empty:rgba(226,208,253,.4);}
+.bwp-root *{box-sizing:border-box;}
+
+.bwp-row{display:flex;align-items:center;gap:10px;}
+.bwp-label{flex-shrink:0;width:46px;font-size:11px;line-height:1.15;font-weight:500;color:var(--bwp-ink-60);}
+
+.bwp-ctl{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--bwp-border);border-radius:6px;
+  background:var(--bwp-bg);transition:background-color .15s;cursor:pointer;}
+.bwp-ctl--int{padding:6px 8px;flex-shrink:0;}
+.bwp-ctl--int:hover{background:var(--bwp-hover);}
+.bwp-ctl--int:disabled{opacity:.5;cursor:default;}
+
+.bwp-pill{display:flex;align-items:center;flex:1 1 auto;min-width:0;border:1px solid var(--bwp-border);
+  border-radius:6px;background:var(--bwp-bg);}
+.bwp-pill--bal{padding:4px 12px;}
+.bwp-pill--addr{padding:6px 12px;gap:6px;}
+
+.bwp-cur-label{font-size:14px;font-weight:500;color:var(--bwp-ink);}
+.bwp-amount{margin-left:auto;font-size:18px;font-weight:700;color:var(--bwp-ink);font-variant-numeric:tabular-nums;}
+
+.bwp-addr{font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--bwp-ink);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.bwp-addr-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto;}
+.bwp-iconbtn{display:inline-flex;color:var(--bwp-ink-30);background:none;border:0;padding:0;cursor:pointer;
+  transition:color .15s;text-decoration:none;}
+.bwp-iconbtn:hover{color:var(--bwp-ink);}
+.bwp-addr-empty{font-size:14px;font-style:italic;color:var(--bwp-empty);}
+
+.bwp-chev{color:var(--bwp-ink-60);flex-shrink:0;}
+.bwp-more{font-size:9px;font-weight:500;padding-left:2px;color:var(--bwp-more);}
+
+.bwp-stack{display:inline-flex;align-items:center;}
+.bwp-stack > * + *{margin-left:-4px;}
+.bwp-stack--chain > * + *{margin-left:-2px;}
+.bwp-glyph{display:inline-flex;border-radius:9999px;transition:opacity .15s;}
+.bwp-glyph--dim{opacity:.55;}
+.bwp-glyph--on{position:relative;z-index:1;}
+
+.bwp-sep{border:0;border-top:1px dashed var(--bwp-border);margin:12px 0;}
+
+.bwp-menu-wrap{position:relative;flex-shrink:0;}
+.bwp-menu{position:absolute;top:calc(100% + 4px);z-index:200;border-radius:8px;border:1px solid var(--bwp-border);
+  background:var(--bwp-menu-bg);box-shadow:var(--bwp-menu-shadow);padding:4px;overflow:hidden;}
+.bwp-menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
+  padding:7px 8px;border-radius:6px;background:none;border:0;cursor:pointer;text-align:left;
+  font-size:14px;color:var(--bwp-ink);transition:background-color .12s;}
+.bwp-menu-item:hover{background:var(--bwp-hover);}
+.bwp-menu-left{display:flex;align-items:center;gap:8px;min-width:0;}
+.bwp-menu-check{color:var(--bwp-check);flex-shrink:0;}
+
+.bwp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
+.bwp-tab{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:8px;
+  border:1px solid var(--bwp-border);background:none;text-align:left;cursor:pointer;transition:all .18s;}
+.bwp-tab:hover{background:var(--bwp-tab-hover);}
+.bwp-tab.bwp-tab--on{border-color:var(--bwp-tab-on-border);background:var(--bwp-tab-on-bg);
+  box-shadow:0 1px 2px rgba(60,40,120,.08);}
+.bwp-tab-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
+.bwp-tab-label{font-size:11px;font-weight:600;color:var(--bwp-tab-label);}
+.bwp-tab--on .bwp-tab-label{color:var(--bwp-tab-label-on);}
+.bwp-tab-bal{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bwp-ink);}
+
+.bwp-empty{font-size:14px;font-style:italic;color:var(--bwp-empty);}
+
+.bwp-spin{animation:bwp-spin 1s linear infinite;color:var(--bwp-spin);}
+@keyframes bwp-spin{to{transform:rotate(360deg);}}
+@media (prefers-reduced-motion:reduce){.bwp-spin{animation:none;}}
+`;
+
+function useInjectedStyle() {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(STYLE_ID)) return;
+    const el = document.createElement("style");
+    el.id = STYLE_ID;
+    el.textContent = PANEL_CSS;
+    document.head.appendChild(el);
+  }, []);
+}
+
+// ── inline icons (no lucide dep) ───────────────────────────────────────────
+function ChevronDownIcon({ size = 12, className }: { size?: number; className?: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden>
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+function CheckIcon({ size = 14, className, style }: { size?: number; className?: string; style?: CSSProperties }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" className={className} style={style} aria-hidden>
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+function CopyIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}
+function ExternalLinkIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  );
+}
+function SpinnerIcon({ size = 20 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" className="bwp-spin" aria-hidden>
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+// ── vanilla dropdown (replaces Radix DropdownMenu) ─────────────────────────
+function Menu({
+  triggerContent,
+  triggerClassName,
+  triggerAriaLabel,
+  disabled,
+  align = "start",
+  minWidth,
+  children,
+}: {
+  triggerContent: ReactNode;
+  triggerClassName: string;
+  triggerAriaLabel?: string;
+  disabled?: boolean;
+  align?: "start" | "end";
+  minWidth?: number;
+  children: (close: () => void) => ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="bwp-menu-wrap" ref={ref}>
+      <button
+        type="button"
+        aria-label={triggerAriaLabel}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        disabled={disabled}
+        onClick={() => setOpen((o) => !o)}
+        className={triggerClassName}
+      >
+        {triggerContent}
+      </button>
+      {open ? (
+        <div className="bwp-menu" role="menu" style={{ minWidth, [align === "end" ? "right" : "left"]: 0 }}>
+          {children(() => setOpen(false))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ── public types ───────────────────────────────────────────────────────────
+export interface WalletPanelCurrency {
+  code: string;
+  name?: string;
+}
+export interface WalletPanelChain {
+  key: string;
+  label: string;
+}
+export interface WalletPanelTab {
+  key: string;
+  label: string;
+  /** Already display-formatted balance, e.g. "1,234.56". */
+  balance: string;
+  /** Token-icon cluster node (e.g. <AssetCircles>). */
+  icons?: ReactNode;
+}
+
+export interface WalletPanelProps {
+  /** Drives the scoped theme (inline styles, no Tailwind). Default "light". */
+  theme?: "light" | "dark";
+  /** "team" widens the card to 380px (matches desk). Default "personal". */
+  variant?: "personal" | "team";
+
+  // — Team summary tab cards (omit for personal) —
+  tabs?: WalletPanelTab[];
+  activeTab?: string;
+  onTabChange?: (key: string) => void;
+  /** Slot under the tab cards — team actions (move funds / allowlist). */
+  tabActions?: ReactNode;
+
+  /** Top slot — ghost/private cards, multisig inbox, prompts. */
+  topSlot?: ReactNode;
+
+  // — Total Balance row —
+  currencies: WalletPanelCurrency[];
+  /** "all" | currency code. */
+  selectedCurrency: string;
+  onCurrencySelect?: (code: string) => void;
+  /** Host renders a currency glyph. `active` = the selected one (host may emphasize). */
+  renderCurrencyIcon: (code: string, opts: { active: boolean }) => ReactNode;
+  /** Pill currency label, e.g. "All" | "USDC". */
+  currencyLabel: string;
+  /** Live total node (e.g. an AnimatedNumber); right-aligned in the pill. */
+  totalText: ReactNode;
+  isLoading?: boolean;
+
+  // — Select Chains row —
+  chains: WalletPanelChain[];
+  /** "all" | chain key. */
+  selectedChain: string;
+  onChainSelect?: (key: string) => void;
+  renderChainIcon: (key: string, opts: { size: number; active: boolean }) => ReactNode;
+  isSettingChain?: boolean;
+  /** Address pill. Null/empty → "No wallet". */
+  truncatedAddress?: string | null;
+  onCopy?: () => void;
+  copied?: boolean;
+  explorerUrl?: string | null;
+
+  /** No-address override for the whole rows block. */
+  hasAddress?: boolean;
+  emptyMessage?: ReactNode;
+
+  /** Bottom slot — additional wallets, analytics link, log out. */
+  footer?: ReactNode;
+
+  /** Extra class on the root surface (e.g. `ghost-popover` for the dark-mode wash). */
+  className?: string;
+  /** data-ghost / data-private-state passthrough (privacy theming hooks). */
+  ghostActive?: boolean;
+}
+
+export function WalletPanel({
+  theme = "light",
+  variant = "personal",
+  tabs,
+  activeTab,
+  onTabChange,
+  tabActions,
+  topSlot,
+  currencies,
+  selectedCurrency,
+  onCurrencySelect,
+  renderCurrencyIcon,
+  currencyLabel,
+  totalText,
+  isLoading,
+  chains,
+  selectedChain,
+  onChainSelect,
+  renderChainIcon,
+  isSettingChain,
+  truncatedAddress,
+  onCopy,
+  copied,
+  explorerUrl,
+  hasAddress = true,
+  emptyMessage = "No wallet",
+  footer,
+  className,
+  ghostActive,
+}: WalletPanelProps): ReactNode {
+  useInjectedStyle();
+
+  // Selected currency floats first (desk parity).
+  const sortedCurrencies =
+    selectedCurrency === "all"
+      ? currencies
+      : [...currencies].sort((a, b) =>
+          a.code === selectedCurrency ? -1 : b.code === selectedCurrency ? 1 : 0,
+        );
+
+  const rows = (
+    <>
+      {/* Total Balance row */}
+      <div className="bwp-row">
+        <span className="bwp-label">
+          Total
+          <br />
+          Balance
+        </span>
+
+        <Menu
+          align="start"
+          minWidth={140}
+          triggerAriaLabel="Select currency"
+          triggerClassName="bwp-ctl bwp-ctl--int"
+          triggerContent={
+            <>
+              <span className="bwp-stack">
+                {sortedCurrencies.map((c) => {
+                  const on = selectedCurrency !== "all" && c.code === selectedCurrency;
+                  return (
+                    <span
+                      key={c.code}
+                      className={`bwp-glyph ${on ? "bwp-glyph--on" : "bwp-glyph--dim"}`}
+                    >
+                      {renderCurrencyIcon(c.code, { active: on })}
+                    </span>
+                  );
+                })}
+              </span>
+              <ChevronDownIcon className="bwp-chev" />
+            </>
+          }
+        >
+          {(close) => (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                className="bwp-menu-item"
+                onClick={() => {
+                  onCurrencySelect?.("all");
+                  close();
+                }}
+              >
+                <span className="bwp-menu-left">
+                  <span className="bwp-stack">
+                    {currencies.slice(0, 2).map((c) => (
+                      <span key={c.code} className="bwp-glyph">
+                        {renderCurrencyIcon(c.code, { active: false })}
+                      </span>
+                    ))}
+                  </span>
+                  <span style={{ fontWeight: 500 }}>All</span>
+                </span>
+                {selectedCurrency === "all" ? <CheckIcon className="bwp-menu-check" /> : null}
+              </button>
+              {currencies.map((c) => (
+                <button
+                  key={c.code}
+                  type="button"
+                  role="menuitem"
+                  className="bwp-menu-item"
+                  onClick={() => {
+                    onCurrencySelect?.(c.code);
+                    close();
+                  }}
+                >
+                  <span className="bwp-menu-left">
+                    <span className="bwp-glyph">{renderCurrencyIcon(c.code, { active: false })}</span>
+                    <span>{c.name ?? c.code}</span>
+                  </span>
+                  {selectedCurrency === c.code ? <CheckIcon className="bwp-menu-check" /> : null}
+                </button>
+              ))}
+            </>
+          )}
+        </Menu>
+
+        <div className="bwp-pill bwp-pill--bal">
+          <span className="bwp-cur-label">{currencyLabel}</span>
+          {isLoading ? (
+            <span style={{ marginLeft: "auto", display: "inline-flex" }}>
+              <SpinnerIcon />
+            </span>
+          ) : (
+            <span className="bwp-amount">{totalText}</span>
+          )}
+        </div>
+      </div>
+
+      <hr className="bwp-sep" />
+
+      {/* Select Chains row */}
+      <div className="bwp-row">
+        <span className="bwp-label">
+          Select
+          <br />
+          Chains
+        </span>
+
+        <Menu
+          align="start"
+          minWidth={200}
+          triggerAriaLabel="Select chain"
+          disabled={isSettingChain || chains.length === 0}
+          triggerClassName="bwp-ctl bwp-ctl--int"
+          triggerContent={
+            isSettingChain ? (
+              <SpinnerIcon />
+            ) : (
+              <>
+                <span className="bwp-stack bwp-stack--chain">
+                  {chains.slice(0, 4).map((c) => {
+                    const on = c.key === selectedChain;
+                    return (
+                      <span
+                        key={c.key}
+                        className={`bwp-glyph ${on ? "bwp-glyph--on" : "bwp-glyph--dim"}`}
+                      >
+                        {renderChainIcon(c.key, { size: 18, active: on })}
+                      </span>
+                    );
+                  })}
+                  {chains.length > 4 ? (
+                    <span className="bwp-more">+{chains.length - 4}</span>
+                  ) : null}
+                </span>
+                <ChevronDownIcon className="bwp-chev" />
+              </>
+            )
+          }
+        >
+          {(close) => (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                className="bwp-menu-item"
+                onClick={() => {
+                  onChainSelect?.("all");
+                  close();
+                }}
+              >
+                <span className="bwp-menu-left">
+                  <span className="bwp-stack">
+                    {chains.slice(0, 3).map((c) => (
+                      <span key={c.key} className="bwp-glyph">
+                        {renderChainIcon(c.key, { size: 16, active: false })}
+                      </span>
+                    ))}
+                  </span>
+                  <span style={{ fontWeight: 500 }}>All</span>
+                </span>
+                {selectedChain === "all" ? <CheckIcon className="bwp-menu-check" /> : null}
+              </button>
+              {chains.map((c) => (
+                <button
+                  key={c.key}
+                  type="button"
+                  role="menuitem"
+                  className="bwp-menu-item"
+                  onClick={() => {
+                    onChainSelect?.(c.key);
+                    close();
+                  }}
+                >
+                  <span className="bwp-menu-left">
+                    {renderChainIcon(c.key, { size: 20, active: false })}
+                    <span style={{ fontWeight: 500 }}>{c.label}</span>
+                  </span>
+                  {selectedChain === c.key ? <CheckIcon className="bwp-menu-check" /> : null}
+                </button>
+              ))}
+            </>
+          )}
+        </Menu>
+
+        <div className="bwp-pill bwp-pill--addr">
+          {truncatedAddress ? (
+            <>
+              <span className="bwp-addr">{truncatedAddress}</span>
+              <span className="bwp-addr-actions">
+                <button type="button" className="bwp-iconbtn" onClick={onCopy} aria-label="Copy address">
+                  {copied ? (
+                    <CheckIcon size={14} style={{ color: "#22c55e" }} />
+                  ) : (
+                    <CopyIcon size={14} />
+                  )}
+                </button>
+                {explorerUrl ? (
+                  <a
+                    href={explorerUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bwp-iconbtn"
+                    aria-label="View on explorer"
+                  >
+                    <ExternalLinkIcon size={14} />
+                  </a>
+                ) : null}
+              </span>
+            </>
+          ) : (
+            <span className="bwp-addr-empty">{emptyMessage}</span>
+          )}
+        </div>
+      </div>
+    </>
+  );
+
+  return (
+    <div
+      className={`bwp-root ${variant === "team" ? "bwp-team" : ""} ${className ?? ""}`.trim()}
+      data-theme={theme}
+      data-ghost={ghostActive ? "true" : "false"}
+      data-private-state={ghostActive ? "true" : "false"}
+    >
+      {/* Team summary cards — Operations/Treasury selector */}
+      {tabs && tabs.length > 0 ? (
+        <div className="bwp-tabs">
+          {tabs.map((t) => {
+            const on = t.key === activeTab;
+            return (
+              <button
+                key={t.key}
+                type="button"
+                aria-pressed={on}
+                onClick={() => onTabChange?.(t.key)}
+                className={`bwp-tab ${on ? "bwp-tab--on" : ""}`.trim()}
+              >
+                <span className="bwp-tab-top">
+                  <span className="bwp-tab-label">{t.label}</span>
+                  {t.icons}
+                </span>
+                <span className="bwp-tab-bal">{t.balance}</span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+
+      {tabActions}
+      {topSlot}
+
+      {hasAddress ? rows : <div className="bwp-empty">{emptyMessage}</div>}
+
+      {footer}
+    </div>
+  );
+}
+
+export default WalletPanel;