@bufinance/web3-signin 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bufinance/web3-signin",
-  "version": "0.1.5",
+  "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/index.ts

@@ -16,3 +16,11 @@ export {
   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;