@mysten-incubation/dev-wallet 0.0.0

package/src/ui/dev-wallet-standalone.ts

@@ -0,0 +1,136 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import type { DevWallet } from '../wallet/dev-wallet.js';
+import { connectDialogStyles, sharedStyles } from './styles.js';
+import { WalletController } from './wallet-controller.js';
+
+@customElement('dev-wallet-standalone')
+export class DevWalletStandalone extends LitElement {
+	static override styles = [
+		sharedStyles,
+		connectDialogStyles,
+		css`
+			:host {
+				display: flex;
+				justify-content: center;
+				padding: 24px 16px;
+				min-height: 100vh;
+				box-sizing: border-box;
+			}
+
+			.card {
+				width: 100%;
+				max-width: 480px;
+				border-radius: var(--dev-wallet-radius-xl);
+				background: var(--dev-wallet-background);
+				border: 1px solid var(--dev-wallet-border);
+				box-shadow: var(--dev-wallet-shadow-lg);
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				height: min(640px, calc(100vh - 48px));
+			}
+
+			.card-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 16px 20px;
+				border-bottom: 1px solid var(--dev-wallet-border);
+			}
+
+			.card-title {
+				font-size: 17px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.header-right {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			.status-dot {
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				background: var(--dev-wallet-status-connected);
+			}
+
+			.status-text {
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+			}
+
+			.card-body {
+				padding: 16px 20px;
+				overflow-y: auto;
+				flex: 1;
+			}
+
+			.section {
+				margin-bottom: 16px;
+			}
+
+			.section:last-child {
+				margin-bottom: 0;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	wallet: DevWallet | null = null;
+
+	/** When set, the settings tab shows a bookmarklet section pointing to this origin. */
+	@property({ type: String })
+	bookmarkletOrigin = '';
+
+	#ctrl = new WalletController(this);
+
+	override willUpdate(changedProperties: Map<string, unknown>) {
+		if (changedProperties.has('wallet')) {
+			this.#ctrl.wallet = this.wallet;
+		}
+		if (changedProperties.has('bookmarkletOrigin')) {
+			this.#ctrl.bookmarkletOrigin = this.bookmarkletOrigin;
+		}
+	}
+
+	override updated() {
+		const dialog = this.shadowRoot?.querySelector<HTMLDialogElement>('.connect-dialog');
+		if (this.#ctrl.pendingConnect && dialog && !dialog.open) {
+			dialog.showModal();
+		} else if (!this.#ctrl.pendingConnect && dialog?.open) {
+			dialog.close();
+		}
+	}
+
+	override render() {
+		return html`
+			<div class="card" part="card">
+				<div class="card-header">
+					<span class="card-title">${this.wallet?.name ?? 'Dev Wallet'}</span>
+					<div class="header-right">
+						${this.#ctrl.renderNetworkBadge()}
+						<span class="status-dot"></span>
+						<span class="status-text">Running</span>
+					</div>
+				</div>
+				<div class="card-body">${this.#ctrl.renderTabContent()}</div>
+				${this.#ctrl.renderTabBar()}
+			</div>
+			${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-standalone': DevWalletStandalone;
+	}
+}

package/src/ui/dev-wallet-tab-bar.ts

@@ -0,0 +1,151 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { sharedStyles } from './styles.js';
+
+export type TabId = 'assets' | 'objects' | 'settings';
+
+@customElement('dev-wallet-tab-bar')
+export class DevWalletTabBar extends LitElement {
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				border-top: 1px solid var(--dev-wallet-border);
+			}
+
+			.tab-bar {
+				display: flex;
+				height: 40px;
+			}
+
+			.tab {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 4px;
+				font-size: 11px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-muted-foreground);
+				transition: color 0.15s;
+				border-top: 2px solid transparent;
+			}
+
+			.tab:hover {
+				color: var(--dev-wallet-foreground);
+			}
+
+			.tab[aria-selected='true'] {
+				color: var(--dev-wallet-primary);
+				border-top-color: var(--dev-wallet-primary);
+			}
+
+			.tab svg {
+				width: 16px;
+				height: 16px;
+			}
+		`,
+	];
+
+	@property({ type: String })
+	active: TabId = 'assets';
+
+	override render() {
+		return html`
+			<nav class="tab-bar" part="tab-bar" role="tablist" aria-label="Wallet navigation">
+				<button
+					class="tab"
+					part="tab"
+					role="tab"
+					aria-selected=${this.active === 'assets'}
+					tabindex=${this.active === 'assets' ? 0 : -1}
+					@click=${() => this.#select('assets')}
+					@keydown=${this.#handleKeydown}
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<rect x="2" y="4" width="20" height="16" rx="2" />
+						<path d="M16 12h.01" />
+					</svg>
+					Assets
+				</button>
+				<button
+					class="tab"
+					part="tab"
+					role="tab"
+					aria-selected=${this.active === 'objects'}
+					tabindex=${this.active === 'objects' ? 0 : -1}
+					@click=${() => this.#select('objects')}
+					@keydown=${this.#handleKeydown}
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<rect x="3" y="3" width="7" height="7" rx="1" />
+						<rect x="14" y="3" width="7" height="7" rx="1" />
+						<rect x="3" y="14" width="7" height="7" rx="1" />
+						<rect x="14" y="14" width="7" height="7" rx="1" />
+					</svg>
+					Objects
+				</button>
+				<button
+					class="tab"
+					part="tab"
+					role="tab"
+					aria-selected=${this.active === 'settings'}
+					tabindex=${this.active === 'settings' ? 0 : -1}
+					@click=${() => this.#select('settings')}
+					@keydown=${this.#handleKeydown}
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<circle cx="12" cy="12" r="3" />
+						<path
+							d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+						/>
+					</svg>
+					Settings
+				</button>
+			</nav>
+		`;
+	}
+
+	#handleKeydown(e: KeyboardEvent) {
+		const tabs: TabId[] = ['assets', 'objects', 'settings'];
+		const currentIndex = tabs.indexOf(this.active);
+		let newIndex = -1;
+
+		if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			newIndex = (currentIndex + 1) % tabs.length;
+		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+		}
+
+		if (newIndex !== -1) {
+			this.#select(tabs[newIndex]);
+			const buttons = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.tab');
+			buttons?.[newIndex]?.focus();
+		}
+	}
+
+	#select(tab: TabId) {
+		if (tab !== this.active) {
+			this.dispatchEvent(
+				new CustomEvent('tab-changed', {
+					bubbles: true,
+					composed: true,
+					detail: { tab },
+				}),
+			);
+		}
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'dev-wallet-tab-bar': DevWalletTabBar;
+	}
+}

package/src/ui/index.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export { DevWalletPanel } from './dev-wallet-panel.js';
+export { DevWalletAccounts } from './dev-wallet-accounts.js';
+export { DevWalletBalances } from './dev-wallet-balances.js';
+export { DevWalletConnect } from './dev-wallet-connect.js';
+export { DevWalletNewAccount } from './dev-wallet-new-account.js';
+export { DevWalletObjects } from './dev-wallet-objects.js';
+export { DevWalletPopup } from './dev-wallet-popup.js';
+export { DevWalletSettings } from './dev-wallet-settings.js';
+export { DevWalletSigning } from './dev-wallet-signing.js';
+export { DevWalletStandalone } from './dev-wallet-standalone.js';
+
+/** @internal — not intended for direct use by consumers */
+export { DevWalletSigningModal } from './dev-wallet-signing-modal.js';
+/** @internal — not intended for direct use by consumers */
+export { DevWalletAccountSelector } from './dev-wallet-account-selector.js';
+/** @internal — not intended for direct use by consumers */
+export { DevWalletDropdown } from './dev-wallet-dropdown.js';
+/** @internal — not intended for direct use by consumers */
+export { DevWalletNetworkBadge } from './dev-wallet-network-badge.js';
+/** @internal — not intended for direct use by consumers */
+export { DevWalletTabBar } from './dev-wallet-tab-bar.js';
+
+export { mountDevWallet } from './mount.js';

package/src/ui/mount.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DevWallet } from '../wallet/dev-wallet.js';
+import './dev-wallet-panel.js';
+
+/** @returns A cleanup function that removes the panel from the DOM. */
+export function mountDevWallet(
+	wallet: DevWallet,
+	options?: { container?: HTMLElement },
+): () => void {
+	const container = options?.container ?? document.body;
+
+	const panel = document.createElement('dev-wallet-panel');
+	panel.wallet = wallet;
+	container.appendChild(panel);
+
+	return () => {
+		panel.remove();
+	};
+}

package/src/ui/styles.ts

@@ -0,0 +1,252 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { css } from 'lit';
+
+const resetStyles = css`
+	* {
+		box-sizing: border-box;
+		-webkit-font-smoothing: antialiased;
+		font-family: var(--dev-wallet-font-sans);
+	}
+
+	button {
+		appearance: none;
+		background-color: transparent;
+		font-size: inherit;
+		font-family: inherit;
+		color: inherit;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		cursor: pointer;
+		outline-color: color-mix(in oklab, var(--dev-wallet-ring) 50%, transparent);
+	}
+
+	p,
+	h1,
+	h2,
+	h3 {
+		margin: 0;
+		color: var(--dev-wallet-foreground);
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--dev-wallet-ring);
+		outline-offset: 2px;
+	}
+`;
+
+const themeStyles = css`
+	:host {
+		/* Colors — OKLch dark theme */
+		--dev-wallet-background: oklch(0.175 0.028 283);
+		--dev-wallet-foreground: oklch(0.91 0 0);
+		--dev-wallet-primary: oklch(0.55 0.24 265);
+		--dev-wallet-primary-foreground: oklch(0.98 0 0);
+		--dev-wallet-secondary: oklch(0.195 0.04 262);
+		--dev-wallet-secondary-foreground: oklch(0.91 0 0);
+		--dev-wallet-muted: oklch(0.25 0.035 280);
+		--dev-wallet-muted-foreground: oklch(0.62 0.04 280);
+		--dev-wallet-destructive: oklch(0.63 0.26 25);
+		--dev-wallet-positive: oklch(0.72 0.19 145);
+		--dev-wallet-warning: oklch(0.79 0.17 75);
+		--dev-wallet-border: oklch(0.25 0.035 280);
+		--dev-wallet-input: oklch(0.25 0.035 280);
+		--dev-wallet-ring: oklch(0.55 0.24 265);
+		--dev-wallet-status-connected: #22c55e;
+		--dev-wallet-status-disconnected: #6b7280;
+
+		/* Radius scale — derived from base */
+		--dev-wallet-radius: 12px;
+		--dev-wallet-radius-xs: calc(var(--dev-wallet-radius) - 6px);
+		--dev-wallet-radius-sm: calc(var(--dev-wallet-radius) - 4px);
+		--dev-wallet-radius-md: calc(var(--dev-wallet-radius) - 2px);
+		--dev-wallet-radius-xl: calc(var(--dev-wallet-radius) + 4px);
+		--dev-wallet-radius-2xs: 3px;
+
+		/* Shadows */
+		--dev-wallet-shadow-sm: 0 1px 3px color-mix(in oklab, oklch(0 0 0) 10%, transparent);
+		--dev-wallet-shadow-md: 0 4px 12px color-mix(in oklab, oklch(0 0 0) 30%, transparent);
+
+		/* Typography */
+		--dev-wallet-font-sans:
+			ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+			'Helvetica Neue', Arial, sans-serif;
+		--dev-wallet-font-weight-medium: 500;
+		--dev-wallet-font-weight-semibold: 600;
+		--dev-wallet-font-mono:
+			ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+		/* Font-size scale */
+		--dev-wallet-text-2xs: 10px;
+		--dev-wallet-text-xs: 11px;
+		--dev-wallet-text-sm: 12px;
+		--dev-wallet-text-base: 13px;
+		--dev-wallet-text-md: 14px;
+		--dev-wallet-text-lg: 15px;
+		--dev-wallet-text-xl: 16px;
+		--dev-wallet-shadow-lg: 0 8px 32px color-mix(in oklab, oklch(0 0 0) 40%, transparent);
+	}
+`;
+
+export const dropdownItemStyles = css`
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 8px 10px;
+		font-size: 12px;
+		color: var(--dev-wallet-foreground);
+		text-align: left;
+	}
+
+	.dropdown-item:hover {
+		background: var(--dev-wallet-secondary);
+	}
+
+	.dropdown-item[aria-selected='true'] {
+		font-weight: var(--dev-wallet-font-weight-semibold);
+	}
+`;
+
+export const connectDialogStyles = css`
+	.connect-dialog {
+		width: 360px;
+		max-height: min(600px, 80vh);
+		border-radius: var(--dev-wallet-radius-xl);
+		background: var(--dev-wallet-background);
+		border: 1px solid var(--dev-wallet-border);
+		box-shadow: var(--dev-wallet-shadow-lg);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+		color: inherit;
+	}
+
+	.connect-dialog::backdrop {
+		background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
+	}
+
+	.connect-dialog-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 14px 16px;
+		border-bottom: 1px solid var(--dev-wallet-border);
+	}
+
+	.connect-dialog-title {
+		font-size: 15px;
+		font-weight: var(--dev-wallet-font-weight-semibold);
+		color: var(--dev-wallet-foreground);
+	}
+`;
+
+export const actionButtonStyles = css`
+	.actions {
+		display: flex;
+		gap: 8px;
+	}
+
+	.btn {
+		flex: 1;
+		padding: 10px 16px;
+		border-radius: var(--dev-wallet-radius-md);
+		font-size: 13px;
+		font-weight: var(--dev-wallet-font-weight-semibold);
+		transition: background-color 0.15s;
+	}
+
+	.btn-approve {
+		background: var(--dev-wallet-positive);
+		color: var(--dev-wallet-primary-foreground);
+	}
+
+	.btn-approve:hover {
+		background: oklab(from var(--dev-wallet-positive) calc(l - 0.03) a b);
+	}
+
+	.btn-reject {
+		background: var(--dev-wallet-destructive);
+		color: var(--dev-wallet-primary-foreground);
+	}
+
+	.btn-reject:hover {
+		background: oklab(from var(--dev-wallet-destructive) calc(l - 0.05) a b);
+	}
+
+	.btn-cancel {
+		background: var(--dev-wallet-secondary);
+		color: var(--dev-wallet-foreground);
+		border: 1px solid var(--dev-wallet-border);
+	}
+
+	.btn-cancel:hover {
+		background: oklab(from var(--dev-wallet-secondary) calc(l - 0.02) a b);
+	}
+
+	.btn-create {
+		background: var(--dev-wallet-primary);
+		color: var(--dev-wallet-primary-foreground);
+	}
+
+	.btn-create:hover {
+		background: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);
+	}
+
+	.btn-create:disabled,
+	.btn-approve:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+`;
+
+export const stateStyles = css`
+	.loading,
+	.empty-state,
+	.error-state {
+		text-align: center;
+		padding: 16px;
+		font-size: 13px;
+	}
+
+	.loading {
+		color: var(--dev-wallet-muted-foreground);
+	}
+
+	.empty-state {
+		color: var(--dev-wallet-muted-foreground);
+	}
+
+	.error-state {
+		color: var(--dev-wallet-destructive);
+	}
+`;
+
+export const sectionHeaderStyles = css`
+	.section-header {
+		font-size: 13px;
+		font-weight: var(--dev-wallet-font-weight-semibold);
+		color: var(--dev-wallet-muted-foreground);
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		margin-bottom: 12px;
+	}
+`;
+
+const reducedMotionStyles = css`
+	@media (prefers-reduced-motion: reduce) {
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+		}
+	}
+`;
+
+export const sharedStyles = [resetStyles, themeStyles, reducedMotionStyles];

package/src/ui/transaction-analyzer.ts

@@ -0,0 +1,60 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ClientWithCoreApi } from '@mysten/sui/client';
+import type { AnalyzedCommand, CoinFlow } from '@mysten/wallet-sdk';
+import { analyze, analyzers } from '@mysten/wallet-sdk';
+
+export interface TransactionAnalysis {
+	commands: AnalyzedCommand[];
+	coinFlows: CoinFlow[] | null;
+}
+
+type AnalysisResult =
+	| { kind: 'rich'; analysis: TransactionAnalysis }
+	| { kind: 'error'; message: string };
+
+export async function analyzeTransaction(
+	txData: string,
+	client?: ClientWithCoreApi | null,
+): Promise<AnalysisResult> {
+	if (!client) {
+		return { kind: 'error', message: 'No client available to analyze transaction' };
+	}
+
+	try {
+		const result = await analyze(
+			{ commands: analyzers.commands, coinFlows: analyzers.coinFlows },
+			{ client, transaction: txData },
+		);
+		if (result.commands.result) {
+			return {
+				kind: 'rich',
+				analysis: {
+					commands: result.commands.result,
+					coinFlows: result.coinFlows.result?.outflows ?? null,
+				},
+			};
+		}
+
+		const issues = result.commands.issues ?? result.coinFlows.issues ?? [];
+		if (issues.length > 0) {
+			return {
+				kind: 'error',
+				message: issues.map((i: { message: string }) => i.message).join('\n'),
+			};
+		}
+		return { kind: 'error', message: 'Transaction analysis returned no results' };
+	} catch (e) {
+		const raw = e instanceof Error ? e.message : String(e);
+		let message: string;
+		if (raw.includes('fetch') || raw.includes('network') || raw.includes('ECONNREFUSED')) {
+			message = `Network error: ${raw}`;
+		} else if (raw.includes('deserialize') || raw.includes('BCS') || raw.includes('parse')) {
+			message = `Invalid transaction data: ${raw}`;
+		} else {
+			message = raw;
+		}
+		return { kind: 'error', message };
+	}
+}