@seams/wallet 0.10.2 → 0.12.0

package/dist/esm/react/components/AccountMenuButton/AccountMenuButtonMock.js

@@ -0,0 +1,189 @@
+import { Theme } from "../theme/ThemeProvider.js";
+import { ScanIcon } from "./icons/ScanIcon.js";
+import { KeyIcon } from "./icons/KeyIcon.js";
+import { LinkIcon } from "./icons/LinkIcon.js";
+import { GlobeIcon } from "./icons/GlobeIcon.js";
+import { SlidersIcon } from "./icons/SlidersIcon.js";
+import { RecoveryCodesIcon } from "./icons/RecoveryCodesIcon.js";
+import TouchIcon from "./icons/TouchIcon.js";
+import { AccountMenuButtonView } from "./AccountMenuButtonView.js";
+import { useProfileState } from "./hooks/useProfileState.js";
+import { TransactionSettingsSection } from "./TransactionSettingsSection.js";
+import { AccountMenuMockScreens } from "./AccountMenuMockScreens.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountMenuButtonMock.tsx
+const accounts = [{
+	id: "near",
+	label: "NEAR",
+	address: "alex.near",
+	href: "https://nearblocks.io/address/alex.near"
+}, {
+	id: "evm",
+	label: "Base",
+	address: "0x42010000000000000000000000000000000000891c",
+	href: "https://basescan.org/address/0x42010000000000000000000000000000000000891c"
+}];
+function selectMode(setConfig, uiMode) {
+	setConfig({
+		uiMode,
+		behavior: uiMode === "none" ? "skipClick" : "requireClick"
+	});
+}
+function toggleClick(setConfig, current) {
+	setConfig({
+		uiMode: current.uiMode,
+		behavior: current.behavior === "requireClick" ? "skipClick" : "requireClick"
+	});
+}
+function setDelay(setConfig, current, autoProceedDelay) {
+	setConfig({
+		uiMode: current.uiMode,
+		behavior: current.behavior,
+		autoProceedDelay
+	});
+}
+function lockPreview(setStatus, close) {
+	setStatus("logged_out");
+	close();
+}
+function openPreview(setStatus, toggle) {
+	setStatus("ready");
+	toggle();
+}
+function resetPreviewNavigation(isOpen, setScreen) {
+	if (!isOpen) setScreen({ kind: "overview" });
+}
+function AccountMenuPreview({ username = "Alex Chen", walletId = "alex.near", theme = "light", defaultOpen = true, className, style }) {
+	const [open, setOpen] = useState(defaultOpen);
+	const [status, setStatus] = useState("ready");
+	const [screen, setScreen] = useState({ kind: "overview" });
+	const [confirmation, setConfirmation] = useState({
+		uiMode: "modal",
+		behavior: "requireClick"
+	});
+	const { refs, isOpen, handleToggle, handleClose } = useProfileState({
+		open,
+		onOpenChange: setOpen
+	});
+	useEffect(resetPreviewNavigation.bind(null, isOpen, setScreen), [isOpen]);
+	const menuItems = [
+		{
+			id: "accounts",
+			icon: /* @__PURE__ */ jsx(GlobeIcon, {}),
+			label: "Accounts",
+			description: "View accounts on block explorers",
+			disabled: false,
+			keepOpenOnClick: true,
+			onClick: setScreen.bind(null, { kind: "accounts" })
+		},
+		{
+			id: "export-keys",
+			icon: /* @__PURE__ */ jsx(KeyIcon, {}),
+			label: "Export keys",
+			description: "Export wallet signing keys",
+			disabled: false,
+			keepOpenOnClick: true,
+			onClick: setScreen.bind(null, { kind: "export-keys" })
+		},
+		{
+			id: "recovery-codes",
+			icon: /* @__PURE__ */ jsx(RecoveryCodesIcon, {}),
+			label: "Recovery codes",
+			description: "Back up wallet recovery codes",
+			disabled: false,
+			keepOpenOnClick: true,
+			onClick: setScreen.bind(null, {
+				kind: "recovery",
+				revealed: false
+			})
+		},
+		{
+			id: "authentication-methods",
+			icon: /* @__PURE__ */ jsx(TouchIcon, {}),
+			label: "Authentication methods",
+			description: "Add or remove ways to unlock this device",
+			disabled: false,
+			keepOpenOnClick: true,
+			onClick: setScreen.bind(null, { kind: "methods" })
+		},
+		{
+			id: "scan-link-device",
+			icon: /* @__PURE__ */ jsx(ScanIcon, {}),
+			label: "Scan and link device",
+			description: "Scan QR to link a device",
+			disabled: false,
+			keepOpenOnClick: true,
+			onClick: setScreen.bind(null, { kind: "scanner" })
+		},
+		{
+			id: "linked-devices",
+			icon: /* @__PURE__ */ jsx(LinkIcon, {}),
+			label: "Linked devices",
+			description: "See devices using this wallet",
+			disabled: false,
+			keepOpenOnClick: true,
+			onClick: setScreen.bind(null, { kind: "linked" })
+		},
+		{
+			id: "transaction-settings",
+			icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
+			label: "Transaction settings",
+			description: "Customize confirmation behavior",
+			disabled: false,
+			keepOpenOnClick: true,
+			onClick: setScreen.bind(null, { kind: "transactions" })
+		}
+	];
+	return /* @__PURE__ */ jsx(AccountMenuButtonView, {
+		buttonRef: refs.buttonRef,
+		dropdownRef: refs.dropdownRef,
+		className,
+		style,
+		trigger: {
+			label: status === "logged_out" ? "Logged out" : "Settings",
+			username,
+			fullAccountId: walletId,
+			hideUsername: false,
+			isOpen,
+			onClick: openPreview.bind(null, setStatus, handleToggle),
+			theme
+		},
+		dropdown: {
+			isOpen,
+			menuItems,
+			menuItemsRef: refs.menuItemsRef,
+			onClose: handleClose,
+			onLock: lockPreview.bind(null, setStatus, handleClose),
+			theme
+		},
+		children: screen.kind === "overview" ? null : /* @__PURE__ */ jsx(AccountMenuMockScreens, {
+			screen,
+			setScreen,
+			accounts,
+			walletId,
+			transactionSettings: /* @__PURE__ */ jsx(TransactionSettingsSection, {
+				currentConfirmConfig: confirmation,
+				onSetUiMode: selectMode.bind(null, setConfirmation),
+				onToggleSkipClick: toggleClick.bind(null, setConfirmation, confirmation),
+				onSetDelay: setDelay.bind(null, setConfirmation, confirmation),
+				isOpen: true,
+				theme
+			})
+		})
+	});
+}
+/** Provider-free interactive preview using the connected AccountMenuButton's renderer.
+* Navigation, confirmation preferences, devices, recovery and export previews stay local.
+* This component never opens a camera, signs, exports keys or accesses storage.
+*/
+function AccountMenuButtonMock(props) {
+	return /* @__PURE__ */ jsx(Theme, {
+		theme: props.theme ?? "light",
+		children: /* @__PURE__ */ jsx(AccountMenuPreview, { ...props })
+	});
+}
+//#endregion
+export { AccountMenuButtonMock };
+
+//# sourceMappingURL=AccountMenuButtonMock.js.map

package/dist/esm/react/components/AccountMenuButton/AccountMenuButtonView.js

@@ -0,0 +1,137 @@
+import { SEAMS_STANDARD_WORDMARK_PATH } from "../../../core/signingEngine/uiConfirm/ui/seamsWordmarkPaths.js";
+import TouchIcon from "./icons/TouchIcon.js";
+import { UserAccountButton } from "./UserAccountButton.js";
+import { ProfileDropdown } from "./ProfileDropdown.js";
+import { LockKeyholeIcon } from "./icons/LockKeyholeIcon.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Web3AuthProfileButton.css";
+//#region src/react/components/AccountMenuButton/AccountMenuButtonView.tsx
+function measurePanel(element, setHeight) {
+	setHeight(element.getBoundingClientRect().height);
+}
+function observePanel(contentRef, isOpen, setHeight) {
+	const content = contentRef.current;
+	if (!content || !isOpen) {
+		setHeight(null);
+		return;
+	}
+	const measure = measurePanel.bind(null, content, setHeight);
+	measure();
+	const observer = new ResizeObserver(measure);
+	observer.observe(content);
+	return observer.disconnect.bind(observer);
+}
+function closeWithEscape(onClose, event) {
+	if (event.key !== "Escape" || event.defaultPrevented) return;
+	event.preventDefault();
+	onClose();
+}
+function restoreTriggerFocus(buttonRef, previousOpen, isOpen) {
+	if (previousOpen.current && !isOpen) buttonRef.current?.querySelector("[aria-expanded]")?.focus({ preventScroll: true });
+	previousOpen.current = isOpen;
+}
+function restoreOverviewFocus(buttonRef, previousScreen, hasScreen) {
+	if (previousScreen.current && !hasScreen) buttonRef.current?.querySelector(".seams-account-identity")?.focus({ preventScroll: true });
+	previousScreen.current = hasScreen;
+}
+/** One shell for live account screens and the provider-free preview. */
+function AccountMenuButtonView({ buttonRef, dropdownRef, trigger, dropdown, className, style, children }) {
+	const contentRef = useRef(null);
+	const hasScreen = children !== null && children !== void 0;
+	const previousScreen = useRef(hasScreen);
+	useLayoutEffect(restoreOverviewFocus.bind(null, buttonRef, previousScreen, hasScreen), [buttonRef, hasScreen]);
+	const previousOpen = useRef(trigger.isOpen);
+	useLayoutEffect(restoreTriggerFocus.bind(null, buttonRef, previousOpen, trigger.isOpen), [buttonRef, trigger.isOpen]);
+	const [height, setHeight] = useState(null);
+	useLayoutEffect(observePanel.bind(null, contentRef, trigger.isOpen, setHeight), [trigger.isOpen]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: buttonRef,
+		className: `seams-profile-button-morphable ${trigger.isOpen ? "open" : "closed"} ${className ?? ""}`,
+		style: trigger.isOpen ? style : {
+			...style,
+			width: "fit-content"
+		},
+		"data-state": trigger.isOpen ? "open" : "closed",
+		children: trigger.isOpen ? /* @__PURE__ */ jsx("div", {
+			className: "seams-account-resize",
+			onKeyDown: closeWithEscape.bind(null, dropdown.onClose),
+			style: { height: height ?? void 0 },
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
+				className: "seams-account-panel-content",
+				children: [
+					/* @__PURE__ */ jsxs("header", {
+						className: "seams-account-origin",
+						children: [
+							/* @__PURE__ */ jsx(LockKeyholeIcon, { size: 14 }),
+							/* @__PURE__ */ jsx("span", { children: typeof window === "undefined" ? "" : window.location.host }),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Close wallet settings",
+								onClick: dropdown.onClose,
+								children: /* @__PURE__ */ jsx("svg", {
+									width: "18",
+									height: "18",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M18 6 6 18" })
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "seams-account-main",
+						ref: dropdownRef,
+						children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+							className: "seams-account-identity",
+							tabIndex: -1,
+							role: "group",
+							"aria-label": "Wallet account",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "seams-account-avatar",
+								children: /* @__PURE__ */ jsx(TouchIcon, {
+									width: 23,
+									height: 23,
+									strokeWidth: 1.5
+								})
+							}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: trigger.fullAccountId ?? trigger.username }), trigger.emailAddress ? /* @__PURE__ */ jsx("small", { children: trigger.emailAddress }) : null] })]
+						}), /* @__PURE__ */ jsx(ProfileDropdown, { ...dropdown })] })
+					}),
+					/* @__PURE__ */ jsxs("footer", {
+						className: "seams-account-footer",
+						children: [
+							/* @__PURE__ */ jsxs("svg", {
+								width: "17",
+								height: "17",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								children: [/* @__PURE__ */ jsx("path", { d: "m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6z" }), /* @__PURE__ */ jsx("path", { d: "m8 12 3 3 5-6" })]
+							}),
+							/* @__PURE__ */ jsx("span", { children: "Secured by" }),
+							/* @__PURE__ */ jsx("svg", {
+								className: "seams-account-wordmark",
+								viewBox: "0 0 1428 285",
+								role: "img",
+								"aria-label": "seams",
+								children: /* @__PURE__ */ jsx("path", {
+									d: SEAMS_STANDARD_WORDMARK_PATH,
+									fill: "currentColor",
+									fillRule: "evenodd"
+								})
+							})
+						]
+					})
+				]
+			})
+		}) : /* @__PURE__ */ jsx(UserAccountButton, { ...trigger })
+	});
+}
+//#endregion
+export { AccountMenuButtonView };
+
+//# sourceMappingURL=AccountMenuButtonView.js.map

package/dist/esm/react/components/AccountMenuButton/AccountMenuDeviceDetails.js

@@ -0,0 +1,39 @@
+import TouchIcon from "./icons/TouchIcon.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountMenuDeviceDetails.tsx
+/** Display data only. Removal and authentication remain owned by the caller. */
+function AccountMenuDeviceDetails({ title, description, details, children, icon }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "seams-account-device-hero",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "seams-account-avatar",
+					children: icon ?? /* @__PURE__ */ jsx(TouchIcon, {
+						width: 30,
+						height: 30,
+						strokeWidth: 1.5
+					})
+				}),
+				/* @__PURE__ */ jsx("h3", { children: title }),
+				/* @__PURE__ */ jsx("p", { children: description })
+			]
+		}),
+		/* @__PURE__ */ jsx("dl", {
+			className: "seams-account-inset",
+			children: details.map(renderDetail)
+		}),
+		children
+	] });
+}
+function renderDetail(detail) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "seams-account-detail-row",
+		children: [/* @__PURE__ */ jsx("dt", { children: detail.label }), /* @__PURE__ */ jsx("dd", { children: detail.value })]
+	}, detail.label);
+}
+//#endregion
+export { AccountMenuDeviceDetails };
+
+//# sourceMappingURL=AccountMenuDeviceDetails.js.map

package/dist/esm/react/components/AccountMenuButton/AccountMenuDialog.js

@@ -1,4 +1,7 @@
 import { Theme, useTheme } from "../theme/ThemeProvider.js";
+import { AccountMenuScreen } from "./AccountMenuScreen.js";
+import { LockKeyholeIcon } from "./icons/LockKeyholeIcon.js";
+import { LayersIcon } from "./icons/LayersIcon.js";
 import React, { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/AccountMenuDialog.tsx
@@ -33,7 +36,7 @@ function useAccountMenuDialogKeyboard(input) {
 		onClose
 	]);
 	useEffect(() => {
-		if (!isOpen || presentation === "page") return;
+		if (!isOpen || presentation !== "modal") return;
 		previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		dialogRef.current?.focus({ preventScroll: true });
 		window.addEventListener("keydown", handleDialogKeyDown);
@@ -51,9 +54,16 @@ function useAccountMenuDialogKeyboard(input) {
 }
 const AccountMenuDialogFrame = ({ presentation, onClose, dialogRef, contentClassName, titleId, title, closeLabel, children }) => {
 	const { theme, tokens } = useTheme();
+	const scopedTokens = React.useMemo(() => theme === "dark" ? { dark: tokens } : { light: tokens }, [theme, tokens]);
+	if (presentation === "embedded") return /* @__PURE__ */ jsx(AccountMenuScreen, {
+		title,
+		onBack: onClose,
+		className: contentClassName,
+		children
+	});
 	return /* @__PURE__ */ jsx(Theme, {
 		theme,
-		tokens: React.useMemo(() => theme === "dark" ? { dark: tokens } : { light: tokens }, [theme, tokens]),
+		tokens: scopedTokens,
 		children: /* @__PURE__ */ jsx("div", {
 			className: `seams-linked-devices-modal-backdrop theme-${theme}`,
 			"data-presentation": presentation,
@@ -69,19 +79,35 @@ const AccountMenuDialogFrame = ({ presentation, onClose, dialogRef, contentClass
 				"aria-labelledby": titleId,
 				tabIndex: -1,
 				children: [
-					presentation === "modal" ? /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "seams-linked-devices-modal-close",
-						onClick: onClose,
-						"aria-label": closeLabel,
-						children: "✕"
+					presentation === "modal" ? /* @__PURE__ */ jsxs("header", {
+						className: "seams-account-menu-dialog-header",
+						children: [
+							/* @__PURE__ */ jsx(LockKeyholeIcon, { size: 13 }),
+							/* @__PURE__ */ jsx("span", {
+								className: "seams-account-menu-dialog-host",
+								children: window.location.host
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "seams-linked-devices-modal-close",
+								onClick: onClose,
+								"aria-label": closeLabel,
+								children: "✕"
+							})
+						]
 					}) : null,
-					/* @__PURE__ */ jsx("h2", {
-						id: titleId,
-						className: "seams-linked-devices-modal-title",
-						children: title
+					/* @__PURE__ */ jsxs("div", {
+						className: "seams-account-menu-dialog-main",
+						children: [/* @__PURE__ */ jsx("h2", {
+							id: titleId,
+							className: "seams-linked-devices-modal-title",
+							children: title
+						}), children]
 					}),
-					children
+					presentation === "modal" ? /* @__PURE__ */ jsxs("footer", {
+						className: "seams-account-menu-dialog-footer",
+						children: [/* @__PURE__ */ jsx(LayersIcon, { size: 13 }), "Powered by seams"]
+					}) : null
 				]
 			})
 		})