@seams/wallet 0.10.2 → 0.12.0

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

@@ -1,7 +1,8 @@
 import { useSeams } from "../../context/index.js";
-import { KeyIcon } from "./icons/KeyIcon.js";
 import { AccountMenuDialogFrame, useAccountMenuDialogKeyboard } from "./AccountMenuDialog.js";
-import { MailIcon } from "./icons/MailIcon.js";
+import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
+import { AuthenticationMethodsView } from "./AuthenticationMethodsView.js";
+import { PlusIcon } from "./icons/PlusIcon.js";
 import React, { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./LinkedDevicesModal.css";
@@ -104,6 +105,14 @@ function methodDescription(method) {
 		case "email_otp": return method.presentation.emailAddress ?? "Email OTP on this device";
 	}
 }
+function inventoryStatus(state) {
+	switch (state.kind) {
+		case "idle":
+		case "loading": return "Checking methods…";
+		case "error": return "Unavailable";
+		case "loaded": return state.inventory.kind === "local_selection" ? "Unlock to manage" : "Active";
+	}
+}
 const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation = "modal" }) => {
 	const { seams, loginState, refreshSession } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });
@@ -271,7 +280,7 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation =
 				walletAuthMethodId: method.walletAuthMethodId
 			});
 			await refreshSessionRef.current(walletId);
-			if (presentation === "page") {
+			if (presentation !== "modal") {
 				setActionState({ kind: "idle" });
 				await loadInventory();
 			} else onClose();
@@ -295,7 +304,7 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation =
 	const hasEmailOtp = methods.some((method) => method.kind === "email_otp");
 	const canManageMethods = loadState.kind === "loaded" && loadState.inventory.kind !== "local_selection";
 	const actionInProgress = actionState.kind === "unlocking" || actionState.kind === "adding" || actionState.kind === "revoking";
-	return /* @__PURE__ */ jsxs(AccountMenuDialogFrame, {
+	return /* @__PURE__ */ jsx(AccountMenuDialogFrame, {
 		presentation,
 		onClose,
 		dialogRef,
@@ -303,187 +312,172 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation =
 		titleId: "seams-auth-methods-modal-title",
 		title: "Authentication methods",
 		closeLabel: "Close authentication methods",
-		children: [/* @__PURE__ */ jsx("p", {
-			className: "seams-auth-methods-modal-intro",
-			children: "Manage how this device unlocks the wallet."
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "seams-linked-devices-modal-body",
-			"aria-busy": loadState.kind === "loading",
-			children: [
-				loadState.kind === "idle" ? /* @__PURE__ */ jsx("div", {
-					className: "seams-linked-devices-modal-placeholder",
-					role: "status",
-					children: "Checking authentication methods…"
-				}) : null,
-				loadState.kind === "error" ? /* @__PURE__ */ jsxs("div", {
-					className: "seams-linked-devices-modal-placeholder",
-					role: "alert",
-					children: [/* @__PURE__ */ jsxs("span", { children: ["Unable to load authentication methods: ", loadState.message] }), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "seams-linked-devices-modal-secondary",
-						onClick: () => void loadInventory(),
-						children: "Try again"
-					})]
-				}) : null,
-				inventory ? /* @__PURE__ */ jsx("ul", {
-					className: "seams-linked-devices-modal-list seams-linked-devices-modal-list--grouped",
-					children: methods.map((method) => {
-						const confirming = actionState.kind === "confirming_revoke" && actionState.method.walletAuthMethodId === method.walletAuthMethodId;
-						const revoking = actionState.kind === "revoking" && actionState.method.walletAuthMethodId === method.walletAuthMethodId;
-						return /* @__PURE__ */ jsxs("li", {
-							className: "seams-linked-devices-modal-item seams-linked-devices-modal-item--row",
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "seams-linked-devices-modal-item-icon",
-									"aria-hidden": "true",
-									children: method.kind === "passkey" ? /* @__PURE__ */ jsx(KeyIcon, {
-										size: 20,
-										strokeWidth: 1.75
-									}) : /* @__PURE__ */ jsx(MailIcon, {
-										size: 20,
-										strokeWidth: 1.75
+		children: /* @__PURE__ */ jsx(AuthenticationMethodsView, {
+			walletLabel: walletId ?? "Wallet",
+			status: inventoryStatus(loadState),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "seams-linked-devices-modal-body",
+				"aria-busy": loadState.kind === "loading",
+				children: [
+					loadState.kind === "idle" ? /* @__PURE__ */ jsx("div", {
+						className: "seams-linked-devices-modal-placeholder",
+						role: "status",
+						children: "Checking authentication methods…"
+					}) : null,
+					loadState.kind === "error" ? /* @__PURE__ */ jsxs("div", {
+						className: "seams-linked-devices-modal-placeholder",
+						role: "alert",
+						children: [/* @__PURE__ */ jsxs("span", { children: ["Unable to load authentication methods: ", loadState.message] }), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "seams-linked-devices-modal-secondary",
+							onClick: () => void loadInventory(),
+							children: "Try again"
+						})]
+					}) : null,
+					inventory ? /* @__PURE__ */ jsx("section", {
+						className: "seams-account-menu-section",
+						"aria-label": "Active authentication methods",
+						children: /* @__PURE__ */ jsx("ul", {
+							className: "seams-account-method-tiles",
+							children: methods.map((method) => {
+								const confirming = actionState.kind === "confirming_revoke" && actionState.method.walletAuthMethodId === method.walletAuthMethodId;
+								const revoking = actionState.kind === "revoking" && actionState.method.walletAuthMethodId === method.walletAuthMethodId;
+								return /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+									kind: method.kind,
+									title: methodTitle(method),
+									description: methodDescription(method),
+									action: !confirming && canManageMethods && methods.length > 1 ? /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "seams-linked-devices-modal-secondary seams-linked-devices-modal-remove",
+										disabled: actionInProgress,
+										"aria-label": `Remove ${methodTitle(method)}`,
+										onClick: () => setActionState({
+											kind: "confirming_revoke",
+											method
+										}),
+										children: revoking ? "Removing…" : "Remove"
+									}) : null,
+									children: confirming ? /* @__PURE__ */ jsxs("div", {
+										className: "seams-linked-devices-modal-confirm",
+										children: [/* @__PURE__ */ jsxs("span", { children: [
+											"Remove ",
+											methodTitle(method),
+											" from this device? You will need the other active method to unlock it."
+										] }), /* @__PURE__ */ jsxs("div", {
+											className: "seams-linked-devices-modal-confirm-actions",
+											children: [/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "seams-linked-devices-modal-secondary",
+												onClick: () => setActionState({ kind: "idle" }),
+												children: "Keep it"
+											}), /* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "seams-linked-devices-modal-danger",
+												onClick: () => void revokeMethod(),
+												children: "Remove method"
+											})]
+										})]
+									}) : methods.length > 1 ? null : /* @__PURE__ */ jsx("span", {
+										className: "seams-linked-devices-modal-item-detail",
+										children: "Add another method before removing this one."
 									})
-								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "seams-linked-devices-modal-item-content",
+								}, method.walletAuthMethodId);
+							})
+						})
+					}) : null,
+					inventory && (!hasPasskey || !hasEmailOtp) ? /* @__PURE__ */ jsxs("section", {
+						className: "seams-account-menu-section",
+						"aria-labelledby": "seams-auth-methods-add",
+						children: [
+							/* @__PURE__ */ jsx("h3", {
+								id: "seams-auth-methods-add",
+								className: "seams-account-menu-section-label",
+								children: "Add a method"
+							}),
+							!hasPasskey ? /* @__PURE__ */ jsxs("div", {
+								className: "seams-linked-devices-modal-add-method",
+								children: [/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "seams-linked-devices-modal-secondary seams-account-menu-wide-button",
+									disabled: actionInProgress || !canManageMethods,
+									onClick: () => void addMethod("passkey"),
+									children: [/* @__PURE__ */ jsx(PlusIcon, {
+										size: 18,
+										strokeWidth: 1.75
+									}), actionState.kind === "adding" && actionState.method === "passkey" ? "Adding…" : "Add passkey"]
+								}), /* @__PURE__ */ jsx("p", {
+									className: "seams-linked-devices-modal-security-note",
+									children: "Use a passkey from this device to unlock the wallet."
+								})]
+							}) : null,
+							!hasEmailOtp ? /* @__PURE__ */ jsx("div", {
+								className: "seams-linked-devices-modal-add-method",
+								children: /* @__PURE__ */ jsxs("form", {
+									className: "seams-linked-devices-modal-otp-form",
+									onSubmit: (event) => {
+										event.preventDefault();
+										addMethod("email_otp");
+									},
 									children: [
-										/* @__PURE__ */ jsxs("div", {
-											className: "seams-linked-devices-modal-item-main",
-											children: [/* @__PURE__ */ jsx("span", {
-												className: "seams-linked-devices-modal-item-name",
-												children: methodTitle(method)
-											}), /* @__PURE__ */ jsx("span", {
-												className: "seams-linked-devices-modal-standing tone-active",
-												children: "Active"
-											})]
+										/* @__PURE__ */ jsx("label", {
+											htmlFor: emailInputId,
+											children: "Email address"
 										}),
-										/* @__PURE__ */ jsx("div", {
-											className: "seams-linked-devices-modal-item-detail",
-											children: methodDescription(method)
+										/* @__PURE__ */ jsx("input", {
+											id: emailInputId,
+											className: "seams-linked-devices-modal-otp-input",
+											type: "email",
+											autoComplete: "email",
+											required: true,
+											value: emailAddress,
+											disabled: actionInProgress || !canManageMethods,
+											onChange: (event) => {
+												setEmailAddress(event.currentTarget.value);
+												if (actionState.kind === "error") setActionState({ kind: "idle" });
+											}
 										}),
-										confirming ? /* @__PURE__ */ jsxs("div", {
-											className: "seams-linked-devices-modal-confirm",
-											children: [/* @__PURE__ */ jsxs("span", { children: [
-												"Remove ",
-												methodTitle(method),
-												" from this device? You will need the other active method to unlock it."
-											] }), /* @__PURE__ */ jsxs("div", {
-												className: "seams-linked-devices-modal-confirm-actions",
-												children: [/* @__PURE__ */ jsx("button", {
-													type: "button",
-													className: "seams-linked-devices-modal-secondary",
-													onClick: () => setActionState({ kind: "idle" }),
-													children: "Keep it"
-												}), /* @__PURE__ */ jsx("button", {
-													type: "button",
-													className: "seams-linked-devices-modal-danger",
-													onClick: () => void revokeMethod(),
-													children: "Remove method"
-												})]
-											})]
-										}) : methods.length > 1 ? null : /* @__PURE__ */ jsx("span", {
-											className: "seams-linked-devices-modal-item-detail",
-											children: "Add another method before removing this one."
+										/* @__PURE__ */ jsx("button", {
+											type: "submit",
+											className: "seams-linked-devices-modal-secondary",
+											disabled: actionInProgress || !canManageMethods,
+											children: actionState.kind === "adding" && actionState.method === "email_otp" ? "Adding…" : "Add Email OTP"
 										})
 									]
-								}),
-								!confirming && canManageMethods && methods.length > 1 ? /* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: "seams-linked-devices-modal-secondary seams-linked-devices-modal-remove",
-									disabled: actionInProgress,
-									"aria-label": `Remove ${methodTitle(method)}`,
-									onClick: () => setActionState({
-										kind: "confirming_revoke",
-										method
-									}),
-									children: revoking ? "Removing…" : "Remove"
-								}) : null
-							]
-						}, method.walletAuthMethodId);
-					})
-				}) : null,
-				inventory && !hasPasskey ? /* @__PURE__ */ jsxs("section", {
-					className: "seams-linked-devices-modal-add-method",
-					children: [
-						/* @__PURE__ */ jsx("h3", { children: "Add Passkey" }),
-						/* @__PURE__ */ jsx("p", {
-							className: "seams-linked-devices-modal-security-note",
-							children: "Use a passkey from this device to unlock the wallet."
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "seams-linked-devices-modal-secondary",
-							disabled: actionInProgress || !canManageMethods,
-							onClick: () => void addMethod("passkey"),
-							children: actionState.kind === "adding" && actionState.method === "passkey" ? "Adding…" : "Add passkey"
-						})
-					]
-				}) : null,
-				inventory && !hasEmailOtp ? /* @__PURE__ */ jsxs("section", {
-					className: "seams-linked-devices-modal-add-method",
-					children: [/* @__PURE__ */ jsx("h3", { children: "Add Email OTP" }), /* @__PURE__ */ jsxs("form", {
-						className: "seams-linked-devices-modal-otp-form",
-						onSubmit: (event) => {
-							event.preventDefault();
-							addMethod("email_otp");
-						},
+								})
+							}) : null
+						]
+					}) : null,
+					loadState.kind === "loaded" && inventory?.kind === "local_selection" ? /* @__PURE__ */ jsxs("section", {
+						className: "seams-linked-devices-modal-add-method",
 						children: [
-							/* @__PURE__ */ jsx("label", {
-								htmlFor: emailInputId,
-								children: "Email address"
-							}),
-							/* @__PURE__ */ jsx("input", {
-								id: emailInputId,
-								className: "seams-linked-devices-modal-otp-input",
-								type: "email",
-								autoComplete: "email",
-								required: true,
-								value: emailAddress,
-								disabled: actionInProgress || !canManageMethods,
-								onChange: (event) => {
-									setEmailAddress(event.currentTarget.value);
-									if (actionState.kind === "error") setActionState({ kind: "idle" });
-								}
+							/* @__PURE__ */ jsx("h3", { children: "Unlock to manage methods" }),
+							/* @__PURE__ */ jsx("p", {
+								className: "seams-linked-devices-modal-security-note",
+								children: "Confirm your current authentication method to add or remove methods."
 							}),
 							/* @__PURE__ */ jsx("button", {
-								type: "submit",
-								className: "seams-linked-devices-modal-secondary",
-								disabled: actionInProgress || !canManageMethods,
-								children: actionState.kind === "adding" && actionState.method === "email_otp" ? "Adding…" : "Add Email OTP"
+								type: "button",
+								className: "seams-linked-devices-modal-secondary seams-account-menu-wide-button",
+								disabled: actionInProgress,
+								onClick: () => void unlockOwnerSession(),
+								children: actionState.kind === "unlocking" ? "Unlocking…" : "Unlock wallet"
 							})
 						]
-					})]
-				}) : null,
-				loadState.kind === "loaded" && inventory?.kind === "local_selection" ? /* @__PURE__ */ jsxs("section", {
-					className: "seams-linked-devices-modal-add-method",
-					children: [
-						/* @__PURE__ */ jsx("h3", { children: "Unlock to manage methods" }),
-						/* @__PURE__ */ jsx("p", {
-							className: "seams-linked-devices-modal-security-note",
-							children: "Confirm your current authentication method to add or remove methods."
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "seams-linked-devices-modal-secondary",
-							disabled: actionInProgress,
-							onClick: () => void unlockOwnerSession(),
-							children: actionState.kind === "unlocking" ? "Unlocking…" : "Unlock wallet"
-						})
-					]
-				}) : null,
-				actionState.kind === "error" ? /* @__PURE__ */ jsx("div", {
-					className: "seams-linked-devices-modal-error",
-					role: "alert",
-					children: actionState.message
-				}) : null,
-				/* @__PURE__ */ jsx("div", {
-					className: "seams-linked-devices-modal-live",
-					role: "status",
-					"aria-live": "polite",
-					children: announcement
-				})
-			]
-		})]
+					}) : null,
+					actionState.kind === "error" ? /* @__PURE__ */ jsx("div", {
+						className: "seams-linked-devices-modal-error",
+						role: "alert",
+						children: actionState.message
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: "seams-linked-devices-modal-live",
+						role: "status",
+						"aria-live": "polite",
+						children: announcement
+					})
+				]
+			})
+		})
 	});
 };
 //#endregion

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

@@ -0,0 +1,19 @@
+import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AuthenticationMethodsView.tsx
+/** Shared presentation; callers own enrollment data and authenticated actions. */
+function AuthenticationMethodsView({ walletLabel, status, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
+		title: walletLabel,
+		description: "This wallet",
+		details: [{
+			label: "Status",
+			value: status
+		}]
+	}), children] });
+}
+//#endregion
+export { AuthenticationMethodsView };
+
+//# sourceMappingURL=AuthenticationMethodsView.js.map

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

@@ -0,0 +1,30 @@
+import { AccountMenuScreen } from "./AccountMenuScreen.js";
+import { ExportKeysSection } from "./ExportKeysSection.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/ExportKeysScreen.tsx
+/** Shared key selection; the connected caller owns the authenticated export. */
+function ExportKeysScreen({ onBack, ...selection }) {
+	return /* @__PURE__ */ jsxs(AccountMenuScreen, {
+		title: "Export keys",
+		onBack,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "seams-account-description",
+				children: "Choose the signing key to export. Your wallet will ask you to authenticate."
+			}),
+			/* @__PURE__ */ jsx(ExportKeysSection, {
+				...selection,
+				isOpen: true
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "seams-account-note",
+				children: "Keep exported keys private. Anyone with a signing key can control its accounts."
+			})
+		]
+	});
+}
+//#endregion
+export { ExportKeysScreen };
+
+//# sourceMappingURL=ExportKeysScreen.js.map