@seams/wallet 0.10.2 → 0.12.0

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

@@ -1,23 +1,454 @@
-* {
-  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);
 }

package/dist/esm/react/components/AccountMenuButton/hooks/useProfileState.js

@@ -25,7 +25,7 @@ const useProfileState = (options) => {
 			const clickedInsideDropdown = isInPath(dropdownRef.current);
 			if (clickedInsideButton || clickedInsideDropdown) return;
 			const pathEls = path.filter((n) => n instanceof HTMLElement);
-			if (pathEls.some((el) => Array.from(el.classList ?? []).some((c) => c.startsWith("seams-access-keys-modal") || c.startsWith("seams-export-key-type-modal")))) return;
+			if (pathEls.some((el) => Array.from(el.classList ?? []).some((c) => c.startsWith("seams-access-keys-modal") || c.startsWith("seams-export-key-type-modal") || c.startsWith("seams-linked-devices-modal")))) return;
 			if (pathEls.some((el) => el.classList?.contains("qr-scanner-modal") || el.classList?.contains("qr-scanner-panel") || el.classList?.contains("qr-scanner-linking-toast"))) return;
 			if (!isControlled) setUncontrolledOpen(false);
 			onOpenChange?.(false);

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

@@ -0,0 +1,8 @@
+import { lucideIcon } from "./lucideIcon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/icons/LayersIcon.tsx
+const LayersIcon = lucideIcon("layers-2", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z" }), /* @__PURE__ */ jsx("path", { d: "m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845" })] }));
+//#endregion
+export { LayersIcon };
+
+//# sourceMappingURL=LayersIcon.js.map

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

@@ -0,0 +1,22 @@
+import { lucideIcon } from "./lucideIcon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/icons/LockKeyholeIcon.tsx
+const LockKeyholeIcon = lucideIcon("lock-keyhole", /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "16",
+		r: "1"
+	}),
+	/* @__PURE__ */ jsx("rect", {
+		x: "3",
+		y: "10",
+		width: "18",
+		height: "12",
+		rx: "2"
+	}),
+	/* @__PURE__ */ jsx("path", { d: "M7 10V7a5 5 0 0 1 10 0v3" })
+] }));
+//#endregion
+export { LockKeyholeIcon };
+
+//# sourceMappingURL=LockKeyholeIcon.js.map

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

@@ -0,0 +1,8 @@
+import { lucideIcon } from "./lucideIcon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/icons/PlusIcon.tsx
+const PlusIcon = lucideIcon("plus", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M5 12h14" }), /* @__PURE__ */ jsx("path", { d: "M12 5v14" })] }));
+//#endregion
+export { PlusIcon };
+
+//# sourceMappingURL=PlusIcon.js.map

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

@@ -1,8 +1,8 @@
 import { useDrawInStrokeIcon } from "./strokeIcon.js";
 import "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/AccountMenuButton/icons/SunIcon.tsx
-const SunIcon = (props) => useDrawInStrokeIcon(props, "sun", "#FACC15", (drawIn) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+const SunIcon = (props) => useDrawInStrokeIcon(props, "sun", "#FACC15", (drawIn) => /* @__PURE__ */ jsxs(Fragment, { children: [
 	/* @__PURE__ */ jsx("circle", {
 		cx: "12",
 		cy: "12",

package/dist/esm/react/components/AccountMenuButton/icons/TouchIcon.css

@@ -1,9 +1,5 @@
 /* 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;
@@ -40,7 +36,3 @@
     stroke-dashoffset: 0;
   }
 }
-
-.seams-fingerprint-icon:hover {
-  transform: rotate(180deg) scale(1.2);
-}