@seams/wallet 0.20.0 → 0.22.0

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

@@ -1,9 +1,7 @@
 import { WalletText } from "../../context/WalletLocale.js";
-import SegmentedControl from "./SegmentedControl.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/TransactionSettingsSection.tsx
-const TRANSACTION_SETTINGS_ACTIVE_BACKGROUND = "var(--seams-colors-buttonBackground, var(--seams-colors-primary))";
 const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggleSkipClick, onSetDelay, className, style, isOpen = true, presentation = "menu" }) => {
 	React.useEffect(() => {
 		if (!isOpen) return;
@@ -16,14 +14,49 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 		isOpen,
 		onSetDelay
 	]);
+	const reviewLabelId = React.useId();
 	const handleClick = (e) => {
 		e.stopPropagation();
 	};
-	const disableRequireClick = currentConfirmConfig?.uiMode === "none";
 	const disableAll = !isOpen;
-	if (presentation === "page") return /* @__PURE__ */ jsxs("div", {
-		className: "seams-transaction-page",
-		children: [/* @__PURE__ */ jsxs("fieldset", {
+	const compact = presentation === "menu";
+	const uiMode = currentConfirmConfig.uiMode ?? "modal";
+	const reviewOn = uiMode !== "none" && currentConfirmConfig.behavior !== "skipClick";
+	const toggleReview = () => {
+		if (reviewOn) {
+			setBehavior(currentConfirmConfig, onSetDelay, onToggleSkipClick, "skipClick");
+			return;
+		}
+		if (uiMode === "none") onSetUiMode?.("modal");
+		setBehavior(currentConfirmConfig, onSetDelay, onToggleSkipClick, "requireClick");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `seams-transaction-page${className ? ` ${className}` : ""}`,
+		"data-presentation": presentation,
+		style,
+		onClick: compact ? handleClick : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "seams-transaction-review",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "seams-transaction-review-row",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "seams-transaction-review-text",
+					children: [/* @__PURE__ */ jsx("strong", {
+						id: reviewLabelId,
+						children: /* @__PURE__ */ jsx(WalletText, { message: "Review before signing" })
+					}), /* @__PURE__ */ jsx("span", { children: reviewOn ? /* @__PURE__ */ jsx(WalletText, { message: "Show the transaction details, then click Continue to sign." }) : /* @__PURE__ */ jsx(WalletText, { message: "Passkey authentication starts as soon as the details appear." }) })]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "switch",
+					className: "seams-transaction-switch",
+					"aria-checked": reviewOn,
+					"aria-labelledby": reviewLabelId,
+					disabled: disableAll,
+					onClick: toggleReview,
+					children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+				})]
+			}), /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "On phones, in Safari and for Email OTP sign-in, the wallet always waits for Continue." }) })]
+		}), /* @__PURE__ */ jsxs("fieldset", {
 			className: "seams-transaction-group",
 			disabled: disableAll,
 			children: [
@@ -31,185 +64,72 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Choose where transaction details appear before signing." }) }),
 				/* @__PURE__ */ jsx("div", {
 					className: "seams-transaction-choices",
-					children: UI_CHOICES.map(renderUiChoice.bind(null, currentConfirmConfig.uiMode ?? "modal", onSetUiMode))
-				})
-			]
-		}), /* @__PURE__ */ jsxs("fieldset", {
-			className: "seams-transaction-group",
-			disabled: disableAll || disableRequireClick,
-			children: [
-				/* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmation step" }) }),
-				/* @__PURE__ */ jsx("p", { children: disableRequireClick ? /* @__PURE__ */ jsx(WalletText, { message: "Choose Modal or Drawer to configure the confirmation step." }) : /* @__PURE__ */ jsx(WalletText, { message: "Choose whether to click Continue before authentication starts." }) }),
-				/* @__PURE__ */ jsx("div", {
-					className: "seams-transaction-choices seams-transaction-choices--two",
-					children: BEHAVIOR_CHOICES.map(renderBehaviorChoice.bind(null, currentConfirmConfig, onSetDelay, onToggleSkipClick))
+					children: UI_CHOICES.map(renderUiChoice.bind(null, compact, uiMode, onSetUiMode))
 				})
 			]
 		})]
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: `seams-dropdown-tx-settings-root ${isOpen ? "is-expanded" : ""} ${className || ""}`,
-		style,
-		onClick: handleClick,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "seams-dropdown-toggle-tx-settings",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "seams-dropdown-toggle-tx-settings-content",
-				"aria-hidden": !isOpen,
-				style: { pointerEvents: isOpen ? "auto" : "none" },
-				children: /* @__PURE__ */ jsxs("div", {
-					style: {
-						width: "100%",
-						display: "flex",
-						flexDirection: "column",
-						gap: 8
-					},
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-						className: "seams-confirmation-options",
-						children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmer UI" })
-					}), /* @__PURE__ */ jsx("div", {
-						style: { width: "100%" },
-						children: /* @__PURE__ */ jsx(SegmentedControl, {
-							items: [
-								{
-									value: "none",
-									label: "none",
-									disabled: disableAll
-								},
-								{
-									value: "modal",
-									label: "modal",
-									disabled: disableAll
-								},
-								{
-									value: "drawer",
-									label: "drawer",
-									disabled: disableAll
-								}
-							],
-							value: currentConfirmConfig?.uiMode ?? "modal",
-							onValueChange: (v) => onSetUiMode?.(v),
-							activeBg: TRANSACTION_SETTINGS_ACTIVE_BACKGROUND,
-							height: 40,
-							buttonFontSize: 12,
-							containerStyle: { width: "100%" },
-							buttonStyle: {
-								display: "grid",
-								placeItems: "center",
-								lineHeight: 1,
-								padding: "0 10px"
-							},
-							activeButtonStyle: { color: "var(--seams-colors-textButton)" }
-						})
-					})] }), /* @__PURE__ */ jsxs("div", {
-						style: {
-							opacity: disableRequireClick ? .6 : 1,
-							pointerEvents: disableRequireClick ? "none" : "auto"
-						},
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "seams-confirmation-options",
-							children: /* @__PURE__ */ jsx(WalletText, { message: "Confirmation Options" })
-						}), /* @__PURE__ */ jsx("div", {
-							style: { width: "100%" },
-							children: /* @__PURE__ */ jsx(SegmentedControl, {
-								items: [{
-									value: "skipClick",
-									label: "skip click",
-									disabled: disableAll || disableRequireClick
-								}, {
-									value: "requireClick",
-									label: "require click",
-									disabled: disableAll || disableRequireClick
-								}],
-								value: currentConfirmConfig?.behavior === "skipClick" ? "skipClick" : "requireClick",
-								onValueChange: (v) => {
-									const wantsSkipClick = v === "skipClick";
-									const isSkipClick = currentConfirmConfig?.behavior === "skipClick";
-									if (wantsSkipClick && (currentConfirmConfig?.autoProceedDelay ?? 0) !== 0) onSetDelay(0);
-									if (wantsSkipClick !== isSkipClick) onToggleSkipClick?.();
-								},
-								activeBg: TRANSACTION_SETTINGS_ACTIVE_BACKGROUND,
-								height: 40,
-								buttonFontSize: 12,
-								containerStyle: { width: "100%" },
-								buttonStyle: {
-									display: "grid",
-									placeItems: "center",
-									lineHeight: 1,
-									padding: "0 10px"
-								},
-								activeButtonStyle: { color: "var(--seams-colors-textButton)" }
-							})
-						})]
-					})]
-				})
-			})
-		})
-	});
 };
-const UI_CHOICES = [
-	{
-		value: "none",
-		label: "No review",
-		description: "Start authentication without showing a review panel."
-	},
-	{
-		value: "modal",
-		label: "Modal",
-		description: "Review the transaction in a centered dialog."
-	},
-	{
-		value: "drawer",
-		label: "Drawer",
-		description: "Review the transaction in a slide-out panel."
-	}
-];
-const BEHAVIOR_CHOICES = [{
-	value: "skipClick",
-	label: "Start automatically",
-	description: "Begin authentication as soon as the review opens."
+const UI_CHOICES = [{
+	value: "modal",
+	label: "Modal",
+	description: "Review the transaction in a centered dialog."
 }, {
-	value: "requireClick",
-	label: "Click to continue",
-	description: "Review the details, then click Continue to start authentication."
+	value: "drawer",
+	label: "Drawer",
+	description: "Review the transaction in a slide-out panel."
 }];
-function renderUiChoice(selected, onSelect, choice) {
+function ChoicePreview({ kind }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "seams-transaction-preview",
+		"data-preview": kind,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "seams-tp-page",
+				children: [
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {})
+				]
+			}),
+			/* @__PURE__ */ jsx("span", { className: "seams-tp-scrim" }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "seams-tp-panel",
+				children: [
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("b", {})
+				]
+			})
+		]
+	});
+}
+function renderUiChoice(compact, selected, onSelect, choice) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "seams-transaction-choice",
 		"aria-pressed": selected === choice.value,
 		onClick: onSelect?.bind(null, choice.value),
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "seams-transaction-choice-indicator",
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.label }) }),
-			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.description }) })
-		]
+		children: [/* @__PURE__ */ jsx(ChoicePreview, { kind: choice.value }), /* @__PURE__ */ jsxs("span", {
+			className: "seams-transaction-choice-text",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "seams-transaction-choice-head",
+				children: [/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.label }) }), /* @__PURE__ */ jsx("span", {
+					className: "seams-transaction-choice-indicator",
+					"aria-hidden": "true"
+				})]
+			}), compact ? null : /* @__PURE__ */ jsx("span", {
+				className: "seams-transaction-choice-description",
+				children: /* @__PURE__ */ jsx(WalletText, { copy: choice.description })
+			})]
+		})]
 	}, choice.value);
 }
 function setBehavior(config, setDelay, toggle, value) {
 	if (value === "skipClick" && (config.autoProceedDelay ?? 0) !== 0) setDelay(0);
 	if (value === "skipClick" !== (config.behavior === "skipClick")) toggle();
 }
-function renderBehaviorChoice(config, setDelay, toggle, choice) {
-	const selected = config.behavior === "skipClick" ? "skipClick" : "requireClick";
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		className: "seams-transaction-choice",
-		"aria-pressed": selected === choice.value,
-		onClick: setBehavior.bind(null, config, setDelay, toggle, choice.value),
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "seams-transaction-choice-indicator",
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.label }) }),
-			/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { copy: choice.description }) })
-		]
-	}, choice.value);
-}
 //#endregion
 export { TransactionSettingsSection };
 

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

@@ -273,15 +273,17 @@ var WalletRegionSection = class extends Component {
 					" ",
 					/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: regionName(state.placement.region) }) })
 				] }),
-				/* @__PURE__ */ jsxs("label", { children: [
-					/* @__PURE__ */ jsx(WalletText, { message: "Destination region" }),
-					" ",
-					/* @__PURE__ */ jsx("select", {
-						value: state.selected,
-						onChange: this.select,
-						children: REGIONS.map(renderRegion)
-					})
-				] }),
+				/* @__PURE__ */ jsxs("label", {
+					className: "seams-region-field",
+					children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(WalletText, { message: "Destination region" }) }), /* @__PURE__ */ jsx("span", {
+						className: "seams-region-select",
+						children: /* @__PURE__ */ jsx("select", {
+							value: state.selected,
+							onChange: this.select,
+							children: REGIONS.map(renderRegion)
+						})
+					})]
+				}),
 				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { message: "Moving your wallet ends signing sessions on all devices. After the move, unlock your wallet again to sign." }) }),
 				state.placement.nextMoveAtMs > Date.now() ? /* @__PURE__ */ jsxs("p", { children: [
 					/* @__PURE__ */ jsx(WalletText, { message: "Another move is available after" }),

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

@@ -206,8 +206,7 @@
   padding: 24px;
 }
 .seams-settings-content .seams-dropdown-accounts-root,
-.seams-settings-content .seams-dropdown-export-keys-root,
-.seams-settings-content .seams-dropdown-tx-settings-root {
+.seams-settings-content .seams-dropdown-export-keys-root {
   margin: 0;
   border: 1px solid var(--seams-colors-borderPrimary);
   border-radius: 16px;
@@ -375,90 +374,93 @@
   }
 }
 
-.seams-transaction-page {
+.seams-region-field {
   display: grid;
-  gap: 36px;
-}
-.seams-transaction-group {
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-.seams-transaction-group legend {
-  padding: 0;
-  font-size: 20px;
-  font-weight: 600;
-}
-.seams-transaction-group > p {
-  margin: 8px 0 20px;
-  color: var(--seams-colors-textSecondary);
+  gap: 8px;
+  max-width: 360px;
+  margin: 24px 0 16px;
   font-size: 14px;
-  line-height: 1.5;
-}
-.seams-transaction-choices {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
+  font-weight: 500;
 }
-.seams-transaction-choices--two {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+/* The wrapper draws the chevron, so the closed control looks the same in
+   every browser. */
+.seams-region-select {
+  position: relative;
+  display: block;
 }
-.seams-transaction-choice {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-  min-height: 188px;
-  padding: 24px;
+.seams-region-select::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 18px;
+  width: 7px;
+  height: 7px;
+  border-inline-end: 1.5px solid var(--seams-colors-textSecondary);
+  border-block-end: 1.5px solid var(--seams-colors-textSecondary);
+  transform: translateY(-70%) rotate(45deg);
+  pointer-events: none;
+}
+.seams-region-select select {
+  appearance: none;
+  width: 100%;
+  min-height: 48px;
+  padding-block: 12px;
+  padding-inline: 14px 44px;
   border: 1px solid var(--seams-colors-borderPrimary);
-  border-radius: 16px;
+  border-radius: 12px;
   background: var(--seams-colors-colorBackground);
   color: var(--seams-colors-textPrimary);
   font: inherit;
-  text-align: start;
+  font-weight: 400;
   cursor: pointer;
 }
-.seams-transaction-choice strong {
-  font-size: 16px;
-}
-.seams-transaction-choice > span:last-child {
-  color: var(--seams-colors-textSecondary);
-  font-size: 14px;
-  line-height: 1.5;
-}
-.seams-transaction-choice-indicator {
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  border: 1px solid var(--seams-colors-borderPrimary);
-  border-radius: 50%;
-}
-.seams-transaction-choice[aria-pressed='true'] {
-  border-color: var(--seams-colors-primary);
-  box-shadow: inset 0 0 0 1px var(--seams-colors-primary);
-  background: var(--seams-colors-surface2);
-}
-.seams-transaction-choice[aria-pressed='true'] .seams-transaction-choice-indicator {
-  border: 6px solid var(--seams-colors-primary);
-}
-.seams-transaction-choice:hover:not(:disabled) {
-  background: var(--seams-colors-surface2);
-}
-.seams-transaction-choice:focus-visible {
-  outline: 2px solid var(--seams-colors-primary);
-  outline-offset: 4px;
+.seams-region-select select:hover {
+  background: var(--seams-colors-surface);
 }
-.seams-transaction-choice:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
+.seams-region-select select:focus-visible {
+  outline: 2px solid var(--seams-colors-textPrimary);
+  outline-offset: 2px;
 }
-@media (max-width: 600px) {
-  .seams-transaction-choices {
-    grid-template-columns: minmax(0, 1fr);
+/* Browsers with customizable select also style the open list. Others keep
+   the native list. */
+@supports (appearance: base-select) {
+  .seams-region-select select,
+  .seams-region-select ::picker(select) {
+    appearance: base-select;
   }
-  .seams-transaction-choice {
-    min-height: 0;
-    padding: 20px;
+  .seams-region-select select::picker-icon {
+    display: none;
+  }
+  .seams-region-select ::picker(select) {
+    margin-block: 6px;
+    padding: 6px;
+    border: 1px solid var(--seams-colors-borderPrimary);
+    border-radius: 12px;
+    background: var(--seams-colors-colorBackground);
+    color: var(--seams-colors-textPrimary);
+    box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
+  }
+  .seams-region-select option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 40px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+  }
+  .seams-region-select option:hover,
+  .seams-region-select option:focus-visible {
+    outline: none;
+    background: var(--seams-colors-surface2);
+  }
+  .seams-region-select option:checked {
+    font-weight: 500;
+  }
+  .seams-region-select option::checkmark {
+    order: 1;
+    margin-inline-start: auto;
+    color: var(--seams-colors-textSecondary);
   }
 }

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

@@ -8,6 +8,7 @@ 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 { MapPinIcon } from "./icons/MapPinIcon.js";
 import { SlidersIcon } from "./icons/SlidersIcon.js";
 import { RecoveryCodesIcon } from "./icons/RecoveryCodesIcon.js";
 import TouchIcon from "./icons/TouchIcon.js";
@@ -21,12 +22,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "./WalletSettingsLayout.css";
 //#region src/react/components/AccountMenuButton/WalletSettingsLayout.tsx
 const SETTINGS_ITEMS = [
-	{
-		id: PROFILE_MENU_ITEM_IDS.WALLET_REGION,
-		label: "Wallet region",
-		description: "Choose where your wallet runs",
-		icon: /* @__PURE__ */ jsx(GlobeIcon, {})
-	},
 	{
 		id: PROFILE_MENU_ITEM_IDS.ACCOUNTS,
 		label: "Accounts",
@@ -34,10 +29,16 @@ const SETTINGS_ITEMS = [
 		icon: /* @__PURE__ */ jsx(GlobeIcon, {})
 	},
 	{
-		id: PROFILE_MENU_ITEM_IDS.EXPORT_KEYS,
-		label: "Export keys",
-		description: "Export wallet signing keys",
-		icon: /* @__PURE__ */ jsx(KeyIcon, {})
+		id: PROFILE_MENU_ITEM_IDS.TRANSACTION_SETTINGS,
+		label: "Transaction settings",
+		description: "Customize confirmation behavior",
+		icon: /* @__PURE__ */ jsx(SlidersIcon, {})
+	},
+	{
+		id: PROFILE_MENU_ITEM_IDS.AUTHENTICATION_METHODS,
+		label: "Authentication methods",
+		description: "Choose how you unlock this device",
+		icon: /* @__PURE__ */ jsx(TouchIcon, {})
 	},
 	{
 		id: PROFILE_MENU_ITEM_IDS.RECOVERY_CODES,
@@ -46,10 +47,10 @@ const SETTINGS_ITEMS = [
 		icon: /* @__PURE__ */ jsx(RecoveryCodesIcon, {})
 	},
 	{
-		id: PROFILE_MENU_ITEM_IDS.AUTHENTICATION_METHODS,
-		label: "Authentication methods",
-		description: "Choose how you unlock this device",
-		icon: /* @__PURE__ */ jsx(TouchIcon, {})
+		id: PROFILE_MENU_ITEM_IDS.LINKED_DEVICES,
+		label: "Linked devices",
+		description: "See devices using this wallet",
+		icon: /* @__PURE__ */ jsx(LinkIcon, {})
 	},
 	{
 		id: PROFILE_MENU_ITEM_IDS.SCAN_LINK_DEVICE,
@@ -58,16 +59,16 @@ const SETTINGS_ITEMS = [
 		icon: /* @__PURE__ */ jsx(ScanIcon, {})
 	},
 	{
-		id: PROFILE_MENU_ITEM_IDS.LINKED_DEVICES,
-		label: "Linked devices",
-		description: "See devices using this wallet",
-		icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		id: PROFILE_MENU_ITEM_IDS.WALLET_REGION,
+		label: "Wallet region",
+		description: "Choose where your wallet runs",
+		icon: /* @__PURE__ */ jsx(MapPinIcon, {})
 	},
 	{
-		id: PROFILE_MENU_ITEM_IDS.TRANSACTION_SETTINGS,
-		label: "Transaction settings",
-		description: "Customize confirmation behavior",
-		icon: /* @__PURE__ */ jsx(SlidersIcon, {})
+		id: PROFILE_MENU_ITEM_IDS.EXPORT_KEYS,
+		label: "Export keys",
+		description: "Export wallet signing keys",
+		icon: /* @__PURE__ */ jsx(KeyIcon, {})
 	}
 ];
 function WalletSettingsHeader() {

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

@@ -457,11 +457,7 @@
 .seams-account-identity:focus {
   outline: none;
 }
-.seams-account-screen .seams-dropdown-tx-settings-root {
-  --seams-expander-surface: var(--seams-colors-colorBackground);
-  border: 0;
-  border-radius: 12px;
-  overflow: hidden;
+.seams-account-screen .seams-transaction-page {
   margin-top: 14px;
 }
 

package/dist/esm/react/components/AccountMenuButton/icons/MapPinIcon.js

@@ -0,0 +1,12 @@
+import { lucideIcon } from "./lucideIcon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/icons/MapPinIcon.tsx
+const MapPinIcon = lucideIcon("map-pin", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" }), /* @__PURE__ */ jsx("circle", {
+	cx: "12",
+	cy: "10",
+	r: "3"
+})] }));
+//#endregion
+export { MapPinIcon };
+
+//# sourceMappingURL=MapPinIcon.js.map

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

@@ -11,6 +11,7 @@ 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 { MapPinIcon } from "./icons/MapPinIcon.js";
 import { SlidersIcon } from "./icons/SlidersIcon.js";
 import { RecoveryCodesIcon } from "./icons/RecoveryCodesIcon.js";
 import SpinnerIcon from "./icons/SpinnerIcon.js";
@@ -243,13 +244,22 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 	]);
 	const startRecoveryCodesFlow = useCallback(async () => {
 		if (recoveryCodesOpen || !walletId) return;
+		if (!loginState.isLoggedIn || loginState.currentAuthMethod.kind !== "selected") {
+			setSettingsError("Unlock this wallet to confirm its recovery-code backup.");
+			return;
+		}
+		const authorization = loginState.currentAuthMethod.binding.kind === "passkey" ? { kind: "passkey" } : { kind: "email_otp" };
 		setRecoveryCodesOpen(true);
 		setSettingsError(null);
 		try {
-			const result = await recovery.confirmBackup({ walletId });
+			const result = await recovery.confirmBackup({
+				walletId,
+				authorization
+			});
 			switch (result.kind) {
 				case "acknowledged": return;
 				case "no_recovery_set":
+				case "conflict":
 				case "unauthorized":
 				case "transport_failed":
 					setSettingsError(result.message);
@@ -265,6 +275,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 			setRecoveryCodesOpen(false);
 		}
 	}, [
+		loginState,
 		recovery,
 		recoveryCodesOpen,
 		walletId
@@ -360,7 +371,7 @@ const AccountMenuButtonInner = ({ presentation, nearAccountId: nearAccountIdProp
 		}
 		if (presentation === "page") items.push({
 			id: PROFILE_MENU_ITEM_IDS.WALLET_REGION,
-			icon: /* @__PURE__ */ jsx(GlobeIcon, {}),
+			icon: /* @__PURE__ */ jsx(MapPinIcon, {}),
 			label: "Wallet region",
 			description: "Choose where your wallet runs",
 			disabled: accountMenuCapabilities.kind !== "owner"