@bufinance/web3-signin 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bufinance/web3-signin",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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,8 @@ export {
   type WalletDropdownProps,
   type WalletDropdownClassNames,
 } from "./wallet-dropdown";
+export {
+  AssetCircles,
+  type AssetCircleItem,
+  type AssetCirclesProps,
+} from "./avatar-circles";

package/src/react/wallet-dropdown.tsx

@@ -21,6 +21,7 @@ export interface WalletDropdownClassNames {
   tabActive?: string;
   accountRow?: string;
   balanceRow?: string;
+  signOut?: string;
 }
 
 export interface WalletDropdownProps {
@@ -58,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;
 }
 
@@ -79,6 +88,8 @@ export function WalletDropdown(props: WalletDropdownProps): ReactNode {
     renderBalances = true,
     emptyState,
     onSelectAccount,
+    onSignOut,
+    signOutLabel = "Log out",
     classNames = {},
   } = props;
 
@@ -188,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>