@seams/wallet 0.10.2 → 0.12.0

package/dist/esm/react/components/AccountMenuButton/AccountMenuMockScreens.js

@@ -0,0 +1,247 @@
+import { AccountMenuScreen } from "./AccountMenuScreen.js";
+import { QRCodeScannerCamera } from "../QRCodeScannerCamera.js";
+import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
+import { MailIcon } from "./icons/MailIcon.js";
+import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
+import { AuthenticationMethodsView } from "./AuthenticationMethodsView.js";
+import { AccountsSection } from "./AccountsSection.js";
+import { ExportKeysScreen } from "./ExportKeysScreen.js";
+import { RecoveryCodeAcknowledgement } from "./RecoveryCodeAcknowledgement.js";
+import { RecoveryCodeActions } from "./RecoveryCodeActions.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountMenuMockScreens.tsx
+const devices = [
+	{
+		id: "macbook",
+		name: "MacBook Pro",
+		lastUsed: "Now",
+		methods: "both"
+	},
+	{
+		id: "iphone",
+		name: "iPhone",
+		lastUsed: "Today, 09:41",
+		methods: "passkey"
+	},
+	{
+		id: "pixel",
+		name: "Pixel 9",
+		lastUsed: "Yesterday",
+		methods: "email_otp"
+	}
+];
+function selectDevice(setScreen, parent, device) {
+	setScreen({
+		kind: "device",
+		device,
+		parent
+	});
+}
+function methodLabel(choice) {
+	switch (choice) {
+		case "passkey": return "Passkey";
+		case "email_otp": return "Email OTP";
+		case "both": return "Passkey + Email OTP";
+		default: return assertNever(choice);
+	}
+}
+function deviceRow(setScreen, parent, device) {
+	return /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+		kind: device.methods === "email_otp" ? "email_otp" : "passkey",
+		title: device.name,
+		description: methodLabel(device.methods),
+		onSelect: selectDevice.bind(null, setScreen, parent, device)
+	}, device.id);
+}
+function MethodTiles({ methods }) {
+	return /* @__PURE__ */ jsxs("ul", {
+		className: "seams-account-method-tiles",
+		"aria-label": "Authentication methods",
+		children: [methods !== "email_otp" ? /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+			kind: "passkey",
+			title: "Passkey",
+			description: "Touch ID · This device"
+		}) : null, methods !== "passkey" ? /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+			kind: "email_otp",
+			title: "Email OTP",
+			description: "alex@example.com"
+		}) : null]
+	});
+}
+function selectExportKey(setScreen, chain) {
+	setScreen({
+		kind: "export-key",
+		chain
+	});
+}
+const recoveryCodes = [
+	"4821–7396–2058–1643",
+	"9164–3082–7541–6290",
+	"3579–1468–8023–5916",
+	"6208–9531–4672–1805"
+];
+function recoveryCodeRow(code, index) {
+	return /* @__PURE__ */ jsxs("li", {
+		"aria-label": `Recovery code ${index + 1}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: String(index + 1).padStart(2, "0")
+		}), /* @__PURE__ */ jsx("code", { children: code })]
+	}, code);
+}
+function assertNever(value) {
+	throw new Error(`Unknown account preview screen: ${String(value)}`);
+}
+function AccountMenuMockScreens({ screen, setScreen, accounts, transactionSettings, walletId }) {
+	const back = setScreen.bind(null, { kind: "overview" });
+	switch (screen.kind) {
+		case "overview": return null;
+		case "transactions": return /* @__PURE__ */ jsx(AccountMenuScreen, {
+			title: "Transaction settings",
+			onBack: back,
+			children: transactionSettings
+		});
+		case "export-keys": return /* @__PURE__ */ jsx(ExportKeysScreen, {
+			onBack: back,
+			loadingChain: null,
+			canExportNearKey: true,
+			canExportEvmKeys: true,
+			onSelectChain: selectExportKey.bind(null, setScreen)
+		});
+		case "export-key": return /* @__PURE__ */ jsxs(AccountMenuScreen, {
+			title: screen.chain === "near" ? "Export NEAR key" : "Export EVM keys",
+			onBack: setScreen.bind(null, { kind: "export-keys" }),
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "seams-account-description",
+				children: "Your wallet requires authentication before revealing this signing key."
+			}), /* @__PURE__ */ jsxs("dl", {
+				className: "seams-account-inset",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "seams-account-detail-row",
+						children: [/* @__PURE__ */ jsx("dt", { children: "Wallet" }), /* @__PURE__ */ jsx("dd", { children: walletId })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "seams-account-detail-row",
+						children: [/* @__PURE__ */ jsx("dt", { children: "Key type" }), /* @__PURE__ */ jsx("dd", { children: screen.chain === "near" ? "Ed25519" : "ECDSA" })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "seams-account-detail-row",
+						children: [/* @__PURE__ */ jsx("dt", { children: "Protection" }), /* @__PURE__ */ jsx("dd", { children: "Authentication required" })]
+					})
+				]
+			})]
+		});
+		case "accounts": return /* @__PURE__ */ jsxs(AccountMenuScreen, {
+			title: "Accounts",
+			onBack: back,
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "seams-account-description",
+				children: "Your addresses across networks."
+			}), /* @__PURE__ */ jsx(AccountsSection, { rows: accounts })]
+		});
+		case "methods": return /* @__PURE__ */ jsx(AccountMenuScreen, {
+			title: "Authentication methods",
+			onBack: back,
+			children: /* @__PURE__ */ jsx(AuthenticationMethodsView, {
+				walletLabel: walletId,
+				status: "Active",
+				children: /* @__PURE__ */ jsx(MethodTiles, { methods: "both" })
+			})
+		});
+		case "linked": return /* @__PURE__ */ jsxs(AccountMenuScreen, {
+			title: "Linked devices",
+			onBack: back,
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "seams-account-description",
+					children: "Manage how your devices unlock your wallet."
+				}),
+				/* @__PURE__ */ jsx("ul", { children: devices.map(deviceRow.bind(null, setScreen, screen.kind)) }),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "seams-account-action primary",
+					onClick: setScreen.bind(null, { kind: "scanner" }),
+					children: "Link a device"
+				})
+			]
+		});
+		case "device": return /* @__PURE__ */ jsx(AccountMenuScreen, {
+			title: "Device details",
+			onBack: setScreen.bind(null, { kind: screen.parent }),
+			children: /* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
+				icon: screen.device.methods === "email_otp" ? /* @__PURE__ */ jsx(MailIcon, {
+					size: 30,
+					strokeWidth: 1.5
+				}) : void 0,
+				title: screen.device.name,
+				description: methodLabel(screen.device.methods),
+				details: [{
+					label: "Status",
+					value: "Active"
+				}, {
+					label: "Last used",
+					value: screen.device.lastUsed
+				}],
+				children: /* @__PURE__ */ jsx(MethodTiles, { methods: screen.device.methods })
+			})
+		});
+		case "scanner": return /* @__PURE__ */ jsxs(AccountMenuScreen, {
+			title: "Link a device",
+			onBack: back,
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "seams-account-description",
+					children: "Open your wallet on the other device, then scan its pairing code."
+				}),
+				/* @__PURE__ */ jsx(QRCodeScannerCamera, { children: /* @__PURE__ */ jsx("div", {
+					className: "qr-scanner-video is-ready",
+					"aria-hidden": "true",
+					style: { background: "radial-gradient(ellipse at 50% 48%, #3e403f, #222423 75%)" }
+				}) }),
+				/* @__PURE__ */ jsx("p", {
+					className: "seams-account-note",
+					children: "Position the QR code inside the frame."
+				})
+			]
+		});
+		case "recovery": return /* @__PURE__ */ jsxs(AccountMenuScreen, {
+			title: screen.revealed ? "Your recovery codes" : "Recovery codes",
+			onBack: screen.revealed ? setScreen.bind(null, {
+				kind: "recovery",
+				revealed: false
+			}) : back,
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "seams-account-description",
+					children: screen.revealed ? "Save these codes in your password manager or another secure place." : "Keep your recovery codes somewhere safe. Use a code to restore access to your wallet."
+				}),
+				screen.revealed ? /* @__PURE__ */ jsx("ol", {
+					className: "seams-account-recovery-codes",
+					"aria-label": "Recovery codes",
+					children: recoveryCodes.map(recoveryCodeRow)
+				}) : null,
+				screen.revealed ? /* @__PURE__ */ jsx(RecoveryCodeActions, { codes: recoveryCodes }) : null,
+				!screen.revealed ? /* @__PURE__ */ jsx("div", {
+					className: "seams-account-inset",
+					children: "Keep these codes private. Anyone with a code can start recovering your wallet."
+				}) : null,
+				screen.revealed ? /* @__PURE__ */ jsx(RecoveryCodeAcknowledgement, { onDone: back }) : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "seams-account-action primary",
+					onClick: setScreen.bind(null, {
+						kind: "recovery",
+						revealed: true
+					}),
+					children: "Reveal with passkey"
+				})
+			]
+		});
+		default: return assertNever(screen);
+	}
+}
+//#endregion
+export { AccountMenuMockScreens };
+
+//# sourceMappingURL=AccountMenuMockScreens.js.map

package/dist/esm/react/components/AccountMenuButton/AccountMenuScreen.js

@@ -0,0 +1,41 @@
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AccountMenuScreen.tsx
+function focusHeading(heading) {
+	heading.current?.focus({ preventScroll: true });
+}
+/** One navigation level inside the account panel. Focus follows the screen title. */
+function AccountMenuScreen({ title, onBack, children, className }) {
+	const heading = useRef(null);
+	useLayoutEffect(focusHeading.bind(null, heading), [title]);
+	return /* @__PURE__ */ jsxs("section", {
+		className: `seams-account-screen ${className ?? ""}`,
+		"aria-label": title,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "seams-account-heading",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "seams-account-back",
+				"aria-label": "Back",
+				onClick: onBack,
+				children: /* @__PURE__ */ jsx("svg", {
+					width: "18",
+					height: "18",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.75",
+					children: /* @__PURE__ */ jsx("path", { d: "m14 6-6 6 6 6" })
+				})
+			}), /* @__PURE__ */ jsx("h2", {
+				ref: heading,
+				tabIndex: -1,
+				children: title
+			})]
+		}), children]
+	}, title);
+}
+//#endregion
+export { AccountMenuScreen };
+
+//# sourceMappingURL=AccountMenuScreen.js.map

package/dist/esm/react/components/AccountMenuButton/AuthenticationMethodRow.js

@@ -0,0 +1,79 @@
+import TouchIcon from "./icons/TouchIcon.js";
+import { MailIcon } from "./icons/MailIcon.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/components/AccountMenuButton/AuthenticationMethodRow.tsx
+function AuthenticationMethodRow({ kind, title, description, icon, action, onSelect, children }) {
+	if (onSelect) return /* @__PURE__ */ jsx("li", {
+		className: "seams-account-method-list-item",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "seams-account-method-button",
+			onClick: onSelect,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "seams-account-avatar",
+					children: icon ?? (kind === "passkey" ? /* @__PURE__ */ jsx(TouchIcon, {
+						width: 20,
+						height: 20,
+						strokeWidth: 1.5
+					}) : /* @__PURE__ */ jsx(MailIcon, {
+						size: 20,
+						strokeWidth: 1.5
+					}))
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsx("small", { children: description })] }),
+				/* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: "seams-linked-devices-modal-item seams-linked-devices-modal-item--row",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "seams-linked-devices-modal-item-icon",
+				"aria-hidden": "true",
+				children: kind === "passkey" ? /* @__PURE__ */ jsx(TouchIcon, {
+					width: 20,
+					height: 20,
+					strokeWidth: 1.5
+				}) : /* @__PURE__ */ jsx(MailIcon, {
+					size: 20,
+					strokeWidth: 1.75
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "seams-linked-devices-modal-item-content",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "seams-linked-devices-modal-item-main",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "seams-linked-devices-modal-item-name",
+							children: title
+						}), /* @__PURE__ */ jsx("span", {
+							className: "seams-linked-devices-modal-standing tone-active",
+							children: "Active"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "seams-linked-devices-modal-item-detail",
+						children: description
+					}),
+					children
+				]
+			}),
+			action
+		]
+	});
+}
+//#endregion
+export { AuthenticationMethodRow };
+
+//# sourceMappingURL=AuthenticationMethodRow.js.map