@bufinance/web3-signin 0.1.2 → 0.1.4

package/package.json

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

@@ -21,6 +21,7 @@ export interface WalletDropdownClassNames {
   tabActive?: string;
   accountRow?: string;
   balanceRow?: string;
+  signOut?: string;
 }
 
 export interface WalletDropdownProps {
@@ -32,6 +33,19 @@ export interface WalletDropdownProps {
   scope?: WalletScope | "all";
   /** Currency formatter for the USD total; defaults to en-US $. */
   formatUsd?: (n: number) => string;
+  /**
+   * Custom trigger (pill) renderer. When provided, replaces the built-in
+   * text-only pill so a host can render its own rich trigger (icon, animated
+   * total, chevron) while the shell still owns open-state, the auth gate, and
+   * click-outside. The host renders its own button and calls `toggle` on click.
+   * Omit for the default pill (desk).
+   */
+  trigger?: (state: {
+    open: boolean;
+    total: number;
+    toggle: () => void;
+    formatUsd: (n: number) => string;
+  }) => ReactNode;
   /** Extra content inside the open panel — desk injects gateway/hinkal/multisig;
    *  defi-web injects its full per-chain balance body (net toggle, ghost, APY). */
   children?: ReactNode;
@@ -45,6 +59,14 @@ export interface WalletDropdownProps {
   /** Shown when authed but no accounts yet (provisioning). */
   emptyState?: ReactNode;
   onSelectAccount?: (account: WalletAccount) => void;
+  /**
+   * When provided, a "Log out" button renders at the BOTTOM of the open panel
+   * (below children). Both apps wire their own session sign-out — desk via
+   * Supabase, defi-web via the BUFI session — so the control lives in one place.
+   */
+  onSignOut?: () => void;
+  /** Label for the sign-out button (default "Log out"). */
+  signOutLabel?: string;
   classNames?: WalletDropdownClassNames;
 }
 
@@ -61,10 +83,13 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
     accounts,
     scope = "all",
     formatUsd = defaultFormatUsd,
+    trigger,
     children,
     renderBalances = true,
     emptyState,
     onSelectAccount,
+    onSignOut,
+    signOutLabel = "Log out",
     classNames = {},
   } = props;
 
@@ -103,17 +128,23 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
   const active = visible.find((a) => a.id === activeId) ?? visible[0];
   const pillTotal = active ? totalUsd(active.balances) : 0;
 
+  const toggle = (): void => setOpen((v) => !v);
+
   return (
     <div ref={rootRef} className={classNames.root} data-bufi-wallet>
-      <button
-        type="button"
-        aria-label="Open Stablecoin FX Wallet"
-        aria-expanded={open}
-        className={classNames.pill ?? "acct-mini"}
-        onClick={() => setOpen((v) => !v)}
-      >
-        {formatUsd(pillTotal)}
-      </button>
+      {trigger ? (
+        trigger({ open, total: pillTotal, toggle, formatUsd })
+      ) : (
+        <button
+          type="button"
+          aria-label="Open Stablecoin FX Wallet"
+          aria-expanded={open}
+          className={classNames.pill ?? "acct-mini"}
+          onClick={toggle}
+        >
+          {formatUsd(pillTotal)}
+        </button>
+      )}
 
       {open && (
         <div role="menu" className={classNames.panel} data-bufi-wallet-panel>
@@ -168,6 +199,18 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
                 {children}
               </>
             )}
+
+          {/* Sign out — always the last thing in the panel. */}
+          {onSignOut && (
+            <button
+              type="button"
+              className={classNames.signOut}
+              onClick={onSignOut}
+              data-bufi-signout
+            >
+              {signOutLabel}
+            </button>
+          )}
         </div>
       )}
     </div>