@mysten-incubation/dev-wallet 0.5.1 → 0.6.0

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

@@ -5,6 +5,7 @@ import type { ReadonlyWalletAccount } from '@mysten/wallet-standard';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
+import type { ConnectedAppsStore } from '../client/connected-apps.js';
 import type { DevWallet } from '../wallet/dev-wallet.js';
 import type { SignerAdapter } from '../types.js';
 import {
@@ -20,6 +21,8 @@ import {
 } from './styles.js';
 import { emitEvent, formatAddress, getErrorMessage, NETWORK_COLORS } from './utils.js';
 import './dev-wallet-accounts.js';
+import './dev-wallet-connect-guide.js';
+import './dev-wallet-connected-apps.js';
 
 @customElement('dev-wallet-settings')
 export class DevWalletSettings extends LitElement {
@@ -105,6 +108,9 @@ export class DevWalletSettings extends LitElement {
 			.network-info {
 				flex: 1;
 				min-width: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 3px;
 			}
 
 			.network-url {
@@ -118,6 +124,8 @@ export class DevWalletSettings extends LitElement {
 				background: var(--dev-wallet-background);
 				font-size: 10px;
 				font-family: var(--dev-wallet-font-mono);
+				width: 100%;
+				box-sizing: border-box;
 			}
 
 			.network-actions {
@@ -252,103 +260,12 @@ export class DevWalletSettings extends LitElement {
 				margin-top: 4px;
 			}
 
-			.bookmarklet-link-wrapper {
-				margin-top: 8px;
-			}
-
-			.bookmarklet-link {
-				display: inline-flex;
-				align-items: center;
-				gap: 6px;
-				padding: 8px 14px;
-				border-radius: var(--dev-wallet-radius-sm);
-				background: var(--dev-wallet-primary);
-				color: var(--dev-wallet-primary-foreground);
-				font-size: 13px;
-				font-weight: var(--dev-wallet-font-weight-semibold);
-				text-decoration: none;
-				cursor: grab;
-				user-select: none;
-			}
-
-			.bookmarklet-link:hover {
-				opacity: 0.9;
-			}
-
-			.bookmarklet-link:active {
-				cursor: grabbing;
-			}
-
-			.bookmarklet-url {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 10px;
-				color: var(--dev-wallet-muted-foreground);
-				word-break: break-all;
-				user-select: all;
-			}
-
-			.console-snippet {
-				margin-top: 8px;
-				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;
-				overflow-wrap: anywhere;
-				user-select: all;
-			}
-
-			.btn-copy {
-				display: inline-flex;
-				align-items: center;
-				justify-content: center;
-				min-width: 54px;
-				height: 24px;
-				padding: 0 8px;
-				border-radius: var(--dev-wallet-radius-xs);
-				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-bg-2);
-				color: var(--dev-wallet-foreground);
-				font-size: 10px;
-				font-weight: var(--dev-wallet-font-weight-medium);
-				cursor: pointer;
-				white-space: nowrap;
-			}
-
-			.btn-copy:hover {
-				background: var(--dev-wallet-bg-hover);
-				border-color: var(--dev-wallet-border-strong);
-				color: var(--dev-wallet-foreground);
+			/* The standalone page shows these in side rails above 1240px
+			   (see dev-wallet-standalone.ts); only repeat them here below that. */
+			@media (min-width: 1241px) {
+				.rail-mirror {
+					display: none;
+				}
 			}
 
 			@media (max-width: 420px) {
@@ -371,8 +288,14 @@ export class DevWalletSettings extends LitElement {
 	@property({ type: String })
 	activeAddress = '';
 
+	/** Origin of a standalone/hosted wallet. When set, Settings leads with the
+	 *  connect guide so it's reachable when the standalone aside is hidden. */
 	@property({ type: String })
-	bookmarkletOrigin = '';
+	walletOrigin = '';
+
+	/** Connected-dApps store of a standalone wallet; listed below the guide. */
+	@property({ attribute: false })
+	connectedApps: ConnectedAppsStore | null = null;
 
 	@state()
 	private _showAddNetwork = false;
@@ -383,6 +306,9 @@ export class DevWalletSettings extends LitElement {
 	@state()
 	private _networkUrl = '';
 
+	@state()
+	private _networkFaucet = '';
+
 	@state()
 	private _error: string | null = null;
 
@@ -393,19 +319,26 @@ export class DevWalletSettings extends LitElement {
 	private _editingUrl = '';
 
 	@state()
-	private _copied = false;
+	private _editingFaucet = '';
 
 	override render() {
 		return html`
+			${this.walletOrigin
+				? html`<div class="section rail-mirror">
+						<dev-wallet-connect-guide .origin=${this.walletOrigin}></dev-wallet-connect-guide>
+					</div>`
+				: nothing}
+			${this.connectedApps
+				? html`<div class="section rail-mirror">
+						<dev-wallet-connected-apps .store=${this.connectedApps}></dev-wallet-connected-apps>
+					</div>`
+				: nothing}
 			<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>
-			${this.bookmarkletOrigin
-				? html`<div class="section">${this.#renderBookmarklet()}</div>`
-				: nothing}
 		`;
 	}
 
@@ -436,6 +369,7 @@ export class DevWalletSettings extends LitElement {
 		const networks = this.wallet.availableNetworks;
 		const activeNetwork = this.wallet.activeNetwork;
 		const urls = this.wallet.networkUrls;
+		const faucets = this.wallet.faucetUrls;
 
 		return html`
 			<h3 class="section-header">Networks</h3>
@@ -451,20 +385,34 @@ export class DevWalletSettings extends LitElement {
 								<span class="network-name">${name}</span>
 								${isEditing
 									? html`<input
-											class="network-url-input"
-											type="text"
-											.value=${this._editingUrl}
-											@input=${(e: InputEvent) => {
-												this._editingUrl = (e.target as HTMLInputElement).value;
-											}}
-											@keydown=${(e: KeyboardEvent) => {
-												if (e.key === 'Enter') this.#saveNetworkUrl(name);
-												if (e.key === 'Escape') this.#cancelEditNetwork();
-											}}
-										/>`
+												class="network-url-input"
+												type="text"
+												aria-label="gRPC URL"
+												.value=${this._editingUrl}
+												@input=${(e: InputEvent) => {
+													this._editingUrl = (e.target as HTMLInputElement).value;
+												}}
+												@keydown=${this.#onEditKeydown(name)}
+											/>
+											<input
+												class="network-url-input"
+												type="text"
+												aria-label="Faucet URL"
+												placeholder="Faucet URL (optional)"
+												.value=${this._editingFaucet}
+												@input=${(e: InputEvent) => {
+													this._editingFaucet = (e.target as HTMLInputElement).value;
+												}}
+												@keydown=${this.#onEditKeydown(name)}
+											/>
+											${this._error ? html`<div class="error">${this._error}</div>` : nothing}`
 									: html`<span class="network-url" title=${urls[name] ?? ''}
-											>${urls[name] ?? ''}</span
-										>`}
+												>${urls[name] ?? ''}</span
+											>${faucets[name]
+												? html`<span class="network-url" title=${faucets[name]}
+														>faucet: ${faucets[name]}</span
+													>`
+												: nothing}`}
 							</div>
 							<div class="network-actions">
 								${isEditing
@@ -472,7 +420,7 @@ export class DevWalletSettings extends LitElement {
 											<button
 												class="btn-icon"
 												title="Save"
-												aria-label="Save URL"
+												aria-label="Save network"
 												@click=${() => this.#saveNetworkUrl(name)}
 											>
 												&#10003;
@@ -489,9 +437,10 @@ export class DevWalletSettings extends LitElement {
 									: html`
 											<button
 												class="btn-icon"
-												title="Edit URL"
-												aria-label="Edit network URL"
-												@click=${() => this.#startEditNetwork(name, urls[name] ?? '')}
+												title="Edit"
+												aria-label="Edit network"
+												@click=${() =>
+													this.#startEditNetwork(name, urls[name] ?? '', faucets[name] ?? '')}
 											>
 												&#9998;
 											</button>
@@ -549,10 +498,18 @@ export class DevWalletSettings extends LitElement {
 						this._networkUrl = (e.target as HTMLInputElement).value;
 						this._error = null;
 					}}
-					@keydown=${(e: KeyboardEvent) => {
-						if (e.key === 'Enter') this.#addNetwork();
-						if (e.key === 'Escape') this.#cancelAddNetwork();
+					@keydown=${this.#onAddKeydown}
+				/>
+				<input
+					class="form-input"
+					type="text"
+					placeholder="Faucet URL (optional, e.g. http://localhost:9123)"
+					.value=${this._networkFaucet}
+					@input=${(e: InputEvent) => {
+						this._networkFaucet = (e.target as HTMLInputElement).value;
+						this._error = null;
 					}}
+					@keydown=${this.#onAddKeydown}
 				/>
 				${this._error ? html`<div class="error">${this._error}</div>` : nothing}
 				<div class="form-actions">
@@ -634,65 +591,12 @@ export class DevWalletSettings extends LitElement {
 		`;
 	}
 
-	#renderBookmarklet() {
-		if (!this.bookmarkletOrigin) return nothing;
-		const origin = this.bookmarkletOrigin;
-
-		const bookmarkletJs = `${origin}/bookmarklet.js`;
-		const bookmarkletHref = `javascript:void(document.head.appendChild(Object.assign(document.createElement('script'),{src:'${bookmarkletJs}'})))`;
-		const consoleSnippet = `var s=document.createElement('script');s.src='${bookmarkletJs}';document.head.appendChild(s);`;
-
-		return html`
-			<h3 class="section-header">Bookmarklet</h3>
-			<div class="about">
-				Drag this link to your bookmarks bar, then click it on any dApp to inject the wallet:
-			</div>
-			<div class="bookmarklet-link-wrapper">
-				<a
-					class="bookmarklet-link"
-					href=${bookmarkletHref}
-					title="Drag to bookmarks bar"
-					@click=${(e: MouseEvent) => e.preventDefault()}
-				>
-					Dev Wallet
-				</a>
-			</div>
-			<div class="about" style="margin-top: 12px">Or paste this in the browser console:</div>
-			<div class="console-snippet">
-				<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 />
-				<code class="bookmarklet-url">${bookmarkletJs}</code>
-			</div>
-		`;
-	}
-
-	#copySnippet(text: string) {
-		navigator.clipboard.writeText(text).then(() => {
-			this._copied = true;
-			setTimeout(() => {
-				this._copied = false;
-			}, 2000);
-		});
-	}
-
 	#addNetwork() {
 		if (!this.wallet) return;
 
 		const name = this._networkName.trim();
 		const url = this._networkUrl.trim();
+		const faucet = this._networkFaucet.trim();
 
 		if (!name || !url) return;
 
@@ -702,9 +606,10 @@ export class DevWalletSettings extends LitElement {
 		}
 
 		try {
-			this.wallet.addNetwork(name, url);
+			this.wallet.addNetwork(name, url, faucet || undefined);
 			this._networkName = '';
 			this._networkUrl = '';
+			this._networkFaucet = '';
 			this._showAddNetwork = false;
 			this._error = null;
 			emitEvent(this, 'network-added', { name, url });
@@ -717,23 +622,39 @@ export class DevWalletSettings extends LitElement {
 		this._showAddNetwork = false;
 		this._networkName = '';
 		this._networkUrl = '';
+		this._networkFaucet = '';
 		this._error = null;
 	}
 
-	#startEditNetwork(name: string, url: string) {
+	#onAddKeydown = (e: KeyboardEvent) => {
+		if (e.key === 'Enter') this.#addNetwork();
+		if (e.key === 'Escape') this.#cancelAddNetwork();
+	};
+
+	#onEditKeydown(name: string) {
+		return (e: KeyboardEvent) => {
+			if (e.key === 'Enter') this.#saveNetworkUrl(name);
+			if (e.key === 'Escape') this.#cancelEditNetwork();
+		};
+	}
+
+	#startEditNetwork(name: string, url: string, faucet: string) {
 		this._editingNetwork = name;
 		this._editingUrl = url;
+		this._editingFaucet = faucet;
 	}
 
 	#saveNetworkUrl(name: string) {
 		if (!this.wallet) return;
 		const url = this._editingUrl.trim();
+		const faucet = this._editingFaucet.trim();
 		if (!url) return;
 
 		try {
-			this.wallet.addNetwork(name, url);
+			this.wallet.addNetwork(name, url, faucet || null);
 			this._editingNetwork = null;
 			this._editingUrl = '';
+			this._editingFaucet = '';
 		} catch (error) {
 			this._error = error instanceof Error ? error.message : 'Invalid URL';
 		}
@@ -742,6 +663,7 @@ export class DevWalletSettings extends LitElement {
 	#cancelEditNetwork() {
 		this._editingNetwork = null;
 		this._editingUrl = '';
+		this._editingFaucet = '';
 	}
 
 	#removeNetwork(name: string) {