@bufinance/web3-signin 0.1.0 → 0.1.2

package/README.md

@@ -8,12 +8,9 @@ It wraps three things:
 2. **Supabase Web3 auth** — `signInWithWeb3` (EIP-4361 "Sign in with Ethereum"). Supabase builds the SIWE message, the wallet signs, GoTrue verifies server-side and mints the session. No custom SIWE backend.
 3. **Turnstile CAPTCHA** (wallet logins only) — renders the Cloudflare Turnstile widget and hands the token to `signInWithWeb3` as `captchaToken`. **No siteverify Worker** — Supabase verifies the token with the secret set in its dashboard.
 
-## Install (GitHub Packages)
+## Install (public npm)
 
 ```
-# .npmrc
-@bufinance:registry=https://npm.pkg.github.com
-
 bun add @bufinance/web3-signin
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bufinance/web3-signin",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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",
@@ -9,7 +9,9 @@
     ".": "./src/index.ts",
     "./react": "./src/react/index.ts"
   },
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "bun test"

package/src/react/turnstile.tsx

@@ -9,14 +9,18 @@ import { useEffect, useRef } from "react";
  * token up via `onToken`, which the caller passes as `captchaToken` to
  * `signInWithWeb3`. Reset it after each auth attempt (tokens are single-use).
  */
-declare global {
-  interface Window {
-    turnstile?: {
-      render: (el: HTMLElement, opts: TurnstileRenderOpts) => string;
-      reset: (id?: string) => void;
-      remove: (id?: string) => void;
-    };
-  }
+interface TurnstileApi {
+  render: (el: HTMLElement, opts: TurnstileRenderOpts) => string;
+  reset: (id?: string) => void;
+  remove: (id?: string) => void;
+}
+
+/** Read window.turnstile without `declare global` — augmenting the global
+ *  Window collides with consumers that already declare their own turnstile
+ *  type. A local intersection cast keeps this package self-contained. */
+function getTurnstile(): TurnstileApi | undefined {
+  if (typeof window === "undefined") return undefined;
+  return (window as Window & { turnstile?: TurnstileApi }).turnstile;
 }
 
 interface TurnstileRenderOpts {
@@ -35,7 +39,7 @@ let scriptPromise: Promise<void> | null = null;
 
 function loadScript(): Promise<void> {
   if (typeof window === "undefined") return Promise.resolve();
-  if (window.turnstile) return Promise.resolve();
+  if (getTurnstile()) return Promise.resolve();
   if (scriptPromise) return scriptPromise;
   scriptPromise = new Promise<void>((resolve, reject) => {
     const s = document.createElement("script");
@@ -79,8 +83,10 @@ export function Turnstile({
     if (!sitekey) return;
     loadScript()
       .then(() => {
-        if (cancelled || !ref.current || !window.turnstile) return;
-        widgetId.current = window.turnstile.render(ref.current, {
+        if (cancelled || !ref.current) return;
+        const api = getTurnstile();
+        if (!api) return;
+        widgetId.current = api.render(ref.current, {
           sitekey,
           action: "bufi-wallet-login",
           theme,
@@ -93,9 +99,10 @@ export function Turnstile({
       .catch(() => cb.current.onError?.());
     return () => {
       cancelled = true;
-      if (widgetId.current && window.turnstile) {
+      const api = getTurnstile();
+      if (widgetId.current && api) {
         try {
-          window.turnstile.remove(widgetId.current);
+          api.remove(widgetId.current);
         } catch {
           /* widget already gone */
         }
@@ -110,5 +117,5 @@ export function Turnstile({
 /** Imperatively reset the rendered widget (tokens are single-use; reset after
  *  each auth attempt). Pass the same sitekey instance's container. */
 export function resetTurnstile(): void {
-  if (typeof window !== "undefined") window.turnstile?.reset();
+  getTurnstile()?.reset();
 }

package/src/react/wallet-dropdown.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useMemo, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import type { TokenBalance, WalletAccount, WalletScope } from "../types";
 
 /**
@@ -32,8 +32,16 @@ export interface WalletDropdownProps {
   scope?: WalletScope | "all";
   /** Currency formatter for the USD total; defaults to en-US $. */
   formatUsd?: (n: number) => string;
-  /** Extra content inside the open panel — desk injects gateway/hinkal/multisig. */
+  /** 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;
+  /**
+   * Render the built-in flat balance rows for the active account. Default true
+   * (desk). Set false when the host renders its own richer balance body via
+   * `children` (defi-web's per-chain grouped list) — the `accounts` balances
+   * are then used only for the pill total, not drawn as rows.
+   */
+  renderBalances?: boolean;
   /** Shown when authed but no accounts yet (provisioning). */
   emptyState?: ReactNode;
   onSelectAccount?: (account: WalletAccount) => void;
@@ -54,6 +62,7 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
     scope = "all",
     formatUsd = defaultFormatUsd,
     children,
+    renderBalances = true,
     emptyState,
     onSelectAccount,
     classNames = {},
@@ -66,6 +75,27 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
 
   const [open, setOpen] = useState(false);
   const [activeId, setActiveId] = useState<string | null>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Dependency-light popover ergonomics (no radix): click-outside + Escape close.
+  // Both consuming apps get this for free, so neither has to re-implement it.
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: MouseEvent): void => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
 
   // Auth gate — the whole surface is hidden until sign-in passes.
   if (!authed) return null;
@@ -74,7 +104,7 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
   const pillTotal = active ? totalUsd(active.balances) : 0;
 
   return (
-    <div className={classNames.root} data-bufi-wallet>
+    <div ref={rootRef} className={classNames.root} data-bufi-wallet>
       <button
         type="button"
         aria-label="Open Stablecoin FX Wallet"
@@ -114,7 +144,7 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
                   </div>
                 )}
 
-                {active && (
+                {renderBalances && active && (
                   <div className={classNames.accountRow}>
                     {active.balances.length === 0
                       ? (emptyState ?? null)