@mysten-incubation/dev-wallet 0.5.0 → 0.6.0

package/dist/ui/dev-wallet-connect-guide.mjs

@@ -0,0 +1,386 @@
+import { CopyController } from "./copy-controller.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.mjs";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/ui/dev-wallet-connect-guide.ts
+function detectPlatform() {
+	const nav = globalThis.navigator;
+	if (!nav) return "desktop";
+	const ua = nav.userAgent;
+	if (/Android/.test(ua)) return /Firefox/.test(ua) ? "android-firefox" : "android";
+	if (/iPhone|iPad|iPod/.test(ua) || /Macintosh/.test(ua) && nav.maxTouchPoints > 1) return "ios";
+	return "desktop";
+}
+const BOOKMARKS_BAR_SHORTCUT = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? "") ? "⌘ Shift B" : "Ctrl Shift B";
+const TABS = [{
+	id: "bookmarklet",
+	label: "Bookmarklet"
+}, {
+	id: "dapp-kit",
+	label: "dApp Kit"
+}];
+let DevWalletConnectGuide = class DevWalletConnectGuide extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.origin = "";
+		this._dragNudge = false;
+		this._tab = "bookmarklet";
+		this.platform = detectPlatform();
+		this.#copy = new CopyController(this);
+		this.#nudgeDrag = (e) => {
+			e.preventDefault();
+			this._dragNudge = true;
+			setTimeout(() => {
+				this._dragNudge = false;
+			}, 2500);
+		};
+	}
+	static {
+		this.styles = css`
+		:host {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			font-size: 12px;
+			line-height: 1.55;
+			color: var(--dev-wallet-muted-foreground);
+		}
+
+		.tabs {
+			display: flex;
+			gap: 2px;
+			padding: 2px;
+			border-radius: var(--dev-wallet-radius-sm);
+			border: 1px solid var(--dev-wallet-border);
+			background: var(--dev-wallet-bg-1);
+		}
+
+		.tab {
+			flex: 1;
+			height: 26px;
+			border: 0;
+			border-radius: var(--dev-wallet-radius-xs);
+			background: transparent;
+			color: var(--dev-wallet-muted-foreground);
+			font: inherit;
+			font-weight: var(--dev-wallet-font-weight-medium);
+			cursor: pointer;
+		}
+
+		.tab:hover {
+			color: var(--dev-wallet-foreground);
+		}
+
+		.tab[aria-selected='true'] {
+			background: var(--dev-wallet-bg-3);
+			color: var(--dev-wallet-foreground);
+		}
+
+		.panel {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			padding-top: 4px;
+		}
+
+		.guide-title {
+			margin: 0;
+			font-family: var(--dev-wallet-font-mono);
+			font-size: 10px;
+			font-weight: var(--dev-wallet-font-weight-medium);
+			letter-spacing: 0.14em;
+			text-transform: uppercase;
+			color: var(--dev-wallet-text-3);
+		}
+
+		.guide p {
+			margin: 0;
+		}
+
+		.guide strong {
+			color: var(--dev-wallet-foreground);
+			font-weight: var(--dev-wallet-font-weight-medium);
+		}
+
+		.steps {
+			margin: 0;
+			padding-left: 18px;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.steps li::marker {
+			color: var(--dev-wallet-text-3);
+			font-family: var(--dev-wallet-font-mono);
+			font-size: 11px;
+		}
+
+		.steps .bookmarklet-row {
+			margin-top: 6px;
+		}
+
+		kbd {
+			padding: 1px 5px;
+			border-radius: var(--dev-wallet-radius-2xs);
+			border: 1px solid var(--dev-wallet-border-strong);
+			background: var(--dev-wallet-bg-2);
+			font-family: var(--dev-wallet-font-mono);
+			font-size: 10.5px;
+			color: var(--dev-wallet-foreground);
+		}
+
+		.bookmarklet-row {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 10px;
+		}
+
+		.bookmarklet {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			padding: 6px 12px;
+			border-radius: var(--dev-wallet-radius-sm);
+			border: 1px solid var(--dev-wallet-border-strong);
+			background: var(--dev-wallet-bg-2);
+			color: var(--dev-wallet-foreground);
+			font-weight: var(--dev-wallet-font-weight-medium);
+			text-decoration: none;
+			cursor: grab;
+			user-select: none;
+		}
+
+		.bookmarklet:hover {
+			background: var(--dev-wallet-bg-hover);
+		}
+
+		.bookmarklet:active {
+			cursor: grabbing;
+		}
+
+		.bookmarklet svg {
+			width: 13px;
+			height: 13px;
+		}
+
+		.hint {
+			font-size: 11px;
+			color: var(--dev-wallet-text-3);
+		}
+
+		.hint.nudge {
+			color: var(--dev-wallet-warning);
+		}
+
+		.link-btn {
+			align-self: flex-start;
+			text-align: left;
+			padding: 0;
+			border: 0;
+			background: none;
+			color: var(--dev-wallet-muted-foreground);
+			font: inherit;
+			text-decoration: underline;
+			text-underline-offset: 2px;
+			cursor: pointer;
+		}
+
+		.link-btn.inline {
+			display: inline;
+		}
+
+		.link-btn:hover {
+			color: var(--dev-wallet-foreground);
+		}
+
+		.snippet {
+			position: relative;
+			border-radius: var(--dev-wallet-radius);
+			border: 1px solid var(--dev-wallet-border);
+			background: var(--dev-wallet-bg-1);
+		}
+
+		.snippet pre,
+		.snippet code {
+			font-family: var(--dev-wallet-font-mono);
+		}
+
+		.snippet pre {
+			margin: 0;
+			padding: 10px 12px;
+			overflow-x: auto;
+			font-size: 10.5px;
+			line-height: 1.6;
+			color: var(--dev-wallet-foreground);
+		}
+
+		.snippet .btn-copy {
+			position: absolute;
+			top: 6px;
+			right: 6px;
+		}
+
+		.btn-copy {
+			height: 22px;
+			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-family: var(--dev-wallet-font-sans);
+			font-size: 10.5px;
+			font-weight: var(--dev-wallet-font-weight-medium);
+			cursor: pointer;
+		}
+
+		.btn-copy:hover {
+			background: var(--dev-wallet-bg-hover);
+			border-color: var(--dev-wallet-border-strong);
+		}
+	`;
+	}
+	#copy;
+	render() {
+		const origin = this.origin;
+		const scriptUrl = `${origin}/bookmarklet.js`;
+		const bookmarkletHref = `javascript:void(document.head.appendChild(Object.assign(document.createElement('script'),{src:'${scriptUrl}'})))`;
+		const consoleScript = `var s=document.createElement('script');s.src='${scriptUrl}';document.head.appendChild(s);`;
+		const dappKitSnippet = `import {
+  devWalletClientInitializer,
+} from '@mysten-incubation/dev-wallet/client';
+
+createDAppKit({
+  networks: ['devnet'],
+  walletInitializers: [
+    devWalletClientInitializer({
+      origin: '${origin}',
+    }),
+  ],
+});`;
+		return html`
+			<h2 class="guide-title">Connect an app</h2>
+			<div class="tabs" role="tablist" aria-label="Connection method">
+				${TABS.map(({ id, label }) => html`<button
+							role="tab"
+							class="tab"
+							aria-selected=${this._tab === id}
+							@click=${() => this._tab = id}
+						>
+							${label}
+						</button>`)}
+			</div>
+			<div role="tabpanel" class="panel">
+				${this._tab === "bookmarklet" ? this.platform === "desktop" ? this.#renderBookmarklet(bookmarkletHref, consoleScript) : this.#renderMobileBookmarklet(bookmarkletHref) : this.#renderDappKit(dappKitSnippet)}
+			</div>
+		`;
+	}
+	#renderBookmarklet(bookmarkletHref, consoleScript) {
+		return html`
+			<p>Add this wallet to any dApp without changing its code.</p>
+			<ol class="steps">
+				<li>Show your browser's bookmarks bar (<kbd>${BOOKMARKS_BAR_SHORTCUT}</kbd>).</li>
+				<li>
+					Drag this button onto the bookmarks bar:
+					<div class="bookmarklet-row">
+						<a
+							class="bookmarklet"
+							href=${bookmarkletHref}
+							title="Drag to your bookmarks bar"
+							@click=${this.#nudgeDrag}
+							>${this.#walletIcon} Dev Wallet</a
+						>
+						${this._dragNudge ? html`<span class="hint nudge">Drag it, don't click it</span>` : nothing}
+					</div>
+				</li>
+				<li>
+					Open your dApp and click the bookmark. Then choose
+					<strong>Dev Wallet (Web)</strong> in the dApp's wallet picker.
+				</li>
+			</ol>
+			<p class="hint">
+				The bookmark only lasts until the page reloads. After a reload, click it again.
+			</p>
+			<button class="link-btn" type="button" @click=${() => this.#copy.copy(consoleScript)}>
+				${this.#copy.isCopied(consoleScript) ? "Copied. Paste it into the dApp’s browser console." : "Can’t use bookmarks? Copy a script for the dApp’s console instead."}
+			</button>
+		`;
+	}
+	#renderMobileBookmarklet(bookmarkletHref) {
+		if (this.platform === "android-firefox") return html`
+				<p>
+					Firefox for Android doesn't run bookmarklets. Open the dApp in Chrome, or use the
+					<button class="link-btn inline" type="button" @click=${() => this._tab = "dapp-kit"}>
+						dApp Kit
+					</button>
+					option if you're building the app.
+				</p>
+			`;
+		return html`
+			<p>Add this wallet to any dApp without changing its code. Phones can't drag bookmarks, so:</p>
+			<ol class="steps">
+				<li>
+					<button class="btn-copy" type="button" @click=${() => this.#copy.copy(bookmarkletHref)}>
+						${this.#copy.isCopied(bookmarkletHref) ? "Copied" : "Copy bookmarklet code"}
+					</button>
+				</li>
+				${this.platform === "ios" ? html`
+							<li>Bookmark this page, then open Bookmarks and edit the new bookmark.</li>
+							<li>Replace its address with the copied code and tap Done.</li>
+							<li>
+								On your dApp, open Bookmarks and tap the bookmark. Then choose
+								<strong>Dev Wallet (Web)</strong> in the dApp's wallet picker.
+							</li>
+						` : html`
+							<li>
+								Bookmark this page, then edit the bookmark: name it "Dev Wallet" and replace its URL
+								with the copied code.
+							</li>
+							<li>
+								On your dApp, type "Dev Wallet" in the address bar and tap the bookmark suggestion
+								(opening it from the bookmarks list won't work). Then choose
+								<strong>Dev Wallet (Web)</strong> in the dApp's wallet picker.
+							</li>
+						`}
+			</ol>
+			<p class="hint">
+				The bookmark only lasts until the page reloads. After a reload, run it again.
+			</p>
+		`;
+	}
+	#renderDappKit(dappKitSnippet) {
+		return html`
+			<p>Register the wallet with dApp Kit so it's always in your app's wallet picker.</p>
+			<div class="snippet">
+				<button
+					class="btn-copy"
+					type="button"
+					aria-label="Copy dApp Kit snippet"
+					@click=${() => this.#copy.copy(dappKitSnippet)}
+				>
+					${this.#copy.isCopied(dappKitSnippet) ? "Copied" : "Copy"}
+				</button>
+				<pre><code>${dappKitSnippet}</code></pre>
+			</div>
+		`;
+	}
+	#nudgeDrag;
+	get #walletIcon() {
+		return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
+			<rect x="2" y="6" width="20" height="14" rx="2.5" />
+			<path d="M2 10h20" />
+			<rect x="15" y="12" width="5" height="4" rx="1" />
+			<circle cx="17.5" cy="14" r="0.5" fill="currentColor" stroke="none" />
+		</svg>`;
+	}
+};
+__decorate([property({ type: String })], DevWalletConnectGuide.prototype, "origin", void 0);
+__decorate([state()], DevWalletConnectGuide.prototype, "_dragNudge", void 0);
+__decorate([state()], DevWalletConnectGuide.prototype, "_tab", void 0);
+__decorate([property({ attribute: false })], DevWalletConnectGuide.prototype, "platform", void 0);
+DevWalletConnectGuide = __decorate([customElement("dev-wallet-connect-guide")], DevWalletConnectGuide);
+//#endregion
+export { DevWalletConnectGuide };
+
+//# sourceMappingURL=dev-wallet-connect-guide.mjs.map

package/dist/ui/dev-wallet-connect-guide.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-connect-guide.mjs","names":["#renderBookmarklet","#renderMobileBookmarklet","#renderDappKit","#nudgeDrag","#walletIcon","#copy"],"sources":["../../src/ui/dev-wallet-connect-guide.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { CopyController } from './copy-controller.js';\n\n/**\n * How to point a dApp at a hosted/standalone dev wallet: a draggable\n * bookmarklet, a console script, and a dApp Kit snippet — all derived from\n * the wallet's `origin`. Rendered beside the standalone wallet on wide\n * screens and at the top of its Settings tab.\n */\ntype Platform = 'ios' | 'android' | 'android-firefox' | 'desktop';\n\nfunction detectPlatform(): Platform {\n\tconst nav = globalThis.navigator;\n\tif (!nav) return 'desktop';\n\tconst ua = nav.userAgent;\n\tif (/Android/.test(ua)) return /Firefox/.test(ua) ? 'android-firefox' : 'android';\n\t// iPadOS reports itself as a Mac; touch support gives it away.\n\tif (/iPhone|iPad|iPod/.test(ua) || (/Macintosh/.test(ua) && nav.maxTouchPoints > 1)) {\n\t\treturn 'ios';\n\t}\n\treturn 'desktop';\n}\n\nconst BOOKMARKS_BAR_SHORTCUT = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? '')\n\t? '⌘ Shift B'\n\t: 'Ctrl Shift B';\n\ntype TabId = 'bookmarklet' | 'dapp-kit';\nconst TABS: { id: TabId; label: string }[] = [\n\t{ id: 'bookmarklet', label: 'Bookmarklet' },\n\t{ id: 'dapp-kit', label: 'dApp Kit' },\n];\n\n@customElement('dev-wallet-connect-guide')\nexport class DevWalletConnectGuide extends LitElement {\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 10px;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 1.55;\n\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t}\n\n\t\t.tabs {\n\t\t\tdisplay: flex;\n\t\t\tgap: 2px;\n\t\t\tpadding: 2px;\n\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\tbackground: var(--dev-wallet-bg-1);\n\t\t}\n\n\t\t.tab {\n\t\t\tflex: 1;\n\t\t\theight: 26px;\n\t\t\tborder: 0;\n\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\tfont: inherit;\n\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t.tab:hover {\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t}\n\n\t\t.tab[aria-selected='true'] {\n\t\t\tbackground: var(--dev-wallet-bg-3);\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t}\n\n\t\t.panel {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 10px;\n\t\t\tpadding-top: 4px;\n\t\t}\n\n\t\t.guide-title {\n\t\t\tmargin: 0;\n\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\tfont-size: 10px;\n\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\tletter-spacing: 0.14em;\n\t\t\ttext-transform: uppercase;\n\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t}\n\n\t\t.guide p {\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.guide strong {\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t}\n\n\t\t.steps {\n\t\t\tmargin: 0;\n\t\t\tpadding-left: 18px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 8px;\n\t\t}\n\n\t\t.steps li::marker {\n\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\tfont-size: 11px;\n\t\t}\n\n\t\t.steps .bookmarklet-row {\n\t\t\tmargin-top: 6px;\n\t\t}\n\n\t\tkbd {\n\t\t\tpadding: 1px 5px;\n\t\t\tborder-radius: var(--dev-wallet-radius-2xs);\n\t\t\tborder: 1px solid var(--dev-wallet-border-strong);\n\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\tfont-size: 10.5px;\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t}\n\n\t\t.bookmarklet-row {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex-wrap: wrap;\n\t\t\tgap: 10px;\n\t\t}\n\n\t\t.bookmarklet {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 6px;\n\t\t\tpadding: 6px 12px;\n\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\tborder: 1px solid var(--dev-wallet-border-strong);\n\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\ttext-decoration: none;\n\t\t\tcursor: grab;\n\t\t\tuser-select: none;\n\t\t}\n\n\t\t.bookmarklet:hover {\n\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t}\n\n\t\t.bookmarklet:active {\n\t\t\tcursor: grabbing;\n\t\t}\n\n\t\t.bookmarklet svg {\n\t\t\twidth: 13px;\n\t\t\theight: 13px;\n\t\t}\n\n\t\t.hint {\n\t\t\tfont-size: 11px;\n\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t}\n\n\t\t.hint.nudge {\n\t\t\tcolor: var(--dev-wallet-warning);\n\t\t}\n\n\t\t.link-btn {\n\t\t\talign-self: flex-start;\n\t\t\ttext-align: left;\n\t\t\tpadding: 0;\n\t\t\tborder: 0;\n\t\t\tbackground: none;\n\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\tfont: inherit;\n\t\t\ttext-decoration: underline;\n\t\t\ttext-underline-offset: 2px;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t.link-btn.inline {\n\t\t\tdisplay: inline;\n\t\t}\n\n\t\t.link-btn:hover {\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t}\n\n\t\t.snippet {\n\t\t\tposition: relative;\n\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\tbackground: var(--dev-wallet-bg-1);\n\t\t}\n\n\t\t.snippet pre,\n\t\t.snippet code {\n\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t}\n\n\t\t.snippet pre {\n\t\t\tmargin: 0;\n\t\t\tpadding: 10px 12px;\n\t\t\toverflow-x: auto;\n\t\t\tfont-size: 10.5px;\n\t\t\tline-height: 1.6;\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t}\n\n\t\t.snippet .btn-copy {\n\t\t\tposition: absolute;\n\t\t\ttop: 6px;\n\t\t\tright: 6px;\n\t\t}\n\n\t\t.btn-copy {\n\t\t\theight: 22px;\n\t\t\tpadding: 0 8px;\n\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\tfont-family: var(--dev-wallet-font-sans);\n\t\t\tfont-size: 10.5px;\n\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t.btn-copy:hover {\n\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t\tborder-color: var(--dev-wallet-border-strong);\n\t\t}\n\t`;\n\n\t/** Origin the wallet is served from (e.g. `https://sui-dev-wallet.vercel.app`). */\n\t@property({ type: String })\n\torigin = '';\n\n\t@state()\n\tprivate _dragNudge = false;\n\n\t@state()\n\tprivate _tab: TabId = 'bookmarklet';\n\n\t/** Phones can't drag bookmarklets, so they get copy-and-edit steps instead. */\n\t@property({ attribute: false })\n\tplatform: Platform = detectPlatform();\n\n\t#copy = new CopyController(this);\n\n\toverride render() {\n\t\tconst origin = this.origin;\n\t\tconst scriptUrl = `${origin}/bookmarklet.js`;\n\t\tconst bookmarkletHref = `javascript:void(document.head.appendChild(Object.assign(document.createElement('script'),{src:'${scriptUrl}'})))`;\n\t\tconst consoleScript = `var s=document.createElement('script');s.src='${scriptUrl}';document.head.appendChild(s);`;\n\t\tconst dappKitSnippet = `import {\n  devWalletClientInitializer,\n} from '@mysten-incubation/dev-wallet/client';\n\ncreateDAppKit({\n  networks: ['devnet'],\n  walletInitializers: [\n    devWalletClientInitializer({\n      origin: '${origin}',\n    }),\n  ],\n});`;\n\n\t\treturn html`\n\t\t\t<h2 class=\"guide-title\">Connect an app</h2>\n\t\t\t<div class=\"tabs\" role=\"tablist\" aria-label=\"Connection method\">\n\t\t\t\t${TABS.map(\n\t\t\t\t\t({ id, label }) =>\n\t\t\t\t\t\thtml`<button\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\tclass=\"tab\"\n\t\t\t\t\t\t\taria-selected=${this._tab === id}\n\t\t\t\t\t\t\t@click=${() => (this._tab = id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${label}\n\t\t\t\t\t\t</button>`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div role=\"tabpanel\" class=\"panel\">\n\t\t\t\t${this._tab === 'bookmarklet'\n\t\t\t\t\t? this.platform === 'desktop'\n\t\t\t\t\t\t? this.#renderBookmarklet(bookmarkletHref, consoleScript)\n\t\t\t\t\t\t: this.#renderMobileBookmarklet(bookmarkletHref)\n\t\t\t\t\t: this.#renderDappKit(dappKitSnippet)}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#renderBookmarklet(bookmarkletHref: string, consoleScript: string) {\n\t\treturn html`\n\t\t\t<p>Add this wallet to any dApp without changing its code.</p>\n\t\t\t<ol class=\"steps\">\n\t\t\t\t<li>Show your browser's bookmarks bar (<kbd>${BOOKMARKS_BAR_SHORTCUT}</kbd>).</li>\n\t\t\t\t<li>\n\t\t\t\t\tDrag this button onto the bookmarks bar:\n\t\t\t\t\t<div class=\"bookmarklet-row\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclass=\"bookmarklet\"\n\t\t\t\t\t\t\thref=${bookmarkletHref}\n\t\t\t\t\t\t\ttitle=\"Drag to your bookmarks bar\"\n\t\t\t\t\t\t\t@click=${this.#nudgeDrag}\n\t\t\t\t\t\t\t>${this.#walletIcon} Dev Wallet</a\n\t\t\t\t\t\t>\n\t\t\t\t\t\t${this._dragNudge\n\t\t\t\t\t\t\t? html`<span class=\"hint nudge\">Drag it, don't click it</span>`\n\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\tOpen your dApp and click the bookmark. Then choose\n\t\t\t\t\t<strong>Dev Wallet (Web)</strong> in the dApp's wallet picker.\n\t\t\t\t</li>\n\t\t\t</ol>\n\t\t\t<p class=\"hint\">\n\t\t\t\tThe bookmark only lasts until the page reloads. After a reload, click it again.\n\t\t\t</p>\n\t\t\t<button class=\"link-btn\" type=\"button\" @click=${() => this.#copy.copy(consoleScript)}>\n\t\t\t\t${this.#copy.isCopied(consoleScript)\n\t\t\t\t\t? 'Copied. Paste it into the dApp’s browser console.'\n\t\t\t\t\t: 'Can’t use bookmarks? Copy a script for the dApp’s console instead.'}\n\t\t\t</button>\n\t\t`;\n\t}\n\n\t#renderMobileBookmarklet(bookmarkletHref: string) {\n\t\tif (this.platform === 'android-firefox') {\n\t\t\treturn html`\n\t\t\t\t<p>\n\t\t\t\t\tFirefox for Android doesn't run bookmarklets. Open the dApp in Chrome, or use the\n\t\t\t\t\t<button class=\"link-btn inline\" type=\"button\" @click=${() => (this._tab = 'dapp-kit')}>\n\t\t\t\t\t\tdApp Kit\n\t\t\t\t\t</button>\n\t\t\t\t\toption if you're building the app.\n\t\t\t\t</p>\n\t\t\t`;\n\t\t}\n\t\tconst copied = this.#copy.isCopied(bookmarkletHref);\n\t\treturn html`\n\t\t\t<p>Add this wallet to any dApp without changing its code. Phones can't drag bookmarks, so:</p>\n\t\t\t<ol class=\"steps\">\n\t\t\t\t<li>\n\t\t\t\t\t<button class=\"btn-copy\" type=\"button\" @click=${() => this.#copy.copy(bookmarkletHref)}>\n\t\t\t\t\t\t${copied ? 'Copied' : 'Copy bookmarklet code'}\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t\t${this.platform === 'ios'\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<li>Bookmark this page, then open Bookmarks and edit the new bookmark.</li>\n\t\t\t\t\t\t\t<li>Replace its address with the copied code and tap Done.</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\tOn your dApp, open Bookmarks and tap the bookmark. Then choose\n\t\t\t\t\t\t\t\t<strong>Dev Wallet (Web)</strong> in the dApp's wallet picker.\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t`\n\t\t\t\t\t: html`\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\tBookmark this page, then edit the bookmark: name it \"Dev Wallet\" and replace its URL\n\t\t\t\t\t\t\t\twith the copied code.\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\tOn your dApp, type \"Dev Wallet\" in the address bar and tap the bookmark suggestion\n\t\t\t\t\t\t\t\t(opening it from the bookmarks list won't work). Then choose\n\t\t\t\t\t\t\t\t<strong>Dev Wallet (Web)</strong> in the dApp's wallet picker.\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t`}\n\t\t\t</ol>\n\t\t\t<p class=\"hint\">\n\t\t\t\tThe bookmark only lasts until the page reloads. After a reload, run it again.\n\t\t\t</p>\n\t\t`;\n\t}\n\n\t#renderDappKit(dappKitSnippet: string) {\n\t\treturn html`\n\t\t\t<p>Register the wallet with dApp Kit so it's always in your app's wallet picker.</p>\n\t\t\t<div class=\"snippet\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"btn-copy\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-label=\"Copy dApp Kit snippet\"\n\t\t\t\t\t@click=${() => this.#copy.copy(dappKitSnippet)}\n\t\t\t\t>\n\t\t\t\t\t${this.#copy.isCopied(dappKitSnippet) ? 'Copied' : 'Copy'}\n\t\t\t\t</button>\n\t\t\t\t<pre><code>${dappKitSnippet}</code></pre>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#nudgeDrag = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\tthis._dragNudge = true;\n\t\tsetTimeout(() => {\n\t\t\tthis._dragNudge = false;\n\t\t}, 2500);\n\t};\n\n\tget #walletIcon() {\n\t\treturn html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\">\n\t\t\t<rect x=\"2\" y=\"6\" width=\"20\" height=\"14\" rx=\"2.5\" />\n\t\t\t<path d=\"M2 10h20\" />\n\t\t\t<rect x=\"15\" y=\"12\" width=\"5\" height=\"4\" rx=\"1\" />\n\t\t\t<circle cx=\"17.5\" cy=\"14\" r=\"0.5\" fill=\"currentColor\" stroke=\"none\" />\n\t\t</svg>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-connect-guide': DevWalletConnectGuide;\n\t}\n}\n"],"mappings":"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"}

package/dist/ui/dev-wallet-connected-apps.d.mts

@@ -0,0 +1,27 @@
+import { ConnectedAppsStore } from "../client/connected-apps.mjs";
+import { LitElement } from "lit";
+
+//#region src/ui/dev-wallet-connected-apps.d.ts
+/**
+ * Lists the dApps connected to a standalone wallet, with a Disconnect action
+ * per app. Disconnecting makes the wallet reject that app's signing requests
+ * until it connects again.
+ */
+declare class DevWalletConnectedApps extends LitElement {
+  #private;
+  static styles: import("lit").CSSResult;
+  store: ConnectedAppsStore | null;
+  private _apps;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  willUpdate(changed: Map<string, unknown>): void;
+  render(): import("lit").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'dev-wallet-connected-apps': DevWalletConnectedApps;
+  }
+} //# sourceMappingURL=dev-wallet-connected-apps.d.ts.map
+//#endregion
+export { DevWalletConnectedApps };
+//# sourceMappingURL=dev-wallet-connected-apps.d.mts.map

package/dist/ui/dev-wallet-connected-apps.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-connected-apps.d.mts","names":[],"sources":["../../src/ui/dev-wallet-connected-apps.ts"],"mappings":";;;;;;AAcA;;;cACa,sBAAA,SAA+B,UAAA;EAAA;SAC3B,MAAA,gBAAM,SAAA;EAwFtB,KAAA,EAAO,kBAAA;EAAA,QAGC,KAAA;EAIC,iBAAA;EAKA,oBAAA;EAMA,UAAA,CAAW,OAAA,EAAS,GAAA;EAmBpB,MAAA,kBAAM,cAAA;AAAA;AAAA,QA6CR,MAAA;EAAA,UACG,qBAAA;IACT,2BAAA,EAA6B,sBAAsB;EAAA;AAAA"}

package/dist/ui/dev-wallet-connected-apps.mjs

@@ -0,0 +1,164 @@
+import { formatAddress } from "./utils.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.mjs";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/ui/dev-wallet-connected-apps.ts
+let DevWalletConnectedApps = class DevWalletConnectedApps extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.store = null;
+		this._apps = [];
+		this.#unsubscribe = null;
+	}
+	static {
+		this.styles = css`
+		:host {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			font-size: 12px;
+			line-height: 1.5;
+			color: var(--dev-wallet-muted-foreground);
+		}
+
+		.title {
+			margin: 0;
+			font-family: var(--dev-wallet-font-mono);
+			font-size: 10px;
+			font-weight: var(--dev-wallet-font-weight-medium);
+			letter-spacing: 0.14em;
+			text-transform: uppercase;
+			color: var(--dev-wallet-text-3);
+		}
+
+		.empty {
+			margin: 0;
+			color: var(--dev-wallet-text-3);
+		}
+
+		ul {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		li {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			padding: 8px 8px 8px 10px;
+			border-radius: var(--dev-wallet-radius-lg);
+			border: 1px solid var(--dev-wallet-border);
+			background: var(--dev-wallet-bg-1);
+		}
+
+		.info {
+			flex: 1;
+			min-width: 0;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.name {
+			color: var(--dev-wallet-foreground);
+			font-weight: var(--dev-wallet-font-weight-medium);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.meta {
+			font-family: var(--dev-wallet-font-mono);
+			font-size: 10.5px;
+			color: var(--dev-wallet-text-3);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.disconnect {
+			flex-shrink: 0;
+			height: 24px;
+			padding: 0 8px;
+			border-radius: var(--dev-wallet-radius-xs);
+			border: 1px solid var(--dev-wallet-border);
+			background: transparent;
+			color: var(--dev-wallet-text-2);
+			font: inherit;
+			font-size: 11px;
+			cursor: pointer;
+		}
+
+		.disconnect:hover {
+			border-color: var(--dev-wallet-destructive);
+			color: var(--dev-wallet-destructive);
+		}
+	`;
+	}
+	#unsubscribe;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#bind();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unsubscribe?.();
+		this.#unsubscribe = null;
+	}
+	willUpdate(changed) {
+		if (changed.has("store") && this.isConnected) this.#bind();
+	}
+	#bind() {
+		this.#unsubscribe?.();
+		this.#unsubscribe = this.store?.subscribe(() => this.#load()) ?? null;
+		this.#load();
+	}
+	#load() {
+		this._apps = this.store?.list() ?? [];
+	}
+	#disconnect(origin) {
+		this.store?.remove(origin);
+		this.#load();
+	}
+	render() {
+		return html`
+			<h2 class="title">Connected apps</h2>
+			${this._apps.length === 0 ? html`<p class="empty">No apps connected yet.</p>` : html`<ul>
+						${this._apps.map((app) => html`<li>
+									<div class="info">
+										<span class="name" title=${app.name}>${app.name || safeHost(app.origin)}</span>
+										<span class="meta" title=${app.origin}>${this.#describe(app)}</span>
+									</div>
+									<button
+										class="disconnect"
+										type="button"
+										aria-label=${`Disconnect ${app.origin}`}
+										@click=${() => this.#disconnect(app.origin)}
+									>
+										Disconnect
+									</button>
+								</li>`)}
+					</ul>`}
+		`;
+	}
+	#describe(app) {
+		return `${safeHost(app.origin)} · ${app.accounts.length === 1 ? formatAddress(app.accounts[0]) : `${app.accounts.length} accounts`}`;
+	}
+};
+__decorate([property({ attribute: false })], DevWalletConnectedApps.prototype, "store", void 0);
+__decorate([state()], DevWalletConnectedApps.prototype, "_apps", void 0);
+DevWalletConnectedApps = __decorate([customElement("dev-wallet-connected-apps")], DevWalletConnectedApps);
+function safeHost(origin) {
+	try {
+		return new URL(origin).host;
+	} catch {
+		return origin;
+	}
+}
+//#endregion
+export { DevWalletConnectedApps };
+
+//# sourceMappingURL=dev-wallet-connected-apps.mjs.map

package/dist/ui/dev-wallet-connected-apps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-connected-apps.mjs","names":["#bind","#unsubscribe","#load","#describe","#disconnect"],"sources":["../../src/ui/dev-wallet-connected-apps.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport type { ConnectedApp, ConnectedAppsStore } from '../client/connected-apps.js';\nimport { formatAddress } from './utils.js';\n\n/**\n * Lists the dApps connected to a standalone wallet, with a Disconnect action\n * per app. Disconnecting makes the wallet reject that app's signing requests\n * until it connects again.\n */\n@customElement('dev-wallet-connected-apps')\nexport class DevWalletConnectedApps extends LitElement {\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 10px;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 1.5;\n\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t}\n\n\t\t.title {\n\t\t\tmargin: 0;\n\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\tfont-size: 10px;\n\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\tletter-spacing: 0.14em;\n\t\t\ttext-transform: uppercase;\n\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t}\n\n\t\t.empty {\n\t\t\tmargin: 0;\n\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t}\n\n\t\tul {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 6px;\n\t\t}\n\n\t\tli {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 10px;\n\t\t\tpadding: 8px 8px 8px 10px;\n\t\t\tborder-radius: var(--dev-wallet-radius-lg);\n\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\tbackground: var(--dev-wallet-bg-1);\n\t\t}\n\n\t\t.info {\n\t\t\tflex: 1;\n\t\t\tmin-width: 0;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.name {\n\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.meta {\n\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\tfont-size: 10.5px;\n\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.disconnect {\n\t\t\tflex-shrink: 0;\n\t\t\theight: 24px;\n\t\t\tpadding: 0 8px;\n\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--dev-wallet-text-2);\n\t\t\tfont: inherit;\n\t\t\tfont-size: 11px;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t.disconnect:hover {\n\t\t\tborder-color: var(--dev-wallet-destructive);\n\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t}\n\t`;\n\n\t@property({ attribute: false })\n\tstore: ConnectedAppsStore | null = null;\n\n\t@state()\n\tprivate _apps: ConnectedApp[] = [];\n\n\t#unsubscribe: (() => void) | null = null;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.#bind();\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.#unsubscribe?.();\n\t\tthis.#unsubscribe = null;\n\t}\n\n\toverride willUpdate(changed: Map<string, unknown>) {\n\t\tif (changed.has('store') && this.isConnected) this.#bind();\n\t}\n\n\t#bind() {\n\t\tthis.#unsubscribe?.();\n\t\tthis.#unsubscribe = this.store?.subscribe(() => this.#load()) ?? null;\n\t\tthis.#load();\n\t}\n\n\t#load() {\n\t\tthis._apps = this.store?.list() ?? [];\n\t}\n\n\t#disconnect(origin: string) {\n\t\tthis.store?.remove(origin);\n\t\tthis.#load();\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<h2 class=\"title\">Connected apps</h2>\n\t\t\t${this._apps.length === 0\n\t\t\t\t? html`<p class=\"empty\">No apps connected yet.</p>`\n\t\t\t\t: html`<ul>\n\t\t\t\t\t\t${this._apps.map(\n\t\t\t\t\t\t\t(app) =>\n\t\t\t\t\t\t\t\thtml`<li>\n\t\t\t\t\t\t\t\t\t<div class=\"info\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"name\" title=${app.name}>${app.name || safeHost(app.origin)}</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"meta\" title=${app.origin}>${this.#describe(app)}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"disconnect\"\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\taria-label=${`Disconnect ${app.origin}`}\n\t\t\t\t\t\t\t\t\t\t@click=${() => this.#disconnect(app.origin)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tDisconnect\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</li>`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>`}\n\t\t`;\n\t}\n\n\t#describe(app: ConnectedApp) {\n\t\tconst host = safeHost(app.origin);\n\t\tconst accounts =\n\t\t\tapp.accounts.length === 1\n\t\t\t\t? formatAddress(app.accounts[0])\n\t\t\t\t: `${app.accounts.length} accounts`;\n\t\treturn `${host} · ${accounts}`;\n\t}\n}\n\nfunction safeHost(origin: string): string {\n\ttry {\n\t\treturn new URL(origin).host;\n\t} catch {\n\t\treturn origin;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-connected-apps': DevWalletConnectedApps;\n\t}\n}\n"],"mappings":";;;;;AAeO,IAAA,yBAAA,MAAM,+BAA+B,WAAW;;;eAyFnB;eAGH,CAAC;sBAEG;;;gBA7FX,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5B;CAEA,oBAA6B;EAC5B,MAAM,kBAAkB;EACxB,KAAKA,MAAM;CACZ;CAEA,uBAAgC;EAC/B,MAAM,qBAAqB;EAC3B,KAAKC,eAAe;EACpB,KAAKA,eAAe;CACrB;CAEA,WAAoB,SAA+B;EAClD,IAAI,QAAQ,IAAI,OAAO,KAAK,KAAK,aAAa,KAAKD,MAAM;CAC1D;CAEA,QAAQ;EACP,KAAKC,eAAe;EACpB,KAAKA,eAAe,KAAK,OAAO,gBAAgB,KAAKC,MAAM,CAAC,KAAK;EACjE,KAAKA,MAAM;CACZ;CAEA,QAAQ;EACP,KAAK,QAAQ,KAAK,OAAO,KAAK,KAAK,CAAC;CACrC;CAEA,YAAY,QAAgB;EAC3B,KAAK,OAAO,OAAO,MAAM;EACzB,KAAKA,MAAM;CACZ;CAEA,SAAkB;EACjB,OAAO,IAAI;;KAER,KAAK,MAAM,WAAW,IACrB,IAAI,gDACJ,IAAI;QACF,KAAK,MAAM,KACX,QACA,IAAI;;qCAEyB,IAAI,KAAK,GAAG,IAAI,QAAQ,SAAS,IAAI,MAAM,EAAE;qCAC7C,IAAI,OAAO,GAAG,KAAKC,UAAU,GAAG,EAAE;;;;;uBAKhD,cAAc,IAAI,SAAS;yBACzB,KAAKC,YAAY,IAAI,MAAM,EAAE;;;;cAKhD,EAAE;YACI;;CAEX;CAEA,UAAU,KAAmB;EAM5B,OAAO,GALM,SAAS,IAAI,MAKhB,EAAK,KAHd,IAAI,SAAS,WAAW,IACrB,cAAc,IAAI,SAAS,EAAE,IAC7B,GAAG,IAAI,SAAS,OAAO;CAE5B;AACD;YAzEE,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,uBAAA,WAAA,SAAA,KAAA,CAAA;YAG7B,MAAM,CAAA,GAAA,uBAAA,WAAA,SAAA,KAAA,CAAA;qCA5FP,cAAc,2BAA2B,CAAA,GAAA,sBAAA;AAoK1C,SAAS,SAAS,QAAwB;CACzC,IAAI;EACH,OAAO,IAAI,IAAI,MAAM,CAAC,CAAC;CACxB,QAAQ;EACP,OAAO;CACR;AACD"}

package/dist/ui/dev-wallet-panel.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-panel.d.mts","names":[],"sources":["../../src/ui/dev-wallet-panel.ts"],"mappings":";;;;;;KAYY,kBAAA;AAAA,cAGC,cAAA,SAAuB,UAAA;EAAA;SACnB,MAAA,iBAAM,SAAA,iBAAA,SAAA;EAgPtB,MAAA,EAAQ,SAAA;EApPqB;AAAA;AAE9B;EAwPC,KAAA,EAAO,UAAA;;;;;;EAQP,SAAA,EAAW,SAAA;EA/PwB;;;EAqQnC,YAAA;EAGA,SAAA,EAAW,kBAAA;EAAA,QAGH,OAAA;EAKC,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAe9B,OAAA;EAsBA,MAAA,kBAAM,cAAA;EAsFN,iBAAA;EAKA,oBAAA;AAAA;AAAA,QAMF,MAAA;EAAA,UACG,qBAAA;IACT,kBAAA,EAAoB,cAAc;EAAA;AAAA"}
+{"version":3,"file":"dev-wallet-panel.d.mts","names":[],"sources":["../../src/ui/dev-wallet-panel.ts"],"mappings":";;;;;;KAYY,kBAAA;AAAA,cAGC,cAAA,SAAuB,UAAA;EAAA;SACnB,MAAA,iBAAM,SAAA,iBAAA,SAAA;EAwOtB,MAAA,EAAQ,SAAA;EA5OqB;AAAA;AAE9B;EAgPC,KAAA,EAAO,UAAA;;;;;;EAQP,SAAA,EAAW,SAAA;EAvPwB;;;EA6PnC,YAAA;EAGA,SAAA,EAAW,kBAAA;EAAA,QAGH,OAAA;EAKC,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAe9B,OAAA;EAsBA,MAAA,kBAAM,cAAA;EAqFN,iBAAA;EAKA,oBAAA;AAAA;AAAA,QAMF,MAAA;EAAA,UACG,qBAAA;IACT,kBAAA,EAAoB,cAAc;EAAA;AAAA"}

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

@@ -199,14 +199,6 @@ let DevWalletPanel = class DevWalletPanel extends LitElement {
 				text-overflow: ellipsis;
 			}
 
-			.version {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 9px;
-				letter-spacing: 0.12em;
-				text-transform: uppercase;
-				color: var(--dev-wallet-text-3);
-			}
-
 			.header-spacer {
 				flex: 1;
 				min-width: 8px;
@@ -317,7 +309,6 @@ let DevWalletPanel = class DevWalletPanel extends LitElement {
 						<span class="logo-mark">${this.#walletIcon}</span>
 						<span class="title-stack">
 							<span class="sidebar-title">${this.wallet?.name ?? "Dev Wallet"}</span>
-							<span class="version">v0.1.0</span>
 						</span>
 					</div>
 					<span class="header-spacer"></span>