@mysten-incubation/dev-wallet 0.0.0 → 0.2.0

package/src/ui/utils.ts

@@ -31,6 +31,59 @@ export function getCoinSymbol(coinType: string): string {
 	}
 }
 
+/**
+ * Subset of the generated `coins.ts` entry shape that the UI needs for
+ * formatting and labelling. Matches the manifest `CoinEntry` shape emitted
+ * by `StackHandleEmitter` (`coins.ts`) so consumers can pass the generated
+ * `coins` record directly. Kept structurally-typed (no devstack import —
+ * dev-wallet must not depend on the devstack package).
+ */
+export interface CoinManifestEntry {
+	readonly type: string;
+	readonly decimals: number;
+	readonly symbol?: string;
+	readonly displayName?: string;
+	readonly iconUrl?: string;
+}
+
+/** A record keyed by coin name (e.g. `'mUSDC'`) mapping to entry metadata.
+ *  Pass the generated `coins` constant — `<DevWalletPanel coins={coins} />`
+ *  — to pre-seed UI metadata and skip per-coin RPC fetches on UI load. */
+export type CoinRecord = Readonly<Record<string, CoinManifestEntry>>;
+
+/** Build a fast `coinType → entry` lookup from the name-keyed generated
+ *  record. Normalizes coin-type strings so callers can hit it with either
+ *  the short (`0x2::sui::SUI`) or fully-padded form. */
+export function indexCoinsByType(
+	coins: CoinRecord | null | undefined,
+): ReadonlyMap<string, CoinManifestEntry> {
+	const map = new Map<string, CoinManifestEntry>();
+	if (!coins) return map;
+	for (const entry of Object.values(coins)) {
+		try {
+			map.set(normalizeStructTag(entry.type), entry);
+		} catch {
+			map.set(entry.type, entry);
+		}
+	}
+	return map;
+}
+
+/** Look up a coin's metadata by its on-chain type string. Both the input
+ *  `coinType` and the index entries are matched on their normalized form
+ *  so callers don't have to canonicalize. Returns `undefined` for unknown
+ *  coins — the caller decides whether to fall back to an RPC fetch. */
+export function lookupCoinByType(
+	index: ReadonlyMap<string, CoinManifestEntry>,
+	coinType: string,
+): CoinManifestEntry | undefined {
+	try {
+		return index.get(normalizeStructTag(coinType));
+	} catch {
+		return index.get(coinType);
+	}
+}
+
 /** Check if a type string is a Coin wrapper (0x2::coin::Coin<...>) */
 export function isCoinType(type: string): boolean {
 	try {
@@ -63,8 +116,21 @@ export const NETWORK_COLORS: Record<string, string> = {
 	testnet: '#22c55e',
 	devnet: '#3b82f6',
 	localnet: '#6b7280',
+	// Fork variants render an amber stripe so the operator can't mistake
+	// a forked stack for the real upstream at a glance. Same hue family
+	// as the mainnet orange but pushed warmer/yellower for contrast.
+	'mainnet-fork': '#eab308',
+	'testnet-fork': '#eab308',
+	'devnet-fork': '#eab308',
 };
 
+/** Returns true when the network literal names a fork-mode runtime.
+ *  Used by the badge + accounts panel + signing modal to surface the
+ *  "no real chain" caveat — Phase 4 P4.17-P4.20. */
+export function isForkNetwork(network: string): boolean {
+	return network.endsWith('-fork');
+}
+
 export interface PairableAdapter {
 	readonly isPaired: boolean;
 }

package/src/ui/wallet-controller.ts

@@ -6,6 +6,7 @@ import type { ReadonlyWalletAccount } from '@mysten/wallet-standard';
 import { html, nothing } from 'lit';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
+import type { ForkRelay } from '../adapters/fork-relay.js';
 import { getNetworkFromChain } from '../wallet/constants.js';
 import type {
 	DevWallet,
@@ -15,12 +16,15 @@ import type {
 import './dev-wallet-account-selector.js';
 import './dev-wallet-balances.js';
 import './dev-wallet-connect.js';
+import './dev-wallet-fork-panel.js';
 import './dev-wallet-network-badge.js';
 import './dev-wallet-objects.js';
 import './dev-wallet-settings.js';
 import './dev-wallet-signing-modal.js';
 import type { TabId } from './dev-wallet-tab-bar.js';
 import './dev-wallet-tab-bar.js';
+import type { CoinRecord } from './utils.js';
+import { isForkNetwork } from './utils.js';
 
 /**
  * Lit Reactive Controller that encapsulates all shared wallet management logic
@@ -38,6 +42,20 @@ export class WalletController implements ReactiveController {
 	pendingRequest: PendingSigningRequest | null = null;
 	pendingConnect: PendingConnectRequest | null = null;
 	bookmarkletOrigin = '';
+	/** Pre-seeded coin metadata (typically the generated `coins` constant from
+	 *  devstack codegen). Forwarded to `<dev-wallet-balances>` and the
+	 *  signing modal so they can skip per-coin RPC waterfalls. */
+	coins: CoinRecord | null = null;
+	/** Phase 5 Subtopic 6 — when set, the controller surfaces a Fork
+	 *  tab and binds it to this relay. The hosting custom element
+	 *  (`dev-wallet-panel`) constructs the relay from the manifest's
+	 *  wallet endpoint and pipes it through as a property. */
+	forkRelay: ForkRelay | null = null;
+	/** Upstream label (`'mainnet'`, etc.) sourced from the manifest. Used
+	 *  by the fork panel banner and by `renderTabBar` to decide whether
+	 *  to render the Fork tab. Falls back to inferring from the active
+	 *  network literal (`'*-fork'`) when not provided. */
+	forkUpstream = '';
 
 	#wallet: DevWallet | null = null;
 	#unsubscribeEvents: (() => void) | null = null;
@@ -210,6 +228,8 @@ export class WalletController implements ReactiveController {
 								exportparts="balance-list, loading: balances-loading, error-message: balances-error-message, empty-state: balances-empty-state"
 								.address=${this.activeAddress}
 								.client=${this.getActiveClient()}
+								.network=${this.#wallet.activeNetwork}
+								.coins=${this.coins}
 							></dev-wallet-balances>
 						</div>
 					`
@@ -220,11 +240,17 @@ export class WalletController implements ReactiveController {
 	renderObjectsTab() {
 		return html`
 			${this.renderAccountSelector()}
-			<dev-wallet-objects
-				exportparts="object-list, loading: objects-loading, error-message: objects-error-message, empty-state: objects-empty-state, load-more-button"
-				.address=${this.activeAddress}
-				.client=${this.getActiveClient()}
-			></dev-wallet-objects>
+			${this.activeAddress && this.#wallet
+				? html`
+						<div class="section">
+							<dev-wallet-objects
+								exportparts="object-list, loading: objects-loading, error-message: objects-error-message, empty-state: objects-empty-state, load-more-button"
+								.address=${this.activeAddress}
+								.client=${this.getActiveClient()}
+							></dev-wallet-objects>
+						</div>
+					`
+				: nothing}
 		`;
 	}
 
@@ -242,13 +268,61 @@ export class WalletController implements ReactiveController {
 		`;
 	}
 
+	renderForkTab() {
+		// Defence-in-depth: the tab itself is hidden unless `#isForkMode`
+		// returns true, but render-time we re-check so direct
+		// `activeTab = 'fork'` writes don't end up rendering the panel
+		// against a bundled-mode stack.
+		if (!this.#isForkMode()) return nothing;
+		return html`
+			<dev-wallet-fork-panel
+				exportparts="
+					fork-banner,
+					status-grid,
+					status-checkpoint,
+					status-clock,
+					status-clock-iso,
+					status-auto-tick,
+					status-loading,
+					status-error,
+					status-empty,
+					advance-clock-input,
+					advance-clock-button,
+					advance-checkpoint-input,
+					advance-checkpoint-button,
+					action-error,
+					slot-list,
+					slot-item,
+					slot-item-active,
+					slot-toggle,
+					slots-empty,
+					slots-error,
+					empty-state
+				"
+				.relay=${this.forkRelay}
+				.upstream=${this.#resolveUpstreamLabel()}
+				@fork-impersonation-changed=${(e: CustomEvent) => this.handleForkImpersonationChanged(e)}
+			></dev-wallet-fork-panel>
+		`;
+	}
+
 	renderTabContent() {
 		if (this.activeTab === 'assets') return this.renderAssetsTab();
 		if (this.activeTab === 'objects') return this.renderObjectsTab();
+		if (this.activeTab === 'fork') return this.renderForkTab();
 		if (this.activeTab === 'settings') return this.renderSettingsTab();
 		return nothing;
 	}
 
+	handleForkImpersonationChanged(_e: CustomEvent): void {
+		// Slot changes can affect the impersonation banner in the signing
+		// modal (Phase 4 P4.19), so request a re-render. The actual flag
+		// flip happens in the signing-modal's own derivation from
+		// `account.source`, which the devstack adapter updates when the
+		// server-side toggle resolves.
+		this.host.requestUpdate();
+	}
+
 	renderSigningModal() {
 		if (!this.pendingRequest) return nothing;
 
@@ -257,6 +331,7 @@ export class WalletController implements ReactiveController {
 				exportparts="signing-approve-button, signing-reject-button, signing-request-type, signing-empty-state, signing-error-message, signing-footer, dialog: signing-dialog"
 				.request=${this.pendingRequest}
 				.client=${this.getActiveClient()}
+				.coins=${this.coins}
 				.walletName=${this.#wallet?.name ?? 'Dev Wallet'}
 				@approve=${() => this.handleApprove()}
 				@reject=${() => this.handleReject()}
@@ -309,11 +384,34 @@ export class WalletController implements ReactiveController {
 			<dev-wallet-tab-bar
 				exportparts="tab-bar, tab"
 				.active=${this.activeTab}
+				.showFork=${this.#isForkMode()}
 				@tab-changed=${(e: CustomEvent) => this.handleTabChanged(e)}
 			></dev-wallet-tab-bar>
 		`;
 	}
 
+	/** Phase 5 Subtopic 6 (P5.8.5) — the Fork tab + panel render only
+	 *  when the active stack is in fork mode. Two signals satisfy that:
+	 *    1. The host passed in a `ForkRelay` (built from the manifest's
+	 *       wallet endpoint — devstack only constructs one when
+	 *       `meta.runtime === 'forked'`).
+	 *    2. The active network literal ends in `-fork` (catch-all for
+	 *       when the relay is wired but the user switched to a
+	 *       non-fork network from the badge dropdown).
+	 *  Both signals must agree — otherwise the tab is hidden. */
+	#isForkMode(): boolean {
+		if (this.forkRelay === null) return false;
+		const active = this.#wallet?.activeNetwork;
+		if (!active) return false;
+		return isForkNetwork(active);
+	}
+
+	#resolveUpstreamLabel(): string {
+		if (this.forkUpstream !== '') return this.forkUpstream;
+		const active = this.#wallet?.activeNetwork ?? '';
+		return active.endsWith('-fork') ? active.replace(/-fork$/, '') : '';
+	}
+
 	// ── Subscriptions ───────────────────────────────────────────────────────
 
 	#subscribe(): void {

package/src/wallet/initializer.ts

@@ -4,6 +4,7 @@
 import type { ClientWithCoreApi } from '@mysten/sui/client';
 import type { WalletIcon } from '@mysten/wallet-standard';
 
+import type { DevWalletDockStyle } from '../ui/dev-wallet-panel.js';
 import type { SignerAdapter } from '../types.js';
 import { DevWallet, type AutoApprovePolicy } from './dev-wallet.js';
 
@@ -24,6 +25,8 @@ export interface DevWalletInitializerConfig {
 	createInitialAccount?: boolean;
 	/** Mount the floating wallet drawer UI. Defaults to false. */
 	mountUI?: boolean;
+	/** Floating dock presentation when `mountUI` is true. Defaults to `corner-pill`. */
+	dockStyle?: DevWalletDockStyle;
 	/** Container element for the UI drawer. Defaults to document.body. */
 	container?: HTMLElement;
 	/** Called with the DevWallet instance after creation. */
@@ -108,7 +111,10 @@ export function devWalletInitializer(config: DevWalletInitializerConfig): {
 			let unmountUI: (() => void) | undefined;
 			if (mountUI && typeof document !== 'undefined') {
 				const { mountDevWallet } = await import('../ui/mount.js');
-				unmountUI = mountDevWallet(wallet, { container: config.container });
+				unmountUI = mountDevWallet(wallet, {
+					container: config.container,
+					dockStyle: config.dockStyle,
+				});
 			}
 
 			const unregister = wallet.register();