@seams/wallet 0.26.0 → 0.27.0

package/dist/esm/core/signingEngine/uiConfirm/ui/preact/mountConfirmationSurface.js

@@ -1,6 +1,7 @@
 import { appearanceTokenCssRule } from "../appearance-token-vars.js";
 import { withWalletLocale } from "./WalletLocale.js";
 import { PadlockIcon } from "./PadlockIcon.js";
+import { CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR, announceSurfaceResize } from "../confirm-surface-resize.js";
 import { confirmationDocumentStyles } from "./confirmation-styles.js";
 import { ConfirmationContent } from "./ConfirmationContent.js";
 import { ConfirmationModal } from "./ConfirmationModal.js";
@@ -40,11 +41,40 @@ function captureReceiptAnchors(surface) {
 			selector,
 			text: element.textContent,
 			bounds: element.getBoundingClientRect(),
-			fontSize: getComputedStyle(element).fontSize
+			fontSize: getComputedStyle(element).fontSize,
+			textGeometry: element.matches("[role=\"status\"]") ? receiptTextGeometry(element) : null
 		});
 	}
 	return anchors;
 }
+function receiptTextGeometry(element) {
+	const range = element.ownerDocument.createRange();
+	range.selectNodeContents(element);
+	return {
+		bounds: range.getBoundingClientRect(),
+		lineCount: range.getClientRects().length
+	};
+}
+function receiptAnchorTransform(anchor, element) {
+	const destination = element.getBoundingClientRect();
+	const fontScale = parseFloat(anchor.fontSize) / parseFloat(getComputedStyle(element).fontSize);
+	let scaleX = fontScale;
+	let scaleY = fontScale;
+	let left = anchor.bounds.left - destination.left;
+	let top = anchor.bounds.top - destination.top;
+	if (anchor.textGeometry) {
+		const text = receiptTextGeometry(element);
+		const source = anchor.textGeometry.bounds;
+		const target = text.bounds;
+		if (anchor.textGeometry.lineCount === text.lineCount && target.width > 0 && target.height > 0) {
+			scaleX = source.width / target.width;
+			scaleY = source.height / target.height;
+			left = source.left - destination.left - (target.left - destination.left) * scaleX;
+			top = source.top - destination.top - (target.top - destination.top) * scaleY;
+		}
+	}
+	return `translate(${left}px, ${top}px) scale(${scaleX}, ${scaleY})`;
+}
 /**
 * The progress segments a capture draws while it checks, as they look now, from
 * left to right whatever their drawing order. A line that has not split yet hands
@@ -87,7 +117,12 @@ var MountedConfirmationSurface = class {
 	receiptShell = null;
 	receiptGhost = null;
 	receiptSegments = [];
+	receiptResize = null;
 	clearReceiptMotion = () => {
+		this.element.querySelector(".seams-receipt-footer--hosted")?.classList.remove("seams-receipt-footer--hosted");
+		this.receiptResize?.element.classList.remove("seams-surface-height-driven");
+		this.receiptResize = null;
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
 		for (const animation of this.receiptMotion) animation.cancel();
 		this.receiptMotion = [];
 		this.receiptShell?.remove();
@@ -147,20 +182,20 @@ var MountedConfirmationSurface = class {
 	}
 	showReceipt(model) {
 		if (this.state.kind !== "mounted" || this.state.model.content.kind !== "transaction") return;
-		const viewChanged = this.receipt?.view !== model.view;
+		const shouldMorph = this.receipt?.view !== model.view || this.receiptMotion.length > 0;
 		const previousShell = this.receiptShell ?? this.element.querySelector(".modal-container-root");
 		const previousBounds = previousShell?.getBoundingClientRect();
-		const anchors = viewChanged ? captureReceiptAnchors(this.element) : [];
-		const leaving = viewChanged ? this.liveCapture() : null;
+		const anchors = shouldMorph ? captureReceiptAnchors(this.element) : [];
+		const leaving = shouldMorph ? this.liveCapture() : null;
 		const previousRadius = previousShell ? getComputedStyle(previousShell).borderRadius : "26px";
-		if (viewChanged) this.clearReceiptMotion();
+		if (shouldMorph) this.clearReceiptMotion();
 		this.receipt = model;
 		this.element.dataset.receiptView = model.view;
 		this.element.dataset.seamsConfirmSurface = "wallet-iframe";
 		this.element.dataset.seamsConfirmVariant = "modal";
 		this.renderSurface();
 		const target = this.element.querySelector(".modal-container-root");
-		if (viewChanged && previousBounds && target && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+		if (shouldMorph && previousBounds && target && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
 			const bounds = target.getBoundingClientRect();
 			const shell = this.element.ownerDocument.createElement("div");
 			shell.className = "seams-receipt-morph-shell";
@@ -168,7 +203,7 @@ var MountedConfirmationSurface = class {
 			this.element.appendChild(shell);
 			this.receiptShell = shell;
 			this.element.setAttribute("data-receipt-morphing", "");
-			this.receiptMotion = [shell.animate([{
+			const morph = shell.animate([{
 				left: `${previousBounds.left}px`,
 				top: `${previousBounds.top}px`,
 				width: `${previousBounds.width}px`,
@@ -184,17 +219,17 @@ var MountedConfirmationSurface = class {
 				duration: RECEIPT_MORPH_DURATION_MS,
 				easing: RECEIPT_MORPH_EASING,
 				fill: "both"
-			})];
+			});
+			this.receiptMotion = [morph];
+			const geometryAnimations = [morph];
 			const handedOver = leaving ? this.handOverCapture(leaving, target) : false;
 			const shared = /* @__PURE__ */ new Set();
 			for (const anchor of anchors) {
 				const element = target.querySelector(anchor.selector);
 				if (!element || element.textContent !== anchor.text) continue;
-				const destination = element.getBoundingClientRect();
 				shared.add(element);
-				const scale = parseFloat(anchor.fontSize) / parseFloat(getComputedStyle(element).fontSize);
-				this.receiptMotion.push(element.animate([{
-					transform: `translate(${anchor.bounds.left - destination.left}px, ${anchor.bounds.top - destination.top}px) scale(${scale})`,
+				const animation = element.animate([{
+					transform: receiptAnchorTransform(anchor, element),
 					transformOrigin: "top left"
 				}, {
 					transform: "translate(0, 0) scale(1)",
@@ -202,14 +237,17 @@ var MountedConfirmationSurface = class {
 				}], {
 					duration: RECEIPT_MORPH_DURATION_MS,
 					easing: RECEIPT_MORPH_EASING
-				}));
+				});
+				this.receiptMotion.push(animation);
+				geometryAnimations.push(animation);
 			}
 			const details = target.querySelectorAll(".seams-transaction-receipt > :not(.seams-receipt-heading), .seams-receipt-heading > .seams-receipt-symbol, .seams-receipt-heading h2, .seams-receipt-heading p, .seams-transaction-toast > :not(.seams-transaction-toast-text, .seams-toast-progress), .seams-transaction-toast-text > *");
 			let order = 0;
 			for (const detail of details) {
 				if (shared.has(detail)) continue;
 				const toolbar = leaving !== null && detail.matches(".seams-review-toolbar");
-				this.receiptMotion.push(detail.animate(toolbar ? [{ opacity: 0 }, { opacity: 1 }] : [{
+				const stationary = toolbar || detail.matches(".seams-receipt-footer");
+				this.receiptMotion.push(detail.animate(stationary ? [{ opacity: 0 }, { opacity: 1 }] : [{
 					opacity: 0,
 					transform: "translateY(8px)"
 				}, {
@@ -228,12 +266,83 @@ var MountedConfirmationSurface = class {
 				}));
 				if (!toolbar) order += 1;
 			}
+			this.resizeReceipt({
+				element: target,
+				animations: geometryAnimations,
+				fromHeight: previousBounds.height,
+				toHeight: bounds.height
+			});
 			const motion = this.receiptMotion;
 			Promise.all(motion.map((animation) => animation.finished)).then(() => {
 				if (this.receiptMotion === motion) this.clearReceiptMotion();
 			}, ignoreCancelledMotion);
 		}
 	}
+	resizeReceipt(resize) {
+		if (Math.abs(resize.toHeight - resize.fromHeight) < 1) return;
+		this.receiptResize = resize;
+		for (const animation of resize.animations) {
+			animation.pause();
+			animation.effect?.updateTiming({ easing: "linear" });
+		}
+		resize.element.classList.add("seams-surface-height-driven");
+		this.setReceiptHeight(resize, resize.fromHeight);
+		if (announceSurfaceResize(resize.element, {
+			reason: "receipt-transition",
+			fromCssPx: resize.fromHeight,
+			toCssPx: resize.toHeight,
+			setHeightCssPx: this.setReceiptHeight.bind(this, resize),
+			finish: this.finishReceiptResize.bind(this, resize)
+		})) {
+			this.fitReceiptToViewport(resize);
+			return;
+		}
+		this.receiptResize = null;
+		resize.element.classList.remove("seams-surface-height-driven");
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
+		for (const animation of resize.animations) {
+			animation.effect?.updateTiming({ easing: RECEIPT_MORPH_EASING });
+			animation.play();
+		}
+	}
+	fitReceiptToViewport(resize) {
+		const footer = resize.element.querySelector(".seams-receipt-footer");
+		for (const animation of resize.animations) {
+			const effect = animation.effect;
+			if (!(effect instanceof KeyframeEffect)) continue;
+			if (effect.target === this.receiptShell) {
+				this.receiptShell?.classList.add("seams-receipt-morph-shell--hosted");
+				const frames = effect.getKeyframes();
+				for (const frame of frames) {
+					delete frame.height;
+					delete frame.width;
+				}
+				effect.setKeyframes(frames);
+			} else if (footer && effect.target === footer) {
+				const frames = effect.getKeyframes();
+				for (const frame of frames) delete frame.transform;
+				effect.setKeyframes(frames);
+			}
+		}
+		footer?.classList.add("seams-receipt-footer--hosted");
+	}
+	setReceiptHeight(resize, height) {
+		if (this.receiptResize !== resize) return;
+		this.styles.setDynamicDeclarations(`${this.element.id}-receipt-resize`, `#${resize.element.id}`, {
+			[CONFIRM_SURFACE_HEIGHT_DRIVEN_VAR]: `${height}px`,
+			"--seams-receipt-target-height": `${resize.toHeight}px`
+		});
+		const progress = (height - resize.fromHeight) / (resize.toHeight - resize.fromHeight);
+		for (const animation of resize.animations) animation.currentTime = Math.max(0, Math.min(1, progress)) * RECEIPT_MORPH_DURATION_MS;
+	}
+	finishReceiptResize(resize) {
+		if (this.receiptResize !== resize) return;
+		this.receiptResize = null;
+		resize.element.classList.remove("seams-surface-height-driven");
+		resize.element.querySelector(".seams-receipt-footer--hosted")?.classList.remove("seams-receipt-footer--hosted");
+		this.styles.deleteDynamicRule(`${this.element.id}-receipt-resize`);
+		for (const animation of resize.animations) animation.finish();
+	}
 	/** The auth method capture still on screen, measured before the receipt replaces it. */
 	liveCapture() {
 		if (this.state.kind !== "mounted" || this.state.model.content.kind !== "transaction") return null;

package/dist/esm/core/ui/messages.js

@@ -37,6 +37,17 @@ const walletMessages = [
 	["Enter a recovery code to recover your wallet.", "リカバリーコードを入力してウォレットを復元してください。"],
 	["Create new passkey", "新しいパスキーを作成"],
 	["Continue with Google", "Google で続ける"],
+	["Connect wallet", "ウォレットを接続"],
+	["Back to wallet selection", "ウォレットの選択に戻る"],
+	["Choose how you’d like to get started.", "開始方法を選択してください。"],
+	["Create a Seams Wallet", "Seams ウォレットを作成"],
+	["Get started with a passkey", "パスキーで開始"],
+	["Use your existing wallet", "既存のウォレットを使用"],
+	["Connect Meteor Wallet", "Meteor Wallet を接続"],
+	["Connect HOT Wallet", "HOT Wallet を接続"],
+	["Connect Intear Wallet", "Intear Wallet を接続"],
+	["Mainnet only", "メインネットのみ"],
+	["Complete the request in your wallet.", "ウォレットでリクエストを完了してください。"],
 	["Verify email code", "メールのコードを確認"],
 	["Unlock with Google", "Google でロック解除"],
 	["Unlock with new passkey", "新しいパスキーでロック解除"],
@@ -232,6 +243,7 @@ const walletMessages = [
 	["Create a wallet", "ウォレットを作成"],
 	["Create wallet with passkey", "パスキーでウォレットを作成"],
 	["Unlock with passkey", "パスキーでロック解除"],
+	["Unlock with email code", "メールのコードでロック解除"],
 	["Saved wallets", "保存済みウォレット"],
 	["Generate another name", "別の名前を生成"],
 	["Other options", "その他の方法"],

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/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;
+  }
+}