@seams/wallet 0.26.0 → 0.28.0

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

@@ -182,7 +182,7 @@ var WalletSettingsLayout = class extends Component {
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "seams-settings-identity",
-							children: [/* @__PURE__ */ jsx(TouchIcon, {}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: this.props.walletId }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { message: "Unlocked on this device" }) })] })]
+							children: [/* @__PURE__ */ jsx(TouchIcon, {}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: this.props.walletId }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.access === "external" ? "Connected with Google" : "Unlocked on this device" }) })] })]
 						}),
 						/* @__PURE__ */ jsx("button", {
 							className: "seams-settings-mobile-toggle",

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

@@ -574,7 +574,7 @@
   accent-color: var(--seams-colors-textPrimary);
 }
 
-[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal {
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-dialog {
   display: none;
   position: fixed;
   inset: 0;
@@ -596,16 +596,165 @@
   color: var(--seams-colors-textPrimary);
   box-shadow: none;
 }
-[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal[open] {
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-dialog[open] {
   display: block;
 }
-[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-modal::backdrop {
+[data-seams-root].seams-theme-provider dialog[data-seams-root].seams-account-dialog::backdrop {
   background: rgb(0 0 0 / 0.26);
 }
-[data-seams-root].seams-theme-provider .seams-account-modal .seams-profile-button-morphable.open {
+[data-seams-root].seams-theme-provider .seams-account-dialog .seams-profile-button-morphable.open {
   width: 100%;
 }
-html:has(dialog[data-seams-root].seams-account-modal[open]) {
+html:has(dialog[data-seams-root].seams-account-dialog[open]) {
   overflow: hidden;
   scrollbar-gutter: stable;
 }
+
+[data-seams-root].seams-theme-provider
+  dialog[data-seams-root].seams-account-dialog[data-presentation='drawer'] {
+  --seams-account-drawer-offset: translateX(100%);
+  inset-block: 0;
+  inset-inline: auto 0;
+  margin: 0;
+  width: min(440px, 100vw);
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 0;
+  border-start-start-radius: var(--seams-border-radius-lg);
+  border-end-start-radius: var(--seams-border-radius-lg);
+  overflow: hidden;
+  background: var(--seams-colors-colorBackground);
+  box-shadow: var(--seams-shadows-xl);
+}
+@media (min-width: 601px) {
+  [data-seams-root].seams-theme-provider
+    dialog[data-seams-root].seams-account-dialog[data-presentation='drawer']:dir(rtl) {
+    --seams-account-drawer-offset: translateX(-100%);
+  }
+}
+[data-seams-root].seams-theme-provider .seams-account-dialog[data-presentation='drawer']::backdrop {
+  background: rgb(13 20 24 / 0.22);
+  transition: background-color 240ms ease;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer'][data-state='closing']::backdrop {
+  background: transparent;
+}
+@starting-style {
+  [data-seams-root].seams-theme-provider
+    .seams-account-dialog[data-presentation='drawer'][open]::backdrop {
+    background: transparent;
+  }
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-profile-button-morphable.open {
+  height: 100%;
+  border: 0;
+  border-radius: inherit;
+  box-shadow: none;
+  animation: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-resize {
+  height: 100%;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-panel-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-origin {
+  display: grid;
+  grid-template-columns: 14px 1fr 32px;
+  flex: none;
+  padding: var(--seams-spacing-lg) var(--seams-spacing-lg) 0;
+}
+[data-seams-root].seams-theme-provider h2.seams-account-drawer-title {
+  grid-column: 1 / -1;
+  color: var(--seams-colors-textPrimary);
+  font: inherit;
+  font-size: 25px;
+  font-weight: 550;
+  letter-spacing: -0.8px;
+  line-height: 1.2;
+  margin: var(--seams-spacing-md) 0 2px;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-main {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: calc(var(--seams-spacing-md) + var(--seams-spacing-xs)) var(--seams-spacing-lg)
+    var(--seams-spacing-lg);
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-main:has(> .seams-account-identity) {
+  display: flex;
+  flex-direction: column;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-identity {
+  flex: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-profile-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  button.seams-lock-menu-item {
+  margin-top: auto;
+  flex: none;
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-menu-group:last-of-type {
+  margin-bottom: var(--seams-spacing-lg);
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  .seams-account-footer {
+  flex: none;
+  padding: var(--seams-spacing-md) var(--seams-spacing-lg);
+}
+[data-seams-root].seams-theme-provider
+  .seams-account-dialog[data-presentation='drawer']
+  button.seams-dropdown-menu-item {
+  min-height: 46px;
+}
+@media (max-width: 600px) {
+  [data-seams-root].seams-theme-provider
+    dialog[data-seams-root].seams-account-dialog[data-presentation='drawer'] {
+    --seams-account-drawer-offset: translateY(100%);
+    inset: auto 0 0;
+    width: 100%;
+    height: min(720px, calc(100dvh - 36px));
+    max-height: calc(100dvh - 36px);
+    border-radius: var(--seams-border-radius-lg) var(--seams-border-radius-lg) 0 0;
+  }
+  [data-seams-root].seams-theme-provider
+    .seams-account-dialog[data-presentation='drawer']
+    .seams-account-footer {
+    padding-bottom: max(var(--seams-spacing-md), env(safe-area-inset-bottom));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-seams-root].seams-theme-provider
+    .seams-account-dialog[data-presentation='drawer']::backdrop {
+    transition: none;
+  }
+}

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

@@ -9,6 +9,12 @@
   color: var(--seams-colors-textSecondary);
   transition: color 140ms ease;
 }
+[data-seams-root].seams-theme-provider .seams-hover-arrow--left {
+  transform: rotate(180deg);
+}
+[data-seams-root].seams-theme-provider .seams-hover-arrow--up-right {
+  transform: rotate(-45deg);
+}
 [data-seams-root].seams-theme-provider .seams-hover-arrow-line {
   opacity: 0;
   filter: blur(2px);
@@ -22,20 +28,38 @@
 [data-seams-root].seams-theme-provider .seams-hover-arrow-tip {
   transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
-[data-seams-root].seams-theme-provider :hover > .seams-hover-arrow,
 [data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow {
   color: var(--seams-colors-textPrimary);
 }
-[data-seams-root].seams-theme-provider :hover > .seams-hover-arrow .seams-hover-arrow-line,
 [data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow .seams-hover-arrow-line {
   opacity: 1;
   filter: blur(0);
   transform: scaleX(1);
 }
-[data-seams-root].seams-theme-provider :hover > .seams-hover-arrow .seams-hover-arrow-tip,
 [data-seams-root].seams-theme-provider :focus-visible > .seams-hover-arrow .seams-hover-arrow-tip {
   transform: translateX(3px);
 }
+@media (hover: hover) and (pointer: fine) {
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow {
+    color: var(--seams-colors-textPrimary);
+  }
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow
+    .seams-hover-arrow-line {
+    opacity: 1;
+    filter: blur(0);
+    transform: scaleX(1);
+  }
+  [data-seams-root].seams-theme-provider
+    :hover:not(:disabled):not([aria-disabled='true'])
+    > .seams-hover-arrow
+    .seams-hover-arrow-tip {
+    transform: translateX(3px);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   [data-seams-root].seams-theme-provider .seams-hover-arrow,
   [data-seams-root].seams-theme-provider .seams-hover-arrow-line,

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

@@ -5,7 +5,7 @@ import "./HoverArrowIcon.css";
 //#region src/react/components/AccountMenuButton/icons/HoverArrowIcon.tsx
 /** A chevron that grows a shaft on its parent's hover (">" to "->"). Place it
 * as a direct child of the row that triggers it (HoverArrowIcon.css). */
-function HoverArrowIcon({ size = 12 }) {
+function HoverArrowIcon({ size = 12, direction = "right" }) {
 	const style = {
 		"--seams-icon-width": `${size}px`,
 		"--seams-icon-height": `${size}px`,
@@ -13,7 +13,7 @@ function HoverArrowIcon({ size = 12 }) {
 	};
 	return /* @__PURE__ */ jsxs("svg", {
 		"data-seams-root": "",
-		className: "seams-icon seams-hover-arrow",
+		className: `seams-icon seams-hover-arrow seams-hover-arrow--${direction}`,
 		width: size,
 		height: size,
 		style,

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

@@ -115,15 +115,17 @@ const AccountMenuButtonInner = (props) => {
 	const accountMenuCapabilities = accountMenuCapabilitiesForLoginState(loginState);
 	const canShowRecoveryCodes = accountMenuCapabilities.kind === "owner" && Boolean(walletId);
 	const canManageLinkedDevices = accountMenuCapabilities.canManageLinkedDevices;
+	const canReadSettings = loginState.isLoggedIn && loginState.access === "external";
 	const handleQrCodeScanned = useCallback(() => {
 		setShowQRScanner(false);
 		handleClose();
 	}, [handleClose]);
 	useEffect(() => {
 		const switchedWallet = accountSetupState.kind !== "idle" && walletId !== null && walletId !== accountSetupState.walletId;
-		if (!canManageLinkedDevices && !accountSetupRunning && accountSetupState.kind !== "added" || switchedWallet) setScreen("overview");
+		if (!canManageLinkedDevices && !canReadSettings && !accountSetupRunning && accountSetupState.kind !== "added" || switchedWallet) setScreen("overview");
 	}, [
 		canManageLinkedDevices,
+		canReadSettings,
 		accountSetupRunning,
 		accountSetupState,
 		walletId
@@ -330,7 +332,7 @@ const AccountMenuButtonInner = (props) => {
 				icon: /* @__PURE__ */ jsx(TouchIcon, {}),
 				label: "Authentication methods",
 				description: "Add or remove ways to unlock this device",
-				disabled: !canManageLinkedDevices,
+				disabled: !canManageLinkedDevices && !canReadSettings,
 				onClick: setScreen.bind(null, "authentication-methods"),
 				keepOpenOnClick: true
 			}, {
@@ -346,7 +348,7 @@ const AccountMenuButtonInner = (props) => {
 				icon: /* @__PURE__ */ jsx(LinkIcon, {}),
 				label: "Linked devices",
 				description: "See devices using this wallet",
-				disabled: !canManageLinkedDevices,
+				disabled: !canManageLinkedDevices && !canReadSettings,
 				onClick: setScreen.bind(null, "linked-devices"),
 				keepOpenOnClick: true
 			});
@@ -372,6 +374,7 @@ const AccountMenuButtonInner = (props) => {
 		accountsRows.length,
 		layout,
 		accountMenuCapabilities,
+		canReadSettings,
 		canShowRecoveryCodes,
 		exportLoadingChain,
 		loginState.isLoggedIn,
@@ -491,6 +494,7 @@ const AccountMenuButtonInner = (props) => {
 		})
 	};
 	if (layout === "page" && loginState.isLoggedIn && walletId) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WalletSettingsLayout, {
+		access: loginState.access,
 		walletId: toWalletId(walletId),
 		placement: seams.placement,
 		menuItems: MENU_ITEMS,

package/dist/esm/react/components/ExternalNearWalletIcon.js

@@ -0,0 +1,32 @@
+import { WalletIcon } from "./AccountMenuButton/icons/WalletIcon.js";
+import { hotWalletIcon, meteorWalletIcon } from "./externalWalletBrandImages.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/components/ExternalNearWalletIcon.tsx
+function ExternalNearWalletIcon({ wallet }) {
+	switch (wallet) {
+		case "meteor": return /* @__PURE__ */ jsx("img", {
+			src: meteorWalletIcon,
+			width: 32,
+			height: 32,
+			alt: ""
+		});
+		case "hot": return /* @__PURE__ */ jsx("img", {
+			src: hotWalletIcon,
+			width: 32,
+			height: 32,
+			alt: ""
+		});
+		case "intear": return /* @__PURE__ */ jsx(WalletIcon, {
+			width: 28,
+			height: 28
+		});
+		default: {
+			const exhaustive = wallet;
+			throw new Error(`Unknown external wallet icon: ${String(exhaustive)}`);
+		}
+	}
+}
+//#endregion
+export { ExternalNearWalletIcon };
+
+//# sourceMappingURL=ExternalNearWalletIcon.js.map

package/dist/esm/react/components/HostedSeamsAuthMenu/WalletConnectorMenu.css

@@ -0,0 +1,182 @@
+:where([data-seams-root]) .seams-wallet-connector {
+  box-sizing: border-box;
+  position: relative;
+  width: min(100%, 420px);
+  border-radius: var(--seams-shape-card, 16px);
+  background: var(--seams-colors-colorBackground);
+  box-shadow: var(--seams-shadows-md);
+  color: var(--seams-colors-textPrimary);
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: var(--seams-font-size-base, 1rem);
+  line-height: 1.5;
+  transition: height 200ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+:where([data-seams-root]) .seams-wallet-connector[data-connector-view='auth'] {
+  background: transparent;
+  box-shadow: none;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-content {
+  width: 100%;
+  min-width: 0;
+  border-radius: inherit;
+}
+
+:where([data-seams-root])
+  .seams-wallet-connector[data-connector-view='auth']
+  .seams-wallet-connector-content {
+  animation: seams-connector-enter 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-choices {
+  box-sizing: border-box;
+  padding: calc(var(--seams-spacing-lg) + var(--seams-spacing-xs)) var(--seams-spacing-lg)
+    var(--seams-spacing-lg);
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: inherit;
+}
+
+:where([data-seams-root]) .seams-wallet-connector h2 {
+  margin: 0 calc(var(--seams-spacing-lg) + var(--seams-spacing-xs))
+    calc(var(--seams-spacing-sm) + var(--seams-spacing-xs)) 0;
+  font-size: 1.375em;
+  line-height: 1.25;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  outline: none;
+}
+
+:where([data-seams-root]) .seams-wallet-connector p {
+  margin: 0 0 var(--seams-spacing-lg);
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.8125em;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-options {
+  display: grid;
+  gap: var(--seams-spacing-sm);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option {
+  display: flex;
+  align-items: center;
+  gap: var(--seams-spacing-md);
+  width: 100%;
+  min-width: 0;
+  min-height: calc(var(--seams-shape-controlHeight, 44px) + 2 * var(--seams-spacing-md));
+  padding: var(--seams-spacing-md);
+  box-sizing: border-box;
+  border: 1px solid var(--seams-colors-secondaryButtonBorder, var(--seams-colors-borderPrimary));
+  border-radius: var(--seams-shape-control, 10px);
+  background: var(--seams-colors-secondaryButtonBackground, var(--seams-colors-surface));
+  color: var(--seams-colors-secondaryButtonText, var(--seams-colors-textPrimary));
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-icon {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  flex: none;
+}
+:where([data-seams-root]) .seams-wallet-connector-icon img {
+  display: block;
+  object-fit: contain;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label {
+  display: grid;
+  gap: var(--seams-spacing-xs);
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label strong {
+  font-size: 0.8125em;
+  font-weight: 500;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-label small {
+  font-size: 0.75em;
+  color: var(--seams-colors-textSecondary);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-option > svg {
+  flex: none;
+  color: var(--seams-colors-textSecondary);
+}
+
+:where([data-seams-root]) .seams-wallet-connector-close,
+:where([data-seams-root]) .seams-wallet-connector-back {
+  position: absolute;
+  z-index: calc(var(--seams-wallet-inline-dialog-z, 0) + 1);
+  inset: 12px 12px auto auto;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: var(--seams-colors-textSecondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+:where([data-seams-root]) .seams-wallet-connector-back:has(+ .seams-wallet-connector-close) {
+  right: 52px;
+}
+
+:where([data-seams-root]) .seams-wallet-connector button:focus-visible {
+  outline: 2px solid var(--seams-colors-focus, currentColor);
+  outline-offset: 3px;
+}
+
+:where([data-seams-root]) .seams-wallet-connector p[role] {
+  margin: var(--seams-spacing-md) 0 0;
+}
+
+:where([data-seams-root]) .seams-wallet-connector .seams-wallet-connector-error {
+  color: var(--seams-colors-error);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where([data-seams-root]) .seams-wallet-connector-option:not(:disabled):hover {
+    background: var(--seams-colors-secondaryButtonHoverBackground, var(--seams-colors-hover));
+    border-color: var(--seams-colors-borderHover);
+  }
+  :where([data-seams-root]) .seams-wallet-connector-close:hover,
+  :where([data-seams-root]) .seams-wallet-connector-back:hover {
+    background: var(--seams-colors-hover);
+  }
+}
+
+@keyframes seams-connector-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-seams-root]) .seams-wallet-connector {
+    transition: none;
+  }
+  :where([data-seams-root]) .seams-wallet-connector-content {
+    animation: none;
+  }
+}