@seams/wallet 0.10.1 → 0.11.0

package/dist/esm/react/styles/styles.css

@@ -297,93 +297,93 @@
   }
 }
 
-/* ProfileDropdown component-specific styles */
-
-/* Dropdown (grid height animation with data-state) */
-.seams-profile-dropdown-morphed {
-  position: static;
-  box-sizing: border-box;
-  margin-top: 0;
-  opacity: 0;
-  visibility: hidden;
-  display: grid;
-  grid-template-rows: 0fr;
-  grid-template-columns: 1fr;
-  transition:
-    opacity 120ms linear,
-    grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);
+.seams-account-menu-group {
+  margin-top: 16px;
+}
+.seams-account-menu-group + .seams-account-menu-group {
   border-top: 1px solid var(--seams-colors-borderPrimary);
+  padding-top: 12px;
+  margin-top: 10px;
 }
-
-.seams-profile-dropdown-morphed[data-state='open'] {
-  opacity: 1;
-  visibility: visible;
-  grid-template-rows: 1fr;
-  grid-template-columns: 1fr;
-  pointer-events: auto;
-  --stagger-base: 40ms;
+.seams-account-menu-group h3 {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--seams-colors-textSecondary);
+  margin: 0 0 4px;
 }
-
-.seams-profile-dropdown-morphed[data-state='closed'] {
-  pointer-events: none;
-  border-top-width: 0;
-  grid-template-rows: 0fr;
-  height: 0;
-  min-height: 0;
-  width: 0;
-  min-width: 0;
-  max-width: 0;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
+.seams-profile-dropdown-menu {
+  --seams-expander-surface: var(--seams-colors-surface2);
 }
-
-.seams-profile-dropdown-morphed.hidden {
+.seams-profile-dropdown-menu .seams-dropdown-menu-item {
+  min-height: 40px;
+  padding: 6px 0;
+  gap: 10px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item:disabled {
+  color: var(--seams-colors-textSecondary);
+  opacity: 0.6;
+  cursor: default;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-icon {
+  width: 22px;
+  height: 22px;
+  color: var(--seams-colors-textSecondary);
+  flex-shrink: 0;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-icon svg {
+  width: 20px;
+  height: 20px;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-label {
+  font-size: 14px;
+  font-weight: 400;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-description {
   display: none;
 }
-
-/* Inner clip and container */
-.seams-profile-dropdown-menu {
-  overflow: hidden;
-  min-height: 0;
-  min-width: 0;
-  /* Expanded sections sit on a slightly deeper surface than the menu itself.
-     Derived from the theme's own surface tones so it tracks light/dark. */
-  --seams-expander-surface: color-mix(
-    in srgb,
-    var(--seams-colors-surface2) 45%,
-    var(--seams-colors-surface)
-  );
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-content {
+  flex: 1;
 }
-
-/* Global theme pulse when toggling theme */
-@keyframes seams-theme-pulse {
-  0% {
-    filter: none;
-  }
-  50% {
-    filter: brightness(1.05) saturate(1.06);
-  }
-  100% {
-    filter: none;
-  }
+.seams-account-menu-chevron {
+  color: var(--seams-colors-textSecondary);
+  flex-shrink: 0;
 }
-body[data-seams-theme-pulse='1'] .seams-profile-dropdown-menu {
-  animation: seams-theme-pulse 220ms ease;
+.seams-profile-dropdown-menu .seams-lock-menu-item {
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 11px;
+  justify-content: center;
+  margin-top: 12px;
+}
+.seams-lock-menu-item .seams-dropdown-menu-item-content {
+  flex: 0 1 auto;
+}
+@media (hover: hover) {
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover {
+    color: var(--seams-colors-textSecondary);
+    background: transparent;
+  }
 }
 
-/* Lock menu item specific styling */
-.seams-lock-menu-item {
-  border-top: 1px solid var(--seams-colors-borderPrimary);
-  border-radius: 0px 0px 2rem 2rem;
+@media (pointer: coarse) {
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item {
+    min-height: 44px;
+  }
 }
 
 /* TouchIcon specific styles and animations */
 
-.seams-fingerprint-icon {
-  transition: transform 400ms ease;
-}
-
 .seams-fingerprint-icon path {
   /* Normalize path length so dash animations are simple */
   stroke: currentColor;
@@ -421,10 +421,6 @@ body[data-seams-theme-pulse='1'] .seams-profile-dropdown-menu {
   }
 }
 
-.seams-fingerprint-icon:hover {
-  transform: rotate(180deg) scale(1.2);
-}
-
 /* Expander (TransactionSettingsSection) */
 .seams-dropdown-tx-settings-root {
   background-color: var(--seams-expander-surface, var(--seams-colors-surface));
@@ -471,12 +467,14 @@ body[data-seams-theme-pulse='1'] .seams-profile-dropdown-menu {
 }
 
 .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);
 }
 
@@ -671,7 +669,7 @@ body[data-seams-theme-pulse='1'] .seams-profile-dropdown-menu {
   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;
@@ -711,28 +709,459 @@ body[data-seams-theme-pulse='1'] .seams-profile-dropdown-menu {
   color: var(--seams-colors-textMuted);
 }
 
-* {
-  box-sizing: border-box;
-}
-
 .seams-profile-button-morphable {
+  box-sizing: border-box;
   position: relative;
-  background-color: var(--seams-colors-colorBackground);
+  background: var(--seams-colors-colorBackground);
   border: 1px solid var(--seams-colors-borderPrimary);
-  border-radius: 2rem;
-  box-shadow: var(--seams-shadows-sm);
+  border-radius: 27px;
+  box-shadow:
+    0 2px 3px rgb(0 0 0 / 0.02),
+    0 16px 36px rgb(0 0 0 / 0.06);
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--seams-colors-textPrimary);
+  width: fit-content;
+  max-width: 100%;
+}
+.seams-profile-button-morphable.open {
+  width: 420px;
+  overflow: hidden;
+}
+.seams-account-resize {
+  overflow: hidden;
+}
+.seams-account-panel-content {
+  width: 100%;
+  display: flow-root;
+}
+.seams-account-origin {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 16px 20px 0;
+  font-size: 13px;
+  color: var(--seams-colors-textSecondary);
+}
+.seams-account-origin > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.seams-account-origin > button {
+  margin-left: auto;
+  background: none;
+  border: 0;
+  color: inherit;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: grid;
+  place-items: center;
   cursor: pointer;
+}
+.seams-account-main {
+  padding: 16px 20px;
+}
+.seams-account-heading h2 {
+  font: inherit;
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.8px;
+  line-height: 1.15;
+  margin: 0;
+  color: var(--seams-colors-textPrimary);
+}
+.seams-account-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.seams-account-heading h2:focus {
   outline: none;
+}
+.seams-account-back {
+  width: 24px;
+  height: 30px;
+  padding: 0;
+  margin-left: -3px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.seams-account-identity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px;
+  margin-top: 0;
+  border-radius: 12px;
+  background: var(--seams-colors-surface2);
+}
+.seams-account-avatar {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: color-mix(
+    in srgb,
+    var(--seams-colors-textSecondary) 10%,
+    var(--seams-colors-surface2)
+  );
+  color: var(--seams-colors-textSecondary);
+  flex-shrink: 0;
+}
+.seams-account-identity > div {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.seams-account-identity strong {
+  font-size: 15px;
+  font-weight: 500;
+}
+.seams-account-identity small {
+  display: block;
+  color: var(--seams-colors-textSecondary);
+  margin-top: 4px;
+}
+.seams-account-footer {
+  border-top: 1px solid var(--seams-colors-borderPrimary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  color: var(--seams-colors-textSecondary);
+  font-size: 12px;
+}
+.seams-account-wordmark {
+  width: 70px;
+  height: 18px;
+  color: var(--seams-colors-textPrimary);
+}
+.seams-account-description {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--seams-colors-textSecondary);
+  margin: 0 0 16px;
+}
+.seams-account-action {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 11px;
+  font: inherit;
+  font-weight: 500;
+  background: var(--seams-colors-colorBackground);
+  color: inherit;
+  cursor: pointer;
+  margin-top: 14px;
+}
+.seams-account-action.primary {
+  background: var(--seams-colors-textPrimary);
+  color: var(--seams-colors-colorBackground);
+  border-color: transparent;
+}
+.seams-account-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.seams-account-note {
+  color: var(--seams-colors-textSecondary);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 10px 0 0;
+}
+.seams-account-inset {
+  padding: 10px 12px;
+  background: var(--seams-colors-surface2);
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.seams-account-detail-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+}
+.seams-account-detail-row dt {
+  color: var(--seams-colors-textSecondary);
+}
+.seams-account-detail-row dd {
+  margin: 0;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+.seams-account-device-hero {
+  text-align: center;
+  padding: 8px 0 12px;
+}
+.seams-account-device-hero .seams-account-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  margin: 0 auto 8px;
+}
+.seams-account-device-hero h3 {
+  font-size: 24px;
+  font-weight: 500;
+  letter-spacing: -0.6px;
+  margin: 0 0 6px;
+}
+.seams-account-device-hero p {
+  color: var(--seams-colors-textSecondary);
+  font-size: 13px;
+  margin: 0;
+}
+.seams-account-method-button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+  padding: 12px 0;
+  border: 0;
+  border-bottom: 1px solid var(--seams-colors-borderPrimary);
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+.seams-account-method-button > div {
+  flex: 1;
+}
+.seams-account-method-button strong {
+  font-size: 15px;
+  font-weight: 500;
+}
+.seams-account-method-button small {
+  display: block;
+  margin-top: 4px;
+  color: var(--seams-colors-textSecondary);
+  font-size: 12px;
+}
+.seams-account-method-button > svg {
+  width: 16px;
+  height: 16px;
+  color: var(--seams-colors-textSecondary);
+}
+.seams-account-screen .seams-dropdown-accounts-root,
+.seams-account-screen .seams-dropdown-export-keys-root {
+  border: 0;
+  border-radius: 12px;
+}
+.seams-account-screen .seams-linked-devices-modal-body {
+  max-height: none;
   overflow: visible;
-  width: fit-content;
-  transition: none;
+}
+.seams-account-screen .seams-linked-devices-modal-list {
+  margin: 0;
+}
+.seams-account-screen .seams-linked-devices-modal-item {
+  background: transparent;
+}
+.seams-account-screen .seams-linked-devices-modal-item-icon {
+  background: var(--seams-colors-surface2);
+  border-radius: 10px;
+}
+.seams-account-screen .qr-scanner-modal[data-presentation='embedded'] {
+  position: static;
+  inset: auto;
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  backdrop-filter: none;
+  min-height: 0;
+  display: block;
+  animation: none;
+}
+.seams-account-screen .qr-scanner-modal[data-presentation='embedded'] .qr-scanner-panel {
+  width: 100%;
+  max-width: 100%;
+  max-height: none;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+}
+.seams-account-screen .qr-scanner-modal[data-presentation='embedded'] .qr-scanner-close {
+  display: none;
+}
+.seams-account-screen .qr-scanner-camera-container {
+  width: 100%;
+  height: 208px;
+  aspect-ratio: auto;
+  border-radius: 15px;
+  overflow: hidden;
+}
+.seams-account-screen .qr-scanner-video {
+  height: 208px;
+  object-fit: cover;
+}
+.seams-account-screen .qr-scanner-instructions {
+  color: var(--seams-colors-textSecondary);
+  font-size: 12px;
+  padding: 12px 0 0;
+  text-align: center;
+}
+.seams-account-screen .qr-scanner-overlay {
+  animation: none;
+}
+.seams-account-recovery-codes {
+  list-style: none;
+  display: grid;
+  gap: 8px;
+  padding: 0;
+  margin: 14px 0;
+}
+.seams-account-recovery-codes li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 8px;
+}
+.seams-account-recovery-codes li > span {
+  color: var(--seams-colors-textSecondary);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.seams-account-recovery-codes code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .seams-account-resize {
+    transition: height 240ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+}
+@media (max-width: 480px) {
+  .seams-account-main {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+  .seams-account-origin {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+}
+.seams-account-method-list-item {
+  list-style: none;
+}
+.seams-account-screen ul {
+  padding-left: 0;
+}
+.seams-account-error {
+  color: var(--seams-colors-error, #ae3344);
+  font-size: 13px;
+  margin: 16px 0 0;
+}
+.seams-account-screen {
+  --seams-expander-surface: var(--seams-colors-surface2);
+  opacity: 1;
+  transition: opacity 140ms ease;
+}
+@starting-style {
+  .seams-account-screen {
+    opacity: 0;
+  }
+}
+.seams-profile-button-morphable {
+  font-family: var(--seams-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+}
+.seams-account-screen [data-detail='true'] > .seams-linked-devices-modal-item-icon,
+.seams-account-screen [data-detail='true'] .seams-linked-devices-modal-item-main,
+.seams-account-screen [data-detail='true'] .seams-linked-devices-modal-item-detail {
+  display: none;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item {
+  transform: none;
+}
+.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;
+  margin-top: 14px;
 }
 
-.seams-profile-button-morphable:hover {
-  border-color: var(--seams-colors-borderHover);
+.seams-account-method-tiles {
+  list-style: none;
+  padding: 0;
+  margin: 16px 0 0;
+  display: grid;
+  gap: 8px;
+}
+.seams-account-method-tiles .seams-linked-devices-modal-item {
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 12px;
+  padding: 10px;
+}
+
+.seams-account-screen .seams-dropdown-toggle-tx-settings-content {
+  padding: 8px 0;
+}
+@media (pointer: coarse) {
+  .seams-account-action {
+    min-height: 44px;
+  }
+}
+
+.seams-recovery-code-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.seams-recovery-code-actions .seams-account-action {
+  margin-top: 0;
+}
+.seams-recovery-code-action-status {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--seams-colors-textSecondary);
+}
+
+.seams-recovery-code-action-status:empty {
+  margin: 0;
+}
+
+.seams-account-recovery-acknowledgement {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+  padding-top: 14px;
+  padding-inline-start: 0.5rem;
+  border-top: 1px solid var(--seams-colors-borderPrimary);
+  font-size: 12px;
+  line-height: 1.45;
+  cursor: pointer;
+}
+.seams-account-recovery-acknowledgement input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  flex-shrink: 0;
+  accent-color: var(--seams-colors-textPrimary);
 }
 
 .seams-settings-page {

package/dist/esm/react/transactionReview/TransactionReviewHost.js

@@ -2,7 +2,7 @@ import { useSeams } from "../context/index.js";
 import { TransactionReviewError } from "../../SeamsWeb/walletIframe/shared/transactionReview.js";
 import { ReviewHostController, ReviewOwner } from "./controller.js";
 import { Component, Suspense, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/react/transactionReview/TransactionReviewHost.tsx
 const ReviewContext = createContext(null);
@@ -69,7 +69,7 @@ function RenderReview({ call }) {
 }
 function ReviewLoading({ call }) {
 	useEffect(scheduleReviewLoadingTimeout.bind(null, call), [call]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 		role: "status",
 		children: "Loading review…"
 	}), /* @__PURE__ */ jsx("button", {
@@ -79,7 +79,7 @@ function ReviewLoading({ call }) {
 	})] });
 }
 function ReviewFailure({ call }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
 		role: "alert",
 		children: "The application review could not be displayed."
 	}), /* @__PURE__ */ jsx("button", {