@mysten-incubation/dev-wallet 0.0.0

package/src/app/main.ts

@@ -0,0 +1,245 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { fromBase64, toBase64 } from '@mysten/sui/utils';
+
+import { RemoteCliAdapter } from '../adapters/remote-cli-adapter.js';
+import type { SignerAdapter } from '../types.js';
+import { parseWalletRequest } from '../client/request-handler.js';
+import { getNetworkFromChain } from '../wallet/constants.js';
+import { DevWallet } from '../wallet/dev-wallet.js';
+
+// Import UI components to register custom elements
+import '../ui/dev-wallet-popup.js';
+import type { DevWalletStandalone } from '../ui/dev-wallet-standalone.js';
+import '../ui/dev-wallet-standalone.js';
+import type { DevWalletConnect } from '../ui/dev-wallet-connect.js';
+
+declare global {
+	interface Window {
+		__DEV_WALLET_CLI__?: boolean;
+	}
+}
+
+// NOTE: JWT secret is stored in localStorage (readable by any JS on the same origin).
+// This is acceptable for a dev-only tool but should not be used in production wallets.
+function getJwtSecretKey(): Uint8Array {
+	const stored = localStorage.getItem('dev-wallet:jwt-secret');
+	if (stored) return fromBase64(stored);
+	const key = crypto.getRandomValues(new Uint8Array(32));
+	localStorage.setItem('dev-wallet:jwt-secret', toBase64(key));
+	return key;
+}
+
+async function createWallet(): Promise<DevWallet> {
+	const initTasks: Array<Promise<SignerAdapter | null>> = [];
+
+	// WebCrypto adapter (persistent via IndexedDB — preferred default)
+	if (typeof indexedDB !== 'undefined') {
+		initTasks.push(
+			import('../adapters/webcrypto-adapter.js')
+				.then(async ({ WebCryptoSignerAdapter }) => {
+					const adapter = new WebCryptoSignerAdapter();
+					await adapter.initialize();
+					return adapter;
+				})
+				.catch(() => null),
+		);
+	}
+
+	// In-memory adapter (lightweight fallback, always available)
+	initTasks.push(
+		import('../adapters/in-memory-adapter.js').then(async ({ InMemorySignerAdapter }) => {
+			const adapter = new InMemorySignerAdapter();
+			await adapter.initialize();
+			return adapter;
+		}),
+	);
+
+	// CLI adapter (when running with CLI middleware)
+	if (window.__DEV_WALLET_CLI__) {
+		initTasks.push(
+			import('../adapters/remote-cli-adapter.js').then(async ({ RemoteCliAdapter }) => {
+				const cliAdapter = new RemoteCliAdapter();
+				await cliAdapter.initialize();
+				return cliAdapter;
+			}),
+		);
+	}
+
+	const results = await Promise.allSettled(initTasks);
+
+	for (const result of results) {
+		if (result.status === 'rejected') {
+			console.warn('[dev-wallet] Adapter initialization failed:', result.reason);
+		}
+	}
+
+	const adapters = results
+		.filter(
+			(r): r is PromiseFulfilledResult<SignerAdapter> =>
+				r.status === 'fulfilled' && r.value !== null,
+		)
+		.map((r) => r.value);
+
+	if (adapters.length === 0) {
+		throw new Error('No adapters could be initialized');
+	}
+
+	const hasAccounts = adapters.some((a) => a.getAccounts().length > 0);
+	if (!hasAccounts) {
+		const creatableAdapter = adapters.find((a) => a.createAccount);
+		if (creatableAdapter?.createAccount) {
+			await creatableAdapter.createAccount({ label: 'Dev Account' });
+		}
+	}
+
+	return new DevWallet({
+		adapters,
+		activeNetwork: 'devnet',
+		persistNetworks: true,
+	});
+}
+
+async function handlePopupRequest(hash: string) {
+	const app = document.getElementById('app');
+	if (!app) throw new Error('Missing #app element in document');
+
+	try {
+		const wallet = await createWallet();
+		const jwtSecretKey = getJwtSecretKey();
+
+		const request = parseWalletRequest({
+			adapters: [...wallet.adapters],
+			jwtSecretKey,
+			getClient: (network) => {
+				try {
+					return wallet.getClient(network);
+				} catch {
+					return undefined;
+				}
+			},
+			hash,
+		});
+
+		app.innerHTML = '';
+
+		const network = request.chain ? getNetworkFromChain(request.chain) : undefined;
+		const client = network
+			? (wallet.getClient(network) ?? wallet.activeClient)
+			: wallet.activeClient;
+
+		const popup = document.createElement('dev-wallet-popup');
+		popup.walletName = 'Dev Wallet (Web)';
+		popup.requestType = request.type;
+		popup.appName = request.appName;
+		popup.appUrl = request.appUrl;
+		popup.address = request.address ?? '';
+		if (request.address) {
+			const account = wallet.getAdapterForAccount(request.address)?.getAccount(request.address);
+			if (account) {
+				popup.accountLabel = account.label;
+			}
+		}
+		popup.chain = request.chain ?? 'sui:unknown';
+		popup.data = request.data ?? null;
+		popup.client = client ?? null;
+
+		if (request.type === 'connect') {
+			popup.connectAccounts = wallet.adapters.flatMap((a) =>
+				a.getAccounts().map((acc) => ({
+					address: acc.address,
+					label: acc.label,
+					adapterName: a.name,
+				})),
+			);
+		}
+
+		let handling = false;
+
+		popup.addEventListener('approve', async (e) => {
+			if (handling) return;
+			handling = true;
+			try {
+				const detail = (e as CustomEvent).detail;
+				await request.approve(
+					detail?.selectedAddresses ? { selectedAddresses: detail.selectedAddresses } : undefined,
+				);
+				window.close();
+			} catch (error) {
+				handling = false;
+				const connectEl = popup.shadowRoot?.querySelector(
+					'dev-wallet-connect',
+				) as DevWalletConnect | null;
+				if (connectEl) {
+					connectEl.showError(error instanceof Error ? error.message : String(error));
+				}
+			}
+		});
+
+		popup.addEventListener('reject', () => {
+			if (handling) return;
+			handling = true;
+			request.reject('User rejected');
+			window.close();
+		});
+
+		app.appendChild(popup);
+	} catch (error) {
+		showErrorMessage(app, 'Error', error);
+	}
+}
+
+async function showStandaloneUI() {
+	const app = document.getElementById('app');
+	if (!app) throw new Error('Missing #app element in document');
+
+	try {
+		const wallet = await createWallet();
+
+		app.innerHTML = '';
+
+		const el = document.createElement('dev-wallet-standalone') as DevWalletStandalone;
+		el.wallet = wallet;
+		el.bookmarkletOrigin = window.location.origin;
+		app.appendChild(el);
+	} catch (error) {
+		showErrorMessage(app, 'Failed to initialize wallet', error);
+	}
+}
+
+function showErrorMessage(container: HTMLElement, title: string, error: unknown) {
+	container.innerHTML = '';
+	const wrapper = document.createElement('div');
+	wrapper.style.cssText = 'color: #ef4444; text-align: center;';
+
+	const heading = document.createElement('h3');
+	heading.textContent = title;
+	wrapper.appendChild(heading);
+
+	const message = document.createElement('p');
+	message.textContent = error instanceof Error ? error.message : String(error);
+	message.style.cssText = 'font-size: 13px; margin-top: 8px;';
+	wrapper.appendChild(message);
+
+	container.appendChild(wrapper);
+}
+
+// Token is stored in localStorage so popup windows (signing requests) can also read it.
+function extractAndStoreCliToken(): void {
+	const url = new URL(window.location.href);
+	const urlToken = url.searchParams.get('token');
+	if (urlToken) {
+		localStorage.setItem(RemoteCliAdapter.TOKEN_KEY, urlToken);
+		url.searchParams.delete('token');
+		history.replaceState(null, '', url.pathname + url.hash);
+	}
+}
+
+extractAndStoreCliToken();
+const hash = window.location.hash.slice(1);
+if (hash) {
+	handlePopupRequest(hash);
+} else {
+	showStandaloneUI();
+}

package/src/app/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "../../tsconfig.json"
+}

package/src/bin/cli.ts

@@ -0,0 +1,214 @@
+#!/usr/bin/env node
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { execFile } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { resolve, dirname } from 'node:path';
+import { parseArgs, promisify } from 'node:util';
+
+import { serve } from '@hono/node-server';
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+
+const execFileAsync = promisify(execFile);
+
+const MIME_TYPES: Record<string, string> = {
+	'.html': 'text/html; charset=utf-8',
+	'.js': 'application/javascript',
+	'.mjs': 'application/javascript',
+	'.css': 'text/css',
+	'.json': 'application/json',
+	'.svg': 'image/svg+xml',
+	'.png': 'image/png',
+	'.ico': 'image/x-icon',
+	'.woff': 'font/woff',
+	'.woff2': 'font/woff2',
+};
+
+function findStandaloneDir(startDir: string): string | null {
+	let dir = startDir;
+	for (let i = 0; i < 5; i++) {
+		const candidate = resolve(dir, 'standalone');
+		if (existsSync(resolve(candidate, 'index.html'))) return candidate;
+		const parent = dirname(dir);
+		if (parent === dir) break;
+		dir = parent;
+	}
+	return null;
+}
+
+function formatStartupMessage(options: {
+	walletUrl: string;
+	baseUrl: string;
+	adapters: string[];
+	hasSuiCli: boolean;
+	bookmarkletCode: string;
+}): string {
+	const { walletUrl, baseUrl, adapters, hasSuiCli, bookmarkletCode } = options;
+	return `
+  Dev Wallet running at ${walletUrl}
+  Adapters: ${adapters.join(', ')}${!hasSuiCli ? '\n  (Install sui CLI to enable CLI signing)' : ''}
+
+  To connect from your dApp:
+
+    import { DevWalletClient } from '@mysten-incubation/dev-wallet/client';
+    DevWalletClient.register({ origin: '${baseUrl}' });
+
+  Or use the bookmarklet — drag from the Settings tab, or copy:
+
+    ${bookmarkletCode}
+
+  Or paste in the browser console:
+
+    var s=document.createElement('script');s.src='${baseUrl}/bookmarklet.js';document.head.appendChild(s);
+
+  Press Ctrl+C to stop.
+`;
+}
+
+async function main() {
+	const { values } = parseArgs({
+		options: {
+			port: { type: 'string', default: '5174' },
+			help: { type: 'boolean', short: 'h' },
+		},
+		allowPositionals: true,
+	});
+
+	if (values.help) {
+		console.log(`
+Usage: dev-wallet serve [options]
+
+Start a dev wallet web app for dApp signing.
+
+Options:
+  --port <number>          Port to serve on (default: 5174)
+  -h, --help               Show this help message
+
+The wallet automatically detects available adapters:
+  - In-Memory (Ed25519) — always available
+  - WebCrypto (Passkey) — available in browsers with IndexedDB
+  - CLI Signer — available when the sui CLI is on your PATH
+`);
+		process.exit(0);
+	}
+
+	const port = Number(values.port ?? '5174');
+	if (!Number.isInteger(port) || port < 1 || port > 65535) {
+		console.error('Error: --port must be an integer between 1 and 65535');
+		process.exit(1);
+	}
+
+	let hasSuiCli = false;
+	try {
+		await execFileAsync('sui', ['--version']);
+		hasSuiCli = true;
+	} catch {
+		// sui CLI not available — CLI adapter will not be enabled
+	}
+
+	const scriptDir = dirname(new URL(import.meta.url).pathname);
+	const standaloneDir = findStandaloneDir(scriptDir);
+
+	if (!standaloneDir) {
+		console.error(
+			'Standalone wallet app not found.\nRun `pnpm turbo build --filter=@mysten-incubation/dev-wallet` first.',
+		);
+		process.exit(1);
+	}
+
+	let indexHtml = await readFile(resolve(standaloneDir, 'index.html'), 'utf-8');
+	if (hasSuiCli) {
+		indexHtml = indexHtml.replace(
+			'</head>',
+			'<script>window.__DEV_WALLET_CLI__=true;</script></head>',
+		);
+		if (!indexHtml.includes('__DEV_WALLET_CLI__')) {
+			console.warn('Warning: Failed to inject CLI flag into index.html');
+		}
+	}
+
+	let bookmarkletJs: string | null = null;
+	try {
+		bookmarkletJs = await readFile(resolve(standaloneDir, 'bookmarklet.js'), 'utf-8');
+	} catch {
+		// bookmarklet not available
+	}
+
+	const app = new Hono();
+	let cliToken: string | null = null;
+
+	if (hasSuiCli) {
+		const { createCliSigningMiddleware } = await import('../server/cli-signing-middleware.js');
+		const result = createCliSigningMiddleware({ port });
+		cliToken = result.token;
+		app.route('/', result.app);
+	}
+
+	app.get('/bookmarklet.js', cors({ origin: '*' }), (c) => {
+		if (!bookmarkletJs) {
+			return c.text('Bookmarklet not found', 404);
+		}
+		c.header('Cache-Control', 'no-cache');
+		return c.body(bookmarkletJs, { headers: { 'Content-Type': 'application/javascript' } });
+	});
+
+	app.get('*', async (c) => {
+		const urlPath = decodeURIComponent(new URL(c.req.url).pathname);
+
+		if (urlPath === '/' || urlPath === '/index.html') {
+			return c.html(indexHtml);
+		}
+
+		const filePath = resolve(standaloneDir, urlPath.slice(1));
+		if (!filePath.startsWith(standaloneDir)) {
+			return c.html(indexHtml);
+		}
+
+		try {
+			const content = await readFile(filePath);
+			const ext = filePath.slice(filePath.lastIndexOf('.'));
+			const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+			return c.body(content, { headers: { 'Content-Type': contentType } });
+		} catch {
+			return c.html(indexHtml);
+		}
+	});
+
+	const baseUrl = `http://localhost:${port}`;
+
+	const server = serve({ fetch: app.fetch, port }, () => {
+		const enabledAdapters = ['In-Memory (Ed25519)', 'WebCrypto (Passkey)'];
+		if (hasSuiCli) {
+			enabledAdapters.push('CLI Signer');
+		}
+
+		const walletUrl = cliToken ? `${baseUrl}/?token=${cliToken}` : baseUrl;
+		const bookmarkletCode = `javascript:void(document.head.appendChild(Object.assign(document.createElement('script'),{src:'${baseUrl}/bookmarklet.js'})))`;
+
+		console.log(
+			formatStartupMessage({
+				walletUrl,
+				baseUrl,
+				adapters: enabledAdapters,
+				hasSuiCli,
+				bookmarkletCode,
+			}),
+		);
+	});
+
+	function shutdown() {
+		console.log('\nShutting down...');
+		server.close(() => process.exit(0));
+		setTimeout(() => process.exit(1), 3000).unref();
+	}
+	process.on('SIGINT', shutdown);
+	process.on('SIGTERM', shutdown);
+}
+
+main().catch((error) => {
+	console.error('Failed to start dev wallet:', error);
+	process.exit(1);
+});