@seams/wallet 0.21.0 → 0.23.0

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