@seams/wallet 0.24.0 → 0.27.0

package/dist/esm/react/components/theme/Theme.css

@@ -0,0 +1,67 @@
+/* Reset controls only inside SDK-owned surfaces. Theme can also wrap app content.
+   Native control selectors add their element type above this baseline. */
+[data-seams-root].seams-theme-provider {
+  display: revert;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(.seams-profile-button-morphable, .seams-settings-page, .qr-code-container) {
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(
+    .seams-profile-button-morphable,
+    .seams-settings-page,
+    .seams-linked-devices-modal-content,
+    .qr-scanner-modal,
+    .qr-code-container,
+    .seams-link-device-failure,
+    .seams-wallet-picker
+  )
+  :where(button, input, select, textarea, a) {
+  box-sizing: border-box;
+  appearance: auto;
+  display: inline-block;
+  width: auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-decoration: none;
+  white-space: normal;
+  vertical-align: middle;
+  box-shadow: none;
+}
+
+[data-seams-root].seams-theme-provider
+  :is(
+    .seams-profile-button-morphable,
+    .seams-settings-page,
+    .seams-linked-devices-modal-content,
+    .qr-scanner-modal,
+    .qr-code-container,
+    .seams-link-device-failure,
+    .seams-wallet-picker
+  )
+  :where(button) {
+  appearance: none;
+}

package/dist/esm/react/components/theme/ThemeProvider.js

@@ -3,6 +3,7 @@ import { DARK_TOKENS, LIGHT_TOKENS } from "./design-tokens.js";
 import { createCSSVariables, mergeTokens } from "./utils.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
+import "./Theme.css";
 //#region src/react/components/theme/ThemeProvider.tsx
 const ThemeContext = React.createContext(null);
 const useThemeContext = () => {
@@ -36,16 +37,15 @@ function useTheme() {
 const ThemeScope = ({ tag = "main", className, style, dataAttr = "data-seams-theme", children }) => {
 	const { theme, vars } = useThemeContext();
 	const locale = useWalletLocale();
-	const Comp = tag;
-	const attrs = { [dataAttr]: theme };
-	return /* @__PURE__ */ jsx(Comp, {
+	return /* @__PURE__ */ jsx(tag, {
+		[dataAttr]: theme,
+		"data-seams-root": "",
 		lang: locale,
-		className,
+		className: `seams-theme-provider${className ? ` ${className}` : ""}`,
 		style: {
 			...vars,
 			...style
 		},
-		...attrs,
 		children
 	});
 };
@@ -84,7 +84,7 @@ const ThemeProvider = ({ children, theme, tokens, prefix = "--seams", setTheme }
 		children
 	});
 };
-const Theme = ({ children, tag = "main", className = "seams-theme-provider", style, dataAttr, theme, tokens, prefix, setTheme }) => {
+const Theme = ({ children, tag = "main", className, style, dataAttr, theme, tokens, prefix, setTheme }) => {
 	return /* @__PURE__ */ jsx(ThemeProvider, {
 		theme,
 		tokens,

package/dist/esm/react/externalEvm.js

@@ -1,5 +1,7 @@
+import { Theme, useTheme } from "./components/theme/ThemeProvider.js";
 import { Component, useEffect, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./externalWalletPicker.css";
 //#region src/react/externalEvm.tsx
 /** Subscribe to a host-owned controller and mount its browser discovery lifecycle. */
 function useExternalEvm(controller) {
@@ -7,9 +9,14 @@ function useExternalEvm(controller) {
 	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
 }
 function ExternalEvmWalletPicker({ controller, snapshot }) {
-	return /* @__PURE__ */ jsx(WalletPicker, {
-		controller,
-		snapshot
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(Theme, {
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(WalletPicker, {
+			controller,
+			snapshot
+		})
 	});
 }
 var WalletPicker = class extends Component {
@@ -59,7 +66,7 @@ var WalletPicker = class extends Component {
 		const selectedChainId = connection.kind === "connected" && connection.network.kind === "configured" ? connection.chainId : controller.chains[0]?.chainId;
 		return /* @__PURE__ */ jsxs("section", {
 			"aria-label": "External EVM wallet",
-			className: "seams-external-evm",
+			className: "seams-wallet-picker seams-external-evm",
 			children: [
 				/* @__PURE__ */ jsxs("form", {
 					onSubmit: this.connect,

package/dist/esm/react/externalNear.js

@@ -1,12 +1,22 @@
 import { nearWalletName } from "../externalNear/wallets.js";
+import { Theme, useTheme } from "./components/theme/ThemeProvider.js";
+import { ExternalNearWalletIcon } from "./components/ExternalNearWalletIcon.js";
 import { Component, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "./externalNear.css";
+import "./externalWalletPicker.css";
 //#region src/react/externalNear.tsx
 function useExternalNear(controller) {
 	return useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
 }
-var ExternalNearWalletPicker = class extends Component {
+function ExternalNearWalletPicker({ controller }) {
+	const { theme, tokens } = useTheme();
+	return /* @__PURE__ */ jsx(Theme, {
+		theme,
+		tokens: { [theme]: tokens },
+		children: /* @__PURE__ */ jsx(NearWalletPicker, { controller })
+	});
+}
+var NearWalletPicker = class extends Component {
 	state = {
 		snapshot: this.props.controller.getSnapshot(),
 		message: ""
@@ -41,7 +51,7 @@ var ExternalNearWalletPicker = class extends Component {
 		}, wallet));
 		return /* @__PURE__ */ jsxs("section", {
 			"aria-label": "Choose your NEAR wallet",
-			className: "seams-near-picker",
+			className: "seams-wallet-picker",
 			children: [
 				/* @__PURE__ */ jsx("h2", { children: "Choose your NEAR wallet" }),
 				/* @__PURE__ */ jsxs("p", {
@@ -49,7 +59,7 @@ var ExternalNearWalletPicker = class extends Component {
 					children: ["NEAR ", this.props.controller.network]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "seams-near-wallets",
+					className: "seams-wallet-picker-options",
 					children: choices
 				}),
 				wallets.length === 0 && /* @__PURE__ */ jsx("p", { children: "No NEAR wallets are enabled." }),
@@ -73,11 +83,6 @@ var ExternalNearWalletPicker = class extends Component {
 		});
 	}
 };
-const walletIcons = {
-	meteor: "M",
-	hot: "🔥",
-	intear: "I"
-};
 function NearWalletButton({ wallet, network, busy, onConnect }) {
 	const unavailable = wallet === "hot" && network !== "mainnet";
 	let description = "Browser extension";
@@ -91,7 +96,7 @@ function NearWalletButton({ wallet, network, busy, onConnect }) {
 			/* @__PURE__ */ jsx("span", {
 				className: `seams-near-icon seams-near-${wallet}`,
 				"aria-hidden": "true",
-				children: walletIcons[wallet]
+				children: /* @__PURE__ */ jsx(ExternalNearWalletIcon, { wallet })
 			}),
 			/* @__PURE__ */ jsx("strong", { children: nearWalletName(wallet) }),
 			/* @__PURE__ */ jsx("small", { children: description })

package/dist/esm/react/externalWalletPicker.css

@@ -0,0 +1,117 @@
+@import './components/theme/Theme.css';
+
+[data-seams-root].seams-theme-provider .seams-wallet-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;
+  font-family: var(--seams-font-family, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker h2 {
+  font-size: clamp(22px, 4vw, 32px);
+  font-weight: 500;
+  margin: 0;
+}
+[data-seams-root].seams-theme-provider .seams-near-network {
+  opacity: 0.7;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options 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;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options strong {
+  font-size: 20px;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options small {
+  font-size: 12px;
+  opacity: 0.7;
+  overflow-wrap: anywhere;
+}
+[data-seams-root].seams-theme-provider .seams-near-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #181818;
+  font-size: 24px;
+}
+[data-seams-root].seams-theme-provider .seams-near-meteor {
+  background: #fff;
+  color: #4824e9;
+  font-weight: 700;
+}
+[data-seams-root].seams-theme-provider .seams-near-intear {
+  background: #fff;
+  color: #1685ff;
+  font-weight: 700;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker-options button:hover:enabled {
+  background: var(--seams-wallet-picker-hover, #303030);
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker button:focus-visible {
+  outline: 3px solid #8faaff;
+  outline-offset: 3px;
+}
+[data-seams-root].seams-theme-provider .seams-wallet-picker button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+[data-seams-root].seams-theme-provider button.seams-near-disconnect {
+  margin-top: 20px;
+  padding: 10px 16px;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid #666;
+  border-radius: 10px;
+}
+
+[data-seams-root].seams-theme-provider .seams-wallet-picker form,
+[data-seams-root].seams-theme-provider .seams-wallet-picker label {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+[data-seams-root].seams-theme-provider .seams-external-evm {
+  display: grid;
+  gap: 20px;
+}
+[data-seams-root].seams-theme-provider .seams-external-evm :is(button, select) {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 16px;
+  border: 1px solid var(--seams-wallet-picker-border, #383838);
+  border-radius: 10px;
+  color: inherit;
+  background: var(--seams-wallet-picker-card, #262626);
+  font: inherit;
+  cursor: pointer;
+}
+@media (max-width: 380px) {
+  [data-seams-root].seams-theme-provider .seams-wallet-picker-options {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/esm/react/index.js

@@ -13,9 +13,9 @@ import { useNearClient } from "./hooks/useNearClient.js";
 import { useAccountInput } from "./hooks/useAccountInput.js";
 import { TransactionReviewHost } from "./transactionReview/TransactionReviewHost.js";
 import { SeamsContextProvider, useSeams } from "./context/index.js";
-import { ExternalEvmWalletPicker, useExternalEvm } from "./externalEvm.js";
 import { DARK_TOKENS, LIGHT_TOKENS, SHAPE_PRESETS, SHAPE_ROUNDED, SHAPE_SQUARE } from "./components/theme/design-tokens.js";
 import { Theme, useTheme } from "./components/theme/ThemeProvider.js";
+import { ExternalEvmWalletPicker, useExternalEvm } from "./externalEvm.js";
 import { SeamsWebProvider } from "./context/SeamsWebProvider.js";
 import { useWalletAuth } from "./hooks/useWalletAuth.js";
 import { useWalletDevices } from "./hooks/useWalletDevices.js";
@@ -31,5 +31,6 @@ 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 { WalletConnectorMenu } from "./components/HostedSeamsAuthMenu/WalletConnectorMenu.js";
 import QRCodeIcon from "./components/QRCodeIcon.js";
-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 };
+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, WalletConnectorMenu, 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 };