@seams/wallet 0.10.2 → 0.12.0

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

@@ -1,77 +1,65 @@
 import { MenuItem } from "./MenuItem.js";
 import { LockMenuItem } from "./LockMenuItem.js";
-import { TransactionSettingsSection } from "./TransactionSettingsSection.js";
-import { AccountsSection } from "./AccountsSection.js";
-import { ExportKeysSection } from "./ExportKeysSection.js";
-import { PROFILE_MENU_ITEM_IDS } from "./types.js";
-import { Fragment, forwardRef, useMemo } from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./ProfileDropdown.css";
 //#region src/react/components/AccountMenuButton/ProfileDropdown.tsx
-const ProfileDropdown = forwardRef(({ isOpen, menuItems, onLock, onClose, menuItemsRef, currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, transactionSettingsOpen = false, accountsRows, accountsOpen = false, exportKeysOpen = false, exportLoadingChain = null, canExportNearKey, canExportEvmKeys, onExportChain, theme = "dark", highlightedMenuItemId }, ref) => {
-	const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;
-	menuItemsRef.current.length = menuItems.length;
-	const highlightedIndex = useMemo(() => {
-		if (!highlightedMenuItemId) return -1;
-		return menuItems.findIndex((item) => item.id === highlightedMenuItemId || item.label === highlightedMenuItemId);
-	}, [highlightedMenuItemId, menuItems]);
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: `seams-profile-dropdown-morphed ${theme}`,
-		"data-state": isOpen ? "open" : "closed",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "seams-profile-dropdown-menu",
-			children: [
-				menuItems.map((item, index) => {
-					const refCallback = (el) => {
-						if (menuItemsRef.current) menuItemsRef.current[index] = el;
-					};
-					const isHighlighted = index === highlightedIndex;
-					const isAccountsItem = item.id === PROFILE_MENU_ITEM_IDS.ACCOUNTS;
-					const isExportKeysItem = item.id === PROFILE_MENU_ITEM_IDS.EXPORT_KEYS;
-					return /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsx(MenuItem, {
-							ref: refCallback,
-							item,
-							onClose,
-							className: "",
-							isHighlighted,
-							style: { ["--stagger-item-n"]: index }
-						}),
-						isAccountsItem && accountsRows && accountsRows.length > 0 && /* @__PURE__ */ jsx(AccountsSection, {
-							rows: accountsRows,
-							isOpen: accountsOpen,
-							style: { ["--stagger-item-n"]: index }
-						}),
-						isExportKeysItem && onExportChain && /* @__PURE__ */ jsx(ExportKeysSection, {
-							isOpen: exportKeysOpen,
-							loadingChain: exportLoadingChain,
-							canExportNearKey,
-							canExportEvmKeys,
-							onSelectChain: onExportChain,
-							style: { ["--stagger-item-n"]: index }
-						})
-					] }, item.id ?? index);
-				}),
-				currentConfirmConfig && (onSetUiMode || onToggleShowDetails) && onToggleSkipClick && onSetDelay && /* @__PURE__ */ jsx(TransactionSettingsSection, {
-					currentConfirmConfig,
-					onSetUiMode,
-					onToggleShowDetails,
-					onToggleSkipClick,
-					onSetDelay,
-					isOpen: transactionSettingsOpen,
-					theme,
-					style: { ["--stagger-item-n"]: menuItems.length }
-				}),
-				/* @__PURE__ */ jsx(LockMenuItem, {
-					onLock,
-					className: "seams-lock-menu-item",
-					style: { ["--stagger-item-n"]: hasTransactionSettings ? menuItems.length + 1 : menuItems.length }
-				})
-			]
-		})
+const SECURITY_ITEMS = [
+	"authentication-methods",
+	"scan-link-device",
+	"linked-devices",
+	"recovery-codes"
+];
+function isSecurityItem(item) {
+	return SECURITY_ITEMS.includes(item.id ?? "");
+}
+function compareSecurityItems(a, b) {
+	return SECURITY_ITEMS.indexOf(a.id ?? "") - SECURITY_ITEMS.indexOf(b.id ?? "");
+}
+function isAccountItem(item) {
+	return !isSecurityItem(item);
+}
+function storeMenuRef(refs, index, element) {
+	refs.current[index] = element;
+}
+function MenuGroup({ label, items, props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "seams-account-menu-group",
+		"aria-label": label,
+		children: [/* @__PURE__ */ jsx("h3", { children: label }), items.map(renderItem.bind(null, props))]
 	});
-});
+}
+function renderItem(props, item) {
+	const index = props.menuItems.indexOf(item);
+	return /* @__PURE__ */ jsx(MenuItem, {
+		ref: storeMenuRef.bind(null, props.menuItemsRef, index),
+		item,
+		onClose: props.onClose,
+		isHighlighted: item.id === props.highlightedMenuItemId
+	}, item.id);
+}
+function ProfileDropdown(props) {
+	props.menuItemsRef.current.length = props.menuItems.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "seams-profile-dropdown-menu",
+		children: [
+			/* @__PURE__ */ jsx(MenuGroup, {
+				label: "Addresses",
+				items: props.menuItems.filter(isAccountItem),
+				props
+			}),
+			/* @__PURE__ */ jsx(MenuGroup, {
+				label: "Security & devices",
+				items: props.menuItems.filter(isSecurityItem).sort(compareSecurityItems),
+				props
+			}),
+			/* @__PURE__ */ jsx(LockMenuItem, {
+				onLock: props.onLock,
+				className: "seams-lock-menu-item"
+			})
+		]
+	});
+}
 //#endregion
 export { ProfileDropdown };
 

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

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/RecoveryCodeAcknowledgement.tsx
+function updateAcknowledgement(setAcknowledged, event) {
+	setAcknowledged(event.currentTarget.checked);
+}
+function RecoveryCodeAcknowledgement({ onDone }) {
+	const [acknowledged, setAcknowledged] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
+		className: "seams-account-recovery-acknowledgement",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			checked: acknowledged,
+			onChange: updateAcknowledgement.bind(null, setAcknowledged)
+		}), /* @__PURE__ */ jsx("span", { children: "I’ve saved these codes. They won’t be shown again." })]
+	}), /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "seams-account-action primary",
+		disabled: !acknowledged,
+		onClick: onDone,
+		children: "Done"
+	})] });
+}
+//#endregion
+export { RecoveryCodeAcknowledgement };
+
+//# sourceMappingURL=RecoveryCodeAcknowledgement.js.map

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

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/RecoveryCodeActions.tsx
+async function copyCodes(codes, feedback) {
+	try {
+		await navigator.clipboard.writeText(`${codes.join("\n")}\n`);
+		feedback("Copied all codes.");
+	} catch {
+		feedback("Unable to copy. Download the codes instead.");
+	}
+}
+function downloadCodes(codes, feedback) {
+	try {
+		const url = URL.createObjectURL(new Blob([`${codes.join("\n")}\n`], { type: "text/plain;charset=utf-8" }));
+		const anchor = document.createElement("a");
+		anchor.href = url;
+		anchor.download = "seams-recovery-codes.txt";
+		try {
+			anchor.click();
+		} finally {
+			setTimeout(URL.revokeObjectURL.bind(URL, url), 0);
+		}
+		feedback("Downloaded all codes.");
+	} catch {
+		feedback("Unable to download. Copy the codes instead.");
+	}
+}
+function RecoveryCodeActions({ codes }) {
+	const [feedback, setFeedback] = useState("");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "seams-recovery-code-actions",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "seams-account-action",
+			onClick: copyCodes.bind(null, codes, setFeedback),
+			children: "Copy all"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "seams-account-action",
+			onClick: downloadCodes.bind(null, codes, setFeedback),
+			children: "Download all"
+		})]
+	}), /* @__PURE__ */ jsx("p", {
+		className: "seams-recovery-code-action-status",
+		role: "status",
+		"aria-live": "polite",
+		children: feedback
+	})] });
+}
+//#endregion
+export { RecoveryCodeActions };
+
+//# sourceMappingURL=RecoveryCodeActions.js.map

package/dist/esm/react/components/AccountMenuButton/TransactionSettingsSection.css

@@ -44,12 +44,14 @@
 }
 
 .seams-account-seg {
+  box-sizing: border-box;
+  min-width: 0;
   position: relative;
   min-height: 54px;
   overflow: hidden;
   padding: 5px;
   border: none;
-  background: var(--seams-colors-surface2);
+  background: color-mix(in srgb, var(--seams-colors-textPrimary) 6%, var(--seams-colors-surface2));
   border-radius: var(--seams-border-radius-xl);
 }
 

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

@@ -91,10 +91,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 							activeBg: TRANSACTION_SETTINGS_ACTIVE_BACKGROUND,
 							height: 40,
 							buttonFontSize: 12,
-							containerStyle: {
-								background: "var(--seams-colors-surface2)",
-								width: "100%"
-							},
+							containerStyle: { width: "100%" },
 							buttonStyle: {
 								display: "grid",
 								placeItems: "center",
@@ -133,10 +130,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 								activeBg: TRANSACTION_SETTINGS_ACTIVE_BACKGROUND,
 								height: 40,
 								buttonFontSize: 12,
-								containerStyle: {
-									background: "var(--seams-colors-surface2)",
-									width: "100%"
-								},
+								containerStyle: { width: "100%" },
 								buttonStyle: {
 									display: "grid",
 									placeItems: "center",

package/dist/esm/react/components/AccountMenuButton/UserAccountButton.css

@@ -136,7 +136,7 @@
   width: 40px;
   height: 40px;
   margin-right: 4px;
-  background: var(--seams-colors-surface);
+  background: var(--seams-colors-surface2);
   border-radius: 50%;
   display: flex;
   align-items: center;

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

@@ -2,7 +2,7 @@ import TouchIcon from "./icons/TouchIcon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/UserAccountButton.tsx
-const UserAccountButton = ({ username, hideUsername, fullAccountId, emailAddress, isOpen, onClick, onMouseEnter, onMouseLeave, theme = "dark", menuId, triggerId }) => {
+const UserAccountButton = ({ label = "Settings", username, hideUsername, fullAccountId, emailAddress, isOpen, onClick, onMouseEnter, onMouseLeave, theme = "dark", menuId, triggerId }) => {
 	const onKeyDown = (e) => {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
@@ -33,6 +33,7 @@ const UserAccountButton = ({ username, hideUsername, fullAccountId, emailAddress
 						strokeWidth: 1.4
 					})
 				}), !hideWhenClosed && /* @__PURE__ */ jsx(UserAccountId, {
+					label,
 					username,
 					fullAccountId,
 					emailAddress,
@@ -43,21 +44,23 @@ const UserAccountButton = ({ username, hideUsername, fullAccountId, emailAddress
 		})
 	});
 };
-const UserAccountId = ({ username, fullAccountId, emailAddress, isOpen }) => {
+const UserAccountId = ({ label, username, fullAccountId, emailAddress, isOpen }) => {
 	const displayAccountId = (fullAccountId || username || "").trim();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "seams-user-account--user-details",
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "seams-user-account--username",
-				children: "Settings"
+				children: label
 			}),
 			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": !isOpen,
 				title: displayAccountId || void 0,
 				className: `seams-user-account--account-id ${isOpen ? "visible" : "hidden"}`,
 				children: displayAccountId
 			}),
 			emailAddress && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": !isOpen,
 				title: emailAddress,
 				className: `seams-user-account--email ${isOpen ? "visible" : "hidden"}`,
 				children: emailAddress

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

@@ -1,7 +1,7 @@
 import { base64UrlEncode } from "../../../shared-ts/src/utils/base64.js";
 import { parseWalletMoveId } from "../../../SeamsWeb/publicApi/placement.js";
 import { Component } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/WalletRegionSection.tsx
 const REGIONS = [
 	{
@@ -248,7 +248,7 @@ var WalletRegionSection = class extends Component {
 		switch (state.kind) {
 			case "loading":
 			case "submitting": return /* @__PURE__ */ jsx("p", { children: "You can lock this wallet. An accepted move continues on the server." });
-			case "unavailable": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+			case "unavailable": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 				role: "alert",
 				children: state.message
 			}), /* @__PURE__ */ jsx("button", {
@@ -257,7 +257,7 @@ var WalletRegionSection = class extends Component {
 				onClick: this.load,
 				children: "Check again"
 			})] });
-			case "uncertain": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+			case "uncertain": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 				role: "alert",
 				children: state.message
 			}), /* @__PURE__ */ jsx("button", {
@@ -267,7 +267,7 @@ var WalletRegionSection = class extends Component {
 				children: "Retry same move"
 			})] });
 			case "progress": return /* @__PURE__ */ jsx("p", { children: state.status.state === "completed" || state.status.move.progress.availability === "active" ? "Your wallet is active in the new region. Another move must wait until cleanup completes." : "Signing and wallet changes are paused. Closing or locking this wallet does not cancel the move." });
-			case "ready": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			case "ready": return /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs("p", { children: ["Current region: ", /* @__PURE__ */ jsx("strong", { children: regionName(state.placement.region) })] }),
 				/* @__PURE__ */ jsxs("label", { children: [
 					"Destination region",