@seams/wallet 0.22.0 → 0.24.0

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

@@ -3,8 +3,8 @@ import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
 import { useSeams } from "../../context/index.js";
 import { AccountMenuDialogFrame } from "./AccountMenuDialog.js";
 import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
+import { VoiceIdMethodRow, VoiceIdSetupRow } from "./VoiceIdAvailabilityControl.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";
@@ -31,7 +31,7 @@ function methodView(credential) {
 				walletAuthMethodId: String(credential.walletAuthMethodId),
 				presentation: {
 					kind: "passkey",
-					description: provider ? `${provider} passkey` : credential.device.label
+					description: provider ?? credential.device.label
 				}
 			};
 		}
@@ -40,6 +40,11 @@ function methodView(credential) {
 			walletAuthMethodId: String(credential.walletAuthMethodId),
 			presentation: { kind: "email_otp" }
 		};
+		case "voiceid": return {
+			kind: "voiceid",
+			walletAuthMethodId: String(credential.walletAuthMethodId),
+			presentation: { kind: "voiceid" }
+		};
 	}
 }
 function selectedMethodView(binding) {
@@ -52,6 +57,11 @@ function selectedMethodView(binding) {
 				description: "Passkey on this device"
 			}
 		};
+		case "voiceid": return {
+			kind: "voiceid",
+			walletAuthMethodId: String(binding.walletAuthMethodId),
+			presentation: { kind: "voiceid" }
+		};
 		case "email_otp": return {
 			kind: "email_otp",
 			walletAuthMethodId: String(binding.walletAuthMethodId),
@@ -92,20 +102,17 @@ function currentAuthorityInventory(input) {
 	throw new Error("The selected authentication method is unavailable on this device authority.");
 }
 function methodTitle(method) {
-	return method.kind === "passkey" ? "Passkey" : "Email OTP";
+	switch (method.kind) {
+		case "passkey": return "Passkey";
+		case "email_otp": return "Email OTP";
+		case "voiceid": return "VoiceID";
+	}
 }
 function methodDescription(method) {
 	switch (method.presentation.kind) {
 		case "passkey": return method.presentation.description;
-		case "email_otp": return "Email OTP";
-	}
-}
-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";
+		case "email_otp": return "Codes go to the email address you verified.";
+		case "voiceid": return "Voice unlock on this device";
 	}
 }
 const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation }) => {
@@ -114,12 +121,16 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });
 	const [actionState, setActionState] = React.useState({ kind: "idle" });
 	const [emailAddress, setEmailAddress] = React.useState("");
+	const [emailFormOpen, setEmailFormOpen] = React.useState(false);
 	const [announcement, setAnnouncement] = React.useState("");
 	const loadSequence = React.useRef(0);
 	const seamsRef = React.useRef(seams);
 	const loginStateRef = React.useRef(loginState);
 	const refreshSessionRef = React.useRef(refreshSession);
 	const dialogRef = React.useRef(null);
+	const emailInputRef = React.useRef(null);
+	const addEmailButtonRef = React.useRef(null);
+	const emailFormWasOpen = React.useRef(false);
 	const emailInputId = React.useId();
 	seamsRef.current = seams;
 	loginStateRef.current = loginState;
@@ -148,15 +159,14 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 			});
 			return;
 		}
-		const localInventory = {
-			kind: "local_selection",
-			methods: [selectedMethodView(currentLoginState.currentAuthMethod.binding)]
-		};
 		const sequence = loadSequence.current + 1;
 		loadSequence.current = sequence;
 		setLoadState({
 			kind: "loading",
-			inventory: localInventory
+			inventory: {
+				kind: "local_selection",
+				methods: [selectedMethodView(currentLoginState.currentAuthMethod.binding)]
+			}
 		});
 		try {
 			const result = await seamsRef.current.devices.list({
@@ -175,8 +185,8 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 			});
 		} catch (error) {
 			if (loadSequence.current === sequence) setLoadState({
-				kind: "loaded",
-				inventory: localInventory
+				kind: "error",
+				message: errorMessage(error)
 			});
 		}
 	}, [selectedWalletAuthMethodId, walletId]);
@@ -186,18 +196,33 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 			setLoadState({ kind: "idle" });
 			setActionState({ kind: "idle" });
 			setEmailAddress("");
+			setEmailFormOpen(false);
 			setAnnouncement("");
 			return;
 		}
 		loadInventory();
 	}, [isOpen, loadInventory]);
+	useEffect(() => {
+		if (emailFormOpen) emailInputRef.current?.focus();
+		else if (emailFormWasOpen.current) addEmailButtonRef.current?.focus();
+		emailFormWasOpen.current = emailFormOpen;
+	}, [emailFormOpen]);
 	const addMethod = React.useCallback(async (method) => {
 		if (!walletId || actionState.kind === "adding") return;
 		const normalizedEmail = emailAddress.trim();
 		if (method === "email_otp" && !normalizedEmail) {
 			setActionState({
 				kind: "error",
-				message: "Enter the email address to verify."
+				message: "Enter the email address to verify.",
+				field: "email"
+			});
+			return;
+		}
+		if (method === "email_otp" && !normalizedEmail.includes("@")) {
+			setActionState({
+				kind: "error",
+				message: "Enter a valid email address.",
+				field: "email"
 			});
 			return;
 		}
@@ -217,13 +242,15 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 			});
 			await refreshSessionRef.current(walletId);
 			setEmailAddress("");
+			setEmailFormOpen(false);
 			setActionState({ kind: "idle" });
 			setAnnouncement(method === "passkey" ? "Passkey added." : "Email OTP added.");
 			await loadInventory();
 		} catch (error) {
 			setActionState({
 				kind: "error",
-				message: errorMessage(error)
+				message: errorMessage(error),
+				...method === "email_otp" ? { field: "email" } : {}
 			});
 		}
 	}, [
@@ -232,29 +259,6 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 		loadInventory,
 		walletId
 	]);
-	const unlockOwnerSession = React.useCallback(async () => {
-		if (!walletId || actionState.kind === "unlocking") return;
-		setActionState({ kind: "unlocking" });
-		setAnnouncement("Unlocking wallet management…");
-		try {
-			const result = await seamsRef.current.auth.unlock(walletId);
-			if (!result.success) throw new Error(result.error);
-			await refreshSessionRef.current(walletId);
-			setActionState({ kind: "idle" });
-			setAnnouncement("Wallet management unlocked.");
-			await loadInventory();
-			dialogRef.current?.focus({ preventScroll: true });
-		} catch (error) {
-			setActionState({
-				kind: "error",
-				message: errorMessage(error)
-			});
-		}
-	}, [
-		actionState.kind,
-		loadInventory,
-		walletId
-	]);
 	const revokeMethod = React.useCallback(async () => {
 		if (!walletId || actionState.kind !== "confirming_revoke") return;
 		const method = actionState.method;
@@ -287,8 +291,12 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 	const methods = inventory?.methods ?? [];
 	const hasPasskey = methods.some((method) => method.kind === "passkey");
 	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";
+	const hasVoiceId = methods.some((method) => method.kind === "voiceid");
+	const voiceIdConfigured = seams.configs.authMethods.some(isVoiceIdPlugin);
+	const canManageMethods = loadState.kind === "loaded";
+	const actionInProgress = actionState.kind === "adding" || actionState.kind === "revoking";
+	const addingEmail = actionState.kind === "adding" && actionState.method === "email_otp";
+	const emailError = actionState.kind === "error" && actionState.field === "email" ? actionState.message : null;
 	return /* @__PURE__ */ jsx(AccountMenuDialogFrame, {
 		presentation,
 		onClose,
@@ -298,7 +306,6 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 		title: walletText(locale, "Authentication methods"),
 		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",
@@ -322,136 +329,182 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 							children: /* @__PURE__ */ jsx(WalletText, { message: "Try again" })
 						})]
 					}) : null,
-					inventory ? /* @__PURE__ */ jsx("section", {
+					inventory ? /* @__PURE__ */ jsxs("section", {
 						className: "seams-account-menu-section",
-						"aria-label": walletText(locale, "Active authentication methods"),
-						children: /* @__PURE__ */ jsx("ul", {
+						"aria-labelledby": "seams-auth-methods-active",
+						children: [/* @__PURE__ */ jsx("h3", {
+							id: "seams-auth-methods-active",
+							className: "seams-account-menu-section-label",
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Active authentication methods" })
+						}), /* @__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, {
+								const title = walletDisplayText(locale, methodTitle(method));
+								const chip = method.walletAuthMethodId === selectedWalletAuthMethodId ? "In use now" : void 0;
+								const remove = !confirming && canManageMethods && methods.length > 1 ? /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "seams-auth-method-text-action",
+									"data-tone": "danger",
+									disabled: actionInProgress,
+									"aria-label": walletDisplayText(locale, `Remove ${methodTitle(method)}`),
+									onClick: () => setActionState({
+										kind: "confirming_revoke",
+										method
+									}),
+									children: revoking ? /* @__PURE__ */ jsx(WalletText, { message: "Removing…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Remove" })
+								}) : null;
+								const confirmation = confirming ? /* @__PURE__ */ jsxs("div", {
+									className: "seams-linked-devices-modal-confirm",
+									children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, {
+										message: "Remove {value0} from this device? You will need the other active method to unlock it.",
+										values: { value0: title }
+									}) }), /* @__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: /* @__PURE__ */ jsx(WalletText, { message: "Keep it" })
+										}), /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "seams-linked-devices-modal-danger",
+											onClick: () => void revokeMethod(),
+											children: /* @__PURE__ */ jsx(WalletText, { message: "Remove method" })
+										})]
+									})]
+								}) : null;
+								const hint = methods.length > 1 ? null : /* @__PURE__ */ jsx("span", {
+									className: "seams-linked-devices-modal-item-detail",
+									children: /* @__PURE__ */ jsx(WalletText, { message: "Add another method before removing this one." })
+								});
+								return method.kind === "voiceid" && voiceIdConfigured && walletId ? /* @__PURE__ */ jsx(VoiceIdMethodRow, {
+									walletId,
+									onChanged: loadInventory,
+									disabled: actionInProgress,
+									title,
+									chip,
+									remove,
+									confirmation,
+									children: hint
+								}, method.walletAuthMethodId) : /* @__PURE__ */ jsx(AuthenticationMethodRow, {
 									kind: method.kind,
-									title: walletDisplayText(locale, methodTitle(method)),
+									title,
+									chip,
 									description: walletDisplayText(locale, 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": walletDisplayText(locale, `Remove ${methodTitle(method)}`),
-										onClick: () => setActionState({
-											kind: "confirming_revoke",
-											method
-										}),
-										children: revoking ? /* @__PURE__ */ jsx(WalletText, { message: "Removing…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Remove" })
-									}) : null,
-									children: confirming ? /* @__PURE__ */ jsxs("div", {
-										className: "seams-linked-devices-modal-confirm",
-										children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, {
-											message: "Remove {value0} from this device? You will need the other active method to unlock it.",
-											values: { value0: walletDisplayText(locale, methodTitle(method)) }
-										}) }), /* @__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: /* @__PURE__ */ jsx(WalletText, { message: "Keep it" })
-											}), /* @__PURE__ */ jsx("button", {
-												type: "button",
-												className: "seams-linked-devices-modal-danger",
-												onClick: () => void revokeMethod(),
-												children: /* @__PURE__ */ jsx(WalletText, { message: "Remove method" })
-											})]
-										})]
-									}) : methods.length > 1 ? null : /* @__PURE__ */ jsx("span", {
-										className: "seams-linked-devices-modal-item-detail",
-										children: /* @__PURE__ */ jsx(WalletText, { message: "Add another method before removing this one." })
-									})
+									action: remove,
+									footer: confirmation,
+									children: hint
 								}, method.walletAuthMethodId);
 							})
-						})
+						})]
 					}) : null,
-					inventory && (!hasPasskey || !hasEmailOtp) ? /* @__PURE__ */ jsxs("section", {
+					inventory && (!hasPasskey || !hasEmailOtp || voiceIdConfigured && !hasVoiceId) ? /* @__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: /* @__PURE__ */ jsx(WalletText, { message: "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" ? /* @__PURE__ */ jsx(WalletText, { message: "Adding…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Add passkey" })]
-								}), /* @__PURE__ */ jsx("p", {
-									className: "seams-linked-devices-modal-security-note",
-									children: /* @__PURE__ */ jsx(WalletText, { message: "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__ */ jsx("label", {
-											htmlFor: emailInputId,
-											children: /* @__PURE__ */ jsx(WalletText, { message: "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("button", {
-											type: "submit",
-											className: "seams-linked-devices-modal-secondary",
-											disabled: actionInProgress || !canManageMethods,
-											children: actionState.kind === "adding" && actionState.method === "email_otp" ? /* @__PURE__ */ jsx(WalletText, { message: "Adding…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Add Email OTP" })
-										})
-									]
-								})
-							}) : null
-						]
-					}) : null,
-					loadState.kind === "loaded" && inventory?.kind === "local_selection" ? /* @__PURE__ */ jsxs("section", {
-						className: "seams-linked-devices-modal-add-method",
-						children: [
-							/* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsx(WalletText, { message: "Unlock to manage methods" }) }),
-							/* @__PURE__ */ jsx("p", {
-								className: "seams-linked-devices-modal-security-note",
-								children: /* @__PURE__ */ jsx(WalletText, { message: "Confirm your current authentication method to add or remove methods." })
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "seams-linked-devices-modal-secondary seams-account-menu-wide-button",
-								disabled: actionInProgress,
-								onClick: () => void unlockOwnerSession(),
-								children: actionState.kind === "unlocking" ? /* @__PURE__ */ jsx(WalletText, { message: "Unlocking…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Unlock wallet" })
-							})
-						]
+						children: [/* @__PURE__ */ jsx("h3", {
+							id: "seams-auth-methods-add",
+							className: "seams-account-menu-section-label",
+							children: /* @__PURE__ */ jsx(WalletText, { message: "Add a method" })
+						}), /* @__PURE__ */ jsxs("ul", {
+							className: "seams-account-method-tiles",
+							children: [
+								!hasPasskey ? /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+									kind: "passkey",
+									title: walletText(locale, "Passkey"),
+									description: walletText(locale, "Use a passkey from this device to unlock the wallet."),
+									action: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "seams-auth-method-text-action",
+										"aria-label": walletText(locale, "Add passkey"),
+										disabled: actionInProgress || !canManageMethods,
+										onClick: () => void addMethod("passkey"),
+										children: actionState.kind === "adding" && actionState.method === "passkey" ? /* @__PURE__ */ jsx(WalletText, { message: "Adding…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Add" })
+									})
+								}) : null,
+								!hasEmailOtp ? /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+									kind: "email_otp",
+									title: walletText(locale, "Email OTP"),
+									description: walletText(locale, "Use a one-time code from your email to unlock the wallet."),
+									action: emailFormOpen ? null : /* @__PURE__ */ jsx("button", {
+										ref: addEmailButtonRef,
+										type: "button",
+										className: "seams-auth-method-text-action",
+										"aria-label": walletText(locale, "Add Email OTP"),
+										disabled: actionInProgress || !canManageMethods,
+										onClick: () => setEmailFormOpen(true),
+										children: /* @__PURE__ */ jsx(WalletText, { message: "Add" })
+									}),
+									footer: emailFormOpen ? /* @__PURE__ */ jsxs("form", {
+										className: "seams-auth-method-form",
+										noValidate: true,
+										onSubmit: (event) => {
+											event.preventDefault();
+											addMethod("email_otp");
+										},
+										children: [
+											/* @__PURE__ */ jsx("label", {
+												htmlFor: emailInputId,
+												children: /* @__PURE__ */ jsx(WalletText, { message: "Email address" })
+											}),
+											/* @__PURE__ */ jsx("input", {
+												ref: emailInputRef,
+												id: emailInputId,
+												className: "seams-linked-devices-modal-otp-input",
+												type: "email",
+												autoComplete: "email",
+												value: emailAddress,
+												disabled: addingEmail,
+												"aria-invalid": emailError ? true : void 0,
+												"aria-describedby": emailError ? `${emailInputId}-error ${emailInputId}-note` : `${emailInputId}-note`,
+												onChange: (event) => {
+													setEmailAddress(event.currentTarget.value);
+													if (actionState.kind === "error") setActionState({ kind: "idle" });
+												}
+											}),
+											emailError ? /* @__PURE__ */ jsx("p", {
+												id: `${emailInputId}-error`,
+												className: "seams-auth-method-field-error",
+												role: "alert",
+												children: /* @__PURE__ */ jsx(WalletText, { copy: emailError })
+											}) : null,
+											/* @__PURE__ */ jsx("p", {
+												id: `${emailInputId}-note`,
+												className: "seams-auth-method-note",
+												children: /* @__PURE__ */ jsx(WalletText, { message: "Next, confirm with your passkey. Then enter the code that we email to this address." })
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "seams-linked-devices-modal-confirm-actions",
+												children: [/* @__PURE__ */ jsx("button", {
+													type: "button",
+													className: "seams-linked-devices-modal-secondary",
+													disabled: addingEmail,
+													onClick: () => {
+														setEmailFormOpen(false);
+														setEmailAddress("");
+														if (actionState.kind === "error") setActionState({ kind: "idle" });
+													},
+													children: /* @__PURE__ */ jsx(WalletText, { message: "Cancel" })
+												}), /* @__PURE__ */ jsx("button", {
+													type: "submit",
+													className: "seams-auth-method-primary",
+													disabled: actionInProgress,
+													children: addingEmail ? /* @__PURE__ */ jsx(WalletText, { message: "Sending code…" }) : /* @__PURE__ */ jsx(WalletText, { message: "Send code" })
+												})]
+											})
+										]
+									}) : null
+								}) : null,
+								voiceIdConfigured && !hasVoiceId && walletId ? /* @__PURE__ */ jsx(VoiceIdSetupRow, {
+									walletId,
+									onChanged: loadInventory,
+									disabled: actionInProgress || !canManageMethods
+								}) : null
+							]
+						})]
 					}) : null,
-					actionState.kind === "error" ? /* @__PURE__ */ jsx("div", {
+					actionState.kind === "error" && actionState.field !== "email" ? /* @__PURE__ */ jsx("div", {
 						className: "seams-linked-devices-modal-error",
 						role: "alert",
 						children: /* @__PURE__ */ jsx(WalletText, { copy: actionState.message })
@@ -467,6 +520,9 @@ const AuthenticationMethodsModal = ({ walletId, isOpen, onClose, presentation })
 		})
 	});
 };
+function isVoiceIdPlugin(plugin) {
+	return plugin.kind === "voiceid";
+}
 //#endregion
 export { AuthenticationMethodsModal as default };
 

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

@@ -1,19 +1,21 @@
 import { walletDisplayText, walletText } from "../../../core/ui/messages.js";
 import { useWalletLocale } from "../../context/WalletLocale.js";
 import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
+import { WalletIcon } from "./icons/WalletIcon.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 }) {
+function AuthenticationMethodsView({ walletLabel, children }) {
 	const locale = useWalletLocale();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
 		title: walletDisplayText(locale, walletLabel),
 		description: walletText(locale, "This wallet"),
-		details: [{
-			label: "Status",
-			value: status
-		}]
+		details: [],
+		icon: /* @__PURE__ */ jsx(WalletIcon, {
+			size: 26,
+			strokeWidth: 1.5
+		})
 	}), children] });
 }
 //#endregion