@seams/wallet 0.22.0 → 0.24.0

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

@@ -1,6 +1,7 @@
 import { buildHostedAuthMenuOpenRequest, hostedAuthMenuExternalAuthRequestIdFromBoundary, hostedAuthMenuSessionIdFromBoundary } from "../../../SeamsWeb/walletIframe/shared/messages.js";
 import { useSeams } from "../../context/index.js";
 import { SeamsAuthMenuMock } from "./SeamsAuthMenuMock.js";
+import { endHostedAuthMenuAnchor, resetHostedAuthMenuAnchor } from "../../../SeamsWeb/walletIframe/client/authMenuAnchor.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react/components/HostedSeamsAuthMenu/shell.tsx
@@ -129,7 +130,7 @@ var HostedAuthMenuSessionController = class {
 	start() {
 		if (this.isActive) return;
 		this.isActive = true;
-		this.anchorElement.style.setProperty("--seams-auth-menu-placeholder-opacity", "1");
+		resetHostedAuthMenuAnchor(this.anchorElement);
 		this.unsubscribeExternalAuthRequest = this.seams.authMenu.onExternalAuthRequest(this.handleExternalAuthRequestBound);
 		this.open();
 	}
@@ -218,7 +219,7 @@ var HostedAuthMenuSessionController = class {
 	emitOutcome(outcome) {
 		if (this.hasTerminalOutcome) return;
 		this.hasTerminalOutcome = true;
-		this.anchorElement.style.setProperty("--seams-auth-menu-placeholder-opacity", "0");
+		endHostedAuthMenuAnchor(this.anchorElement);
 		try {
 			this.onOutcome.current(outcome);
 		} catch {}
@@ -246,7 +247,8 @@ function terminalGateFor(seams) {
 	if (existing) return existing;
 	const gate = {
 		completed: false,
-		observedLoggedIn: false
+		observedLoggedIn: false,
+		logoutGeneration: 0
 	};
 	hostedAuthMenuTerminalGates.set(seams, gate);
 	return gate;
@@ -261,6 +263,7 @@ function syncTerminalGate(gate, isLoggedIn) {
 	if (!gate.observedLoggedIn) return;
 	gate.completed = false;
 	gate.observedLoggedIn = false;
+	gate.logoutGeneration += 1;
 }
 function forwardHostedAuthMenuOutcome(terminalGateRef, onOutcomeRef, outcome) {
 	if (isTerminalHostedAuthMenuSuccess(outcome) && terminalGateRef.current) terminalGateRef.current.completed = true;
@@ -296,6 +299,7 @@ const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput =
 	terminalGateRef.current = terminalGate;
 	forwardedOutcomeRef.current = forwardHostedAuthMenuOutcome.bind(null, terminalGateRef, onOutcomeRef);
 	const effectConfigKey = hostedAuthMenuEffectConfigKey(effectConfigRef.current);
+	const logoutGeneration = terminalGate?.logoutGeneration ?? 0;
 	React.useEffect(() => {
 		const anchorElement = anchorRef.current;
 		if (!seams || !anchorElement || typeof window === "undefined") return void 0;
@@ -317,7 +321,7 @@ const HostedSeamsAuthMenu = ({ initialMode = "login", registrationAccountInput =
 		return session.cleanup.bind(session);
 	}, [
 		seams,
-		isLoggedIn,
+		logoutGeneration,
 		effectConfigKey
 	]);
 	return /* @__PURE__ */ jsx("span", {

package/dist/esm/react/context/useLoginStateRefresher.js

@@ -1,7 +1,7 @@
 import { toWalletId } from "../../core/signingEngine/interfaces/ecdsaChainTarget.js";
 import { isWalletSessionReadyForUi } from "./walletSessionReadiness.js";
 import { buildReactLoggedInLoginStateFromSession, buildReactLoggedOutLoginState } from "./reactLoginStateBuilders.js";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 //#region src/react/context/useLoginStateRefresher.ts
 function syncAccountNameFromWalletId(setAccountName, walletId) {
 	const value = String(walletId || "").trim();
@@ -18,7 +18,10 @@ async function resolveExactReactLoginWalletId(seams, requestedWalletId) {
 }
 function useLoginStateRefresher(args) {
 	const { seams, setLoginState, setAccountName } = args;
+	const refreshGeneration = useRef(0);
 	const refreshSession = useCallback(async (walletId) => {
+		const generation = ++refreshGeneration.current;
+		const selectedWallet = seams.preferences.getCurrentWalletId();
 		try {
 			let exactWalletId;
 			if (seams.configs.wallet.mode === "iframe") {
@@ -26,6 +29,7 @@ function useLoginStateRefresher(args) {
 				if (requestedWalletId) exactWalletId = requestedWalletId;
 				else {
 					const state = await seams.getWalletIframeExactSessionState();
+					if (generation !== refreshGeneration.current || selectedWallet !== seams.preferences.getCurrentWalletId()) return;
 					switch (state.kind) {
 						case "active_session":
 						case "expired_session":
@@ -39,12 +43,16 @@ function useLoginStateRefresher(args) {
 						default: return;
 					}
 				}
-			} else exactWalletId = await resolveExactReactLoginWalletId(seams, walletId);
+			} else {
+				exactWalletId = await resolveExactReactLoginWalletId(seams, walletId);
+				if (generation !== refreshGeneration.current || selectedWallet !== seams.preferences.getCurrentWalletId()) return;
+			}
 			if (!exactWalletId) {
 				setLoginState(buildReactLoggedOutLoginState());
 				return;
 			}
 			const session = await seams.auth.getSession(exactWalletId);
+			if (generation !== refreshGeneration.current || selectedWallet !== seams.preferences.getCurrentWalletId()) return;
 			if (session.authentication.kind === "authenticated" && session.appIdentity.kind !== "resolved") return;
 			if (!isWalletSessionReadyForUi({ session })) {
 				setLoginState(buildReactLoggedOutLoginState());

package/dist/esm/react/externalNear.css

@@ -0,0 +1,90 @@
+.seams-near-picker {
+  color: var(--seams-wallet-picker-text, #f5f5f5);
+  background: var(--seams-wallet-picker-background, #202020);
+  padding: clamp(20px, 4vw, 40px);
+  border-radius: 28px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.seams-near-picker h2 {
+  font-size: clamp(22px, 4vw, 32px);
+  font-weight: 500;
+  margin: 0;
+}
+.seams-near-network {
+  opacity: 0.7;
+}
+.seams-near-wallets {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.seams-near-wallets button {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  color: inherit;
+  background: var(--seams-wallet-picker-card, #262626);
+  border: 1px solid var(--seams-wallet-picker-border, #383838);
+  border-radius: 24px;
+  padding: 24px;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  min-width: 0;
+}
+.seams-near-wallets strong {
+  font-size: 20px;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.seams-near-wallets small {
+  font-size: 12px;
+  opacity: 0.7;
+  overflow-wrap: anywhere;
+}
+.seams-near-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #181818;
+  font-size: 24px;
+}
+.seams-near-meteor {
+  background: #fff;
+  color: #4824e9;
+  font-weight: 700;
+}
+.seams-near-intear {
+  background: #fff;
+  color: #1685ff;
+  font-weight: 700;
+}
+.seams-near-wallets button:hover:enabled {
+  background: var(--seams-wallet-picker-hover, #303030);
+}
+.seams-near-picker button:focus-visible {
+  outline: 3px solid #8faaff;
+  outline-offset: 3px;
+}
+.seams-near-picker button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.seams-near-disconnect {
+  margin-top: 20px;
+  padding: 10px 16px;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid #666;
+  border-radius: 10px;
+}
+@media (max-width: 380px) {
+  .seams-near-wallets {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/esm/react/externalNear.js

@@ -0,0 +1,104 @@
+import { nearWalletName } from "../externalNear/wallets.js";
+import { Component, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./externalNear.css";
+//#region src/react/externalNear.tsx
+function useExternalNear(controller) {
+	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+}
+var ExternalNearWalletPicker = class extends Component {
+	state = {
+		snapshot: this.props.controller.getSnapshot(),
+		message: ""
+	};
+	unsubscribe = null;
+	componentDidMount() {
+		this.unsubscribe = this.props.controller.subscribe(this.updateSnapshot);
+	}
+	componentWillUnmount() {
+		this.unsubscribe?.();
+		this.props.controller.disconnect();
+	}
+	updateSnapshot = () => {
+		this.setState({ snapshot: this.props.controller.getSnapshot() });
+	};
+	connect = async (wallet) => {
+		const result = await this.props.controller.connect(wallet);
+		this.setState({ message: result.ok ? `Connected to ${nearWalletName(wallet)}.` : result.message });
+	};
+	disconnect = () => {
+		this.props.controller.disconnect();
+		this.setState({ message: "Disconnected from Seams. Manage site permissions in your wallet." });
+	};
+	render() {
+		const { connection, busy, wallets } = this.state.snapshot;
+		const choices = [];
+		for (const wallet of wallets) choices.push(/* @__PURE__ */ jsx(NearWalletButton, {
+			wallet,
+			network: this.props.controller.network,
+			busy,
+			onConnect: this.connect
+		}, wallet));
+		return /* @__PURE__ */ jsxs("section", {
+			"aria-label": "Choose your NEAR wallet",
+			className: "seams-near-picker",
+			children: [
+				/* @__PURE__ */ jsx("h2", { children: "Choose your NEAR wallet" }),
+				/* @__PURE__ */ jsxs("p", {
+					className: "seams-near-network",
+					children: ["NEAR ", this.props.controller.network]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "seams-near-wallets",
+					children: choices
+				}),
+				wallets.length === 0 && /* @__PURE__ */ jsx("p", { children: "No NEAR wallets are enabled." }),
+				connection.kind === "connected" && /* @__PURE__ */ jsxs("p", { children: [
+					nearWalletName(connection.wallet),
+					" · ",
+					connection.accountId
+				] }),
+				/* @__PURE__ */ jsx("button", {
+					className: "seams-near-disconnect",
+					type: "button",
+					disabled: connection.kind === "disconnected",
+					onClick: this.disconnect,
+					children: "Disconnect"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					role: "status",
+					children: busy ? "Complete the request in your wallet." : this.state.message
+				})
+			]
+		});
+	}
+};
+const walletIcons = {
+	meteor: "M",
+	hot: "🔥",
+	intear: "I"
+};
+function NearWalletButton({ wallet, network, busy, onConnect }) {
+	const unavailable = wallet === "hot" && network !== "mainnet";
+	let description = "Browser extension";
+	if (wallet === "intear") description = "Opens wallet.intear.tech";
+	if (unavailable) description = "Mainnet only";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: busy || unavailable,
+		onClick: onConnect.bind(null, wallet),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `seams-near-icon seams-near-${wallet}`,
+				"aria-hidden": "true",
+				children: walletIcons[wallet]
+			}),
+			/* @__PURE__ */ jsx("strong", { children: nearWalletName(wallet) }),
+			/* @__PURE__ */ jsx("small", { children: description })
+		]
+	});
+}
+//#endregion
+export { ExternalNearWalletPicker, useExternalNear };
+
+//# sourceMappingURL=externalNear.js.map

package/dist/esm/react/index.js

@@ -8,9 +8,9 @@ import { ActionType, TxExecutionStatus } from "../shared-ts/src/near/actions.js"
 import { AmountError, parseEther, parseNear, parseUnits, yoctoNear } from "../core/types/amounts.js";
 import { addKey, createAccount, deleteAccount, deleteKey, deployContract, functionCall, stake, transfer } from "../core/types/actionBuilders.js";
 import { logWalletEvents } from "../core/types/eventLogging.js";
+import { TransactionReviewError } from "../SeamsWeb/walletIframe/shared/transactionReview.js";
 import { useNearClient } from "./hooks/useNearClient.js";
 import { useAccountInput } from "./hooks/useAccountInput.js";
-import { TransactionReviewError } from "../SeamsWeb/walletIframe/shared/transactionReview.js";
 import { TransactionReviewHost } from "./transactionReview/TransactionReviewHost.js";
 import { SeamsContextProvider, useSeams } from "./context/index.js";
 import { ExternalEvmWalletPicker, useExternalEvm } from "./externalEvm.js";
@@ -31,7 +31,5 @@ import HostedSeamsAuthMenu from "./components/HostedSeamsAuthMenu/shell.js";
 import { AccountMenuButtonMock } from "./components/AccountMenuButton/AccountMenuButtonMock.js";
 import { AccountMenuButton, ProfileSettingsButton, WalletSettingsPage } from "./components/AccountMenuButton/index.js";
 import { ShowQRCode } from "./components/ShowQRCode.js";
-import { VoiceAssistantCard } from "./components/VoiceAssistantCard.js";
 import QRCodeIcon from "./components/QRCodeIcon.js";
-import { VoiceBeam } from "voice-glow";
-export { AccountMenuButton, AccountMenuButtonMock, AccountSyncEventPhase, ActionType, AmountError, DARK_TOKENS, ExternalEvmController, ExternalEvmWalletPicker, HostedSeamsAuthMenu, KeyExportEventPhase, LIGHT_TOKENS, LinkDeviceEventPhase, MoonIcon, PASSKEY_MANAGER_DEFAULT_CONFIGS, PROFILE_MENU_ITEM_IDS, ProfileSettingsButton, QRCodeIcon, QRCodeScanner, QRScanMode, RegistrationEventPhase, SHAPE_PRESETS, SHAPE_ROUNDED, SHAPE_SQUARE, SeamsAuthMenuMock, SeamsContextProvider, SeamsWeb, SeamsWebProvider, ShowQRCode, SigningEventPhase, SunIcon, Theme, TouchIcon, TransactionReviewError, TransactionReviewHost, TxExecutionStatus, UnlockEventPhase, VoiceAssistantCard, VoiceBeam, WALLET_FLOW_EVENT_MESSAGES, WALLET_FLOW_EVENT_STEPS, WALLET_FLOW_EVENT_VERSION, WalletSettingsPage, addKey, configuredThresholdEcdsaChainTargets, createAccount, createAccountSyncFlowEvent, createKeyExportFlowEvent, createLinkDeviceFlowEvent, createRegistrationFlowEvent, createSigningFlowEvent, createUnlockFlowEvent, createWalletFlowEvent, defineSeamsConfig, deleteAccount, deleteKey, deployContract, functionCall, isWalletFlowEvent, logWalletEvents, nearAccountRefFromAccountId, parseEther, parseNear, parseUnits, seamsTestnetConfig, stake, thresholdEcdsaChainTargetFromChainFamily, thresholdEcdsaChainTargetFromConfig, thresholdEcdsaChainTargetFromConfiguredRequest, thresholdEcdsaChainTargetFromRequest, thresholdEcdsaChainTargetKey, thresholdEcdsaChainTargetsEqual, toWalletId, transfer, useAccountInput, useDeviceLinking, useExternalEvm, useNearClient, useQRCamera, useSeams, useTheme, useWalletAuth, useWalletDevices, walletIdFromWalletProfile, walletSessionRefFromSession, yoctoNear };
+export { AccountMenuButton, AccountMenuButtonMock, AccountSyncEventPhase, ActionType, AmountError, DARK_TOKENS, ExternalEvmController, ExternalEvmWalletPicker, HostedSeamsAuthMenu, KeyExportEventPhase, LIGHT_TOKENS, LinkDeviceEventPhase, MoonIcon, PASSKEY_MANAGER_DEFAULT_CONFIGS, PROFILE_MENU_ITEM_IDS, ProfileSettingsButton, QRCodeIcon, QRCodeScanner, QRScanMode, RegistrationEventPhase, SHAPE_PRESETS, SHAPE_ROUNDED, SHAPE_SQUARE, SeamsAuthMenuMock, SeamsContextProvider, SeamsWeb, SeamsWebProvider, ShowQRCode, SigningEventPhase, SunIcon, Theme, TouchIcon, TransactionReviewError, TransactionReviewHost, TxExecutionStatus, UnlockEventPhase, WALLET_FLOW_EVENT_MESSAGES, WALLET_FLOW_EVENT_STEPS, WALLET_FLOW_EVENT_VERSION, WalletSettingsPage, addKey, configuredThresholdEcdsaChainTargets, createAccount, createAccountSyncFlowEvent, createKeyExportFlowEvent, createLinkDeviceFlowEvent, createRegistrationFlowEvent, createSigningFlowEvent, createUnlockFlowEvent, createWalletFlowEvent, defineSeamsConfig, deleteAccount, deleteKey, deployContract, functionCall, isWalletFlowEvent, logWalletEvents, nearAccountRefFromAccountId, parseEther, parseNear, parseUnits, seamsTestnetConfig, stake, thresholdEcdsaChainTargetFromChainFamily, thresholdEcdsaChainTargetFromConfig, thresholdEcdsaChainTargetFromConfiguredRequest, thresholdEcdsaChainTargetFromRequest, thresholdEcdsaChainTargetKey, thresholdEcdsaChainTargetsEqual, toWalletId, transfer, useAccountInput, useDeviceLinking, useExternalEvm, useNearClient, useQRCamera, useSeams, useTheme, useWalletAuth, useWalletDevices, walletIdFromWalletProfile, walletSessionRefFromSession, yoctoNear };