@bufinance/web3-signin 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bufinance/web3-signin",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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/avatar-circles.tsx

@@ -0,0 +1,134 @@
+import { type CSSProperties, useState } from "react";
+
+/**
+ * AssetCircles — overlapping token/asset icon circles that arc up and reveal a
+ * ticker tooltip on hover, with a "+N" overflow chip. Ported from desk-v1's
+ * `WalletTokenIcons` (the "which assets does this wallet hold" affordance) into
+ * the shared package so BOTH apps render assets the same way. This is the
+ * asset/token stack (icon + ticker tooltip) — NOT a people/profile stack.
+ *
+ * Dependency-light: inline styles only (no Tailwind purge risk, no framer/radix),
+ * so it drops into any consumer unchanged. The host supplies `assets`.
+ */
+export interface AssetCircleItem {
+  /** Token icon URL. */
+  iconUrl: string;
+  /** Ticker shown in the tooltip + used as alt text (e.g. "USDC"). */
+  label: string;
+}
+
+export interface AssetCirclesProps {
+  assets: AssetCircleItem[];
+  /** Max circles before collapsing the rest into a "+N" chip (default 4). */
+  max?: number;
+  /** Circle diameter in px (default 18, tuned for a header pill). */
+  size?: number;
+  className?: string;
+}
+
+export function AssetCircles({
+  assets,
+  max = 4,
+  size = 18,
+  className,
+}: AssetCirclesProps) {
+  const [hover, setHover] = useState<number | null>(null);
+  if (assets.length === 0) return null;
+
+  const shown = assets.slice(0, max);
+  const overflow = assets.length - shown.length;
+  const overlap = Math.round(size / 3);
+  const lift = Math.max(5, Math.round(size * 0.4));
+
+  return (
+    <div
+      className={className}
+      style={{ display: "inline-flex", alignItems: "center" }}
+      data-bufi-asset-circles
+    >
+      {shown.map((a, i) => {
+        const h = hover === i;
+        return (
+          <span
+            key={`${a.label}:${i}`}
+            onMouseEnter={() => setHover(i)}
+            onMouseLeave={() => setHover((p) => (p === i ? null : p))}
+            style={{
+              position: "relative",
+              marginLeft: i === 0 ? 0 : -overlap,
+              zIndex: h ? 50 : shown.length - i,
+              transform: h ? `translateY(-${lift}px) scale(1.2)` : "none",
+              transition: "transform 160ms cubic-bezier(0.23, 1, 0.32, 1)",
+              display: "inline-flex",
+            }}
+          >
+            {/* Ticker tooltip — sits just above the circle. */}
+            {h && <span style={tooltipStyle}>{a.label}</span>}
+            <span
+              style={{
+                width: size,
+                height: size,
+                borderRadius: "9999px",
+                overflow: "hidden",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "#fff",
+                boxShadow: "0 0 0 2px #fff",
+              }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={a.iconUrl}
+                alt={a.label}
+                width={size}
+                height={size}
+                style={{ width: size, height: size, objectFit: "cover", display: "block" }}
+              />
+            </span>
+          </span>
+        );
+      })}
+
+      {overflow > 0 && (
+        <span
+          style={{
+            width: size,
+            height: size,
+            marginLeft: -overlap,
+            borderRadius: "9999px",
+            display: "grid",
+            placeItems: "center",
+            background: "#F4F4F4",
+            boxShadow: "0 0 0 2px #fff",
+            fontSize: Math.max(9, Math.round(size * 0.5)),
+            fontWeight: 600,
+            color: "#6a55cf",
+          }}
+        >
+          +{overflow}
+        </span>
+      )}
+    </div>
+  );
+}
+
+const tooltipStyle: CSSProperties = {
+  position: "absolute",
+  bottom: "100%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  marginBottom: 6,
+  whiteSpace: "nowrap",
+  padding: "2px 6px",
+  borderRadius: 6,
+  fontSize: 9,
+  fontWeight: 700,
+  background: "#6a55cf",
+  color: "#fff",
+  pointerEvents: "none",
+  zIndex: 60,
+  boxShadow: "0 2px 6px -2px rgba(0,0,0,0.3)",
+};
+
+export default AssetCircles;

package/src/react/index.ts

@@ -11,3 +11,16 @@ export {
   type WalletDropdownProps,
   type WalletDropdownClassNames,
 } from "./wallet-dropdown";
+export {
+  AssetCircles,
+  type AssetCircleItem,
+  type AssetCirclesProps,
+} from "./avatar-circles";
+export {
+  WalletBalancePanel,
+  type WalletBalancePanelProps,
+  type WalletBalancePanelChain,
+  type WalletBalancePanelToken,
+  type WalletBalancePanelTab,
+  type WalletBalancePanelClassNames,
+} from "./wallet-balance-panel";

package/src/react/wallet-balance-panel.tsx

@@ -0,0 +1,232 @@
+import { type ReactNode } from "react";
+
+/**
+ * WalletBalancePanel — the shared, presentational body of the wallet dropdown:
+ * header (title + network tabs + optional scope tabs + total + ghost) and a
+ * per-chain token list. Ported from defi-web's inline dropdown body so desk +
+ * defi-web render the SAME body (Phase 1 of the shared <BufiWallet>).
+ *
+ * Presentational + injected: the host supplies the chain/token data, the live
+ * total + ghost as ReactNodes (so it can keep animated counters), and theming
+ * via `classNames` (each app's tokens differ). No data-fetching, no app deps.
+ */
+export interface WalletBalancePanelToken {
+  asset: string;
+  /** Already display-formatted amount, e.g. "12.45". */
+  amount: string;
+  iconUrl?: string;
+}
+
+export interface WalletBalancePanelChain {
+  chainId: number;
+  label: string;
+  iconUrl?: string;
+  /** Net-filtered, host-decided which tokens to show (e.g. nonzero only). */
+  tokens: WalletBalancePanelToken[];
+}
+
+export interface WalletBalancePanelTab {
+  key: string;
+  label: string;
+}
+
+export interface WalletBalancePanelClassNames {
+  header?: string;
+  headerRow?: string;
+  titleWrap?: string;
+  titleIcon?: string;
+  title?: string;
+  netRow?: string;
+  netTab?: string;
+  netTabActive?: string;
+  scopeRow?: string;
+  scopeTab?: string;
+  scopeTabActive?: string;
+  totalRow?: string;
+  totalLabel?: string;
+  totalValue?: string;
+  ghostRow?: string;
+  body?: string;
+  empty?: string;
+  chainRow?: string;
+  chainIcon?: string;
+  chainLabel?: string;
+  tokenList?: string;
+  tokenRow?: string;
+  tokenIcon?: string;
+  tokenZero?: string;
+}
+
+export interface WalletBalancePanelProps {
+  title: string;
+  /** "Personal" / "Treasury" — labels the total row. */
+  scopeLabel?: string;
+  /** Live total node (host renders e.g. "≈ $<AnimatedNumber/>"), or "—". */
+  totalText: ReactNode;
+  /** False → render the empty state instead of the chain list. */
+  hasAddress?: boolean;
+  emptyMessage?: ReactNode;
+  /** Small wallet icon before the title. */
+  titleIcon?: ReactNode;
+  /** Extra node beside the title (e.g. <AssetCircles>). */
+  titleExtra?: ReactNode;
+  /** Network tabs (mainnet/testnet); omit to hide. */
+  networks?: WalletBalancePanelTab[];
+  activeNetwork?: string;
+  onNetworkChange?: (key: string) => void;
+  /** Scope tabs (team: Treasury/Operations); omit to hide. */
+  scopes?: WalletBalancePanelTab[];
+  activeScope?: string;
+  onScopeChange?: (key: string) => void;
+  /** Ghost (private) balance row node; omit to hide. */
+  ghost?: ReactNode;
+  /** Per-chain balances, already net-filtered by the host. */
+  chains: WalletBalancePanelChain[];
+  /** Per-token cell renderer override (host can pass its own currency cell). */
+  renderToken?: (token: WalletBalancePanelToken, chain: WalletBalancePanelChain) => ReactNode;
+  /** Shown when a chain has no nonzero tokens (default "$0.00"). */
+  zeroText?: ReactNode;
+  classNames?: WalletBalancePanelClassNames;
+}
+
+function Tabs({
+  tabs,
+  active,
+  onChange,
+  rowClass,
+  tabClass,
+  activeClass,
+}: {
+  tabs: WalletBalancePanelTab[];
+  active?: string;
+  onChange?: (k: string) => void;
+  rowClass?: string;
+  tabClass?: string;
+  activeClass?: string;
+}) {
+  return (
+    <div className={rowClass} role="tablist">
+      {tabs.map((t) => {
+        const on = t.key === active;
+        return (
+          <button
+            key={t.key}
+            type="button"
+            role="tab"
+            aria-selected={on}
+            onClick={() => onChange?.(t.key)}
+            className={`${tabClass ?? ""} ${on ? activeClass ?? "" : ""}`.trim()}
+          >
+            {t.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function WalletBalancePanel({
+  title,
+  scopeLabel,
+  totalText,
+  hasAddress = true,
+  emptyMessage,
+  titleIcon,
+  titleExtra,
+  networks,
+  activeNetwork,
+  onNetworkChange,
+  scopes,
+  activeScope,
+  onScopeChange,
+  ghost,
+  chains,
+  renderToken,
+  zeroText = "$0.00",
+  classNames = {},
+}: WalletBalancePanelProps): ReactNode {
+  return (
+    <div data-bufi-balance-panel>
+      <div className={classNames.header}>
+        <div className={classNames.headerRow}>
+          <div className={classNames.titleWrap}>
+            {titleIcon ? <span className={classNames.titleIcon}>{titleIcon}</span> : null}
+            <span className={classNames.title}>{title}</span>
+            {titleExtra}
+          </div>
+          {networks && networks.length > 0 ? (
+            <Tabs
+              tabs={networks}
+              active={activeNetwork}
+              onChange={onNetworkChange}
+              rowClass={classNames.netRow}
+              tabClass={classNames.netTab}
+              activeClass={classNames.netTabActive}
+            />
+          ) : null}
+        </div>
+
+        {scopes && scopes.length > 1 ? (
+          <Tabs
+            tabs={scopes}
+            active={activeScope}
+            onChange={onScopeChange}
+            rowClass={classNames.scopeRow}
+            tabClass={classNames.scopeTab}
+            activeClass={classNames.scopeTabActive}
+          />
+        ) : null}
+
+        <div className={classNames.totalRow}>
+          <span className={classNames.totalLabel}>{scopeLabel ? `${scopeLabel} balance` : "Balance"}</span>
+          <span className={classNames.totalValue}>{totalText}</span>
+        </div>
+
+        {ghost ? <div className={classNames.ghostRow}>{ghost}</div> : null}
+      </div>
+
+      <div className={classNames.body}>
+        {!hasAddress ? (
+          <div className={classNames.empty}>{emptyMessage}</div>
+        ) : (
+          chains.map((c) => (
+            <div key={c.chainId} className={classNames.chainRow}>
+              <span className={classNames.chainIcon}>
+                {c.iconUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={c.iconUrl} alt="" width={16} height={16} />
+                ) : (
+                  c.label.slice(0, 2)
+                )}
+              </span>
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div className={classNames.chainLabel}>{c.label}</div>
+                <div className={classNames.tokenList}>
+                  {c.tokens.length > 0 ? (
+                    c.tokens.map((t) =>
+                      renderToken ? (
+                        <span key={t.asset}>{renderToken(t, c)}</span>
+                      ) : (
+                        <span key={t.asset} className={classNames.tokenRow}>
+                          {t.iconUrl ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            <img src={t.iconUrl} alt="" width={14} height={14} className={classNames.tokenIcon} />
+                          ) : null}
+                          {t.amount} {t.asset}
+                        </span>
+                      ),
+                    )
+                  ) : (
+                    <span className={classNames.tokenZero}>{zeroText}</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default WalletBalancePanel;