@mysten-incubation/dev-wallet 0.0.0

package/src/server/cli-signing-middleware.ts

@@ -0,0 +1,146 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { execFile } from 'node:child_process';
+import { randomBytes, timingSafeEqual } from 'node:crypto';
+import { promisify } from 'node:util';
+
+import { isValidSuiAddress } from '@mysten/sui/utils';
+import { Hono } from 'hono';
+
+const execFileAsync = promisify(execFile);
+
+function isValidBase64(value: unknown): value is string {
+	if (typeof value !== 'string' || value.length === 0) return false;
+	return /^[A-Za-z0-9+/]+=*$/.test(value) && value.length <= 1_000_000;
+}
+
+const MAX_BODY_SIZE = 2 * 1024 * 1024; // 2 MB
+
+function generateToken(): string {
+	return randomBytes(32).toString('hex');
+}
+
+export interface CliSigningMiddlewareOptions {
+	/** The port the server is listening on, used for DNS rebinding protection. */
+	port: number;
+}
+
+export interface CliSigningMiddlewareResult {
+	app: Hono;
+	token: string;
+}
+
+/**
+ * Create a Hono sub-app that exposes signing endpoints backed by the `sui` CLI.
+ *
+ * Uses token-in-URL auth: a 256-bit random token is embedded in the URL printed
+ * to the terminal and sent as `Authorization: Bearer <token>` on subsequent requests.
+ * All CLI calls use `execFile` to prevent shell injection.
+ */
+export function createCliSigningMiddleware(
+	options: CliSigningMiddlewareOptions,
+): CliSigningMiddlewareResult {
+	const { port } = options;
+	const token = generateToken();
+
+	function isAuthenticated(authHeader: string | undefined): boolean {
+		if (!token) return false;
+		if (!authHeader || !/^bearer /i.test(authHeader)) return false;
+		const provided = authHeader.slice(7);
+		if (provided.length !== token.length) return false;
+		return timingSafeEqual(Buffer.from(provided), Buffer.from(token));
+	}
+
+	const app = new Hono();
+
+	// DNS rebinding protection — reject non-localhost hosts
+	app.use('*', async (c, next) => {
+		const host = c.req.header('host') ?? '';
+		const allowedHosts = new Set([`localhost:${port}`, `127.0.0.1:${port}`, `[::1]:${port}`]);
+		if (host && !allowedHosts.has(host)) {
+			return c.json({ error: 'Requests must originate from localhost.' }, 403);
+		}
+		return await next();
+	});
+
+	// Token authentication for API routes
+	app.use('/api/*', async (c, next) => {
+		if (!isAuthenticated(c.req.header('authorization'))) {
+			return c.json(
+				{ error: 'Authentication required. Open the token URL from the terminal.' },
+				401,
+			);
+		}
+		return await next();
+	});
+
+	// GET /api/v1/accounts — list accounts from sui CLI keystore
+	app.get('/api/v1/accounts', async (c) => {
+		try {
+			const { stdout } = await execFileAsync('sui', ['keytool', 'list', '--json']);
+			const accounts = JSON.parse(stdout);
+			return c.json({ accounts });
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			const isExecError = message.includes('ENOENT') || message.includes('not found');
+			return c.json(
+				{
+					error: isExecError
+						? 'Failed to list accounts: sui CLI not found.'
+						: 'Failed to list accounts.',
+				},
+				500,
+			);
+		}
+	});
+
+	// POST /api/v1/sign-transaction — sign BCS-serialized TransactionData
+	app.post('/api/v1/sign-transaction', async (c) => {
+		const contentLength = c.req.header('content-length');
+		if (contentLength && parseInt(contentLength, 10) > MAX_BODY_SIZE) {
+			return c.json({ error: 'Request body too large' }, 413);
+		}
+
+		let body: { address?: unknown; txBytes?: unknown };
+		try {
+			body = await c.req.json();
+		} catch {
+			return c.json({ error: 'Invalid JSON body' }, 400);
+		}
+
+		if (typeof body.address !== 'string' || !isValidSuiAddress(body.address)) {
+			return c.json({ error: 'Invalid address format. Expected 0x-prefixed hex.' }, 400);
+		}
+
+		if (!isValidBase64(body.txBytes)) {
+			return c.json({ error: 'Invalid txBytes. Expected non-empty base64 string.' }, 400);
+		}
+
+		try {
+			const { stdout } = await execFileAsync('sui', [
+				'keytool',
+				'sign',
+				'--address',
+				body.address,
+				'--data',
+				body.txBytes as string,
+				'--json',
+			]);
+
+			const result = JSON.parse(stdout);
+			return c.json({ suiSignature: result.suiSignature, digest: result.digest });
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			console.error('[dev-wallet] CLI signing error:', message);
+
+			if (message.includes('not found') || message.includes('Cannot find key')) {
+				return c.json({ error: `Address not found in keystore: ${body.address}` }, 404);
+			}
+
+			return c.json({ error: 'Signing failed due to a CLI error.' }, 500);
+		}
+	});
+
+	return { app, token };
+}

package/src/server/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export { createCliSigningMiddleware } from './cli-signing-middleware.js';
+export type {
+	CliSigningMiddlewareOptions,
+	CliSigningMiddlewareResult,
+} from './cli-signing-middleware.js';

package/src/types.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Signer } from '@mysten/sui/cryptography';
+import type { ReadonlyWalletAccount } from '@mysten/wallet-standard';
+
+export interface ManagedAccount {
+	address: string;
+	label: string;
+	signer: Signer;
+	walletAccount: ReadonlyWalletAccount;
+}
+
+export interface CreateAccountOptions {
+	label?: string;
+	[key: string]: unknown;
+}
+
+export interface ImportAccountOptions {
+	/** Keypair to import — used by adapters that accept raw keypairs. */
+	signer?: Signer;
+	/** Address to import — used by adapters that look up keys from an external source (e.g. CLI keystore). */
+	address?: string;
+	label?: string;
+}
+
+/**
+ * Pluggable interface for managing accounts and providing signers to a {@link DevWallet}.
+ * Implementations handle key generation, storage, and lifecycle.
+ */
+export interface SignerAdapter {
+	readonly id: string;
+	readonly name: string;
+	/**
+	 * Whether accounts from this adapter are eligible for auto-signing.
+	 * Defaults to `true`. CLI-based adapters set this to `false` to ensure
+	 * transactions always require explicit user approval.
+	 */
+	readonly allowAutoSign?: boolean;
+
+	/** Load keys from storage. Must be called before use. */
+	initialize(): Promise<void>;
+	getAccounts(): ManagedAccount[];
+	getAccount(address: string): ManagedAccount | undefined;
+
+	createAccount?(options?: CreateAccountOptions): Promise<ManagedAccount>;
+	importAccount?(options: ImportAccountOptions): Promise<ManagedAccount>;
+	/** List accounts available for import (e.g. from a CLI keystore). */
+	listAvailableAccounts?(): Promise<
+		Array<{ address: string; scheme: string; alias?: string | null }>
+	>;
+	removeAccount?(address: string): Promise<boolean>;
+	renameAccount?(address: string, label: string): Promise<boolean>;
+
+	/** Subscribe to account list changes. Returns an unsubscribe function. */
+	onAccountsChanged(callback: (accounts: ManagedAccount[]) => void): () => void;
+	destroy(): void;
+}

package/src/ui/copy-controller.ts

@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+import { copyToClipboard } from './utils.js';
+
+export class CopyController implements ReactiveController {
+	host: ReactiveControllerHost;
+	copied = false;
+	copiedValue: string | null = null;
+	#timeout: ReturnType<typeof setTimeout> | null = null;
+	#duration: number;
+
+	constructor(host: ReactiveControllerHost, duration = 1500) {
+		this.#duration = duration;
+		this.host = host;
+		host.addController(this);
+	}
+
+	hostConnected(): void {}
+
+	hostDisconnected(): void {
+		if (this.#timeout) {
+			clearTimeout(this.#timeout);
+			this.#timeout = null;
+		}
+	}
+
+	async copy(text: string): Promise<boolean> {
+		const ok = await copyToClipboard(text);
+		if (ok) {
+			this.copied = true;
+			this.copiedValue = text;
+			if (this.#timeout) clearTimeout(this.#timeout);
+			this.#timeout = setTimeout(() => {
+				this.copied = false;
+				this.copiedValue = null;
+				this.host.requestUpdate();
+			}, this.#duration);
+			this.host.requestUpdate();
+		}
+		return ok;
+	}
+
+	isCopied(text: string): boolean {
+		return this.copied && this.copiedValue === text;
+	}
+}

package/src/ui/dev-wallet-account-selector.ts

@@ -0,0 +1,283 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReadonlyWalletAccount } from '@mysten/wallet-standard';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import type { SignerAdapter } from '../types.js';
+import { dropdownItemStyles, sharedStyles } from './styles.js';
+import { CopyController } from './copy-controller.js';
+import { emitEvent, findAdapterForAddress, formatAddress } from './utils.js';
+import './dev-wallet-dropdown.js';
+
+/** Short display names for adapter badges. */
+const ADAPTER_SHORT_NAMES: Record<string, string> = {
+	'WebCrypto Signer': 'WebCrypto',
+	'Remote CLI Signer': 'CLI',
+	'In-Memory Signer': 'Memory',
+	'Passkey Signer': 'Passkey',
+};
+
+@customElement('dev-wallet-account-selector')
+export class DevWalletAccountSelector extends LitElement {
+	static override styles = [
+		sharedStyles,
+		dropdownItemStyles,
+		css`
+			:host {
+				display: block;
+			}
+
+			.active-account {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				width: 100%;
+				padding: 8px 10px;
+				border-radius: var(--dev-wallet-radius-md);
+				background: var(--dev-wallet-secondary);
+				cursor: pointer;
+				transition: background 0.15s;
+			}
+
+			.active-account:hover {
+				background: var(--dev-wallet-border);
+			}
+
+			.avatar {
+				width: 28px;
+				height: 28px;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 12px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-primary-foreground);
+				background: var(--dev-wallet-primary);
+				flex-shrink: 0;
+			}
+
+			.account-info {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.account-label {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.account-address {
+				font-size: 11px;
+				font-family: var(--dev-wallet-font-mono);
+				color: var(--dev-wallet-muted-foreground);
+			}
+
+			.copy-btn {
+				width: 22px;
+				height: 22px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: var(--dev-wallet-radius-xs);
+				color: var(--dev-wallet-muted-foreground);
+				flex-shrink: 0;
+				font-size: 12px;
+			}
+
+			.copy-btn:hover {
+				background: var(--dev-wallet-border);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.copy-btn.copied {
+				color: var(--dev-wallet-positive);
+			}
+
+			.chevron {
+				width: 14px;
+				height: 14px;
+				color: var(--dev-wallet-muted-foreground);
+				flex-shrink: 0;
+			}
+
+			.dropdown-item[aria-selected='true'] {
+				background: color-mix(in oklab, var(--dev-wallet-primary) 10%, transparent);
+			}
+
+			.dropdown-item .avatar {
+				width: 24px;
+				height: 24px;
+				font-size: 10px;
+			}
+
+			.dropdown-item .account-label {
+				font-size: 12px;
+			}
+
+			.dropdown-item .account-address {
+				font-size: 10px;
+			}
+
+			.dropdown-item .account-info {
+				min-width: 0;
+			}
+
+			.dropdown-item .account-label {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.adapter-badge {
+				font-size: 9px;
+				padding: 1px 4px;
+				border-radius: var(--dev-wallet-radius-2xs);
+				background: var(--dev-wallet-secondary);
+				color: var(--dev-wallet-muted-foreground);
+				white-space: nowrap;
+			}
+
+			.selector-row {
+				display: flex;
+				gap: 4px;
+				align-items: center;
+			}
+
+			.selector-wrapper {
+				flex: 1;
+				min-width: 0;
+				--dropdown-max-height: 240px;
+			}
+
+			.empty-state {
+				padding: 16px;
+				text-align: center;
+				font-size: 12px;
+				color: var(--dev-wallet-muted-foreground);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	accounts: ReadonlyWalletAccount[] = [];
+
+	@property({ attribute: false })
+	adapters: SignerAdapter[] = [];
+
+	@property({ type: String })
+	activeAddress = '';
+
+	@state()
+	private _open = false;
+
+	#copy = new CopyController(this);
+
+	override render() {
+		const active = this.accounts.find((a) => a.address === this.activeAddress);
+
+		if (!active) {
+			return html`<div class="empty-state" part="empty-state">No account selected</div>`;
+		}
+
+		const label = this.#getLabel(active);
+		const initial = (label[0] ?? '?').toUpperCase();
+
+		return html`
+			<div class="selector-row">
+				<dev-wallet-dropdown
+					full-width
+					class="selector-wrapper"
+					.open=${this._open}
+					@close=${() => (this._open = false)}
+				>
+					<button
+						slot="trigger"
+						class="active-account"
+						part="trigger"
+						aria-expanded=${this._open}
+						aria-haspopup="listbox"
+						@click=${() => (this._open = !this._open)}
+					>
+						<span class="avatar">${initial}</span>
+						<div class="account-info">
+							<div class="account-label">${label}</div>
+							<div class="account-address">${formatAddress(active.address)}</div>
+						</div>
+						<svg
+							class="chevron"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2.5"
+						>
+							<path d="M6 9l6 6 6-6" />
+						</svg>
+					</button>
+					<div slot="popover" role="listbox" aria-label="Select account">
+						${this.accounts.map((account) => {
+							const accountLabel = this.#getLabel(account);
+							const accountInitial = (accountLabel[0] ?? '?').toUpperCase();
+							const adapterName = this.#getAdapterName(account.address);
+
+							return html`
+								<button
+									class="dropdown-item"
+									role="option"
+									aria-selected=${account.address === this.activeAddress}
+									@click=${() => this.#select(account)}
+								>
+									<span class="avatar">${accountInitial}</span>
+									<div class="account-info">
+										<div class="account-label">${accountLabel}</div>
+										<div class="account-address">${formatAddress(account.address)}</div>
+									</div>
+									${adapterName ? html`<span class="adapter-badge">${adapterName}</span>` : nothing}
+								</button>
+							`;
+						})}
+					</div>
+				</dev-wallet-dropdown>
+				<button
+					class="copy-btn ${this.#copy.isCopied(active.address) ? 'copied' : ''}"
+					part="copy-button"
+					title="Copy address"
+					aria-label="Copy address"
+					@click=${(e: Event) => {
+						e.stopPropagation();
+						this.#copy.copy(active.address);
+					}}
+				>
+					${this.#copy.isCopied(active.address) ? '\u2713' : '\u2398'}
+				</button>
+			</div>
+		`;
+	}
+
+	#getLabel(account: ReadonlyWalletAccount): string {
+		return account.label ?? `Account ${account.address.slice(0, 8)}`;
+	}
+
+	#getAdapterName(address: string): string | null {
+		const adapter = findAdapterForAddress(this.adapters, address);
+		if (!adapter) return null;
+		return ADAPTER_SHORT_NAMES[adapter.name] ?? adapter.name;
+	}
+
+	#select(account: ReadonlyWalletAccount) {
+		this._open = false;
+		emitEvent(this, 'account-selected', { account });
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-account-selector': DevWalletAccountSelector;
+	}
+}