@mysten-incubation/dev-wallet 0.5.0 → 0.6.0

package/dist/ui/dev-wallet-standalone.d.mts

@@ -1,3 +1,4 @@
+import { ConnectedAppsStore } from "../client/connected-apps.mjs";
 import { DevWallet } from "../wallet/dev-wallet.mjs";
 import { CoinRecord } from "./utils.mjs";
 import { LitElement } from "lit";
@@ -7,12 +8,16 @@ declare class DevWalletStandalone extends LitElement {
   #private;
   static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
   wallet: DevWallet | null;
-  /** When set, the settings tab shows a bookmarklet section pointing to this origin. */
-  bookmarkletOrigin: string;
+  /** Origin this wallet is served from. Drives the bookmarklet, console
+   *  script, and dApp Kit snippet. Defaults to the page's own origin. */
+  walletOrigin: string;
   /** Optional pre-seeded coin metadata. Pass the generated `coins`
    *  constant from devstack codegen to skip per-coin RPC fetches in the
    *  balances list and signing modal. */
   coins: CoinRecord | null;
+  /** Connected-dApps store shared with the signing popup. Pass the same
+   *  store to `parseWalletRequest` so Disconnect takes effect. */
+  connectedApps: ConnectedAppsStore | null;
   willUpdate(changedProperties: Map<string, unknown>): void;
   updated(): void;
   render(): import("lit").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-standalone.d.mts","names":[],"sources":["../../src/ui/dev-wallet-standalone.ts"],"mappings":";;;;;cAYa,mBAAA,SAA4B,UAAA;EAAA;SACxB,MAAA,iBAAM,SAAA,iBAAA,SAAA;EAgQtB,MAAA,EAAQ,SAAA;;EAIR,iBAAA;EAMO;;;EAAP,KAAA,EAAO,UAAA;EAIE,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAY9B,OAAA;EASA,MAAA,kBAAM,cAAA;AAAA;AAAA,QAmHR,MAAA;EAAA,UACG,qBAAA;IACT,uBAAA,EAAyB,mBAAmB;EAAA;AAAA"}
+{"version":3,"file":"dev-wallet-standalone.d.mts","names":[],"sources":["../../src/ui/dev-wallet-standalone.ts"],"mappings":";;;;;;cAiBa,mBAAA,SAA4B,UAAA;EAAA;SACxB,MAAA,iBAAM,SAAA,iBAAA,SAAA;EAsKtB,MAAA,EAAQ,SAAA;;;EAKR,YAAA;EAWe;;;EALf,KAAA,EAAO,UAAA;EAlL2C;;EAuLlD,aAAA,EAAe,kBAAA;EAIN,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAe9B,OAAA;EASA,MAAA,kBAAM,cAAA;AAAA;AAAA,QAwCR,MAAA;EAAA,UACG,qBAAA;IACT,uBAAA,EAAyB,mBAAmB;EAAA;AAAA"}

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

@@ -1,15 +1,19 @@
 import { connectDialogStyles, sharedStyles } from "./styles.mjs";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.mjs";
+import "./dev-wallet-connect-guide.mjs";
+import "./dev-wallet-connected-apps.mjs";
 import { WalletController } from "./wallet-controller.mjs";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 //#region src/ui/dev-wallet-standalone.ts
+const DOCS_URL = "https://ts-sdks-incubation.vercel.app/dev-wallet";
 let DevWalletStandalone = class DevWalletStandalone extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.wallet = null;
-		this.bookmarkletOrigin = "";
+		this.walletOrigin = globalThis.location?.origin ?? "";
 		this.coins = null;
+		this.connectedApps = null;
 		this.#ctrl = new WalletController(this);
 	}
 	static {
@@ -31,147 +35,65 @@ let DevWalletStandalone = class DevWalletStandalone extends LitElement {
 				background-position: -1px -1px;
 			}
 
+			/* Wallet centered: connect help on the left, connected apps on the right. */
 			.standalone-layout {
 				width: 100%;
-				max-width: 1220px;
-				min-height: calc(100vh - 48px);
 				margin: 0 auto;
 				padding: 24px 0;
 				display: grid;
-				grid-template-columns: minmax(240px, 1fr) 480px minmax(260px, 1fr);
-				gap: 20px;
+				grid-template-columns: minmax(0, 1fr) 480px minmax(0, 1fr);
+				gap: 36px;
 				align-items: start;
 			}
 
-			.rail {
-				min-width: 0;
-				display: flex;
-				flex-direction: column;
-				gap: 16px;
-				padding-top: 6px;
-			}
-
-			.wordmark {
-				display: flex;
-				align-items: center;
-				gap: 10px;
-			}
-
-			.logo-mark {
-				width: 28px;
-				height: 28px;
-				border-radius: 9px;
-				display: inline-flex;
-				align-items: center;
-				justify-content: center;
-				color: var(--dev-wallet-primary-foreground);
-				background:
-					radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 24px),
-					linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));
-				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
-			}
-
-			.logo-mark svg {
-				width: 18px;
-				height: 18px;
+			.card {
+				grid-column: 2;
 			}
 
-			.wordmark-title {
-				display: flex;
-				flex-direction: column;
-				line-height: 1.1;
+			.rail-left {
+				grid-column: 1;
+				justify-self: end;
+				width: 100%;
 			}
 
-			.wordmark-title strong {
-				font-size: 16px;
-				font-weight: var(--dev-wallet-font-weight-semibold);
+			.rail-right {
+				grid-column: 3;
 			}
 
-			.version {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 9px;
-				letter-spacing: 0.12em;
-				text-transform: uppercase;
-				color: var(--dev-wallet-text-3);
-			}
-
-			.rail-section {
+			.rail {
+				max-width: 348px;
+				min-width: 0;
 				display: flex;
 				flex-direction: column;
-				gap: 8px;
-			}
-
-			.rail-title {
-				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);
-			}
-
-			.code {
-				margin: 0;
-				overflow: auto;
-				white-space: pre;
-				padding: 10px 12px;
-				border-radius: var(--dev-wallet-radius);
-				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-bg-0);
-				color: var(--dev-wallet-foreground);
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 11.5px;
+				gap: 24px;
+				padding-top: 8px;
+				font-size: 12px;
 				line-height: 1.55;
+				color: var(--dev-wallet-muted-foreground);
 			}
 
-			.status-list {
+			.about {
+				padding-top: 16px;
+				border-top: 1px solid var(--dev-wallet-border);
 				display: flex;
 				flex-direction: column;
 				gap: 6px;
+				font-size: 11px;
+				color: var(--dev-wallet-text-3);
 			}
 
-			.status-row {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				min-width: 0;
-				padding: 8px 10px;
-				border-radius: var(--dev-wallet-radius-lg);
-				border: 1px solid var(--dev-wallet-border);
-				background: color-mix(in srgb, var(--dev-wallet-bg-1) 88%, transparent);
-			}
-
-			.status-dot {
-				width: 7px;
-				height: 7px;
-				border-radius: 999px;
-				background: var(--dev-wallet-status-connected);
-				flex-shrink: 0;
-			}
-
-			.status-dot.mute {
-				background: var(--dev-wallet-text-3);
-			}
-
-			.status-copy {
-				min-width: 0;
-				display: flex;
-				flex-direction: column;
-				gap: 1px;
+			.about code {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10.5px;
+				color: var(--dev-wallet-muted-foreground);
 			}
 
-			.status-copy strong {
-				font-size: 12px;
-				font-weight: var(--dev-wallet-font-weight-medium);
+			.about a {
+				color: var(--dev-wallet-muted-foreground);
 			}
 
-			.status-copy span {
-				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;
+			.about a:hover {
+				color: var(--dev-wallet-foreground);
 			}
 
 			.card {
@@ -210,19 +132,6 @@ let DevWalletStandalone = class DevWalletStandalone extends LitElement {
 				margin-left: auto;
 			}
 
-			.status-dot {
-				width: 8px;
-				height: 8px;
-				border-radius: 50%;
-				background: var(--dev-wallet-status-connected);
-			}
-
-			.status-text {
-				font-family: var(--dev-wallet-font-mono);
-				font-size: 10.5px;
-				color: var(--dev-wallet-muted-foreground);
-			}
-
 			.card-body {
 				overflow-y: auto;
 				flex: 1;
@@ -239,12 +148,18 @@ let DevWalletStandalone = class DevWalletStandalone extends LitElement {
 				border-bottom: 0;
 			}
 
-			@media (max-width: 1020px) {
+			/* Too narrow to keep the wallet centered with the aside beside it:
+			   hide the aside. The Settings tab carries the same connect guide. */
+			@media (max-width: 1240px) {
 				.standalone-layout {
 					grid-template-columns: minmax(0, 480px);
 					justify-content: center;
 				}
 
+				.card {
+					grid-column: 1;
+				}
+
 				.rail {
 					display: none;
 				}
@@ -256,7 +171,6 @@ let DevWalletStandalone = class DevWalletStandalone extends LitElement {
 				}
 
 				.standalone-layout {
-					min-height: calc(100vh - 24px);
 					padding: 0;
 				}
 
@@ -271,7 +185,8 @@ let DevWalletStandalone = class DevWalletStandalone extends LitElement {
 	#ctrl;
 	willUpdate(changedProperties) {
 		if (changedProperties.has("wallet")) this.#ctrl.wallet = this.wallet;
-		if (changedProperties.has("bookmarkletOrigin")) this.#ctrl.bookmarkletOrigin = this.bookmarkletOrigin;
+		if (changedProperties.has("walletOrigin")) this.#ctrl.walletOrigin = this.walletOrigin;
+		if (changedProperties.has("connectedApps")) this.#ctrl.connectedApps = this.connectedApps;
 		if (changedProperties.has("coins")) this.#ctrl.coins = this.coins;
 	}
 	updated() {
@@ -282,111 +197,42 @@ let DevWalletStandalone = class DevWalletStandalone extends LitElement {
 	render() {
 		return html`
 			<div class="standalone-layout">
-				<aside class="rail">${this.#renderLeftRail()}</aside>
-				<div class="card" part="card">
+				<aside class="rail rail-left">
+					<dev-wallet-connect-guide .origin=${this.walletOrigin}></dev-wallet-connect-guide>
+					${this.#renderAbout()}
+				</aside>
+				<main class="card" part="card">
 					<div class="card-header">
-						<span class="logo-mark">${this.#walletIcon}</span>
-						<span class="wordmark-title">
-							<span class="card-title">${this.wallet?.name ?? "Dev Wallet"}</span>
-							<span class="version">v0.1.0</span>
-						</span>
-						<div class="header-right">
-							${this.#ctrl.renderNetworkBadge()}
-							<span class="status-dot"></span>
-							<span class="status-text">Running</span>
-						</div>
+						<span class="card-title">${this.wallet?.name ?? "Dev Wallet"}</span>
+						<div class="header-right">${this.#ctrl.renderNetworkBadge()}</div>
 					</div>
 					${this.#ctrl.renderTabBar()}
 					<div class="card-body">${this.#ctrl.renderTabContent()}</div>
-				</div>
-				<aside class="rail">${this.#renderRightRail()}</aside>
+				</main>
+				<aside class="rail rail-right">
+					<dev-wallet-connected-apps .store=${this.connectedApps}></dev-wallet-connected-apps>
+				</aside>
 			</div>
 			${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}
 		`;
 	}
-	#renderLeftRail() {
-		const origin = this.bookmarkletOrigin || globalThis.location?.origin || "http://localhost:5174";
-		const quickStart = `npx @mysten-incubation/dev-wallet serve\n${origin}`;
-		const clientSnippet = `createDAppKit({
-  walletInitializers: [
-    devWalletClientInitializer({
-      origin: '${origin}'
-    })
-  ]
-})`;
-		return html`
-			<div class="wordmark">
-				<span class="logo-mark">${this.#walletIcon}</span>
-				<span class="wordmark-title">
-					<strong>Dev Wallet</strong>
-					<span class="version">v0.1.0</span>
-				</span>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Quick Start</div>
-				<pre class="code">${quickStart}</pre>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Embed Wallet</div>
-				<pre class="code">${`createDAppKit({
-  networks: ['devnet'],
-  walletInitializers: [
-    devWalletInitializer({
-      adapters: [
-        new WebCryptoSignerAdapter()
-      ],
-      autoConnect: true,
-      mountUI: true
-    })
-  ]
-})`}</pre>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Standalone Client</div>
-				<pre class="code">${clientSnippet}</pre>
-			</div>
-			<div class="rail-section">
-				<div class="rail-title">Bookmarklet Endpoint</div>
-				<pre class="code">${origin}/bookmarklet.js</pre>
-			</div>
-		`;
-	}
-	#renderRightRail() {
-		const activeNetwork = this.wallet?.activeNetwork ?? "devnet";
+	#renderAbout() {
 		return html`
-			<div class="rail-section">
-				<div class="rail-title">Wallet Status</div>
-				<div class="status-list">
-					<div class="status-row">
-						<span class="status-dot"></span>
-						<span class="status-copy">
-							<strong>Network: ${activeNetwork}</strong>
-							<span>${this.wallet?.networkUrls[activeNetwork] ?? "client configured by dApp Kit"}</span>
-						</span>
-					</div>
-					<div class="status-row">
-						<span class="status-dot mute"></span>
-						<span class="status-copy">
-							<strong>${this.wallet?.accounts.length ?? 0} account(s)</strong>
-							<span>${this.wallet?.adapters.length ?? 0} adapter(s): ${this.wallet?.adapters.map((adapter) => adapter.name).join(", ") ?? "No adapters"}</span>
-						</span>
-					</div>
-				</div>
-			</div>
+			<footer class="about">
+				<span>Keys are stored in this browser only. Don't hold real funds here.</span>
+				${/^https?:\/\/(localhost|127\.0\.0\.1)(:|$)/.test(this.walletOrigin) ? nothing : html`<span>
+							For your <code>sui</code> CLI keys or localnet, run it locally:
+							<code>npx @mysten-incubation/dev-wallet serve</code>
+						</span>`}
+				<a href=${DOCS_URL} target="_blank" rel="noopener noreferrer">Documentation ↗</a>
+			</footer>
 		`;
 	}
-	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({ attribute: false })], DevWalletStandalone.prototype, "wallet", void 0);
-__decorate([property({ type: String })], DevWalletStandalone.prototype, "bookmarkletOrigin", void 0);
+__decorate([property({ type: String })], DevWalletStandalone.prototype, "walletOrigin", void 0);
 __decorate([property({ attribute: false })], DevWalletStandalone.prototype, "coins", void 0);
+__decorate([property({ attribute: false })], DevWalletStandalone.prototype, "connectedApps", void 0);
 DevWalletStandalone = __decorate([customElement("dev-wallet-standalone")], DevWalletStandalone);
 //#endregion
 export { DevWalletStandalone };

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

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-standalone.mjs","names":["#ctrl","#renderLeftRail","#walletIcon","#renderRightRail"],"sources":["../../src/ui/dev-wallet-standalone.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport { connectDialogStyles, sharedStyles } from './styles.js';\nimport type { CoinRecord } from './utils.js';\nimport { WalletController } from './wallet-controller.js';\n\n@customElement('dev-wallet-standalone')\nexport class DevWalletStandalone extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tconnectDialogStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tmin-height: 100vh;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 24px;\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tbackground-color: var(--dev-wallet-bg-0);\n\t\t\t\tbackground-image:\n\t\t\t\t\tlinear-gradient(var(--dev-wallet-border) 1px, transparent 1px),\n\t\t\t\t\tlinear-gradient(90deg, var(--dev-wallet-border) 1px, transparent 1px);\n\t\t\t\tbackground-size: 32px 32px;\n\t\t\t\tbackground-position: -1px -1px;\n\t\t\t}\n\n\t\t\t.standalone-layout {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 1220px;\n\t\t\t\tmin-height: calc(100vh - 48px);\n\t\t\t\tmargin: 0 auto;\n\t\t\t\tpadding: 24px 0;\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: minmax(240px, 1fr) 480px minmax(260px, 1fr);\n\t\t\t\tgap: 20px;\n\t\t\t\talign-items: start;\n\t\t\t}\n\n\t\t\t.rail {\n\t\t\t\tmin-width: 0;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 16px;\n\t\t\t\tpadding-top: 6px;\n\t\t\t}\n\n\t\t\t.wordmark {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 10px;\n\t\t\t}\n\n\t\t\t.logo-mark {\n\t\t\t\twidth: 28px;\n\t\t\t\theight: 28px;\n\t\t\t\tborder-radius: 9px;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t\tbackground:\n\t\t\t\t\tradial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 24px),\n\t\t\t\t\tlinear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));\n\t\t\t\tbox-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);\n\t\t\t}\n\n\t\t\t.logo-mark svg {\n\t\t\t\twidth: 18px;\n\t\t\t\theight: 18px;\n\t\t\t}\n\n\t\t\t.wordmark-title {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tline-height: 1.1;\n\t\t\t}\n\n\t\t\t.wordmark-title strong {\n\t\t\t\tfont-size: 16px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t}\n\n\t\t\t.version {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 9px;\n\t\t\t\tletter-spacing: 0.12em;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.rail-section {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\n\t\t\t.rail-title {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tletter-spacing: 0.14em;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.code {\n\t\t\t\tmargin: 0;\n\t\t\t\toverflow: auto;\n\t\t\t\twhite-space: pre;\n\t\t\t\tpadding: 10px 12px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-0);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 11.5px;\n\t\t\t\tline-height: 1.55;\n\t\t\t}\n\n\t\t\t.status-list {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 6px;\n\t\t\t}\n\n\t\t\t.status-row {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tmin-width: 0;\n\t\t\t\tpadding: 8px 10px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-lg);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: color-mix(in srgb, var(--dev-wallet-bg-1) 88%, transparent);\n\t\t\t}\n\n\t\t\t.status-dot {\n\t\t\t\twidth: 7px;\n\t\t\t\theight: 7px;\n\t\t\t\tborder-radius: 999px;\n\t\t\t\tbackground: var(--dev-wallet-status-connected);\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.status-dot.mute {\n\t\t\t\tbackground: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.status-copy {\n\t\t\t\tmin-width: 0;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 1px;\n\t\t\t}\n\n\t\t\t.status-copy strong {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t}\n\n\t\t\t.status-copy span {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10.5px;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\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.card {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 480px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-drawer);\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\theight: min(640px, calc(100vh - 48px));\n\t\t\t\tmin-height: 540px;\n\t\t\t}\n\n\t\t\t.card-header {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 10px 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-1);\n\t\t\t}\n\n\t\t\t.card-title {\n\t\t\t\tfont-size: 12.5px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.header-right {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tmargin-left: auto;\n\t\t\t}\n\n\t\t\t.status-dot {\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 8px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbackground: var(--dev-wallet-status-connected);\n\t\t\t}\n\n\t\t\t.status-text {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10.5px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.card-body {\n\t\t\t\toverflow-y: auto;\n\t\t\t\tflex: 1;\n\t\t\t\tmin-height: 0;\n\t\t\t\tbackground: var(--dev-wallet-bg-0);\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tpadding: 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tborder-bottom: 0;\n\t\t\t}\n\n\t\t\t@media (max-width: 1020px) {\n\t\t\t\t.standalone-layout {\n\t\t\t\t\tgrid-template-columns: minmax(0, 480px);\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t.rail {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@media (max-width: 560px) {\n\t\t\t\t:host {\n\t\t\t\t\tpadding: 12px;\n\t\t\t\t}\n\n\t\t\t\t.standalone-layout {\n\t\t\t\t\tmin-height: calc(100vh - 24px);\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\n\t\t\t\t.card {\n\t\t\t\t\theight: calc(100vh - 24px);\n\t\t\t\t\tmin-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t/** When set, the settings tab shows a bookmarklet section pointing to this origin. */\n\t@property({ type: String })\n\tbookmarkletOrigin = '';\n\n\t/** Optional pre-seeded coin metadata. Pass the generated `coins`\n\t *  constant from devstack codegen to skip per-coin RPC fetches in the\n\t *  balances list and signing modal. */\n\t@property({ attribute: false })\n\tcoins: CoinRecord | null = null;\n\n\t#ctrl = new WalletController(this);\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (changedProperties.has('wallet')) {\n\t\t\tthis.#ctrl.wallet = this.wallet;\n\t\t}\n\t\tif (changedProperties.has('bookmarkletOrigin')) {\n\t\t\tthis.#ctrl.bookmarkletOrigin = this.bookmarkletOrigin;\n\t\t}\n\t\tif (changedProperties.has('coins')) {\n\t\t\tthis.#ctrl.coins = this.coins;\n\t\t}\n\t}\n\n\toverride updated() {\n\t\tconst dialog = this.shadowRoot?.querySelector<HTMLDialogElement>('.connect-dialog');\n\t\tif (this.#ctrl.pendingConnect && dialog && !dialog.open) {\n\t\t\tdialog.showModal();\n\t\t} else if (!this.#ctrl.pendingConnect && dialog?.open) {\n\t\t\tdialog.close();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"standalone-layout\">\n\t\t\t\t<aside class=\"rail\">${this.#renderLeftRail()}</aside>\n\t\t\t\t<div class=\"card\" part=\"card\">\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span class=\"logo-mark\">${this.#walletIcon}</span>\n\t\t\t\t\t\t<span class=\"wordmark-title\">\n\t\t\t\t\t\t\t<span class=\"card-title\">${this.wallet?.name ?? 'Dev Wallet'}</span>\n\t\t\t\t\t\t\t<span class=\"version\">v0.1.0</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div class=\"header-right\">\n\t\t\t\t\t\t\t${this.#ctrl.renderNetworkBadge()}\n\t\t\t\t\t\t\t<span class=\"status-dot\"></span>\n\t\t\t\t\t\t\t<span class=\"status-text\">Running</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t${this.#ctrl.renderTabBar()}\n\t\t\t\t\t<div class=\"card-body\">${this.#ctrl.renderTabContent()}</div>\n\t\t\t\t</div>\n\t\t\t\t<aside class=\"rail\">${this.#renderRightRail()}</aside>\n\t\t\t</div>\n\t\t\t${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}\n\t\t`;\n\t}\n\n\t#renderLeftRail() {\n\t\tconst origin = this.bookmarkletOrigin || globalThis.location?.origin || 'http://localhost:5174';\n\t\tconst quickStart = `npx @mysten-incubation/dev-wallet serve\\n${origin}`;\n\t\tconst clientSnippet = `createDAppKit({\n  walletInitializers: [\n    devWalletClientInitializer({\n      origin: '${origin}'\n    })\n  ]\n})`;\n\t\tconst embeddingSnippet = `createDAppKit({\n  networks: ['devnet'],\n  walletInitializers: [\n    devWalletInitializer({\n      adapters: [\n        new WebCryptoSignerAdapter()\n      ],\n      autoConnect: true,\n      mountUI: true\n    })\n  ]\n})`;\n\t\treturn html`\n\t\t\t<div class=\"wordmark\">\n\t\t\t\t<span class=\"logo-mark\">${this.#walletIcon}</span>\n\t\t\t\t<span class=\"wordmark-title\">\n\t\t\t\t\t<strong>Dev Wallet</strong>\n\t\t\t\t\t<span class=\"version\">v0.1.0</span>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div class=\"rail-section\">\n\t\t\t\t<div class=\"rail-title\">Quick Start</div>\n\t\t\t\t<pre class=\"code\">${quickStart}</pre>\n\t\t\t</div>\n\t\t\t<div class=\"rail-section\">\n\t\t\t\t<div class=\"rail-title\">Embed Wallet</div>\n\t\t\t\t<pre class=\"code\">${embeddingSnippet}</pre>\n\t\t\t</div>\n\t\t\t<div class=\"rail-section\">\n\t\t\t\t<div class=\"rail-title\">Standalone Client</div>\n\t\t\t\t<pre class=\"code\">${clientSnippet}</pre>\n\t\t\t</div>\n\t\t\t<div class=\"rail-section\">\n\t\t\t\t<div class=\"rail-title\">Bookmarklet Endpoint</div>\n\t\t\t\t<pre class=\"code\">${origin}/bookmarklet.js</pre>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#renderRightRail() {\n\t\tconst activeNetwork = this.wallet?.activeNetwork ?? 'devnet';\n\t\tconst networkUrl = this.wallet?.networkUrls[activeNetwork] ?? 'client configured by dApp Kit';\n\t\tconst accountCount = this.wallet?.accounts.length ?? 0;\n\t\tconst adapterCount = this.wallet?.adapters.length ?? 0;\n\t\tconst adapterNames =\n\t\t\tthis.wallet?.adapters.map((adapter) => adapter.name).join(', ') ?? 'No adapters';\n\t\treturn html`\n\t\t\t<div class=\"rail-section\">\n\t\t\t\t<div class=\"rail-title\">Wallet Status</div>\n\t\t\t\t<div class=\"status-list\">\n\t\t\t\t\t<div class=\"status-row\">\n\t\t\t\t\t\t<span class=\"status-dot\"></span>\n\t\t\t\t\t\t<span class=\"status-copy\">\n\t\t\t\t\t\t\t<strong>Network: ${activeNetwork}</strong>\n\t\t\t\t\t\t\t<span>${networkUrl}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"status-row\">\n\t\t\t\t\t\t<span class=\"status-dot mute\"></span>\n\t\t\t\t\t\t<span class=\"status-copy\">\n\t\t\t\t\t\t\t<strong>${accountCount} account(s)</strong>\n\t\t\t\t\t\t\t<span>${adapterCount} adapter(s): ${adapterNames}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\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-standalone': DevWalletStandalone;\n\t}\n}\n"],"mappings":";;;;;;AAYO,IAAA,sBAAA,MAAM,4BAA4B,WAAW;;;gBAiQxB;2BAIP;eAMO;eAEnB,IAAI,iBAAiB,IAAI;;;gBA5QR;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0PJ;;CAeA;CAEA,WAAoB,mBAAyC;EAC5D,IAAI,kBAAkB,IAAI,QAAQ,GACjC,KAAKA,MAAM,SAAS,KAAK;EAE1B,IAAI,kBAAkB,IAAI,mBAAmB,GAC5C,KAAKA,MAAM,oBAAoB,KAAK;EAErC,IAAI,kBAAkB,IAAI,OAAO,GAChC,KAAKA,MAAM,QAAQ,KAAK;CAE1B;CAEA,UAAmB;EAClB,MAAM,SAAS,KAAK,YAAY,cAAiC,iBAAiB;EAClF,IAAI,KAAKA,MAAM,kBAAkB,UAAU,CAAC,OAAO,MAClD,OAAO,UAAU;OACX,IAAI,CAAC,KAAKA,MAAM,kBAAkB,QAAQ,MAChD,OAAO,MAAM;CAEf;CAEA,SAAkB;EACjB,OAAO,IAAI;;0BAEa,KAAKC,gBAAgB,EAAE;;;gCAGjB,KAAKC,YAAY;;kCAEf,KAAK,QAAQ,QAAQ,aAAa;;;;SAI3D,KAAKF,MAAM,mBAAmB,EAAE;;;;;OAKlC,KAAKA,MAAM,aAAa,EAAE;8BACH,KAAKA,MAAM,iBAAiB,EAAE;;0BAElC,KAAKG,iBAAiB,EAAE;;KAE7C,KAAKH,MAAM,mBAAmB,EAAE,GAAG,KAAKA,MAAM,oBAAoB,EAAE;;CAExE;CAEA,kBAAkB;EACjB,MAAM,SAAS,KAAK,qBAAqB,WAAW,UAAU,UAAU;EACxE,MAAM,aAAa,4CAA4C;EAC/D,MAAM,gBAAgB;;;iBAGP,OAAO;;;;EAgBtB,OAAO,IAAI;;8BAEiB,KAAKE,YAAY;;;;;;;;wBAQvB,WAAW;;;;wBAIX;;;;;;;;;;;IAAiB;;;;wBAIjB,cAAc;;;;wBAId,OAAO;;;CAG9B;CAEA,mBAAmB;EAClB,MAAM,gBAAgB,KAAK,QAAQ,iBAAiB;EAMpD,OAAO,IAAI;;;;;;;0BAOa,cAAc;eAZnB,KAAK,QAAQ,YAAY,kBAAkB,gCAatC;;;;;;iBAZH,KAAK,QAAQ,SAAS,UAAU,EAkBzB;eAjBP,KAAK,QAAQ,SAAS,UAAU,EAkB3B,eAhBzB,KAAK,QAAQ,SAAS,KAAK,YAAY,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,cAgBd;;;;;;CAMvD;CAEA,IAAIA,cAAc;EACjB,OAAO,IAAI;;;;;;CAMZ;AACD;YArJE,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,oBAAA,WAAA,UAAA,KAAA,CAAA;YAI7B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,qBAAA,KAAA,CAAA;YAMzB,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,oBAAA,WAAA,SAAA,KAAA,CAAA;kCA3Q9B,cAAc,uBAAuB,CAAA,GAAA,mBAAA"}
+{"version":3,"file":"dev-wallet-standalone.mjs","names":["#ctrl","#renderAbout"],"sources":["../../src/ui/dev-wallet-standalone.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 } from 'lit/decorators.js';\n\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport type { ConnectedAppsStore } from '../client/connected-apps.js';\nimport './dev-wallet-connect-guide.js';\nimport './dev-wallet-connected-apps.js';\nimport { connectDialogStyles, sharedStyles } from './styles.js';\nimport type { CoinRecord } from './utils.js';\nimport { WalletController } from './wallet-controller.js';\n\nconst DOCS_URL = 'https://ts-sdks-incubation.vercel.app/dev-wallet';\n\n@customElement('dev-wallet-standalone')\nexport class DevWalletStandalone extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tconnectDialogStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tmin-height: 100vh;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 24px;\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tbackground-color: var(--dev-wallet-bg-0);\n\t\t\t\tbackground-image:\n\t\t\t\t\tlinear-gradient(var(--dev-wallet-border) 1px, transparent 1px),\n\t\t\t\t\tlinear-gradient(90deg, var(--dev-wallet-border) 1px, transparent 1px);\n\t\t\t\tbackground-size: 32px 32px;\n\t\t\t\tbackground-position: -1px -1px;\n\t\t\t}\n\n\t\t\t/* Wallet centered: connect help on the left, connected apps on the right. */\n\t\t\t.standalone-layout {\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin: 0 auto;\n\t\t\t\tpadding: 24px 0;\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: minmax(0, 1fr) 480px minmax(0, 1fr);\n\t\t\t\tgap: 36px;\n\t\t\t\talign-items: start;\n\t\t\t}\n\n\t\t\t.card {\n\t\t\t\tgrid-column: 2;\n\t\t\t}\n\n\t\t\t.rail-left {\n\t\t\t\tgrid-column: 1;\n\t\t\t\tjustify-self: end;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.rail-right {\n\t\t\t\tgrid-column: 3;\n\t\t\t}\n\n\t\t\t.rail {\n\t\t\t\tmax-width: 348px;\n\t\t\t\tmin-width: 0;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 24px;\n\t\t\t\tpadding-top: 8px;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 1.55;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.about {\n\t\t\t\tpadding-top: 16px;\n\t\t\t\tborder-top: 1px solid var(--dev-wallet-border);\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 6px;\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.about code {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10.5px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.about a {\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.about a:hover {\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.card {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 480px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-drawer);\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\theight: min(640px, calc(100vh - 48px));\n\t\t\t\tmin-height: 540px;\n\t\t\t}\n\n\t\t\t.card-header {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 10px 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-1);\n\t\t\t}\n\n\t\t\t.card-title {\n\t\t\t\tfont-size: 12.5px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.header-right {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tmargin-left: auto;\n\t\t\t}\n\n\t\t\t.card-body {\n\t\t\t\toverflow-y: auto;\n\t\t\t\tflex: 1;\n\t\t\t\tmin-height: 0;\n\t\t\t\tbackground: var(--dev-wallet-bg-0);\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tpadding: 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tborder-bottom: 0;\n\t\t\t}\n\n\t\t\t/* Too narrow to keep the wallet centered with the aside beside it:\n\t\t\t   hide the aside. The Settings tab carries the same connect guide. */\n\t\t\t@media (max-width: 1240px) {\n\t\t\t\t.standalone-layout {\n\t\t\t\t\tgrid-template-columns: minmax(0, 480px);\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t.card {\n\t\t\t\t\tgrid-column: 1;\n\t\t\t\t}\n\n\t\t\t\t.rail {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@media (max-width: 560px) {\n\t\t\t\t:host {\n\t\t\t\t\tpadding: 12px;\n\t\t\t\t}\n\n\t\t\t\t.standalone-layout {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\n\t\t\t\t.card {\n\t\t\t\t\theight: calc(100vh - 24px);\n\t\t\t\t\tmin-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t/** Origin this wallet is served from. Drives the bookmarklet, console\n\t *  script, and dApp Kit snippet. Defaults to the page's own origin. */\n\t@property({ type: String })\n\twalletOrigin = globalThis.location?.origin ?? '';\n\n\t/** Optional pre-seeded coin metadata. Pass the generated `coins`\n\t *  constant from devstack codegen to skip per-coin RPC fetches in the\n\t *  balances list and signing modal. */\n\t@property({ attribute: false })\n\tcoins: CoinRecord | null = null;\n\n\t/** Connected-dApps store shared with the signing popup. Pass the same\n\t *  store to `parseWalletRequest` so Disconnect takes effect. */\n\t@property({ attribute: false })\n\tconnectedApps: ConnectedAppsStore | null = null;\n\n\t#ctrl = new WalletController(this);\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (changedProperties.has('wallet')) {\n\t\t\tthis.#ctrl.wallet = this.wallet;\n\t\t}\n\t\tif (changedProperties.has('walletOrigin')) {\n\t\t\tthis.#ctrl.walletOrigin = this.walletOrigin;\n\t\t}\n\t\tif (changedProperties.has('connectedApps')) {\n\t\t\tthis.#ctrl.connectedApps = this.connectedApps;\n\t\t}\n\t\tif (changedProperties.has('coins')) {\n\t\t\tthis.#ctrl.coins = this.coins;\n\t\t}\n\t}\n\n\toverride updated() {\n\t\tconst dialog = this.shadowRoot?.querySelector<HTMLDialogElement>('.connect-dialog');\n\t\tif (this.#ctrl.pendingConnect && dialog && !dialog.open) {\n\t\t\tdialog.showModal();\n\t\t} else if (!this.#ctrl.pendingConnect && dialog?.open) {\n\t\t\tdialog.close();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"standalone-layout\">\n\t\t\t\t<aside class=\"rail rail-left\">\n\t\t\t\t\t<dev-wallet-connect-guide .origin=${this.walletOrigin}></dev-wallet-connect-guide>\n\t\t\t\t\t${this.#renderAbout()}\n\t\t\t\t</aside>\n\t\t\t\t<main class=\"card\" part=\"card\">\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span class=\"card-title\">${this.wallet?.name ?? 'Dev Wallet'}</span>\n\t\t\t\t\t\t<div class=\"header-right\">${this.#ctrl.renderNetworkBadge()}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t${this.#ctrl.renderTabBar()}\n\t\t\t\t\t<div class=\"card-body\">${this.#ctrl.renderTabContent()}</div>\n\t\t\t\t</main>\n\t\t\t\t<aside class=\"rail rail-right\">\n\t\t\t\t\t<dev-wallet-connected-apps .store=${this.connectedApps}></dev-wallet-connected-apps>\n\t\t\t\t</aside>\n\t\t\t</div>\n\t\t\t${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}\n\t\t`;\n\t}\n\n\t#renderAbout() {\n\t\tconst isLocal = /^https?:\\/\\/(localhost|127\\.0\\.0\\.1)(:|$)/.test(this.walletOrigin);\n\t\treturn html`\n\t\t\t<footer class=\"about\">\n\t\t\t\t<span>Keys are stored in this browser only. Don't hold real funds here.</span>\n\t\t\t\t${isLocal\n\t\t\t\t\t? nothing\n\t\t\t\t\t: html`<span>\n\t\t\t\t\t\t\tFor your <code>sui</code> CLI keys or localnet, run it locally:\n\t\t\t\t\t\t\t<code>npx @mysten-incubation/dev-wallet serve</code>\n\t\t\t\t\t\t</span>`}\n\t\t\t\t<a href=${DOCS_URL} target=\"_blank\" rel=\"noopener noreferrer\">Documentation ↗</a>\n\t\t\t</footer>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-standalone': DevWalletStandalone;\n\t}\n}\n"],"mappings":";;;;;;;;AAcA,MAAM,WAAW;AAGV,IAAA,sBAAA,MAAM,4BAA4B,WAAW;;;gBAuKxB;sBAKZ,WAAW,UAAU,UAAU;eAMnB;uBAKgB;eAEnC,IAAI,iBAAiB,IAAI;;;gBAxLR;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgKJ;;CAqBA;CAEA,WAAoB,mBAAyC;EAC5D,IAAI,kBAAkB,IAAI,QAAQ,GACjC,KAAKA,MAAM,SAAS,KAAK;EAE1B,IAAI,kBAAkB,IAAI,cAAc,GACvC,KAAKA,MAAM,eAAe,KAAK;EAEhC,IAAI,kBAAkB,IAAI,eAAe,GACxC,KAAKA,MAAM,gBAAgB,KAAK;EAEjC,IAAI,kBAAkB,IAAI,OAAO,GAChC,KAAKA,MAAM,QAAQ,KAAK;CAE1B;CAEA,UAAmB;EAClB,MAAM,SAAS,KAAK,YAAY,cAAiC,iBAAiB;EAClF,IAAI,KAAKA,MAAM,kBAAkB,UAAU,CAAC,OAAO,MAClD,OAAO,UAAU;OACX,IAAI,CAAC,KAAKA,MAAM,kBAAkB,QAAQ,MAChD,OAAO,MAAM;CAEf;CAEA,SAAkB;EACjB,OAAO,IAAI;;;yCAG4B,KAAK,aAAa;OACpD,KAAKC,aAAa,EAAE;;;;iCAIM,KAAK,QAAQ,QAAQ,aAAa;kCACjC,KAAKD,MAAM,mBAAmB,EAAE;;OAE3D,KAAKA,MAAM,aAAa,EAAE;8BACH,KAAKA,MAAM,iBAAiB,EAAE;;;yCAGnB,KAAK,cAAc;;;KAGvD,KAAKA,MAAM,mBAAmB,EAAE,GAAG,KAAKA,MAAM,oBAAoB,EAAE;;CAExE;CAEA,eAAe;EAEd,OAAO,IAAI;;;MADK,4CAA4C,KAAK,KAAK,YAIlE,IACC,UACA,IAAI;;;eAGI;cACD,SAAS;;;CAGtB;AACD;YAnFE,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,oBAAA,WAAA,UAAA,KAAA,CAAA;YAK7B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,gBAAA,KAAA,CAAA;YAMzB,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,oBAAA,WAAA,SAAA,KAAA,CAAA;YAK7B,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,oBAAA,WAAA,iBAAA,KAAA,CAAA;kCAvL9B,cAAc,uBAAuB,CAAA,GAAA,mBAAA"}

package/dist/ui/index.d.mts

@@ -5,6 +5,8 @@ import { DevWalletAccounts } from "./dev-wallet-accounts.mjs";
 import { DevWalletBalances } from "./dev-wallet-balances.mjs";
 import { DevWalletSigning } from "./dev-wallet-signing.mjs";
 import { DevWalletConnect } from "./dev-wallet-connect.mjs";
+import { DevWalletConnectGuide } from "./dev-wallet-connect-guide.mjs";
+import { DevWalletConnectedApps } from "./dev-wallet-connected-apps.mjs";
 import { DevWalletObjects } from "./dev-wallet-objects.mjs";
 import { DevWalletPopup } from "./dev-wallet-popup.mjs";
 import { DevWalletSettings } from "./dev-wallet-settings.mjs";
@@ -15,4 +17,4 @@ import { DevWalletNetworkBadge } from "./dev-wallet-network-badge.mjs";
 import { DevWalletTabBar } from "./dev-wallet-tab-bar.mjs";
 import { DevWalletForkPanel } from "./dev-wallet-fork-panel.mjs";
 import { mountDevWallet } from "./mount.mjs";
-export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletDropdown, DevWalletForkPanel, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };
+export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletConnectGuide, DevWalletConnectedApps, DevWalletDropdown, DevWalletForkPanel, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };

package/dist/ui/index.mjs

@@ -7,6 +7,8 @@ import { DevWalletNetworkBadge } from "./dev-wallet-network-badge.mjs";
 import { DevWalletObjects } from "./dev-wallet-objects.mjs";
 import { DevWalletNewAccount } from "./dev-wallet-new-account.mjs";
 import { DevWalletAccounts } from "./dev-wallet-accounts.mjs";
+import { DevWalletConnectGuide } from "./dev-wallet-connect-guide.mjs";
+import { DevWalletConnectedApps } from "./dev-wallet-connected-apps.mjs";
 import { DevWalletSettings } from "./dev-wallet-settings.mjs";
 import { DevWalletSigning } from "./dev-wallet-signing.mjs";
 import { DevWalletSigningModal } from "./dev-wallet-signing-modal.mjs";
@@ -15,4 +17,4 @@ import { DevWalletPanel } from "./dev-wallet-panel.mjs";
 import { DevWalletPopup } from "./dev-wallet-popup.mjs";
 import { DevWalletStandalone } from "./dev-wallet-standalone.mjs";
 import { mountDevWallet } from "./mount.mjs";
-export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletDropdown, DevWalletForkPanel, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };
+export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletConnectGuide, DevWalletConnectedApps, DevWalletDropdown, DevWalletForkPanel, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };

package/dist/ui/wallet-controller.mjs

@@ -20,6 +20,7 @@ import { html, nothing } from "lit";
 */
 var WalletController = class {
 	#wallet;
+	#networkKey;
 	#unsubscribeEvents;
 	#unsubscribeRequests;
 	#unsubscribeConnect;
@@ -29,11 +30,13 @@ var WalletController = class {
 		this.activeAccountIndex = 0;
 		this.pendingRequest = null;
 		this.pendingConnect = null;
-		this.bookmarkletOrigin = "";
+		this.walletOrigin = "";
+		this.connectedApps = null;
 		this.coins = null;
 		this.forkRelay = null;
 		this.forkUpstream = "";
 		this.#wallet = null;
+		this.#networkKey = "";
 		this.#unsubscribeEvents = null;
 		this.#unsubscribeRequests = null;
 		this.#unsubscribeConnect = null;
@@ -66,9 +69,16 @@ var WalletController = class {
 		const newPending = this.#wallet.pendingRequest;
 		const accountsChanged = newAccounts.length !== this.accounts.length || newAccounts.some((a, i) => a.address !== this.accounts[i]?.address);
 		const pendingChanged = newPending !== this.pendingRequest;
-		if (!accountsChanged && !pendingChanged) return;
+		const networkKey = `${this.#wallet.activeNetwork}|${this.#wallet.availableNetworks.join(",")}`;
+		const networkChanged = networkKey !== this.#networkKey;
+		this.#networkKey = networkKey;
+		if (!accountsChanged && !pendingChanged && !networkChanged) return;
 		if (accountsChanged) {
+			const hadAccounts = this.accounts.length > 0;
 			this.accounts = [...newAccounts];
+			const persisted = this.#wallet.activeAccount;
+			const restored = persisted ? newAccounts.findIndex((a) => a.address === persisted) : -1;
+			if (!hadAccounts && restored !== -1) this.activeAccountIndex = restored;
 			if (this.activeAccountIndex >= newAccounts.length && newAccounts.length > 0) this.activeAccountIndex = newAccounts.length - 1;
 		}
 		this.pendingRequest = newPending;
@@ -120,6 +130,7 @@ var WalletController = class {
 		const index = this.accounts.findIndex((a) => a.address === e.detail.account.address);
 		if (index !== -1) {
 			this.activeAccountIndex = index;
+			this.#wallet?.setActiveAccount(e.detail.account.address);
 			this.host.requestUpdate();
 		}
 	}
@@ -194,7 +205,8 @@ var WalletController = class {
 				.accounts=${this.accounts}
 				.adapters=${this.#wallet ? [...this.#wallet.adapters] : []}
 				.activeAddress=${this.activeAddress}
-				.bookmarkletOrigin=${this.bookmarkletOrigin}
+				.walletOrigin=${this.walletOrigin}
+				.connectedApps=${this.connectedApps}
 				@account-selected=${(e) => this.handleAccountSelected(e)}
 			></dev-wallet-settings>
 		`;