@mysten-incubation/dev-wallet 0.0.0

package/dist/ui/dev-wallet-settings.mjs

@@ -0,0 +1,635 @@
+import { sectionHeaderStyles, sharedStyles } from "./styles.mjs";
+import { NETWORK_COLORS, emitEvent, formatAddress, getErrorMessage } from "./utils.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import "./dev-wallet-accounts.mjs";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region src/ui/dev-wallet-settings.ts
+let DevWalletSettings = class DevWalletSettings$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.wallet = null;
+		this.accounts = [];
+		this.adapters = [];
+		this.activeAddress = "";
+		this.bookmarkletOrigin = "";
+		this._showAddNetwork = false;
+		this._networkName = "";
+		this._networkUrl = "";
+		this._error = null;
+		this._editingNetwork = null;
+		this._editingUrl = "";
+		this._copied = false;
+	}
+	static {
+		this.styles = [
+			sharedStyles,
+			sectionHeaderStyles,
+			css`
+			:host {
+				display: block;
+			}
+
+			.section {
+				margin-bottom: 20px;
+			}
+
+			.section:last-child {
+				margin-bottom: 0;
+			}
+
+			.network-list {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.network-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				padding: 8px 12px;
+				border-radius: var(--dev-wallet-radius-sm);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-secondary);
+			}
+
+			.network-item.active {
+				border-color: var(--dev-wallet-primary);
+			}
+
+			.network-dot {
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				flex-shrink: 0;
+			}
+
+			.network-name {
+				flex: 1;
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.network-info {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.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 {
+				display: flex;
+				gap: 2px;
+				flex-shrink: 0;
+			}
+
+			.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 {
+				color: var(--dev-wallet-destructive);
+			}
+
+			.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);
+				color: var(--dev-wallet-primary);
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				text-transform: uppercase;
+			}
+
+			.add-network-form {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+				margin-top: 8px;
+				padding: 12px;
+				border-radius: var(--dev-wallet-radius-sm);
+				border: 1px dashed var(--dev-wallet-border);
+				background: var(--dev-wallet-secondary);
+			}
+
+			.form-input {
+				width: 100%;
+				padding: 6px 8px;
+				border-radius: var(--dev-wallet-radius-xs);
+				border: 1px solid var(--dev-wallet-input);
+				background: var(--dev-wallet-background);
+				color: var(--dev-wallet-foreground);
+				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 {
+				display: flex;
+				gap: 6px;
+			}
+
+			.btn-sm {
+				padding: 5px 10px;
+				border-radius: var(--dev-wallet-radius-xs);
+				font-size: 11px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+			}
+
+			.btn-add {
+				background: var(--dev-wallet-primary);
+				color: var(--dev-wallet-primary-foreground);
+			}
+
+			.btn-add:disabled {
+				opacity: 0.5;
+			}
+
+			.btn-cancel {
+				background: var(--dev-wallet-secondary);
+				color: var(--dev-wallet-foreground);
+				border: 1px solid var(--dev-wallet-border);
+			}
+
+			.btn-toggle {
+				font-size: 12px;
+				color: var(--dev-wallet-primary);
+				padding: 4px 0;
+				margin-top: 4px;
+			}
+
+			.btn-toggle:hover {
+				text-decoration: underline;
+			}
+
+			.cli-section-column {
+				flex-direction: column;
+				align-items: flex-start;
+				gap: 6px;
+			}
+
+			.cli-header-row {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				width: 100%;
+			}
+
+			.cli-accounts-list {
+				width: 100%;
+				padding-left: 16px;
+			}
+
+			.cli-accounts-list .network-url {
+				padding: 2px 0;
+			}
+
+			.cli-hint {
+				padding-left: 16px;
+				margin-top: 0;
+				font-size: 12px;
+			}
+
+			.cli-unpaired-hint {
+				margin-top: 8px;
+			}
+
+			.about {
+				font-size: 12px;
+				color: var(--dev-wallet-muted-foreground);
+				line-height: 1.5;
+			}
+
+			.error {
+				font-size: 11px;
+				color: var(--dev-wallet-destructive);
+				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 {
+				position: relative;
+				margin-top: 8px;
+				padding: 10px 12px;
+				border-radius: var(--dev-wallet-radius-sm);
+				background: var(--dev-wallet-secondary);
+				border: 1px solid var(--dev-wallet-border);
+				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;
+				user-select: all;
+			}
+
+			.btn-copy {
+				position: absolute;
+				top: 6px;
+				right: 6px;
+				padding: 3px 8px;
+				border-radius: var(--dev-wallet-radius-xs);
+				background: var(--dev-wallet-border);
+				color: var(--dev-wallet-muted-foreground);
+				font-size: 10px;
+				font-family: inherit;
+				cursor: pointer;
+			}
+
+			.btn-copy:hover {
+				background: var(--dev-wallet-input);
+				color: var(--dev-wallet-foreground);
+			}
+		`
+		];
+	}
+	render() {
+		return html`
+			<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>
+		`;
+	}
+	#renderNetworks() {
+		if (!this.wallet) return nothing;
+		const networks = this.wallet.availableNetworks;
+		const activeNetwork = this.wallet.activeNetwork;
+		const urls = this.wallet.networkUrls;
+		return html`
+			<h3 class="section-header">Networks</h3>
+			<div class="network-list">
+				${networks.map((name) => {
+			const color = NETWORK_COLORS[name] ?? "#6b7280";
+			const isActive = name === activeNetwork;
+			const isEditing = this._editingNetwork === name;
+			return html`
+						<div class="network-item ${isActive ? "active" : ""}">
+							<span class="network-dot" style="background: ${color}"></span>
+							<div class="network-info">
+								<span class="network-name">${name}</span>
+								${isEditing ? html`<input
+											class="network-url-input"
+											type="text"
+											.value=${this._editingUrl}
+											@input=${(e) => {
+				this._editingUrl = e.target.value;
+			}}
+											@keydown=${(e) => {
+				if (e.key === "Enter") this.#saveNetworkUrl(name);
+				if (e.key === "Escape") this.#cancelEditNetwork();
+			}}
+										/>` : html`<span class="network-url" title=${urls[name] ?? ""}
+											>${urls[name] ?? ""}</span
+										>`}
+							</div>
+							<div class="network-actions">
+								${isEditing ? html`
+											<button
+												class="btn-icon"
+												title="Save"
+												aria-label="Save URL"
+												@click=${() => this.#saveNetworkUrl(name)}
+											>
+												&#10003;
+											</button>
+											<button
+												class="btn-icon"
+												title="Cancel"
+												aria-label="Cancel editing"
+												@click=${this.#cancelEditNetwork}
+											>
+												&#10005;
+											</button>
+										` : html`
+											<button
+												class="btn-icon"
+												title="Edit URL"
+												aria-label="Edit network URL"
+												@click=${() => this.#startEditNetwork(name, urls[name] ?? "")}
+											>
+												&#9998;
+											</button>
+											${!isActive ? html`<button
+														class="btn-icon btn-icon-danger"
+														title="Remove"
+														aria-label="Remove network"
+														@click=${() => this.#removeNetwork(name)}
+													>
+														&#10005;
+													</button>` : nothing}
+										`}
+								${isActive ? html`<span class="network-active-badge">Active</span>` : nothing}
+							</div>
+						</div>
+					`;
+		})}
+			</div>
+			${this._showAddNetwork ? this.#renderAddNetworkForm() : html`
+						<button
+							class="btn-toggle"
+							@click=${() => {
+			this._showAddNetwork = true;
+		}}
+						>
+							+ Add Network
+						</button>
+					`}
+		`;
+	}
+	#renderAddNetworkForm() {
+		return html`
+			<div class="add-network-form">
+				<input
+					class="form-input"
+					type="text"
+					placeholder="Network name (e.g. custom)"
+					.value=${this._networkName}
+					@input=${(e) => {
+			this._networkName = e.target.value;
+			this._error = null;
+		}}
+				/>
+				<input
+					class="form-input"
+					type="text"
+					placeholder="gRPC URL (e.g. http://localhost:9000)"
+					.value=${this._networkUrl}
+					@input=${(e) => {
+			this._networkUrl = e.target.value;
+			this._error = null;
+		}}
+					@keydown=${(e) => {
+			if (e.key === "Enter") this.#addNetwork();
+			if (e.key === "Escape") this.#cancelAddNetwork();
+		}}
+				/>
+				${this._error ? html`<div class="error">${this._error}</div>` : nothing}
+				<div class="form-actions">
+					<button
+						class="btn-sm btn-add"
+						?disabled=${!this._networkName.trim() || !this._networkUrl.trim()}
+						@click=${this.#addNetwork}
+					>
+						Add
+					</button>
+					<button class="btn-sm btn-cancel" @click=${this.#cancelAddNetwork}>Cancel</button>
+				</div>
+			</div>
+		`;
+	}
+	#hasCliAdapter() {
+		return this.adapters.some((a) => a.id === "remote-cli");
+	}
+	#renderCliSigner() {
+		const cliAdapter = this.adapters.find((a) => a.id === "remote-cli");
+		if (!cliAdapter) return nothing;
+		const isPaired = "isPaired" in cliAdapter && cliAdapter.isPaired;
+		const cliAccounts = cliAdapter.getAccounts();
+		return html`
+			<h3 class="section-header">CLI Signer</h3>
+			${isPaired ? html`
+						<div class="network-item active cli-section-column">
+							<div class="cli-header-row">
+								<span
+									class="network-dot"
+									style="background: var(--dev-wallet-status-connected)"
+								></span>
+								<span class="network-name">Connected</span>
+								${cliAccounts.length > 0 ? html`<span class="network-active-badge">${cliAccounts.length} imported</span>` : nothing}
+							</div>
+							${cliAccounts.length > 0 ? html`<div class="cli-accounts-list">
+										${cliAccounts.map((acc) => html`
+												<div class="network-url">${acc.label} (${formatAddress(acc.address)})</div>
+											`)}
+									</div>` : html`<div class="about cli-hint">Use + Add above to import CLI accounts.</div>`}
+						</div>
+					` : html`
+						<div class="network-item">
+							<span
+								class="network-dot"
+								style="background: var(--dev-wallet-status-disconnected)"
+							></span>
+							<span class="network-name" style="color: var(--dev-wallet-muted-foreground)"
+								>Not connected</span
+							>
+						</div>
+						<div class="about cli-unpaired-hint">
+							Open the token URL from your terminal to connect CLI accounts.
+						</div>
+					`}
+		`;
+	}
+	#renderAccounts() {
+		return html`
+			<dev-wallet-accounts
+				exportparts="account-list: accounts-account-list, add-button: accounts-add-button, empty-state: accounts-empty-state"
+				.accounts=${this.accounts}
+				.adapters=${this.adapters}
+				.activeAddress=${this.activeAddress}
+			></dev-wallet-accounts>
+		`;
+	}
+	#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) => 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">
+				${consoleSnippet}
+				<button class="btn-copy" @click=${() => this.#copySnippet(consoleSnippet)}>
+					${this._copied ? "Copied!" : "Copy"}
+				</button>
+			</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) {
+		navigator.clipboard.writeText(text).then(() => {
+			this._copied = true;
+			setTimeout(() => {
+				this._copied = false;
+			}, 2e3);
+		});
+	}
+	#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;
+		const name = this._networkName.trim();
+		const url = this._networkUrl.trim();
+		if (!name || !url) return;
+		if (this.wallet.availableNetworks.includes(name)) {
+			this._error = `Network "${name}" already exists`;
+			return;
+		}
+		try {
+			this.wallet.addNetwork(name, url);
+			this._networkName = "";
+			this._networkUrl = "";
+			this._showAddNetwork = false;
+			this._error = null;
+			emitEvent(this, "network-added", {
+				name,
+				url
+			});
+		} catch (err) {
+			this._error = getErrorMessage(err, "Failed to add network");
+		}
+	}
+	#cancelAddNetwork() {
+		this._showAddNetwork = false;
+		this._networkName = "";
+		this._networkUrl = "";
+		this._error = null;
+	}
+	#startEditNetwork(name, url) {
+		this._editingNetwork = name;
+		this._editingUrl = url;
+	}
+	#saveNetworkUrl(name) {
+		if (!this.wallet) return;
+		const url = this._editingUrl.trim();
+		if (!url) return;
+		try {
+			this.wallet.addNetwork(name, url);
+			this._editingNetwork = null;
+			this._editingUrl = "";
+		} catch (error) {
+			this._error = error instanceof Error ? error.message : "Invalid URL";
+		}
+	}
+	#cancelEditNetwork() {
+		this._editingNetwork = null;
+		this._editingUrl = "";
+	}
+	#removeNetwork(name) {
+		if (!this.wallet) return;
+		this.wallet.removeNetwork(name);
+	}
+};
+__decorate([property({ attribute: false })], DevWalletSettings.prototype, "wallet", void 0);
+__decorate([property({ attribute: false })], DevWalletSettings.prototype, "accounts", void 0);
+__decorate([property({ attribute: false })], DevWalletSettings.prototype, "adapters", void 0);
+__decorate([property({ type: String })], DevWalletSettings.prototype, "activeAddress", void 0);
+__decorate([property({ type: String })], DevWalletSettings.prototype, "bookmarkletOrigin", void 0);
+__decorate([state()], DevWalletSettings.prototype, "_showAddNetwork", void 0);
+__decorate([state()], DevWalletSettings.prototype, "_networkName", void 0);
+__decorate([state()], DevWalletSettings.prototype, "_networkUrl", void 0);
+__decorate([state()], DevWalletSettings.prototype, "_error", void 0);
+__decorate([state()], DevWalletSettings.prototype, "_editingNetwork", void 0);
+__decorate([state()], DevWalletSettings.prototype, "_editingUrl", void 0);
+__decorate([state()], DevWalletSettings.prototype, "_copied", void 0);
+DevWalletSettings = __decorate([customElement("dev-wallet-settings")], DevWalletSettings);
+
+//#endregion
+export { DevWalletSettings };
+//# sourceMappingURL=dev-wallet-settings.mjs.map

package/dist/ui/dev-wallet-settings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-settings.mjs","names":["DevWalletSettings","#renderNetworks","#hasCliAdapter","#renderCliSigner","#renderAccounts","#renderBookmarklet","#renderAbout","#saveNetworkUrl","#cancelEditNetwork","#startEditNetwork","#removeNetwork","#renderAddNetworkForm","#addNetwork","#cancelAddNetwork","#copySnippet"],"sources":["../../src/ui/dev-wallet-settings.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReadonlyWalletAccount } from '@mysten/wallet-standard';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport type { SignerAdapter } from '../types.js';\nimport { sectionHeaderStyles, sharedStyles } from './styles.js';\nimport { emitEvent, formatAddress, getErrorMessage, NETWORK_COLORS } from './utils.js';\nimport './dev-wallet-accounts.js';\n\n@customElement('dev-wallet-settings')\nexport class DevWalletSettings extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tsectionHeaderStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tmargin-bottom: 20px;\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\n\t\t\t.network-list {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 4px;\n\t\t\t}\n\n\t\t\t.network-item {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 8px 12px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t}\n\n\t\t\t.network-item.active {\n\t\t\t\tborder-color: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.network-dot {\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 8px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.network-name {\n\t\t\t\tflex: 1;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.network-info {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.network-url {\n\t\t\t\tfont-size: 10px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.network-url-input {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: 3px 6px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tborder: 1px solid var(--dev-wallet-primary);\n\t\t\t\tbackground: var(--dev-wallet-background);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\toutline: none;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\n\t\t\t.network-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 2px;\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.btn-icon {\n\t\t\t\twidth: 22px;\n\t\t\t\theight: 22px;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.btn-icon:hover {\n\t\t\t\tbackground: var(--dev-wallet-border);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.btn-icon-danger:hover {\n\t\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t\t}\n\n\t\t\t.network-active-badge {\n\t\t\t\tfont-size: 9px;\n\t\t\t\tpadding: 1px 5px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-2xs);\n\t\t\t\tbackground: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\n\t\t\t.add-network-form {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 8px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\tpadding: 12px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\t\tborder: 1px dashed var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t}\n\n\t\t\t.form-input {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: 6px 8px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tborder: 1px solid var(--dev-wallet-input);\n\t\t\t\tbackground: var(--dev-wallet-background);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tfont-size: 12px;\n\t\t\t\tfont-family: inherit;\n\t\t\t\toutline: none;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\n\t\t\t.form-input:focus {\n\t\t\t\tborder-color: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.form-input::placeholder {\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.form-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 6px;\n\t\t\t}\n\n\t\t\t.btn-sm {\n\t\t\t\tpadding: 5px 10px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t}\n\n\t\t\t.btn-add {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t}\n\n\t\t\t.btn-add:disabled {\n\t\t\t\topacity: 0.5;\n\t\t\t}\n\n\t\t\t.btn-cancel {\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.btn-toggle {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\tpadding: 4px 0;\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\t.btn-toggle:hover {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t.cli-section-column {\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: flex-start;\n\t\t\t\tgap: 6px;\n\t\t\t}\n\n\t\t\t.cli-header-row {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.cli-accounts-list {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding-left: 16px;\n\t\t\t}\n\n\t\t\t.cli-accounts-list .network-url {\n\t\t\t\tpadding: 2px 0;\n\t\t\t}\n\n\t\t\t.cli-hint {\n\t\t\t\tpadding-left: 16px;\n\t\t\t\tmargin-top: 0;\n\t\t\t\tfont-size: 12px;\n\t\t\t}\n\n\t\t\t.cli-unpaired-hint {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.about {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tline-height: 1.5;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\t.bookmarklet-link-wrapper {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.bookmarklet-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 6px;\n\t\t\t\tpadding: 8px 14px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\ttext-decoration: none;\n\t\t\t\tcursor: grab;\n\t\t\t\tuser-select: none;\n\t\t\t}\n\n\t\t\t.bookmarklet-link:hover {\n\t\t\t\topacity: 0.9;\n\t\t\t}\n\n\t\t\t.bookmarklet-link:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t.bookmarklet-url {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tword-break: break-all;\n\t\t\t\tuser-select: all;\n\t\t\t}\n\n\t\t\t.console-snippet {\n\t\t\t\tposition: relative;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\tpadding: 10px 12px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tline-height: 1.5;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t\tword-break: break-all;\n\t\t\t\tuser-select: all;\n\t\t\t}\n\n\t\t\t.btn-copy {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 6px;\n\t\t\t\tright: 6px;\n\t\t\t\tpadding: 3px 8px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tbackground: var(--dev-wallet-border);\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-family: inherit;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.btn-copy:hover {\n\t\t\t\tbackground: var(--dev-wallet-input);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t@property({ attribute: false })\n\taccounts: readonly ReadonlyWalletAccount[] = [];\n\n\t@property({ attribute: false })\n\tadapters: SignerAdapter[] = [];\n\n\t@property({ type: String })\n\tactiveAddress = '';\n\n\t@property({ type: String })\n\tbookmarkletOrigin = '';\n\n\t@state()\n\tprivate _showAddNetwork = false;\n\n\t@state()\n\tprivate _networkName = '';\n\n\t@state()\n\tprivate _networkUrl = '';\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t@state()\n\tprivate _editingNetwork: string | null = null;\n\n\t@state()\n\tprivate _editingUrl = '';\n\n\t@state()\n\tprivate _copied = false;\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"section\">${this.#renderNetworks()}</div>\n\t\t\t${this.#hasCliAdapter()\n\t\t\t\t? html`<div class=\"section\">${this.#renderCliSigner()}</div>`\n\t\t\t\t: nothing}\n\t\t\t<div class=\"section\">${this.#renderAccounts()}</div>\n\t\t\t<div class=\"section\">${this.#renderBookmarklet()}</div>\n\t\t\t<div class=\"section\">${this.#renderAbout()}</div>\n\t\t`;\n\t}\n\n\t#renderNetworks() {\n\t\tif (!this.wallet) return nothing;\n\n\t\tconst networks = this.wallet.availableNetworks;\n\t\tconst activeNetwork = this.wallet.activeNetwork;\n\t\tconst urls = this.wallet.networkUrls;\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Networks</h3>\n\t\t\t<div class=\"network-list\">\n\t\t\t\t${networks.map((name) => {\n\t\t\t\t\tconst color = NETWORK_COLORS[name] ?? '#6b7280';\n\t\t\t\t\tconst isActive = name === activeNetwork;\n\t\t\t\t\tconst isEditing = this._editingNetwork === name;\n\t\t\t\t\treturn html`\n\t\t\t\t\t\t<div class=\"network-item ${isActive ? 'active' : ''}\">\n\t\t\t\t\t\t\t<span class=\"network-dot\" style=\"background: ${color}\"></span>\n\t\t\t\t\t\t\t<div class=\"network-info\">\n\t\t\t\t\t\t\t\t<span class=\"network-name\">${name}</span>\n\t\t\t\t\t\t\t\t${isEditing\n\t\t\t\t\t\t\t\t\t? html`<input\n\t\t\t\t\t\t\t\t\t\t\tclass=\"network-url-input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t.value=${this._editingUrl}\n\t\t\t\t\t\t\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis._editingUrl = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t@keydown=${(e: KeyboardEvent) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') this.#saveNetworkUrl(name);\n\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Escape') this.#cancelEditNetwork();\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t: html`<span class=\"network-url\" title=${urls[name] ?? ''}\n\t\t\t\t\t\t\t\t\t\t\t>${urls[name] ?? ''}</span\n\t\t\t\t\t\t\t\t\t\t>`}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"network-actions\">\n\t\t\t\t\t\t\t\t${isEditing\n\t\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Save\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Save URL\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#saveNetworkUrl(name)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#10003;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Cancel\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Cancel editing\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${this.#cancelEditNetwork}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#10005;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Edit URL\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Edit network URL\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#startEditNetwork(name, urls[name] ?? '')}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#9998;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t${!isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? html`<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon btn-icon-danger\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Remove\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Remove network\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#removeNetwork(name)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t&#10005;\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>`\n\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t\t\t${isActive ? html`<span class=\"network-active-badge\">Active</span>` : nothing}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`;\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t${this._showAddNetwork\n\t\t\t\t? this.#renderAddNetworkForm()\n\t\t\t\t: html`\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"btn-toggle\"\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis._showAddNetwork = true;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+ Add Network\n\t\t\t\t\t\t</button>\n\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\t#renderAddNetworkForm() {\n\t\treturn html`\n\t\t\t<div class=\"add-network-form\">\n\t\t\t\t<input\n\t\t\t\t\tclass=\"form-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"Network name (e.g. custom)\"\n\t\t\t\t\t.value=${this._networkName}\n\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\tthis._networkName = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\tthis._error = null;\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"form-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"gRPC URL (e.g. http://localhost:9000)\"\n\t\t\t\t\t.value=${this._networkUrl}\n\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\tthis._networkUrl = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\tthis._error = null;\n\t\t\t\t\t}}\n\t\t\t\t\t@keydown=${(e: KeyboardEvent) => {\n\t\t\t\t\t\tif (e.key === 'Enter') this.#addNetwork();\n\t\t\t\t\t\tif (e.key === 'Escape') this.#cancelAddNetwork();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t${this._error ? html`<div class=\"error\">${this._error}</div>` : nothing}\n\t\t\t\t<div class=\"form-actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"btn-sm btn-add\"\n\t\t\t\t\t\t?disabled=${!this._networkName.trim() || !this._networkUrl.trim()}\n\t\t\t\t\t\t@click=${this.#addNetwork}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"btn-sm btn-cancel\" @click=${this.#cancelAddNetwork}>Cancel</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#hasCliAdapter(): boolean {\n\t\treturn this.adapters.some((a) => a.id === 'remote-cli');\n\t}\n\n\t#renderCliSigner() {\n\t\tconst cliAdapter = this.adapters.find((a) => a.id === 'remote-cli');\n\t\tif (!cliAdapter) return nothing;\n\n\t\tconst isPaired = 'isPaired' in cliAdapter && (cliAdapter as { isPaired: boolean }).isPaired;\n\t\tconst cliAccounts = cliAdapter.getAccounts();\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">CLI Signer</h3>\n\t\t\t${isPaired\n\t\t\t\t? html`\n\t\t\t\t\t\t<div class=\"network-item active cli-section-column\">\n\t\t\t\t\t\t\t<div class=\"cli-header-row\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"network-dot\"\n\t\t\t\t\t\t\t\t\tstyle=\"background: var(--dev-wallet-status-connected)\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t<span class=\"network-name\">Connected</span>\n\t\t\t\t\t\t\t\t${cliAccounts.length > 0\n\t\t\t\t\t\t\t\t\t? html`<span class=\"network-active-badge\">${cliAccounts.length} imported</span>`\n\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t${cliAccounts.length > 0\n\t\t\t\t\t\t\t\t? html`<div class=\"cli-accounts-list\">\n\t\t\t\t\t\t\t\t\t\t${cliAccounts.map(\n\t\t\t\t\t\t\t\t\t\t\t(acc) => html`\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"network-url\">${acc.label} (${formatAddress(acc.address)})</div>\n\t\t\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: html`<div class=\"about cli-hint\">Use + Add above to import CLI accounts.</div>`}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`\n\t\t\t\t: html`\n\t\t\t\t\t\t<div class=\"network-item\">\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"network-dot\"\n\t\t\t\t\t\t\t\tstyle=\"background: var(--dev-wallet-status-disconnected)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t<span class=\"network-name\" style=\"color: var(--dev-wallet-muted-foreground)\"\n\t\t\t\t\t\t\t\t>Not connected</span\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"about cli-unpaired-hint\">\n\t\t\t\t\t\t\tOpen the token URL from your terminal to connect CLI accounts.\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\t#renderAccounts() {\n\t\treturn html`\n\t\t\t<dev-wallet-accounts\n\t\t\t\texportparts=\"account-list: accounts-account-list, add-button: accounts-add-button, empty-state: accounts-empty-state\"\n\t\t\t\t.accounts=${this.accounts}\n\t\t\t\t.adapters=${this.adapters}\n\t\t\t\t.activeAddress=${this.activeAddress}\n\t\t\t></dev-wallet-accounts>\n\t\t`;\n\t}\n\n\t#renderBookmarklet() {\n\t\tif (!this.bookmarkletOrigin) return nothing;\n\t\tconst origin = this.bookmarkletOrigin;\n\n\t\tconst bookmarkletJs = `${origin}/bookmarklet.js`;\n\t\tconst bookmarkletHref = `javascript:void(document.head.appendChild(Object.assign(document.createElement('script'),{src:'${bookmarkletJs}'})))`;\n\t\tconst consoleSnippet = `var s=document.createElement('script');s.src='${bookmarkletJs}';document.head.appendChild(s);`;\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Bookmarklet</h3>\n\t\t\t<div class=\"about\">\n\t\t\t\tDrag this link to your bookmarks bar, then click it on any dApp to inject the wallet:\n\t\t\t</div>\n\t\t\t<div class=\"bookmarklet-link-wrapper\">\n\t\t\t\t<a\n\t\t\t\t\tclass=\"bookmarklet-link\"\n\t\t\t\t\thref=${bookmarkletHref}\n\t\t\t\t\ttitle=\"Drag to bookmarks bar\"\n\t\t\t\t\t@click=${(e: MouseEvent) => e.preventDefault()}\n\t\t\t\t>\n\t\t\t\t\tDev Wallet\n\t\t\t\t</a>\n\t\t\t</div>\n\t\t\t<div class=\"about\" style=\"margin-top: 12px\">Or paste this in the browser console:</div>\n\t\t\t<div class=\"console-snippet\">\n\t\t\t\t${consoleSnippet}\n\t\t\t\t<button class=\"btn-copy\" @click=${() => this.#copySnippet(consoleSnippet)}>\n\t\t\t\t\t${this._copied ? 'Copied!' : 'Copy'}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div class=\"about\" style=\"margin-top: 8px\">\n\t\t\t\tOr add this script to your page:<br />\n\t\t\t\t<code class=\"bookmarklet-url\">${bookmarkletJs}</code>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#copySnippet(text: string) {\n\t\tnavigator.clipboard.writeText(text).then(() => {\n\t\t\tthis._copied = true;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis._copied = false;\n\t\t\t}, 2000);\n\t\t});\n\t}\n\n\t#renderAbout() {\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">About</h3>\n\t\t\t<div class=\"about\">\n\t\t\t\t<strong>${this.wallet?.name ?? 'Dev Wallet'}</strong><br />\n\t\t\t\tA development wallet for testing Sui dApps.<br />\n\t\t\t\t${this.wallet\n\t\t\t\t\t? html`${this.wallet.accounts.length} account(s) across ${this.wallet.adapters.length}\n\t\t\t\t\t\tadapter(s)`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#addNetwork() {\n\t\tif (!this.wallet) return;\n\n\t\tconst name = this._networkName.trim();\n\t\tconst url = this._networkUrl.trim();\n\n\t\tif (!name || !url) return;\n\n\t\tif (this.wallet.availableNetworks.includes(name)) {\n\t\t\tthis._error = `Network \"${name}\" already exists`;\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tthis.wallet.addNetwork(name, url);\n\t\t\tthis._networkName = '';\n\t\t\tthis._networkUrl = '';\n\t\t\tthis._showAddNetwork = false;\n\t\t\tthis._error = null;\n\t\t\temitEvent(this, 'network-added', { name, url });\n\t\t} catch (err) {\n\t\t\tthis._error = getErrorMessage(err, 'Failed to add network');\n\t\t}\n\t}\n\n\t#cancelAddNetwork() {\n\t\tthis._showAddNetwork = false;\n\t\tthis._networkName = '';\n\t\tthis._networkUrl = '';\n\t\tthis._error = null;\n\t}\n\n\t#startEditNetwork(name: string, url: string) {\n\t\tthis._editingNetwork = name;\n\t\tthis._editingUrl = url;\n\t}\n\n\t#saveNetworkUrl(name: string) {\n\t\tif (!this.wallet) return;\n\t\tconst url = this._editingUrl.trim();\n\t\tif (!url) return;\n\n\t\ttry {\n\t\t\tthis.wallet.addNetwork(name, url);\n\t\t\tthis._editingNetwork = null;\n\t\t\tthis._editingUrl = '';\n\t\t} catch (error) {\n\t\t\tthis._error = error instanceof Error ? error.message : 'Invalid URL';\n\t\t}\n\t}\n\n\t#cancelEditNetwork() {\n\t\tthis._editingNetwork = null;\n\t\tthis._editingUrl = '';\n\t}\n\n\t#removeNetwork(name: string) {\n\t\tif (!this.wallet) return;\n\t\tthis.wallet.removeNetwork(name);\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-settings': DevWalletSettings;\n\t}\n}\n"],"mappings":"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"}