@seams/wallet 0.29.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seams/wallet",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "type": "module",
   "description": "Seams web and runtime TypeScript SDK for NEAR and EVM-family wallets",
   "main": "./dist/esm/index.js",
@@ -179,10 +179,10 @@
   },
   "homepage": "https://github.com/seams-tech/seams-wallet#readme",
   "peerDependencies": {
-    "jsqr": ">=1.4.0",
-    "qrcode": ">=1.3.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "jsqr": "1.4.0",
+    "qrcode": "1.5.4",
+    "react": "19.1.1",
+    "react-dom": "19.1.1"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -200,21 +200,21 @@
   },
   "dependencies": {
     "@levischuck/tiny-cbor": "0.2.11",
-    "@near-js/types": "^2.4.0",
+    "@near-js/types": "2.4.0",
     "borsh": "1.0.0",
-    "bs58": "^6.0.0",
-    "idb": "^8.0.3",
+    "bs58": "6.0.0",
+    "idb": "8.0.3",
     "preact": "10.29.8",
-    "viem": "^2.38.6"
+    "viem": "2.46.0"
   },
   "devDependencies": {
-    "@simplewebauthn/server": "^13.2.2",
-    "@types/node": "^20.19.9",
-    "@types/qrcode": "^1.5.5",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "rolldown": "^1.0.0-beta.27"
+    "@simplewebauthn/server": "13.2.2",
+    "@types/node": "20.19.13",
+    "@types/qrcode": "1.5.5",
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "rolldown": "1.0.0-rc.9"
   }
 }

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

@@ -1,182 +0,0 @@
-: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;
-  }
-}

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

@@ -1,315 +0,0 @@
-import { nearWalletName } from "../../../externalNear/wallets.js";
-import { walletDisplayText } from "../../../core/ui/messages.js";
-import { SEAMS_STANDARD_WORDMARK_PATH } from "../../../core/signingEngine/uiConfirm/ui/seamsWordmarkPaths.js";
-import { WalletText, useWalletLocale } from "../../context/WalletLocale.js";
-import { useSeams } from "../../context/index.js";
-import { Theme, useTheme } from "../theme/ThemeProvider.js";
-import { HoverArrowIcon } from "../AccountMenuButton/icons/HoverArrowIcon.js";
-import HostedSeamsAuthMenu from "./shell.js";
-import { ExternalNearWalletIcon } from "../ExternalNearWalletIcon.js";
-import { Component, createRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./WalletConnectorMenu.css";
-//#region src/react/components/HostedSeamsAuthMenu/WalletConnectorMenu.tsx
-/** Default wallet selection UI. Authentication stays on the isolated wallet origin. */
-function WalletConnectorMenu(props) {
-	const { seams } = useSeams();
-	const { theme, tokens } = useTheme();
-	const locale = useWalletLocale();
-	return /* @__PURE__ */ jsx(Theme, {
-		tag: "div",
-		theme,
-		tokens: { [theme]: tokens },
-		children: /* @__PURE__ */ jsx(ConnectorPanel, {
-			...props,
-			locale,
-			prepareAuthMenu: seams.authMenu.prepare
-		})
-	});
-}
-var ConnectorPanel = class extends Component {
-	state = { view: {
-		kind: "choices",
-		error: null
-	} };
-	root = createRef();
-	content = createRef();
-	heading = createRef();
-	observer = null;
-	unsubscribe = null;
-	pending = null;
-	componentDidMount() {
-		this.subscribe();
-		this.observer = new ResizeObserver(this.measure);
-		if (this.content.current) this.observer.observe(this.content.current);
-		this.measure();
-	}
-	getSnapshotBeforeUpdate() {
-		return this.root.current?.offsetHeight ?? 0;
-	}
-	componentDidUpdate(previous, previousState, previousHeight) {
-		if (previous.externalNear?.controller !== this.props.externalNear?.controller) {
-			this.unsubscribe?.();
-			this.cancelPending();
-			this.subscribe();
-		}
-		if (previousState.view.kind === "auth" && this.state.view.kind === "choices") {
-			const root = this.root.current;
-			if (root) {
-				root.style.height = `${previousHeight}px`;
-				root.getBoundingClientRect();
-			}
-			this.heading.current?.focus({ preventScroll: true });
-		}
-		this.measure();
-	}
-	componentWillUnmount() {
-		this.observer?.disconnect();
-		this.unsubscribe?.();
-		this.cancelPending();
-	}
-	subscribe() {
-		this.unsubscribe = this.props.externalNear?.controller.subscribe(this.refreshWallets) ?? null;
-	}
-	refreshWallets = () => {
-		if (this.pending && !this.pending.controller.getSnapshot().wallets.includes(this.pending.wallet)) this.cancelPending();
-		this.forceUpdate();
-	};
-	cancelPending() {
-		const pending = this.pending;
-		this.pending = null;
-		pending?.controller.disconnect();
-	}
-	measure = () => {
-		const root = this.root.current;
-		const content = this.content.current;
-		if (!root || !content) return;
-		root.style.height = this.state.view.kind === "auth" ? "auto" : `${content.offsetHeight}px`;
-	};
-	prepare = () => {
-		this.props.prepareAuthMenu();
-	};
-	openAuthMenu = () => {
-		const root = this.root.current;
-		if (this.pending || !root || this.state.view.kind !== "choices") return;
-		this.setState({ view: {
-			kind: "auth",
-			initialHeightCssPx: root.offsetHeight
-		} });
-	};
-	handleOutcome = (outcome) => {
-		switch (outcome.kind) {
-			case "cancelled":
-				this.setState({ view: {
-					kind: "choices",
-					error: null
-				} });
-				this.props.onClose?.();
-				break;
-			case "failed":
-				this.setState({ view: {
-					kind: "choices",
-					error: outcome.message
-				} });
-				break;
-			case "authenticated":
-			case "registered":
-			case "account_synced": break;
-			default: return assertNever(outcome);
-		}
-		this.props.onOutcome(outcome);
-	};
-	close = () => {
-		this.cancelPending();
-		if (this.state.view.kind === "auth") this.setState({ view: {
-			kind: "choices",
-			error: null
-		} });
-		this.props.onClose?.();
-	};
-	back = () => {
-		this.setState({ view: {
-			kind: "choices",
-			error: null
-		} });
-	};
-	connect = async (wallet) => {
-		const external = this.props.externalNear;
-		if (!external || this.pending) return;
-		const pending = {
-			controller: external.controller,
-			wallet
-		};
-		this.pending = pending;
-		this.setState({ view: {
-			kind: "choices",
-			error: null
-		} });
-		const result = await external.controller.connect(wallet);
-		if (this.pending !== pending) return;
-		this.pending = null;
-		if (!result.ok) {
-			this.setState({ view: {
-				kind: "choices",
-				error: result.message
-			} });
-			return;
-		}
-		this.props.externalNear?.onConnected(result.value);
-	};
-	renderChoices() {
-		const { options, externalNear } = this.props;
-		const snapshot = externalNear?.controller.getSnapshot();
-		const busy = this.state.view.kind === "auth" || (snapshot?.busy ?? false);
-		const seamsOption = options?.seams;
-		const rows = [];
-		for (const wallet of snapshot?.wallets ?? []) {
-			const appearance = options?.[wallet];
-			const unavailable = wallet === "hot" && externalNear?.controller.network !== "mainnet";
-			rows.push(/* @__PURE__ */ jsx(ConnectorOption, {
-				label: appearance?.label ?? `Connect ${nearWalletName(wallet)}`,
-				description: unavailable ? "Mainnet only" : appearance?.description ?? "Use your existing wallet",
-				icon: appearance?.icon ?? /* @__PURE__ */ jsx(ExternalNearWalletIcon, { wallet }),
-				disabled: busy || unavailable,
-				external: true,
-				onClick: this.connect.bind(this, wallet)
-			}, wallet));
-		}
-		return /* @__PURE__ */ jsxs("div", {
-			className: "seams-wallet-connector-choices",
-			children: [
-				/* @__PURE__ */ jsx("h2", {
-					ref: this.heading,
-					tabIndex: -1,
-					children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.title ?? "Connect wallet" })
-				}),
-				/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(WalletText, { copy: this.props.description ?? "Choose how you’d like to get started." }) }),
-				/* @__PURE__ */ jsxs("div", {
-					className: "seams-wallet-connector-options",
-					children: [/* @__PURE__ */ jsx(ConnectorOption, {
-						label: seamsOption?.label ?? "Create a Seams Wallet",
-						description: seamsOption?.description ?? "Get started with a passkey",
-						icon: seamsOption?.icon ?? /* @__PURE__ */ jsx(SeamsConnectorIcon, {}),
-						disabled: busy,
-						external: false,
-						onClick: this.openAuthMenu,
-						onPrepare: this.prepare
-					}), rows]
-				}),
-				snapshot?.busy && /* @__PURE__ */ jsx("p", {
-					role: "status",
-					children: /* @__PURE__ */ jsx(WalletText, { message: "Complete the request in your wallet." })
-				}),
-				this.state.view.kind === "choices" && this.state.view.error && /* @__PURE__ */ jsx("p", {
-					className: "seams-wallet-connector-error",
-					role: "alert",
-					children: this.state.view.error
-				})
-			]
-		});
-	}
-	render() {
-		let content;
-		switch (this.state.view.kind) {
-			case "choices":
-				content = this.renderChoices();
-				break;
-			case "auth":
-				content = /* @__PURE__ */ jsx(HostedSeamsAuthMenu, {
-					...this.props.authMenu,
-					initialMode: this.props.authMenu?.initialMode ?? "register",
-					initialHeightCssPx: this.state.view.initialHeightCssPx,
-					placeholder: this.renderChoices(),
-					onOutcome: this.handleOutcome
-				});
-				break;
-			default: return assertNever(this.state.view);
-		}
-		return /* @__PURE__ */ jsxs("div", {
-			ref: this.root,
-			className: `seams-wallet-connector ${this.props.className ?? ""}`,
-			style: this.props.style,
-			"data-connector-view": this.state.view.kind,
-			children: [
-				this.state.view.kind === "auth" && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "seams-wallet-connector-back",
-					"aria-label": walletDisplayText(this.props.locale, this.props.backLabel ?? "Back to wallet selection"),
-					title: walletDisplayText(this.props.locale, this.props.backLabel ?? "Back to wallet selection"),
-					onClick: this.back,
-					children: /* @__PURE__ */ jsx(HoverArrowIcon, {
-						size: 16,
-						direction: "left"
-					})
-				}),
-				this.props.onClose && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "seams-wallet-connector-close",
-					"aria-label": walletDisplayText(this.props.locale, this.props.closeLabel ?? "Close"),
-					onClick: this.close,
-					children: /* @__PURE__ */ jsx(ConnectorCloseIcon, {})
-				}),
-				/* @__PURE__ */ jsx("div", {
-					ref: this.content,
-					className: "seams-wallet-connector-content",
-					children: content
-				})
-			]
-		});
-	}
-};
-function ConnectorOption(props) {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		className: "seams-wallet-connector-option",
-		disabled: props.disabled,
-		onClick: props.onClick,
-		onPointerEnter: props.onPrepare,
-		onFocus: props.onPrepare,
-		onTouchStart: props.onPrepare,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "seams-wallet-connector-icon",
-				"aria-hidden": "true",
-				children: props.icon
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				className: "seams-wallet-connector-label",
-				children: [/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(WalletText, { copy: props.label }) }), /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(WalletText, { copy: props.description }) })]
-			}),
-			/* @__PURE__ */ jsx(HoverArrowIcon, {
-				size: 16,
-				direction: props.external ? "up-right" : "right"
-			})
-		]
-	});
-}
-function ConnectorCloseIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: "20",
-		height: "20",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.5",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M6 18 18 6" })
-	});
-}
-function SeamsConnectorIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: "36",
-		height: "36",
-		viewBox: "1130 0 300 282",
-		"aria-hidden": "true",
-		fill: "currentColor",
-		children: /* @__PURE__ */ jsx("path", { d: SEAMS_STANDARD_WORDMARK_PATH })
-	});
-}
-function assertNever(value) {
-	throw new Error(`Unexpected wallet connector state: ${String(value)}`);
-}
-//#endregion
-export { WalletConnectorMenu };
-
-//# sourceMappingURL=WalletConnectorMenu.js.map