@seams/wallet 0.20.0 → 0.22.0

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

@@ -38,10 +38,7 @@ function methodView(credential) {
 		case "email_otp": return {
 			kind: "email_otp",
 			walletAuthMethodId: String(credential.walletAuthMethodId),
-			presentation: {
-				kind: "email_otp",
-				emailAddress: String(credential.email)
-			}
+			presentation: { kind: "email_otp" }
 		};
 	}
 }
@@ -58,10 +55,7 @@ function selectedMethodView(binding) {
 		case "email_otp": return {
 			kind: "email_otp",
 			walletAuthMethodId: String(binding.walletAuthMethodId),
-			presentation: {
-				kind: "email_otp",
-				emailAddress: null
-			}
+			presentation: { kind: "email_otp" }
 		};
 	}
 }
@@ -103,7 +97,7 @@ function methodTitle(method) {
 function methodDescription(method) {
 	switch (method.presentation.kind) {
 		case "passkey": return method.presentation.description;
-		case "email_otp": return method.presentation.emailAddress ?? "Email OTP on this device";
+		case "email_otp": return "Email OTP";
 	}
 }
 function inventoryStatus(state) {

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

@@ -130,7 +130,7 @@ function shortDisplayId(value) {
 function credentialDescription(credential) {
 	switch (credential.kind) {
 		case "passkey": return credential.device.label;
-		case "email_otp": return "Email code";
+		case "email_otp": return "Email OTP";
 	}
 }
 /**
@@ -147,7 +147,7 @@ function deviceMetaLine(view, deviceNumber, titleCollides, now, locale) {
 		parts.push(walletText(locale, credential.device.synced ? "Synced passkey" : "Passkey"));
 		const provider = credential.device.providerLabel ?? credential.device.provider;
 		if (provider) parts.push(provider);
-	} else parts.push(String(credential.email));
+	} else parts.push(walletText(locale, "Email OTP"));
 	if (titleCollides) parts.push(walletText(locale, "Added {value0}", { value0: friendlyDay(viewCreatedAtMs(view), now, locale) }));
 	parts.push(walletText(locale, "Last used {value0}", { value0: friendlyDay(viewLastActivityAtMs(view), now, locale) }));
 	return parts.join(" · ");

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

@@ -6,21 +6,35 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./ProfileDropdown.css";
 //#region src/react/components/AccountMenuButton/ProfileDropdown.tsx
-const SECURITY_ITEMS = [
+const MENU_ORDER = [
+	"accounts",
+	"transaction-settings",
 	"authentication-methods",
+	"recovery-codes",
+	"linked-devices",
 	"scan-link-device",
+	"export-keys"
+];
+const SECURITY_ITEMS = [
+	"authentication-methods",
+	"recovery-codes",
 	"linked-devices",
-	"recovery-codes"
+	"scan-link-device",
+	"export-keys"
 ];
 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) {
+function isWalletItem(item) {
 	return !isSecurityItem(item);
 }
+function menuRank(item) {
+	const rank = MENU_ORDER.indexOf(item.id ?? "");
+	return rank === -1 ? MENU_ORDER.length : rank;
+}
+function compareMenuItems(a, b) {
+	return menuRank(a) - menuRank(b);
+}
 function storeMenuRef(refs, index, element) {
 	refs.current[index] = element;
 }
@@ -48,13 +62,13 @@ function ProfileDropdown(props) {
 		className: "seams-profile-dropdown-menu",
 		children: [
 			/* @__PURE__ */ jsx(MenuGroup, {
-				label: walletText(locale, "Addresses"),
-				items: props.menuItems.filter(isAccountItem),
+				label: walletText(locale, "Wallet"),
+				items: props.menuItems.filter(isWalletItem).sort(compareMenuItems),
 				props
 			}),
 			/* @__PURE__ */ jsx(MenuGroup, {
 				label: walletText(locale, "Security & devices"),
-				items: props.menuItems.filter(isSecurityItem).sort(compareSecurityItems),
+				items: props.menuItems.filter(isSecurityItem).sort(compareMenuItems),
 				props
 			}),
 			/* @__PURE__ */ jsx(LockMenuItem, {

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

@@ -1,109 +1,401 @@
-/* Expander (TransactionSettingsSection) */
-.seams-dropdown-tx-settings-root {
-  background-color: var(--seams-expander-surface, var(--seams-colors-surface));
-  transform-origin: top;
+/* Transaction settings: a review switch, then the review layout as cards
+   with a small drawing. The settings page and the account menu share these
+   rules; the menu adds a compact variant. */
+.seams-transaction-page {
   display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  gap: 40px;
 }
-
-.seams-dropdown-tx-settings-root.is-expanded {
+.seams-transaction-group {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.seams-transaction-review + .seams-transaction-group {
+  padding-top: 40px;
   border-top: 1px solid var(--seams-colors-borderPrimary);
-  /* border-bottom: 1px solid var(--seams-colors-borderPrimary); */
-  background-color: var(--seams-expander-surface, var(--seams-colors-surface));
-  grid-template-rows: 1fr;
 }
-
-.seams-dropdown-toggle-tx-settings {
-  overflow: hidden;
-  min-height: 0;
-  min-width: 0;
+.seams-transaction-group legend {
+  /* A floated legend leaves the fieldset border, so the divider above a
+     group runs above its title, not through it. */
+  float: inline-start;
+  width: 100%;
+  padding: 0;
+  font-size: 18px;
+  font-weight: 600;
 }
-
-.seams-dropdown-toggle-tx-settings-content {
+.seams-transaction-group legend + * {
+  clear: both;
+}
+.seams-transaction-group > p {
+  margin: 6px 0 20px;
+  color: var(--seams-colors-textSecondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.seams-transaction-choices {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+.seams-transaction-choice {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 16px;
+  gap: 14px;
+  padding: 12px 12px 16px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 16px;
+  background: var(--seams-colors-colorBackground);
+  color: var(--seams-colors-textPrimary);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
   transition:
-    opacity 100ms ease,
-    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
-  opacity: 0;
-  transform: translateY(4px);
+    border-color 120ms ease,
+    background-color 120ms ease;
 }
-
-.seams-dropdown-tx-settings-root.is-expanded .seams-dropdown-toggle-tx-settings-content {
-  opacity: 1;
-  transform: translateY(0);
+.seams-transaction-choice-text {
+  display: grid;
+  gap: 6px;
+  padding-inline: 4px;
 }
-
-.seams-confirmation-options {
-  font-size: 12px;
-  margin-bottom: 6px;
+.seams-transaction-choice-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
-
-.seams-account-seg {
+.seams-transaction-choice strong {
+  font-size: 15px;
+  font-weight: 600;
+}
+.seams-transaction-choice-description {
+  color: var(--seams-colors-textSecondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.seams-transaction-choice-indicator {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
   box-sizing: border-box;
-  min-width: 0;
-  position: relative;
-  min-height: 54px;
-  overflow: hidden;
-  padding: 5px;
-  border: none;
-  background: color-mix(in srgb, var(--seams-colors-textPrimary) 6%, var(--seams-colors-surface2));
-  border-radius: var(--seams-border-radius-xl);
+  border: 1.5px solid var(--seams-colors-borderPrimary);
+  border-radius: 50%;
 }
-
-.seams-account-seg-active {
-  position: absolute;
-  top: 5px;
-  bottom: 5px;
-  left: 5px;
-  width: calc((100% - 10px) / var(--seams-account-seg-count));
-  border-radius: inherit;
-  background: var(--seams-account-seg-active-bg);
-  transform: translateX(calc(var(--seams-account-seg-active-index) * 100%));
-  transition:
-    transform 220ms ease,
-    opacity 150ms ease;
-  pointer-events: none;
+.seams-transaction-choice[aria-pressed='true'] {
+  border-color: var(--seams-colors-primary);
+  box-shadow: inset 0 0 0 1px var(--seams-colors-primary);
+}
+.seams-transaction-choice[aria-pressed='true'] .seams-transaction-choice-indicator {
+  border: 5px solid var(--seams-colors-primary);
+}
+.seams-transaction-choice:hover:not(:disabled):not([aria-pressed='true']) {
+  background: var(--seams-colors-surface);
+}
+.seams-transaction-choice:focus-visible {
+  outline: 2px solid var(--seams-colors-primary);
+  outline-offset: 4px;
+}
+.seams-transaction-choice:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.seams-account-seg-grid {
-  position: relative;
-  z-index: 1;
+/* The switch row uses the card grid, so its edge lines up with the cards. */
+.seams-transaction-review {
   display: grid;
-  grid-template-columns: repeat(var(--seams-account-seg-count), minmax(0, 1fr));
-  gap: 4px;
-  height: 100%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px 16px;
 }
-
-.seams-account-seg-btn {
-  min-width: 0;
-  min-height: 44px;
-  padding: 0 14px;
-  border: 0;
-  border-radius: 1rem;
-  background: transparent;
-  color: color-mix(in srgb, var(--seams-colors-textSecondary), var(--seams-colors-textPrimary) 45%);
-  cursor: pointer;
+.seams-transaction-review > * {
+  grid-column: span 2;
+}
+.seams-transaction-review > p {
+  margin: 0;
+  padding-inline: 4px;
+  color: var(--seams-colors-textSecondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.seams-transaction-review-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 16px;
+  background: var(--seams-colors-colorBackground);
+}
+.seams-transaction-review-text {
   display: grid;
-  place-items: center;
-  font-size: clamp(13px, 3.6vw, 15px);
+  gap: 6px;
+}
+.seams-transaction-review-text strong {
+  font-size: 16px;
   font-weight: 600;
-  text-align: center;
-  touch-action: manipulation;
-  transition: color 160ms ease;
-  white-space: normal;
-  -webkit-tap-highlight-color: transparent;
+}
+.seams-transaction-review-text > span {
+  color: var(--seams-colors-textSecondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.seams-transaction-switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 44px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 13px;
+  background: var(--seams-colors-borderPrimary);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+.seams-transaction-switch > span {
+  position: absolute;
+  inset-block-start: 3px;
+  inset-inline-start: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--seams-colors-colorBackground);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
+  transition: transform 150ms ease;
+}
+.seams-transaction-switch[aria-checked='true'] {
+  background: var(--seams-colors-primary);
+}
+.seams-transaction-switch[aria-checked='true'] > span {
+  transform: translateX(18px);
+}
+[dir='rtl'] .seams-transaction-switch[aria-checked='true'] > span {
+  transform: translateX(-18px);
+}
+.seams-transaction-switch:focus-visible {
+  outline: 2px solid var(--seams-colors-primary);
+  outline-offset: 3px;
+}
+.seams-transaction-switch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: reduce) {
+  .seams-transaction-switch,
+  .seams-transaction-switch > span {
+    transition: none;
+  }
 }
 
-.seams-account-seg-btn.is-active {
+/* The preview draws a page with the review surface on top of it. */
+.seams-transaction-preview {
+  position: relative;
+  display: block;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--seams-colors-surface);
+  color: var(--seams-colors-textSecondary);
+}
+.seams-transaction-choice[aria-pressed='true'] .seams-transaction-preview {
   color: var(--seams-colors-textPrimary);
 }
+.seams-tp-page {
+  position: absolute;
+  inset: 14% 12%;
+  display: grid;
+  align-content: start;
+  gap: 8%;
+}
+.seams-tp-page i,
+.seams-tp-panel i {
+  display: block;
+  height: 6px;
+  border-radius: 3px;
+  background: currentColor;
+  opacity: 0.18;
+}
+.seams-tp-page i:nth-child(1) {
+  width: 38%;
+  height: 8px;
+  opacity: 0.28;
+}
+.seams-tp-page i:nth-child(3) {
+  width: 72%;
+}
+.seams-tp-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.1);
+}
+.seams-tp-panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 8px;
+  background: var(--seams-colors-colorBackground);
+  box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
+}
+.seams-tp-panel i:nth-child(1) {
+  width: 60%;
+  opacity: 0.32;
+}
+.seams-tp-panel b {
+  display: block;
+  align-self: flex-end;
+  width: 48%;
+  height: 10px;
+  margin-top: auto;
+  border-radius: 4px;
+  background: var(--seams-colors-primary);
+}
+[data-preview='modal'] .seams-tp-panel {
+  inset: 18% 26%;
+}
+[data-preview='drawer'] .seams-tp-panel {
+  inset-block: 0;
+  inset-inline: auto 0;
+  width: 40%;
+  padding-top: 14px;
+  border-block: 0;
+  border-inline-end: 0;
+  border-radius: 0;
+}
+
+@media (max-width: 600px) {
+  [data-presentation='page'] .seams-transaction-review > * {
+    grid-column: 1 / -1;
+  }
+  [data-presentation='page'] .seams-transaction-review-row {
+    padding: 16px;
+  }
+  [data-presentation='page'] .seams-transaction-choices {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+  }
+  [data-presentation='page'] .seams-transaction-choice {
+    flex-direction: row;
+    align-items: center;
+    gap: 14px;
+    padding: 10px 14px 10px 10px;
+  }
+  [data-presentation='page'] .seams-transaction-preview {
+    flex-shrink: 0;
+    width: 104px;
+  }
+  [data-presentation='page'] .seams-transaction-choice-text {
+    flex: 1;
+    min-width: 0;
+    padding-inline: 0;
+  }
+  [data-presentation='page'] .seams-tp-panel {
+    gap: 4px;
+    padding: 6px;
+    border-radius: 5px;
+  }
+  [data-presentation='page'] .seams-tp-page i,
+  [data-presentation='page'] .seams-tp-panel i {
+    height: 4px;
+  }
+  [data-presentation='page'] .seams-tp-page i:nth-child(1) {
+    height: 5px;
+  }
+  [data-presentation='page'] .seams-tp-panel b {
+    height: 6px;
+    border-radius: 2px;
+  }
+}
 
-.seams-account-seg-btn:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--seams-colors-focus), transparent 60%);
-  outline: none;
+/* The account menu is about 300px wide: three small cards per row, labels
+   only, and smaller drawings. */
+.seams-transaction-page[data-presentation='menu'] {
+  gap: 16px;
+  padding-bottom: 4px;
+}
+[data-presentation='menu'] .seams-transaction-review + .seams-transaction-group {
+  padding-top: 16px;
+}
+[data-presentation='menu'] .seams-transaction-group legend {
+  font-size: 14px;
+}
+[data-presentation='menu'] .seams-transaction-group > p {
+  margin: 2px 0 10px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+[data-presentation='menu'] .seams-transaction-choices {
+  gap: 8px;
+}
+[data-presentation='menu'] .seams-transaction-choice {
+  gap: 8px;
+  padding: 5px 5px 8px;
+  border-radius: 12px;
+}
+[data-presentation='menu'] .seams-transaction-choice-text {
+  padding-inline: 3px;
+}
+[data-presentation='menu'] .seams-transaction-choice {
+  position: relative;
+}
+[data-presentation='menu'] .seams-transaction-choice strong {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+/* The dot sits on the drawing's corner, so a long label gets the full width. */
+[data-presentation='menu'] .seams-transaction-choice-indicator {
+  position: absolute;
+  inset-block-start: 10px;
+  inset-inline-end: 10px;
+  width: 14px;
+  height: 14px;
+  background: var(--seams-colors-colorBackground);
+}
+[data-presentation='menu'] .seams-transaction-choice[aria-pressed='true'] .seams-transaction-choice-indicator {
+  border-width: 4px;
+}
+[data-presentation='menu'] .seams-transaction-preview {
+  border-radius: 8px;
+}
+[data-presentation='menu'] .seams-tp-panel {
+  gap: 3px;
+  padding: 5px;
+  border-radius: 4px;
+}
+[data-presentation='menu'] .seams-tp-page i,
+[data-presentation='menu'] .seams-tp-panel i {
+  height: 3px;
+  border-radius: 2px;
+}
+[data-presentation='menu'] .seams-tp-page i:nth-child(1) {
+  height: 4px;
+}
+[data-presentation='menu'] .seams-tp-panel b {
+  height: 5px;
+  border-radius: 2px;
+}
+[data-presentation='menu'] [data-preview='drawer'] .seams-tp-panel {
+  padding-top: 7px;
+}
+[data-presentation='menu'] .seams-transaction-review > * {
+  grid-column: 1 / -1;
+}
+[data-presentation='menu'] .seams-transaction-review {
+  gap: 8px;
+}
+[data-presentation='menu'] .seams-transaction-review-row {
+  gap: 14px;
+  padding: 14px;
+  border-radius: 12px;
+}
+[data-presentation='menu'] .seams-transaction-review-text strong {
+  font-size: 14px;
+}
+[data-presentation='menu'] .seams-transaction-review-text > span,
+[data-presentation='menu'] .seams-transaction-review > p {
+  font-size: 12px;
+  line-height: 1.4;
 }