@mysten-incubation/dev-wallet 0.0.1 → 0.3.0

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

@@ -7,8 +7,28 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import type { SignerAdapter } from '../types.js';
 import { CopyController } from './copy-controller.js';
-import { actionButtonStyles, sectionHeaderStyles, sharedStyles } from './styles.js';
-import { emitEvent, findAdapterForAddress, formatAddress, getErrorMessage } from './utils.js';
+import {
+	actionButtonStyles,
+	avatarStyles,
+	badgeStyles,
+	cardItemStyles,
+	copyableTextStyles,
+	dialogStyles,
+	formInputStyles,
+	iconButtonStyles,
+	inlineErrorStyles,
+	listContainerStyles,
+	monoTruncateStyles,
+	sectionHeaderStyles,
+	sharedStyles,
+} from './styles.js';
+import {
+	emitEvent,
+	findAdapterForAddress,
+	formatAddress,
+	getErrorMessage,
+	isForkNetwork,
+} from './utils.js';
 import './dev-wallet-new-account.js';
 
 @customElement('dev-wallet-accounts')
@@ -17,11 +37,17 @@ export class DevWalletAccounts extends LitElement {
 		sharedStyles,
 		sectionHeaderStyles,
 		actionButtonStyles,
+		cardItemStyles,
+		listContainerStyles,
+		copyableTextStyles,
+		monoTruncateStyles,
+		iconButtonStyles,
+		inlineErrorStyles,
+		badgeStyles,
+		avatarStyles,
+		dialogStyles,
+		formInputStyles,
 		css`
-			:host {
-				display: block;
-			}
-
 			.accounts-header {
 				display: flex;
 				justify-content: space-between;
@@ -34,30 +60,22 @@ export class DevWalletAccounts extends LitElement {
 			}
 
 			.add-btn {
+				height: 26px;
 				font-size: 12px;
 				color: var(--dev-wallet-primary);
-				padding: 4px 8px;
-				border-radius: var(--dev-wallet-radius-sm);
+				padding: 0 8px;
+				border-radius: var(--dev-wallet-radius);
+				border: 1px solid var(--dev-wallet-border);
 			}
 
 			.add-btn:hover {
-				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
-			}
-
-			.account-list {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
+				background: var(--dev-wallet-accent-fade);
+				border-color: var(--dev-wallet-border-strong);
 			}
 
 			.account-item {
-				display: flex;
-				align-items: center;
 				gap: 10px;
-				padding: 10px 12px;
-				border-radius: var(--dev-wallet-radius-sm);
-				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-secondary);
+				padding: 9px 10px;
 				width: 100%;
 				text-align: left;
 			}
@@ -67,22 +85,13 @@ export class DevWalletAccounts extends LitElement {
 			}
 
 			.account-item.active {
-				border-color: var(--dev-wallet-primary);
-				background: color-mix(in oklab, var(--dev-wallet-primary) 10%, var(--dev-wallet-secondary));
+				background: var(--dev-wallet-accent-fade);
 			}
 
 			.account-avatar {
 				width: 32px;
 				height: 32px;
-				border-radius: 50%;
-				background: var(--dev-wallet-primary);
-				display: flex;
-				align-items: center;
-				justify-content: center;
 				font-size: 14px;
-				font-weight: var(--dev-wallet-font-weight-semibold);
-				color: var(--dev-wallet-primary-foreground);
-				flex-shrink: 0;
 			}
 
 			.account-info {
@@ -93,28 +102,11 @@ export class DevWalletAccounts extends LitElement {
 			.account-label {
 				font-size: 14px;
 				font-weight: var(--dev-wallet-font-weight-medium);
-				color: var(--dev-wallet-foreground);
 			}
 
 			.account-address {
 				font-size: 12px;
-				color: var(--dev-wallet-muted-foreground);
-				font-family: var(--dev-wallet-font-mono);
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				cursor: pointer;
-				border-radius: var(--dev-wallet-radius-2xs);
 				padding: 1px 2px;
-				transition: background 0.15s;
-			}
-
-			.account-address:hover {
-				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
-			}
-
-			.account-address.copied {
-				color: var(--dev-wallet-positive);
 			}
 
 			.account-label-row {
@@ -123,26 +115,28 @@ export class DevWalletAccounts extends LitElement {
 				gap: 4px;
 			}
 
-			.edit-label-btn {
+			.edit-label-btn,
+			.delete-btn {
 				width: 18px;
 				height: 18px;
-				display: inline-flex;
-				align-items: center;
-				justify-content: center;
 				border-radius: var(--dev-wallet-radius-2xs);
 				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
 				opacity: 0;
 				transition: opacity 0.15s;
 			}
 
-			.account-item:hover .edit-label-btn {
+			.delete-btn {
+				flex-shrink: 0;
+			}
+
+			.account-item:hover .edit-label-btn,
+			.account-item:hover .delete-btn {
 				opacity: 1;
 			}
 
-			.edit-label-btn:hover {
-				background: var(--dev-wallet-border);
-				color: var(--dev-wallet-foreground);
+			.delete-btn:hover {
+				background: color-mix(in oklab, var(--dev-wallet-destructive) 20%, transparent);
+				color: var(--dev-wallet-destructive);
 			}
 
 			.edit-label-input {
@@ -150,75 +144,23 @@ export class DevWalletAccounts extends LitElement {
 				border-radius: var(--dev-wallet-radius-2xs);
 				border: 1px solid var(--dev-wallet-primary);
 				background: var(--dev-wallet-background);
-				color: var(--dev-wallet-foreground);
 				font-size: 13px;
-				font-family: inherit;
-				outline: none;
-				width: 100%;
 			}
 
 			.account-badge {
-				font-size: 10px;
-				padding: 1px 6px;
-				border-radius: var(--dev-wallet-radius-xs);
-				background: var(--dev-wallet-secondary);
-				border: 1px solid var(--dev-wallet-border);
-				color: var(--dev-wallet-muted-foreground);
-				font-weight: var(--dev-wallet-font-weight-medium);
-				text-transform: uppercase;
-				letter-spacing: 0.3px;
-				white-space: nowrap;
-			}
-
-			.delete-btn {
-				width: 18px;
-				height: 18px;
+				height: 16px;
 				display: inline-flex;
 				align-items: center;
-				justify-content: center;
-				border-radius: var(--dev-wallet-radius-2xs);
-				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
-				opacity: 0;
-				transition: opacity 0.15s;
-				flex-shrink: 0;
-			}
-
-			.account-item:hover .delete-btn {
-				opacity: 1;
-			}
-
-			.delete-btn:hover {
-				background: color-mix(in oklab, var(--dev-wallet-destructive) 20%, transparent);
-				color: var(--dev-wallet-destructive);
-			}
-
-			.confirm-dialog:not([open]) {
-				display: none;
+				padding: 0 5px;
+				border-radius: 999px;
+				background: var(--dev-wallet-bg-3);
+				border: 1px solid var(--dev-wallet-border);
+				color: var(--dev-wallet-text-3);
 			}
 
 			.confirm-dialog {
 				width: 300px;
-				max-width: calc(100vw - 32px);
-				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);
 				padding: 20px;
-				display: flex;
-				flex-direction: column;
-				color: inherit;
-			}
-
-			.confirm-dialog::backdrop {
-				background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
-			}
-
-			.confirm-title {
-				font-size: 16px;
-				font-weight: var(--dev-wallet-font-weight-semibold);
-				color: var(--dev-wallet-foreground);
-				margin-bottom: 12px;
 			}
 
 			.confirm-body {
@@ -230,8 +172,8 @@ export class DevWalletAccounts extends LitElement {
 
 			.confirm-account {
 				padding: 8px 10px;
-				border-radius: var(--dev-wallet-radius-sm);
-				background: var(--dev-wallet-secondary);
+				border-radius: var(--dev-wallet-radius-lg);
+				background: var(--dev-wallet-bg-2);
 				border: 1px solid var(--dev-wallet-border);
 				margin-bottom: 16px;
 			}
@@ -244,8 +186,6 @@ export class DevWalletAccounts extends LitElement {
 
 			.confirm-account-address {
 				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
-				font-family: var(--dev-wallet-font-mono);
 			}
 
 			.confirm-actions {
@@ -254,8 +194,6 @@ export class DevWalletAccounts extends LitElement {
 			}
 
 			.confirm-error {
-				color: var(--dev-wallet-destructive);
-				font-size: 12px;
 				margin-bottom: 8px;
 			}
 
@@ -277,6 +215,14 @@ export class DevWalletAccounts extends LitElement {
 	@property({ type: String })
 	activeAddress = '';
 
+	/** Phase 4 P4.20 — when set to a `*-fork` literal, the panel
+	 *  surfaces a warning on the "+ Add" button (or hides it outright
+	 *  when no fork-compatible funding path exists). Fork stacks have
+	 *  no faucet; arbitrary fresh accounts can't be funded without an
+	 *  impersonation seed already configured at the supervisor level. */
+	@property({ type: String })
+	network = '';
+
 	@state()
 	private _dialogOpen = false;
 
@@ -307,12 +253,29 @@ export class DevWalletAccounts extends LitElement {
 					a.listAvailableAccounts),
 		);
 
+		// Phase 4 P4.20 — fork-mode networks have no faucet, and the
+		// supervisor's impersonation seed set is fixed at apply time.
+		// We can't fund a fresh account from the browser side, so the
+		// "+ Add" button either renders disabled with a tooltip
+		// (canAdd still true because the adapter contract supports
+		// account creation) or — pragmatically — stays clickable but
+		// surfaces a warning marker on the button.
+		const fork = this.network !== '' && isForkNetwork(this.network);
+
 		return html`
 			<div class="accounts-header">
 				<h3 class="section-header">Accounts</h3>
 				${canAdd
-					? html`<button class="add-btn" part="add-button" @click=${this.#openDialog}>
-							+ Add
+					? html`<button
+							class="add-btn"
+							part="add-button"
+							?disabled=${fork}
+							title=${fork
+								? `Disabled on ${this.network}: fork networks have no faucet — fund seed addresses via Sui({fork:{seed:{addresses}}}) instead.`
+								: ''}
+							@click=${this.#openDialog}
+						>
+							+ Add${fork ? ' (fork: no faucet)' : ''}
 						</button>`
 					: nothing}
 			</div>
@@ -539,7 +502,7 @@ export class DevWalletAccounts extends LitElement {
 					this.#cancelDelete();
 				}}
 			>
-				<div class="confirm-title">Remove Account</div>
+				<div class="dialog-title">Remove Account</div>
 				<div class="confirm-body">
 					${imported
 						? 'This will remove the imported account from your wallet. You can re-import it later.'

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

@@ -6,7 +6,15 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { sectionHeaderStyles, sharedStyles, stateStyles } from './styles.js';
-import { formatCoinBalance, getCoinSymbol } from './utils.js';
+import type { CoinManifestEntry, CoinRecord } from './utils.js';
+import {
+	formatAddress,
+	formatCoinBalance,
+	getCoinSymbol,
+	indexCoinsByType,
+	isSuiCoinType,
+	lookupCoinByType,
+} from './utils.js';
 
 interface CoinBalance {
 	coinType: string;
@@ -29,29 +37,176 @@ export class DevWalletBalances extends LitElement {
 			.balance-list {
 				display: flex;
 				flex-direction: column;
-				gap: 4px;
+				gap: 2px;
 			}
 
 			.balance-item {
 				display: flex;
-				justify-content: space-between;
 				align-items: center;
-				padding: 10px 12px;
-				border-radius: var(--dev-wallet-radius-sm);
-				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-secondary);
+				gap: 10px;
+				padding: 8px 2px;
+				border-radius: var(--dev-wallet-radius);
+				background: transparent;
+				transition: background 120ms;
+			}
+
+			.balance-item:hover {
+				background: var(--dev-wallet-bg-hover);
+			}
+
+			.balance-main {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.token-icon {
+				width: 28px;
+				height: 28px;
+				border-radius: 50%;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				background: linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));
+				color: #fff;
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
 			}
 
 			.balance-symbol {
-				font-size: 14px;
+				font-size: 12px;
 				font-weight: var(--dev-wallet-font-weight-medium);
 				color: var(--dev-wallet-foreground);
 			}
 
-			.balance-amount {
-				font-size: 14px;
+			.balance-name {
+				font-size: 11px;
+				color: var(--dev-wallet-text-3);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.balance-amount-stack {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				gap: 1px;
+				font-size: 12px;
 				color: var(--dev-wallet-foreground);
 				font-family: var(--dev-wallet-font-mono);
+				font-variant-numeric: tabular-nums;
+			}
+
+			.balance-amount-symbol {
+				font-size: 10.5px;
+				color: var(--dev-wallet-text-3);
+			}
+
+			.coins-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 8px;
+			}
+
+			.coins-header .section-header {
+				margin-bottom: 0;
+			}
+
+			.manage-btn,
+			.action-btn {
+				height: 30px;
+				padding: 0 10px;
+				border-radius: var(--dev-wallet-radius);
+				border: 1px solid var(--dev-wallet-border);
+				background: transparent;
+				color: var(--dev-wallet-text-2);
+				font-size: 12px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+			}
+
+			.manage-btn:hover,
+			.action-btn:hover:not(:disabled) {
+				background: var(--dev-wallet-bg-hover);
+				border-color: var(--dev-wallet-border-strong);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.manage-btn:disabled {
+				opacity: 0.48;
+				cursor: not-allowed;
+			}
+
+			.balance-hero {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 12px;
+				margin-bottom: 18px;
+				padding: 16px;
+				border: 1px solid var(--dev-wallet-border);
+				border-radius: var(--dev-wallet-radius-lg);
+				background:
+					radial-gradient(
+						circle at 20% 0%,
+						color-mix(in srgb, var(--dev-wallet-primary) 18%, transparent),
+						transparent 42%
+					),
+					var(--dev-wallet-surface);
+			}
+
+			.hero-copy {
+				min-width: 0;
+			}
+
+			.hero-balance {
+				display: flex;
+				align-items: baseline;
+				gap: 8px;
+			}
+
+			.hero-value {
+				font-size: 30px;
+				line-height: 1;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				font-variant-numeric: tabular-nums;
+				letter-spacing: 0;
+			}
+
+			.hero-unit {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 13px;
+				color: var(--dev-wallet-text-2);
+			}
+
+			.hero-note {
+				margin-top: 6px;
+				font-size: 12px;
+				color: var(--dev-wallet-text-3);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.empty-wallet {
+				text-align: left;
+				padding: 16px;
+			}
+
+			.empty-title {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.empty-copy {
+				margin-top: 6px;
+				font-size: 12px;
+				line-height: 1.45;
+				color: var(--dev-wallet-text-2);
 			}
 		`,
 	];
@@ -62,6 +217,16 @@ export class DevWalletBalances extends LitElement {
 	@property({ attribute: false })
 	client: ClientWithCoreApi | null = null;
 
+	@property({ type: String })
+	network = '';
+
+	/** Optional pre-seeded coin metadata — pass the generated `coins`
+	 *  constant from devstack codegen (`src/generated/coins.ts`) to skip
+	 *  per-coin `getCoinMetadata` RPC waterfalls on UI load. Unknown coin
+	 *  types fall through to an RPC fetch as before. */
+	@property({ attribute: false })
+	coins: CoinRecord | null = null;
+
 	@state()
 	private _balances: CoinBalance[] = [];
 
@@ -74,6 +239,8 @@ export class DevWalletBalances extends LitElement {
 	#lastFetchedAddress = '';
 	#lastFetchedClient: ClientWithCoreApi | null = null;
 	#fetchGeneration = 0;
+	#coinIndex: ReadonlyMap<string, CoinManifestEntry> = new Map();
+	#lastCoinsRef: CoinRecord | null = null;
 
 	/** Re-fetch balances for the current address/client. */
 	refresh() {
@@ -83,6 +250,10 @@ export class DevWalletBalances extends LitElement {
 	}
 
 	override willUpdate(changedProperties: Map<string, unknown>) {
+		if (changedProperties.has('coins') && this.coins !== this.#lastCoinsRef) {
+			this.#coinIndex = indexCoinsByType(this.coins);
+			this.#lastCoinsRef = this.coins;
+		}
 		if (
 			(changedProperties.has('address') || changedProperties.has('client')) &&
 			this.address &&
@@ -98,8 +269,29 @@ export class DevWalletBalances extends LitElement {
 			return nothing;
 		}
 
+		const suiBalance = this._balances.find(
+			(balance) => isSuiCoinType(balance.coinType) || balance.symbol === 'SUI',
+		);
+		const formattedSui = suiBalance
+			? formatCoinBalance(suiBalance.totalBalance, suiBalance.decimals)
+			: '0.0000';
+		const networkLabel = this.network || 'active network';
+
 		return html`
-			<h3 class="section-header">Balances</h3>
+			<div class="balance-hero">
+				<div class="hero-copy">
+					<div class="hero-balance">
+						<span class="hero-value">${formattedSui}</span>
+						<span class="hero-unit">SUI</span>
+					</div>
+					<div class="hero-note">${formatAddress(this.address)} · ${networkLabel}</div>
+				</div>
+				<button class="action-btn" @click=${this.refresh}>Refresh</button>
+			</div>
+			<div class="coins-header">
+				<h3 class="section-header">Coins · ${this._balances.length}</h3>
+				<button class="manage-btn" disabled>Manage</button>
+			</div>
 			${this._loading
 				? html`<div class="loading" part="loading" aria-live="polite">Loading...</div>`
 				: this._error
@@ -107,19 +299,34 @@ export class DevWalletBalances extends LitElement {
 							${this._error}
 						</div>`
 					: this._balances.length === 0
-						? html`<div class="empty-state" part="empty-state">No balances</div>`
+						? html`<div class="empty-state empty-wallet" part="empty-state">
+								<div class="empty-title">No balances on ${networkLabel}</div>
+								<div class="empty-copy">
+									Fund ${formatAddress(this.address)} from your local faucet or devstack seed, then
+									refresh balances here.
+								</div>
+							</div>`
 						: html`
 								<div class="balance-list" part="balance-list">
-									${this._balances.map(
-										(balance) => html`
+									${this._balances.map((balance) => {
+										const seed = lookupCoinByType(this.#coinIndex, balance.coinType);
+										const name = seed?.displayName ?? balance.symbol;
+										return html`
 											<div class="balance-item">
-												<span class="balance-symbol">${balance.symbol}</span>
-												<span class="balance-amount"
-													>${formatCoinBalance(balance.totalBalance, balance.decimals)}</span
-												>
+												<span class="token-icon">${balance.symbol.slice(0, 3)}</span>
+												<span class="balance-main">
+													<div class="balance-symbol">${balance.symbol}</div>
+													<div class="balance-name">${name}</div>
+												</span>
+												<span class="balance-amount-stack">
+													<span class="balance-amount">
+														${formatCoinBalance(balance.totalBalance, balance.decimals)}
+													</span>
+													<span class="balance-amount-symbol">${balance.symbol}</span>
+												</span>
 											</div>
-										`,
-									)}
+										`;
+									})}
 								</div>
 							`}
 		`;
@@ -137,21 +344,35 @@ export class DevWalletBalances extends LitElement {
 
 			if (generation !== this.#fetchGeneration) return;
 
+			// Pre-seed metadata from the generated `coins` record. Each
+			// balance with a known coinType skips the per-coin RPC entirely;
+			// only the (typically empty) remainder hits the network.
+			const preseeded = balances.map((b) => lookupCoinByType(this.#coinIndex, b.coinType));
 			const metadataResults = await Promise.all(
-				balances.map((b) =>
-					this.client!.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null),
-				),
+				balances.map((b, i) => {
+					if (preseeded[i] !== undefined) return null;
+					return this.client!.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null);
+				}),
 			);
 
 			if (generation !== this.#fetchGeneration) return;
-			this._balances = balances.map(
-				(b, i): CoinBalance => ({
+			this._balances = balances.map((b, i): CoinBalance => {
+				const seed = preseeded[i];
+				if (seed !== undefined) {
+					return {
+						coinType: b.coinType,
+						symbol: seed.symbol ?? getCoinSymbol(b.coinType),
+						totalBalance: b.balance,
+						decimals: seed.decimals,
+					};
+				}
+				return {
 					coinType: b.coinType,
 					symbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),
 					totalBalance: b.balance,
 					decimals: metadataResults[i]?.coinMetadata?.decimals ?? 0,
-				}),
-			);
+				};
+			});
 		} catch {
 			if (generation !== this.#fetchGeneration) return;
 			this._error = 'Failed to load balances';