@mysten-incubation/dev-wallet 0.0.1 → 0.2.0

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

@@ -6,6 +6,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 import type { DevWallet } from '../wallet/dev-wallet.js';
 import { connectDialogStyles, sharedStyles } from './styles.js';
+import type { CoinRecord } from './utils.js';
 import { WalletController } from './wallet-controller.js';
 
 @customElement('dev-wallet-standalone')
@@ -15,36 +16,187 @@ export class DevWalletStandalone extends LitElement {
 		connectDialogStyles,
 		css`
 			:host {
-				display: flex;
-				justify-content: center;
-				padding: 24px 16px;
+				display: block;
 				min-height: 100vh;
 				box-sizing: border-box;
+				padding: 24px;
+				color: var(--dev-wallet-foreground);
+				background-color: var(--dev-wallet-bg-0);
+				background-image:
+					linear-gradient(var(--dev-wallet-border) 1px, transparent 1px),
+					linear-gradient(90deg, var(--dev-wallet-border) 1px, transparent 1px);
+				background-size: 32px 32px;
+				background-position: -1px -1px;
+			}
+
+			.standalone-layout {
+				width: 100%;
+				max-width: 1220px;
+				min-height: calc(100vh - 48px);
+				margin: 0 auto;
+				padding: 24px 0;
+				display: grid;
+				grid-template-columns: minmax(240px, 1fr) 480px minmax(260px, 1fr);
+				gap: 20px;
+				align-items: start;
+			}
+
+			.rail {
+				min-width: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+				padding-top: 6px;
+			}
+
+			.wordmark {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+			}
+
+			.logo-mark {
+				width: 28px;
+				height: 28px;
+				border-radius: 9px;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				color: var(--dev-wallet-primary-foreground);
+				background:
+					radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 24px),
+					linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));
+				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
+			}
+
+			.logo-mark svg {
+				width: 18px;
+				height: 18px;
+			}
+
+			.wordmark-title {
+				display: flex;
+				flex-direction: column;
+				line-height: 1.1;
+			}
+
+			.wordmark-title strong {
+				font-size: 16px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+			}
+
+			.version {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 9px;
+				letter-spacing: 0.12em;
+				text-transform: uppercase;
+				color: var(--dev-wallet-text-3);
+			}
+
+			.rail-section {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+
+			.rail-title {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				letter-spacing: 0.14em;
+				text-transform: uppercase;
+				color: var(--dev-wallet-text-3);
+			}
+
+			.code {
+				margin: 0;
+				overflow: auto;
+				white-space: pre;
+				padding: 10px 12px;
+				border-radius: var(--dev-wallet-radius);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-0);
+				color: var(--dev-wallet-foreground);
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 11.5px;
+				line-height: 1.55;
+			}
+
+			.status-list {
+				display: flex;
+				flex-direction: column;
+				gap: 6px;
+			}
+
+			.status-row {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				min-width: 0;
+				padding: 8px 10px;
+				border-radius: var(--dev-wallet-radius-lg);
+				border: 1px solid var(--dev-wallet-border);
+				background: color-mix(in srgb, var(--dev-wallet-bg-1) 88%, transparent);
+			}
+
+			.status-dot {
+				width: 7px;
+				height: 7px;
+				border-radius: 999px;
+				background: var(--dev-wallet-status-connected);
+				flex-shrink: 0;
+			}
+
+			.status-dot.mute {
+				background: var(--dev-wallet-text-3);
+			}
+
+			.status-copy {
+				min-width: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 1px;
+			}
+
+			.status-copy strong {
+				font-size: 12px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+			}
+
+			.status-copy span {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10.5px;
+				color: var(--dev-wallet-text-3);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
 			.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);
+				background: var(--dev-wallet-surface);
+				border: 1px solid var(--dev-wallet-border-2);
+				box-shadow: var(--dev-wallet-shadow-drawer);
 				overflow: hidden;
 				display: flex;
 				flex-direction: column;
 				height: min(640px, calc(100vh - 48px));
+				min-height: 540px;
 			}
 
 			.card-header {
 				display: flex;
-				justify-content: space-between;
 				align-items: center;
-				padding: 16px 20px;
+				gap: 8px;
+				padding: 10px 14px;
 				border-bottom: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-1);
 			}
 
 			.card-title {
-				font-size: 17px;
+				font-size: 12.5px;
 				font-weight: var(--dev-wallet-font-weight-semibold);
 				color: var(--dev-wallet-foreground);
 			}
@@ -53,6 +205,7 @@ export class DevWalletStandalone extends LitElement {
 				display: flex;
 				align-items: center;
 				gap: 8px;
+				margin-left: auto;
 			}
 
 			.status-dot {
@@ -63,22 +216,52 @@ export class DevWalletStandalone extends LitElement {
 			}
 
 			.status-text {
-				font-size: 11px;
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10.5px;
 				color: var(--dev-wallet-muted-foreground);
 			}
 
 			.card-body {
-				padding: 16px 20px;
 				overflow-y: auto;
 				flex: 1;
+				min-height: 0;
+				background: var(--dev-wallet-bg-0);
 			}
 
 			.section {
-				margin-bottom: 16px;
+				padding: 14px;
+				border-bottom: 1px solid var(--dev-wallet-border);
 			}
 
 			.section:last-child {
-				margin-bottom: 0;
+				border-bottom: 0;
+			}
+
+			@media (max-width: 1020px) {
+				.standalone-layout {
+					grid-template-columns: minmax(0, 480px);
+					justify-content: center;
+				}
+
+				.rail {
+					display: none;
+				}
+			}
+
+			@media (max-width: 560px) {
+				:host {
+					padding: 12px;
+				}
+
+				.standalone-layout {
+					min-height: calc(100vh - 24px);
+					padding: 0;
+				}
+
+				.card {
+					height: calc(100vh - 24px);
+					min-height: 0;
+				}
 			}
 		`,
 	];
@@ -90,6 +273,12 @@ export class DevWalletStandalone extends LitElement {
 	@property({ type: String })
 	bookmarkletOrigin = '';
 
+	/** Optional pre-seeded coin metadata. Pass the generated `coins`
+	 *  constant from devstack codegen to skip per-coin RPC fetches in the
+	 *  balances list and signing modal. */
+	@property({ attribute: false })
+	coins: CoinRecord | null = null;
+
 	#ctrl = new WalletController(this);
 
 	override willUpdate(changedProperties: Map<string, unknown>) {
@@ -99,6 +288,9 @@ export class DevWalletStandalone extends LitElement {
 		if (changedProperties.has('bookmarkletOrigin')) {
 			this.#ctrl.bookmarkletOrigin = this.bookmarkletOrigin;
 		}
+		if (changedProperties.has('coins')) {
+			this.#ctrl.coins = this.coins;
+		}
 	}
 
 	override updated() {
@@ -112,21 +304,117 @@ export class DevWalletStandalone extends LitElement {
 
 	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 class="standalone-layout">
+				<aside class="rail">${this.#renderLeftRail()}</aside>
+				<div class="card" part="card">
+					<div class="card-header">
+						<span class="logo-mark">${this.#walletIcon}</span>
+						<span class="wordmark-title">
+							<span class="card-title">${this.wallet?.name ?? 'Dev Wallet'}</span>
+							<span class="version">v0.1.0</span>
+						</span>
+						<div class="header-right">
+							${this.#ctrl.renderNetworkBadge()}
+							<span class="status-dot"></span>
+							<span class="status-text">Running</span>
+						</div>
 					</div>
+					${this.#ctrl.renderTabBar()}
+					<div class="card-body">${this.#ctrl.renderTabContent()}</div>
 				</div>
-				<div class="card-body">${this.#ctrl.renderTabContent()}</div>
-				${this.#ctrl.renderTabBar()}
+				<aside class="rail">${this.#renderRightRail()}</aside>
 			</div>
 			${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}
 		`;
 	}
+
+	#renderLeftRail() {
+		const origin = this.bookmarkletOrigin || globalThis.location?.origin || 'http://localhost:5174';
+		const quickStart = `npx @mysten-incubation/dev-wallet serve\n${origin}`;
+		const clientSnippet = `createDAppKit({
+  walletInitializers: [
+    devWalletClientInitializer({
+      origin: '${origin}'
+    })
+  ]
+})`;
+		const embeddingSnippet = `createDAppKit({
+  networks: ['devnet'],
+  walletInitializers: [
+    devWalletInitializer({
+      adapters: [
+        new WebCryptoSignerAdapter()
+      ],
+      autoConnect: true,
+      mountUI: true
+    })
+  ]
+})`;
+		return html`
+			<div class="wordmark">
+				<span class="logo-mark">${this.#walletIcon}</span>
+				<span class="wordmark-title">
+					<strong>Dev Wallet</strong>
+					<span class="version">v0.1.0</span>
+				</span>
+			</div>
+			<div class="rail-section">
+				<div class="rail-title">Quick Start</div>
+				<pre class="code">${quickStart}</pre>
+			</div>
+			<div class="rail-section">
+				<div class="rail-title">Embed Wallet</div>
+				<pre class="code">${embeddingSnippet}</pre>
+			</div>
+			<div class="rail-section">
+				<div class="rail-title">Standalone Client</div>
+				<pre class="code">${clientSnippet}</pre>
+			</div>
+			<div class="rail-section">
+				<div class="rail-title">Bookmarklet Endpoint</div>
+				<pre class="code">${origin}/bookmarklet.js</pre>
+			</div>
+		`;
+	}
+
+	#renderRightRail() {
+		const activeNetwork = this.wallet?.activeNetwork ?? 'devnet';
+		const networkUrl = this.wallet?.networkUrls[activeNetwork] ?? 'client configured by dApp Kit';
+		const accountCount = this.wallet?.accounts.length ?? 0;
+		const adapterCount = this.wallet?.adapters.length ?? 0;
+		const adapterNames =
+			this.wallet?.adapters.map((adapter) => adapter.name).join(', ') ?? 'No adapters';
+		return html`
+			<div class="rail-section">
+				<div class="rail-title">Wallet Status</div>
+				<div class="status-list">
+					<div class="status-row">
+						<span class="status-dot"></span>
+						<span class="status-copy">
+							<strong>Network: ${activeNetwork}</strong>
+							<span>${networkUrl}</span>
+						</span>
+					</div>
+					<div class="status-row">
+						<span class="status-dot mute"></span>
+						<span class="status-copy">
+							<strong>${accountCount} account(s)</strong>
+							<span>${adapterCount} adapter(s): ${adapterNames}</span>
+						</span>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	get #walletIcon() {
+		return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
+			<rect x="2" y="6" width="20" height="14" rx="2.5" />
+			<path d="M2 10h20" />
+			<rect x="15" y="12" width="5" height="4" rx="1" />
+			<circle cx="17.5" cy="14" r="0.5" fill="currentColor" stroke="none" />
+		</svg>`;
+	}
 }
 
 declare global {

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

@@ -1,12 +1,83 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { sharedStyles } from './styles.js';
 
-export type TabId = 'assets' | 'objects' | 'settings';
+/** Built-in tab ids. */
+export type BuiltinTabId = 'assets' | 'objects' | 'fork' | 'settings';
+export type TabId = BuiltinTabId;
+
+interface TabSpec {
+	id: TabId;
+	label: string;
+	icon: TemplateResult;
+}
+
+const ASSETS_ICON = html`<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>`;
+
+const OBJECTS_ICON = html`<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>`;
+
+const SETTINGS_ICON = html`<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>`;
+
+// Phase 5 Subtopic 6 — fork-controls tab icon. Branching shape signals
+// the "fork" semantic without overlapping with the existing wallet
+// glyphs; rendered only when the active manifest's `meta.runtime`
+// resolves to `'forked'` (see `wallet-controller.renderTabBar`).
+const FORK_ICON = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+	<circle cx="6" cy="6" r="2" />
+	<circle cx="6" cy="18" r="2" />
+	<circle cx="18" cy="12" r="2" />
+	<path d="M6 8v8" />
+	<path d="M6 12h6" />
+	<path d="M12 12l4-2" />
+	<path d="M12 12l4 2" />
+</svg>`;
+
+const BUILTIN_TABS: TabSpec[] = [
+	{ id: 'assets', label: 'Home', icon: ASSETS_ICON },
+	{ id: 'objects', label: 'Objects', icon: OBJECTS_ICON },
+	{ id: 'settings', label: 'Settings', icon: SETTINGS_ICON },
+];
+
+/** Built-in tabs plus the fork-controls tab. Returned when the host
+ *  controller signals fork-mode availability via the `showFork` prop. */
+const TABS_WITH_FORK: TabSpec[] = [
+	{ id: 'assets', label: 'Home', icon: ASSETS_ICON },
+	{ id: 'objects', label: 'Objects', icon: OBJECTS_ICON },
+	{ id: 'fork', label: 'Fork', icon: FORK_ICON },
+	{ id: 'settings', label: 'Settings', icon: SETTINGS_ICON },
+];
 
 @customElement('dev-wallet-tab-bar')
 export class DevWalletTabBar extends LitElement {
@@ -15,39 +86,56 @@ export class DevWalletTabBar extends LitElement {
 		css`
 			:host {
 				display: block;
-				border-top: 1px solid var(--dev-wallet-border);
+				border-bottom: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
 			}
 
 			.tab-bar {
 				display: flex;
-				height: 40px;
+				align-items: stretch;
+				min-height: 38px;
+				overflow-x: auto;
+				padding: 0 6px;
 			}
 
 			.tab {
-				flex: 1;
+				position: relative;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				gap: 4px;
-				font-size: 11px;
+				gap: 6px;
+				min-width: 0;
+				height: 38px;
+				padding: 0 14px;
+				font-size: 12px;
 				font-weight: var(--dev-wallet-font-weight-medium);
-				color: var(--dev-wallet-muted-foreground);
-				transition: color 0.15s;
-				border-top: 2px solid transparent;
+				color: var(--dev-wallet-text-2);
+				transition:
+					color 120ms,
+					background 120ms;
+				border-bottom: 2px solid transparent;
+				white-space: nowrap;
 			}
 
 			.tab:hover {
 				color: var(--dev-wallet-foreground);
+				background: var(--dev-wallet-bg-hover);
 			}
 
 			.tab[aria-selected='true'] {
-				color: var(--dev-wallet-primary);
-				border-top-color: var(--dev-wallet-primary);
+				color: var(--dev-wallet-foreground);
+				border-bottom-color: var(--dev-wallet-primary);
 			}
 
 			.tab svg {
-				width: 16px;
-				height: 16px;
+				width: 13px;
+				height: 13px;
+				flex-shrink: 0;
+			}
+
+			.tab:last-child {
+				margin-left: auto;
+				padding: 0 10px;
 			}
 		`,
 	];
@@ -55,67 +143,40 @@ export class DevWalletTabBar extends LitElement {
 	@property({ type: String })
 	active: TabId = 'assets';
 
+	/** Phase 5 Subtopic 6 — when true, the bar surfaces a "Fork" tab
+	 *  between Objects and Settings. The host controller toggles this
+	 *  on whenever the active stack's manifest reports
+	 *  `meta.runtime === 'forked'`. Off by default so bundled-mode
+	 *  apps don't accidentally expose admin RPCs. */
+	@property({ type: Boolean, attribute: 'show-fork' })
+	showFork = false;
+
 	override render() {
+		const tabs: TabSpec[] = this.showFork ? TABS_WITH_FORK : BUILTIN_TABS;
 		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>
+				${tabs.map(
+					(tab) => html`
+						<button
+							class="tab"
+							part="tab"
+							role="tab"
+							aria-selected=${this.active === tab.id}
+							tabindex=${this.active === tab.id ? 0 : -1}
+							@click=${() => this.#select(tab.id)}
+							@keydown=${(e: KeyboardEvent) => this.#handleKeydown(e, tabs)}
+						>
+							${tab.icon} ${tab.label}
+						</button>
+					`,
+				)}
 			</nav>
 		`;
 	}
 
-	#handleKeydown(e: KeyboardEvent) {
-		const tabs: TabId[] = ['assets', 'objects', 'settings'];
-		const currentIndex = tabs.indexOf(this.active);
+	#handleKeydown(e: KeyboardEvent, tabs: TabSpec[]): void {
+		const currentIndex = tabs.findIndex((t) => t.id === this.active);
 		let newIndex = -1;
-
 		if (e.key === 'ArrowRight') {
 			e.preventDefault();
 			newIndex = (currentIndex + 1) % tabs.length;
@@ -123,15 +184,16 @@ export class DevWalletTabBar extends LitElement {
 			e.preventDefault();
 			newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
 		}
-
 		if (newIndex !== -1) {
-			this.#select(tabs[newIndex]);
+			const next = tabs[newIndex];
+			if (next === undefined) return;
+			this.#select(next.id);
 			const buttons = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.tab');
 			buttons?.[newIndex]?.focus();
 		}
 	}
 
-	#select(tab: TabId) {
+	#select(tab: TabId): void {
 		if (tab !== this.active) {
 			this.dispatchEvent(
 				new CustomEvent('tab-changed', {

package/src/ui/index.ts

@@ -22,5 +22,8 @@ export { DevWalletDropdown } from './dev-wallet-dropdown.js';
 export { DevWalletNetworkBadge } from './dev-wallet-network-badge.js';
 /** @internal — not intended for direct use by consumers */
 export { DevWalletTabBar } from './dev-wallet-tab-bar.js';
+/** Phase 5 Subtopic 6 — fork-controls panel. Surfaced so apps that
+ *  build their own panel layout can mount it standalone. */
+export { DevWalletForkPanel } from './dev-wallet-fork-panel.js';
 
 export { mountDevWallet } from './mount.js';