@mysten-incubation/dev-wallet 0.0.1 → 0.3.0

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

@@ -7,7 +7,17 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import type { DevWallet } from '../wallet/dev-wallet.js';
 import type { SignerAdapter } from '../types.js';
-import { sectionHeaderStyles, sharedStyles } from './styles.js';
+import {
+	badgeStyles,
+	cardItemStyles,
+	formInputStyles,
+	iconButtonStyles,
+	inlineErrorStyles,
+	listContainerStyles,
+	monoTruncateStyles,
+	sectionHeaderStyles,
+	sharedStyles,
+} from './styles.js';
 import { emitEvent, formatAddress, getErrorMessage, NETWORK_COLORS } from './utils.js';
 import './dev-wallet-accounts.js';
 
@@ -16,37 +26,66 @@ export class DevWalletSettings extends LitElement {
 	static override styles = [
 		sharedStyles,
 		sectionHeaderStyles,
+		cardItemStyles,
+		listContainerStyles,
+		formInputStyles,
+		iconButtonStyles,
+		badgeStyles,
+		inlineErrorStyles,
+		monoTruncateStyles,
 		css`
 			:host {
 				display: block;
+				padding: 14px;
 			}
 
 			.section {
-				margin-bottom: 20px;
+				margin-bottom: 10px;
+				padding: 12px;
+				border: 1px solid var(--dev-wallet-border);
+				border-radius: var(--dev-wallet-radius-lg);
+				background: var(--dev-wallet-surface);
 			}
 
 			.section:last-child {
 				margin-bottom: 0;
 			}
 
-			.network-list {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
+			.settings-summary {
+				display: grid;
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				gap: 8px;
 			}
 
-			.network-item {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				padding: 8px 12px;
-				border-radius: var(--dev-wallet-radius-sm);
+			.summary-cell {
+				min-width: 0;
+				padding: 10px;
+				border-radius: var(--dev-wallet-radius);
 				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-secondary);
+				background: var(--dev-wallet-bg-0);
 			}
 
-			.network-item.active {
-				border-color: var(--dev-wallet-primary);
+			.summary-label {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 9.5px;
+				text-transform: uppercase;
+				letter-spacing: 0.12em;
+				color: var(--dev-wallet-text-3);
+			}
+
+			.summary-value {
+				margin-top: 5px;
+				font-size: 12px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.network-item {
+				gap: 8px;
+				padding: 9px 10px;
 			}
 
 			.network-dot {
@@ -60,7 +99,7 @@ export class DevWalletSettings extends LitElement {
 				flex: 1;
 				font-size: 13px;
 				font-weight: var(--dev-wallet-font-weight-medium);
-				color: var(--dev-wallet-foreground);
+				font-family: var(--dev-wallet-font-mono);
 			}
 
 			.network-info {
@@ -70,24 +109,15 @@ export class DevWalletSettings extends LitElement {
 
 			.network-url {
 				font-size: 10px;
-				color: var(--dev-wallet-muted-foreground);
-				font-family: var(--dev-wallet-font-mono);
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
 			}
 
 			.network-url-input {
-				width: 100%;
 				padding: 3px 6px;
 				border-radius: var(--dev-wallet-radius-xs);
 				border: 1px solid var(--dev-wallet-primary);
 				background: var(--dev-wallet-background);
-				color: var(--dev-wallet-foreground);
 				font-size: 10px;
 				font-family: var(--dev-wallet-font-mono);
-				outline: none;
-				box-sizing: border-box;
 			}
 
 			.network-actions {
@@ -99,17 +129,7 @@ export class DevWalletSettings extends LitElement {
 			.btn-icon {
 				width: 22px;
 				height: 22px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border-radius: var(--dev-wallet-radius-xs);
 				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
-			}
-
-			.btn-icon:hover {
-				background: var(--dev-wallet-border);
-				color: var(--dev-wallet-foreground);
 			}
 
 			.btn-icon-danger:hover {
@@ -117,13 +137,15 @@ export class DevWalletSettings extends LitElement {
 			}
 
 			.network-active-badge {
-				font-size: 9px;
-				padding: 1px 5px;
-				border-radius: var(--dev-wallet-radius-2xs);
-				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
+				height: 16px;
+				display: inline-flex;
+				align-items: center;
+				padding: 0 5px;
+				border-radius: 999px;
+				border: 1px solid var(--dev-wallet-border-strong);
+				background: var(--dev-wallet-accent-fade);
 				color: var(--dev-wallet-primary);
 				font-weight: var(--dev-wallet-font-weight-semibold);
-				text-transform: uppercase;
 			}
 
 			.add-network-form {
@@ -132,30 +154,17 @@ export class DevWalletSettings extends LitElement {
 				gap: 8px;
 				margin-top: 8px;
 				padding: 12px;
-				border-radius: var(--dev-wallet-radius-sm);
+				border-radius: var(--dev-wallet-radius-lg);
 				border: 1px dashed var(--dev-wallet-border);
-				background: var(--dev-wallet-secondary);
+				background: var(--dev-wallet-surface);
 			}
 
 			.form-input {
-				width: 100%;
 				padding: 6px 8px;
-				border-radius: var(--dev-wallet-radius-xs);
+				border-radius: var(--dev-wallet-radius);
 				border: 1px solid var(--dev-wallet-input);
-				background: var(--dev-wallet-background);
-				color: var(--dev-wallet-foreground);
+				background: var(--dev-wallet-bg-2);
 				font-size: 12px;
-				font-family: inherit;
-				outline: none;
-				box-sizing: border-box;
-			}
-
-			.form-input:focus {
-				border-color: var(--dev-wallet-primary);
-			}
-
-			.form-input::placeholder {
-				color: var(--dev-wallet-muted-foreground);
 			}
 
 			.form-actions {
@@ -188,12 +197,16 @@ export class DevWalletSettings extends LitElement {
 			.btn-toggle {
 				font-size: 12px;
 				color: var(--dev-wallet-primary);
-				padding: 4px 0;
-				margin-top: 4px;
+				height: 30px;
+				padding: 0 10px;
+				margin-top: 8px;
+				border: 1px solid var(--dev-wallet-border);
+				border-radius: var(--dev-wallet-radius);
 			}
 
 			.btn-toggle:hover {
-				text-decoration: underline;
+				background: var(--dev-wallet-bg-hover);
+				border-color: var(--dev-wallet-border-strong);
 			}
 
 			.cli-section-column {
@@ -236,7 +249,6 @@ export class DevWalletSettings extends LitElement {
 
 			.error {
 				font-size: 11px;
-				color: var(--dev-wallet-destructive);
 				margin-top: 4px;
 			}
 
@@ -276,38 +288,74 @@ export class DevWalletSettings extends LitElement {
 			}
 
 			.console-snippet {
-				position: relative;
 				margin-top: 8px;
-				padding: 10px 12px;
-				border-radius: var(--dev-wallet-radius-sm);
-				background: var(--dev-wallet-secondary);
+				border-radius: var(--dev-wallet-radius);
+				background: var(--dev-wallet-bg-0);
 				border: 1px solid var(--dev-wallet-border);
+				overflow: hidden;
+			}
+
+			.console-snippet-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 8px;
+				padding: 7px 8px 7px 10px;
+				border-bottom: 1px solid var(--dev-wallet-border);
+				background: color-mix(in srgb, var(--dev-wallet-bg-1) 72%, transparent);
+			}
+
+			.console-snippet-label {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 9.5px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				letter-spacing: 0.12em;
+				text-transform: uppercase;
+				color: var(--dev-wallet-text-3);
+			}
+
+			.console-snippet-code {
+				margin: 0;
+				max-width: 100%;
+				padding: 10px 12px 12px;
+				overflow-x: auto;
 				font-family: var(--dev-wallet-font-mono);
 				font-size: 11px;
 				color: var(--dev-wallet-foreground);
 				line-height: 1.5;
 				white-space: pre-wrap;
-				word-break: break-all;
+				overflow-wrap: anywhere;
 				user-select: all;
 			}
 
 			.btn-copy {
-				position: absolute;
-				top: 6px;
-				right: 6px;
-				padding: 3px 8px;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				min-width: 54px;
+				height: 24px;
+				padding: 0 8px;
 				border-radius: var(--dev-wallet-radius-xs);
-				background: var(--dev-wallet-border);
-				color: var(--dev-wallet-muted-foreground);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-2);
+				color: var(--dev-wallet-foreground);
 				font-size: 10px;
-				font-family: inherit;
+				font-weight: var(--dev-wallet-font-weight-medium);
 				cursor: pointer;
+				white-space: nowrap;
 			}
 
 			.btn-copy:hover {
-				background: var(--dev-wallet-input);
+				background: var(--dev-wallet-bg-hover);
+				border-color: var(--dev-wallet-border-strong);
 				color: var(--dev-wallet-foreground);
 			}
+
+			@media (max-width: 420px) {
+				.settings-summary {
+					grid-template-columns: 1fr;
+				}
+			}
 		`,
 	];
 
@@ -349,13 +397,36 @@ export class DevWalletSettings extends LitElement {
 
 	override render() {
 		return html`
+			<div class="section">${this.#renderSummary()}</div>
 			<div class="section">${this.#renderNetworks()}</div>
 			${this.#hasCliAdapter()
 				? html`<div class="section">${this.#renderCliSigner()}</div>`
 				: nothing}
 			<div class="section">${this.#renderAccounts()}</div>
-			<div class="section">${this.#renderBookmarklet()}</div>
-			<div class="section">${this.#renderAbout()}</div>
+			${this.bookmarkletOrigin
+				? html`<div class="section">${this.#renderBookmarklet()}</div>`
+				: nothing}
+		`;
+	}
+
+	#renderSummary() {
+		const activeNetwork = this.wallet?.activeNetwork ?? 'none';
+		return html`
+			<h3 class="section-header">Wallet</h3>
+			<div class="settings-summary">
+				<div class="summary-cell">
+					<div class="summary-label">Network</div>
+					<div class="summary-value">${activeNetwork}</div>
+				</div>
+				<div class="summary-cell">
+					<div class="summary-label">Accounts</div>
+					<div class="summary-value">${this.accounts.length}</div>
+				</div>
+				<div class="summary-cell">
+					<div class="summary-label">Adapters</div>
+					<div class="summary-value">${this.adapters.length}</div>
+				</div>
+			</div>
 		`;
 	}
 
@@ -588,10 +659,18 @@ export class DevWalletSettings extends LitElement {
 			</div>
 			<div class="about" style="margin-top: 12px">Or paste this in the browser console:</div>
 			<div class="console-snippet">
-				${consoleSnippet}
-				<button class="btn-copy" @click=${() => this.#copySnippet(consoleSnippet)}>
-					${this._copied ? 'Copied!' : 'Copy'}
-				</button>
+				<div class="console-snippet-header">
+					<span class="console-snippet-label">Console</span>
+					<button
+						class="btn-copy"
+						type="button"
+						aria-label="Copy console snippet"
+						@click=${() => this.#copySnippet(consoleSnippet)}
+					>
+						${this._copied ? 'Copied' : 'Copy'}
+					</button>
+				</div>
+				<pre class="console-snippet-code"><code>${consoleSnippet}</code></pre>
 			</div>
 			<div class="about" style="margin-top: 8px">
 				Or add this script to your page:<br />
@@ -609,20 +688,6 @@ export class DevWalletSettings extends LitElement {
 		});
 	}
 
-	#renderAbout() {
-		return html`
-			<h3 class="section-header">About</h3>
-			<div class="about">
-				<strong>${this.wallet?.name ?? 'Dev Wallet'}</strong><br />
-				A development wallet for testing Sui dApps.<br />
-				${this.wallet
-					? html`${this.wallet.accounts.length} account(s) across ${this.wallet.adapters.length}
-						adapter(s)`
-					: nothing}
-			</div>
-		`;
-	}
-
 	#addNetwork() {
 		if (!this.wallet) return;
 

package/src/ui/dev-wallet-signing-modal.ts

@@ -7,6 +7,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 import type { PendingSigningRequest } from '../wallet/dev-wallet.js';
 import { sharedStyles } from './styles.js';
+import type { CoinRecord } from './utils.js';
 import { emitEvent } from './utils.js';
 import './dev-wallet-signing.js';
 
@@ -24,37 +25,40 @@ export class DevWalletSigningModal extends LitElement {
 		css`
 			:host {
 				display: block;
+				pointer-events: auto;
 			}
 
 			dialog {
-				width: 360px;
+				width: 440px;
 				max-width: calc(100vw - 32px);
-				max-height: min(600px, 80vh);
+				max-height: min(680px, 86vh);
 				border-radius: var(--dev-wallet-radius-xl);
-				background: var(--dev-wallet-background);
-				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
+				border: 1px solid var(--dev-wallet-border-2);
 				box-shadow: var(--dev-wallet-shadow-lg);
 				overflow: hidden;
 				display: flex;
 				flex-direction: column;
 				padding: 0;
 				color: inherit;
+				pointer-events: auto;
 			}
 
 			dialog::backdrop {
-				background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
+				background: rgba(2, 6, 14, 0.55);
 			}
 
 			.modal-header {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				padding: 14px 16px;
+				padding: 12px 14px;
 				border-bottom: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-1);
 			}
 
 			.modal-title {
-				font-size: 15px;
+				font-size: 13px;
 				font-weight: var(--dev-wallet-font-weight-semibold);
 				color: var(--dev-wallet-foreground);
 			}
@@ -65,6 +69,23 @@ export class DevWalletSigningModal extends LitElement {
 				display: flex;
 				flex-direction: column;
 			}
+
+			/* Phase 4 P4.19 — footnote rendered when the active account
+			   is in fork-mode impersonation. Visually distinct so users
+			   don't conflate this with a real signature flow. */
+			.fork-footnote {
+				padding: 8px 16px;
+				background: rgba(234, 179, 8, 0.12);
+				border-top: 1px solid rgba(234, 179, 8, 0.35);
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+				line-height: 1.4;
+			}
+
+			.fork-footnote strong {
+				color: #92400e;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+			}
 		`,
 	];
 
@@ -74,9 +95,20 @@ export class DevWalletSigningModal extends LitElement {
 	@property({ attribute: false })
 	client: ClientWithCoreApi | null = null;
 
+	/** Pre-seeded coin metadata forwarded to `<dev-wallet-signing>`. See
+	 *  the matching property on `DevWalletSigning` for details. */
+	@property({ attribute: false })
+	coins: CoinRecord | null = null;
+
 	@property({ type: String })
 	walletName = 'Dev Wallet';
 
+	/** Phase 4 P4.19 — when the active account's `source === 'impersonate'`,
+	 *  the parent flips this on and the modal renders a footnote
+	 *  explaining no real signature will be produced. */
+	@property({ type: Boolean })
+	impersonation = false;
+
 	#handleDialogCancel = (e: Event) => {
 		e.preventDefault();
 		emitEvent(this, 'reject');
@@ -110,10 +142,18 @@ export class DevWalletSigningModal extends LitElement {
 						exportparts="approve-button: signing-approve-button, reject-button: signing-reject-button, request-type: signing-request-type, empty-state: signing-empty-state, error-message: signing-error-message, footer: signing-footer"
 						.request=${this.request}
 						.client=${this.client}
+						.coins=${this.coins}
 						@approve=${this.#handleApprove}
 						@reject=${this.#handleReject}
 					></dev-wallet-signing>
 				</div>
+				${this.impersonation
+					? html`<div class="fork-footnote" part="fork-footnote">
+							<strong>Fork-only:</strong> this account is in <em>impersonation</em> mode. The fork
+							accepts the transaction with an empty signature (no real private key signs it), so it
+							would be rejected by mainnet / testnet / devnet validators.
+						</div>`
+					: nothing}
 			</dialog>
 		`;
 	}