@mysten-incubation/dev-wallet 0.0.1 → 0.2.0

package/src/ui/dev-wallet-network-badge.ts

@@ -5,7 +5,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { dropdownItemStyles, sharedStyles } from './styles.js';
-import { NETWORK_COLORS } from './utils.js';
+import { isForkNetwork, NETWORK_COLORS } from './utils.js';
 import './dev-wallet-dropdown.js';
 
 @customElement('dev-wallet-network-badge')
@@ -21,19 +21,50 @@ export class DevWalletNetworkBadge extends LitElement {
 			.badge {
 				display: flex;
 				align-items: center;
-				gap: 4px;
-				padding: 3px 8px;
+				gap: 6px;
+				height: 26px;
+				padding: 0 8px;
 				border-radius: 999px;
-				font-size: 11px;
+				border: 1px solid var(--dev-wallet-border);
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10.5px;
 				font-weight: var(--dev-wallet-font-weight-medium);
-				color: var(--dev-wallet-foreground);
-				background: var(--dev-wallet-secondary);
+				color: var(--dev-wallet-text-2);
+				background: var(--dev-wallet-bg-3);
 				cursor: pointer;
-				transition: background 0.15s;
+				transition:
+					background 120ms,
+					border-color 120ms,
+					color 120ms;
+			}
+
+			/* Phase 4 P4.17 — amber stripe + fork label when the
+			   active network is a *-fork variant. The stripe is
+			   diagonal-hatched so it survives dark + light themes
+			   without depending on a separate badge background. */
+			.badge.fork {
+				background-image: repeating-linear-gradient(
+					45deg,
+					rgba(234, 179, 8, 0.18),
+					rgba(234, 179, 8, 0.18) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+
+			.fork-tag {
+				color: #92400e;
+				font-weight: var(--dev-wallet-font-weight-bold);
+				font-size: 10px;
+				margin-left: 4px;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
 			}
 
 			.badge:hover {
-				background: var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-4);
+				border-color: var(--dev-wallet-border-strong);
+				color: var(--dev-wallet-foreground);
 			}
 
 			.dot {
@@ -65,19 +96,27 @@ export class DevWalletNetworkBadge extends LitElement {
 
 	override render() {
 		const color = NETWORK_COLORS[this.active] ?? NETWORK_COLORS['localnet'];
+		const fork = isForkNetwork(this.active);
+		// Phase 4 P4.17 — when `meta.runtime: 'forked'` flows through
+		// (codegen emits the network literal as e.g. `'mainnet-fork'`),
+		// the badge surfaces an amber-hatched stripe + a `(fork)`
+		// label so the user can't mistake the wallet panel for one
+		// pointed at real upstream funds.
+		const baseLabel = fork ? this.active.replace(/-fork$/, '') : this.active;
 
 		return html`
 			<dev-wallet-dropdown .open=${this._open} @close=${() => (this._open = false)}>
 				<button
 					slot="trigger"
-					class="badge"
+					class=${fork ? 'badge fork' : 'badge'}
 					part="trigger"
 					aria-expanded=${this._open}
 					aria-haspopup="listbox"
+					title=${fork ? `sui-fork stack — no real ${baseLabel} funds at risk` : ''}
 					@click=${() => (this._open = !this._open)}
 				>
 					<span class="dot" style="background: ${color}"></span>
-					${this.active}
+					${baseLabel} ${fork ? html`<span class="fork-tag">fork</span>` : ''}
 					<svg
 						class="chevron"
 						viewBox="0 0 24 24"

package/src/ui/dev-wallet-new-account.ts

@@ -5,7 +5,19 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import type { SignerAdapter } from '../types.js';
-import { actionButtonStyles, sharedStyles, stateStyles } from './styles.js';
+import {
+	actionButtonStyles,
+	badgeStyles,
+	cardItemStyles,
+	dialogStyles,
+	formInputStyles,
+	inlineErrorStyles,
+	listContainerStyles,
+	monoTruncateStyles,
+	sharedStyles,
+	subLabelStyles,
+	stateStyles,
+} from './styles.js';
 import {
 	emitEvent,
 	formatAddress,
@@ -29,38 +41,19 @@ export class DevWalletNewAccount extends LitElement {
 		sharedStyles,
 		actionButtonStyles,
 		stateStyles,
+		dialogStyles,
+		cardItemStyles,
+		listContainerStyles,
+		formInputStyles,
+		monoTruncateStyles,
+		badgeStyles,
+		inlineErrorStyles,
+		subLabelStyles,
 		css`
-			:host {
-				display: block;
-			}
-
-			dialog:not([open]) {
-				display: none;
-			}
-
 			dialog {
 				width: 320px;
-				max-width: calc(100vw - 32px);
 				max-height: min(420px, 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);
 				padding: 20px;
-				display: flex;
-				flex-direction: column;
-				color: inherit;
-			}
-
-			dialog::backdrop {
-				background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
-			}
-
-			.dialog-title {
-				font-size: 16px;
-				font-weight: var(--dev-wallet-font-weight-semibold);
-				color: var(--dev-wallet-foreground);
-				margin-bottom: 16px;
 			}
 
 			.tabs {
@@ -97,29 +90,15 @@ export class DevWalletNewAccount extends LitElement {
 				margin-bottom: 12px;
 			}
 
-			.field-label {
-				display: block;
-				font-size: 12px;
-				font-weight: var(--dev-wallet-font-weight-medium);
-				color: var(--dev-wallet-muted-foreground);
-				margin-bottom: 4px;
-			}
-
 			.field-input {
-				width: 100%;
 				padding: 8px 10px;
 				border-radius: var(--dev-wallet-radius-sm);
 				border: 1px solid var(--dev-wallet-input);
 				background: var(--dev-wallet-secondary);
-				color: var(--dev-wallet-foreground);
 				font-size: 14px;
-				font-family: inherit;
-				outline: none;
-				box-sizing: border-box;
 			}
 
 			.field-input:focus {
-				border-color: var(--dev-wallet-primary);
 				outline: 2px solid color-mix(in oklab, var(--dev-wallet-ring) 50%, transparent);
 				outline-offset: -1px;
 			}
@@ -177,22 +156,14 @@ export class DevWalletNewAccount extends LitElement {
 			}
 
 			.import-list {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
 				overflow-y: auto;
 				max-height: 240px;
 				min-height: 60px;
 			}
 
 			.import-item {
-				display: flex;
-				align-items: center;
 				gap: 10px;
 				padding: 8px 10px;
-				border-radius: var(--dev-wallet-radius-sm);
-				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-secondary);
 				width: 100%;
 				text-align: left;
 				transition: border-color 0.15s;
@@ -203,7 +174,6 @@ export class DevWalletNewAccount extends LitElement {
 			}
 
 			.import-item.selected {
-				border-color: var(--dev-wallet-primary);
 				background: color-mix(in oklab, var(--dev-wallet-primary) 10%, var(--dev-wallet-secondary));
 			}
 
@@ -244,24 +214,15 @@ export class DevWalletNewAccount extends LitElement {
 
 			.import-item-address {
 				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
-				font-family: var(--dev-wallet-font-mono);
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
 			}
 
 			.import-item-badge {
-				font-size: 10px;
 				padding: 1px 6px;
 				border-radius: var(--dev-wallet-radius-xs);
 				background: var(--dev-wallet-background);
 				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;
 				flex-shrink: 0;
 			}
 
@@ -275,8 +236,6 @@ export class DevWalletNewAccount extends LitElement {
 			}
 
 			.error {
-				color: var(--dev-wallet-destructive);
-				font-size: 12px;
 				margin-top: 8px;
 			}
 		`,

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

@@ -31,29 +31,54 @@ export class DevWalletObjects extends LitElement {
 			}
 
 			.object-list {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
+				display: grid;
+				grid-template-columns: repeat(2, minmax(0, 1fr));
+				gap: 8px;
 			}
 
 			.object-item {
 				display: flex;
 				gap: 10px;
-				padding: 10px 12px;
-				border-radius: var(--dev-wallet-radius-sm);
+				padding: 10px;
+				border-radius: var(--dev-wallet-radius-lg);
 				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-secondary);
+				background: var(--dev-wallet-surface);
 				align-items: flex-start;
+				min-width: 0;
+				transition:
+					background 120ms,
+					border-color 120ms;
+			}
+
+			.object-item:hover {
+				background: var(--dev-wallet-bg-hover);
+				border-color: var(--dev-wallet-border-strong);
 			}
 
 			.object-thumb {
-				width: 40px;
-				height: 40px;
+				width: 28px;
+				height: 28px;
 				border-radius: var(--dev-wallet-radius-xs);
 				object-fit: cover;
 				flex-shrink: 0;
 			}
 
+			.object-fallback {
+				width: 28px;
+				height: 28px;
+				border-radius: var(--dev-wallet-radius-xs);
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				background: linear-gradient(135deg, var(--dev-wallet-bg-4), var(--dev-wallet-bg-2));
+				border: 1px solid var(--dev-wallet-border);
+				color: var(--dev-wallet-primary);
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 11px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+			}
+
 			.object-body {
 				display: flex;
 				flex-direction: column;
@@ -69,9 +94,10 @@ export class DevWalletObjects extends LitElement {
 			}
 
 			.object-type {
-				font-size: 13px;
+				font-size: 11px;
 				font-weight: var(--dev-wallet-font-weight-medium);
 				color: var(--dev-wallet-foreground);
+				font-family: var(--dev-wallet-font-mono);
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
@@ -79,8 +105,10 @@ export class DevWalletObjects extends LitElement {
 
 			.object-type-badge {
 				font-size: 10px;
-				color: var(--dev-wallet-muted-foreground);
-				opacity: 0.8;
+				color: var(--dev-wallet-text-3);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
 			.object-description {
@@ -92,15 +120,21 @@ export class DevWalletObjects extends LitElement {
 			}
 
 			.object-version {
-				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
+				height: 16px;
+				padding: 0 5px;
+				border-radius: 999px;
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-3);
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 9px;
+				color: var(--dev-wallet-text-3);
 				flex-shrink: 0;
 			}
 
 			.object-id {
 				font-size: 11px;
 				font-family: var(--dev-wallet-font-mono);
-				color: var(--dev-wallet-muted-foreground);
+				color: var(--dev-wallet-text-3);
 				cursor: pointer;
 				border-radius: var(--dev-wallet-radius-2xs);
 				padding: 1px 2px;
@@ -119,13 +153,13 @@ export class DevWalletObjects extends LitElement {
 			.load-more {
 				margin-top: 8px;
 				width: 100%;
-				padding: 8px;
-				border-radius: var(--dev-wallet-radius-sm);
+				height: 30px;
+				border-radius: var(--dev-wallet-radius);
 				font-size: 12px;
 				font-weight: var(--dev-wallet-font-weight-medium);
 				color: var(--dev-wallet-primary);
 				background: transparent;
-				border: 1px solid var(--dev-wallet-border);
+				border: 1px solid var(--dev-wallet-border-2);
 				transition: background 0.15s;
 			}
 
@@ -137,6 +171,12 @@ export class DevWalletObjects extends LitElement {
 				opacity: 0.5;
 				cursor: default;
 			}
+
+			@media (max-width: 380px) {
+				.object-list {
+					grid-template-columns: 1fr;
+				}
+			}
 		`,
 	];
 
@@ -184,7 +224,7 @@ export class DevWalletObjects extends LitElement {
 		}
 
 		return html`
-			<h3 class="section-header">Objects</h3>
+			<h3 class="section-header">Owned Objects</h3>
 			${this._loading
 				? html`<div class="loading" part="loading" aria-live="polite">Loading...</div>`
 				: this._error
@@ -206,7 +246,7 @@ export class DevWalletObjects extends LitElement {
 															@error=${(e: Event) =>
 																((e.target as HTMLImageElement).style.display = 'none')}
 														/>`
-													: nothing}
+													: html`<span class="object-fallback">O</span>`}
 												<div class="object-body">
 													<div class="object-top">
 														<span class="object-type"> ${obj.displayName ?? obj.typeName} </span>