@mysten-incubation/dev-wallet 0.0.1 → 0.3.0

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

@@ -1,18 +1,24 @@
 import { sectionHeaderStyles, sharedStyles, stateStyles } from "./styles.mjs";
-import { formatCoinBalance, getCoinSymbol } from "./utils.mjs";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { formatAddress, formatCoinBalance, getCoinSymbol, indexCoinsByType, isSuiCoinType, lookupCoinByType } from "./utils.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.mjs";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-
 //#region src/ui/dev-wallet-balances.ts
-let DevWalletBalances = class DevWalletBalances$1 extends LitElement {
+let DevWalletBalances = class DevWalletBalances extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.address = "";
 		this.client = null;
+		this.network = "";
+		this.coins = null;
 		this._balances = [];
 		this._loading = false;
 		this._error = null;
+		this.#lastFetchedAddress = "";
+		this.#lastFetchedClient = null;
+		this.#fetchGeneration = 0;
+		this.#coinIndex = /* @__PURE__ */ new Map();
+		this.#lastCoinsRef = null;
 	}
 	static {
 		this.styles = [
@@ -27,65 +33,244 @@ let DevWalletBalances = class DevWalletBalances$1 extends LitElement {
 			.balance-list {
 				display: flex;
 				flex-direction: column;
-				gap: 4px;
+				gap: 2px;
 			}
 
 			.balance-item {
 				display: flex;
-				justify-content: space-between;
 				align-items: center;
-				padding: 10px 12px;
-				border-radius: var(--dev-wallet-radius-sm);
-				border: 1px solid var(--dev-wallet-border);
-				background: var(--dev-wallet-secondary);
+				gap: 10px;
+				padding: 8px 2px;
+				border-radius: var(--dev-wallet-radius);
+				background: transparent;
+				transition: background 120ms;
+			}
+
+			.balance-item:hover {
+				background: var(--dev-wallet-bg-hover);
+			}
+
+			.balance-main {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.token-icon {
+				width: 28px;
+				height: 28px;
+				border-radius: 50%;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				background: linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));
+				color: #fff;
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
 			}
 
 			.balance-symbol {
-				font-size: 14px;
+				font-size: 12px;
 				font-weight: var(--dev-wallet-font-weight-medium);
 				color: var(--dev-wallet-foreground);
 			}
 
-			.balance-amount {
-				font-size: 14px;
+			.balance-name {
+				font-size: 11px;
+				color: var(--dev-wallet-text-3);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.balance-amount-stack {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				gap: 1px;
+				font-size: 12px;
 				color: var(--dev-wallet-foreground);
 				font-family: var(--dev-wallet-font-mono);
+				font-variant-numeric: tabular-nums;
+			}
+
+			.balance-amount-symbol {
+				font-size: 10.5px;
+				color: var(--dev-wallet-text-3);
+			}
+
+			.coins-header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 8px;
+			}
+
+			.coins-header .section-header {
+				margin-bottom: 0;
+			}
+
+			.manage-btn,
+			.action-btn {
+				height: 30px;
+				padding: 0 10px;
+				border-radius: var(--dev-wallet-radius);
+				border: 1px solid var(--dev-wallet-border);
+				background: transparent;
+				color: var(--dev-wallet-text-2);
+				font-size: 12px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+			}
+
+			.manage-btn:hover,
+			.action-btn:hover:not(:disabled) {
+				background: var(--dev-wallet-bg-hover);
+				border-color: var(--dev-wallet-border-strong);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.manage-btn:disabled {
+				opacity: 0.48;
+				cursor: not-allowed;
+			}
+
+			.balance-hero {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 12px;
+				margin-bottom: 18px;
+				padding: 16px;
+				border: 1px solid var(--dev-wallet-border);
+				border-radius: var(--dev-wallet-radius-lg);
+				background:
+					radial-gradient(
+						circle at 20% 0%,
+						color-mix(in srgb, var(--dev-wallet-primary) 18%, transparent),
+						transparent 42%
+					),
+					var(--dev-wallet-surface);
+			}
+
+			.hero-copy {
+				min-width: 0;
+			}
+
+			.hero-balance {
+				display: flex;
+				align-items: baseline;
+				gap: 8px;
+			}
+
+			.hero-value {
+				font-size: 30px;
+				line-height: 1;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				font-variant-numeric: tabular-nums;
+				letter-spacing: 0;
+			}
+
+			.hero-unit {
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 13px;
+				color: var(--dev-wallet-text-2);
+			}
+
+			.hero-note {
+				margin-top: 6px;
+				font-size: 12px;
+				color: var(--dev-wallet-text-3);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.empty-wallet {
+				text-align: left;
+				padding: 16px;
+			}
+
+			.empty-title {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.empty-copy {
+				margin-top: 6px;
+				font-size: 12px;
+				line-height: 1.45;
+				color: var(--dev-wallet-text-2);
 			}
 		`
 		];
 	}
-	#lastFetchedAddress = "";
-	#lastFetchedClient = null;
-	#fetchGeneration = 0;
+	#lastFetchedAddress;
+	#lastFetchedClient;
+	#fetchGeneration;
+	#coinIndex;
+	#lastCoinsRef;
 	/** Re-fetch balances for the current address/client. */
 	refresh() {
-		if (this.address && this.client) {
-			this.#fetchBalances();
-		}
+		if (this.address && this.client) this.#fetchBalances();
 	}
 	willUpdate(changedProperties) {
-		if ((changedProperties.has("address") || changedProperties.has("client")) && this.address && this.client && (this.address !== this.#lastFetchedAddress || this.client !== this.#lastFetchedClient)) {
-			this.#fetchBalances();
+		if (changedProperties.has("coins") && this.coins !== this.#lastCoinsRef) {
+			this.#coinIndex = indexCoinsByType(this.coins);
+			this.#lastCoinsRef = this.coins;
 		}
+		if ((changedProperties.has("address") || changedProperties.has("client")) && this.address && this.client && (this.address !== this.#lastFetchedAddress || this.client !== this.#lastFetchedClient)) this.#fetchBalances();
 	}
 	render() {
-		if (!this.address || !this.client) {
-			return nothing;
-		}
+		if (!this.address || !this.client) return nothing;
+		const suiBalance = this._balances.find((balance) => isSuiCoinType(balance.coinType) || balance.symbol === "SUI");
+		const formattedSui = suiBalance ? formatCoinBalance(suiBalance.totalBalance, suiBalance.decimals) : "0.0000";
+		const networkLabel = this.network || "active network";
 		return html`
-			<h3 class="section-header">Balances</h3>
+			<div class="balance-hero">
+				<div class="hero-copy">
+					<div class="hero-balance">
+						<span class="hero-value">${formattedSui}</span>
+						<span class="hero-unit">SUI</span>
+					</div>
+					<div class="hero-note">${formatAddress(this.address)} · ${networkLabel}</div>
+				</div>
+				<button class="action-btn" @click=${this.refresh}>Refresh</button>
+			</div>
+			<div class="coins-header">
+				<h3 class="section-header">Coins · ${this._balances.length}</h3>
+				<button class="manage-btn" disabled>Manage</button>
+			</div>
 			${this._loading ? html`<div class="loading" part="loading" aria-live="polite">Loading...</div>` : this._error ? html`<div class="error-state" part="error-message" aria-live="polite">
 							${this._error}
-						</div>` : this._balances.length === 0 ? html`<div class="empty-state" part="empty-state">No balances</div>` : html`
+						</div>` : this._balances.length === 0 ? html`<div class="empty-state empty-wallet" part="empty-state">
+								<div class="empty-title">No balances on ${networkLabel}</div>
+								<div class="empty-copy">
+									Fund ${formatAddress(this.address)} from your local faucet or devstack seed, then
+									refresh balances here.
+								</div>
+							</div>` : html`
 								<div class="balance-list" part="balance-list">
-									${this._balances.map((balance) => html`
+									${this._balances.map((balance) => {
+			const name = lookupCoinByType(this.#coinIndex, balance.coinType)?.displayName ?? balance.symbol;
+			return html`
 											<div class="balance-item">
-												<span class="balance-symbol">${balance.symbol}</span>
-												<span class="balance-amount"
-													>${formatCoinBalance(balance.totalBalance, balance.decimals)}</span
-												>
+												<span class="token-icon">${balance.symbol.slice(0, 3)}</span>
+												<span class="balance-main">
+													<div class="balance-symbol">${balance.symbol}</div>
+													<div class="balance-name">${name}</div>
+												</span>
+												<span class="balance-amount-stack">
+													<span class="balance-amount">
+														${formatCoinBalance(balance.totalBalance, balance.decimals)}
+													</span>
+													<span class="balance-amount-symbol">${balance.symbol}</span>
+												</span>
 											</div>
-										`)}
+										`;
+		})}
 								</div>
 							`}
 		`;
@@ -99,32 +284,45 @@ let DevWalletBalances = class DevWalletBalances$1 extends LitElement {
 		try {
 			const { balances } = await this.client.core.listBalances({ owner: this.address });
 			if (generation !== this.#fetchGeneration) return;
-			const metadataResults = await Promise.all(balances.map((b) => this.client.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null)));
-			if (generation !== this.#fetchGeneration) return;
-			this._balances = balances.map((b, i) => ({
-				coinType: b.coinType,
-				symbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),
-				totalBalance: b.balance,
-				decimals: metadataResults[i]?.coinMetadata?.decimals ?? 0
+			const preseeded = balances.map((b) => lookupCoinByType(this.#coinIndex, b.coinType));
+			const metadataResults = await Promise.all(balances.map((b, i) => {
+				if (preseeded[i] !== void 0) return null;
+				return this.client.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null);
 			}));
+			if (generation !== this.#fetchGeneration) return;
+			this._balances = balances.map((b, i) => {
+				const seed = preseeded[i];
+				if (seed !== void 0) return {
+					coinType: b.coinType,
+					symbol: seed.symbol ?? getCoinSymbol(b.coinType),
+					totalBalance: b.balance,
+					decimals: seed.decimals
+				};
+				return {
+					coinType: b.coinType,
+					symbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),
+					totalBalance: b.balance,
+					decimals: metadataResults[i]?.coinMetadata?.decimals ?? 0
+				};
+			});
 		} catch {
 			if (generation !== this.#fetchGeneration) return;
 			this._error = "Failed to load balances";
 			this._balances = [];
 		} finally {
-			if (generation === this.#fetchGeneration) {
-				this._loading = false;
-			}
+			if (generation === this.#fetchGeneration) this._loading = false;
 		}
 	}
 };
 __decorate([property({ type: String })], DevWalletBalances.prototype, "address", void 0);
 __decorate([property({ attribute: false })], DevWalletBalances.prototype, "client", void 0);
+__decorate([property({ type: String })], DevWalletBalances.prototype, "network", void 0);
+__decorate([property({ attribute: false })], DevWalletBalances.prototype, "coins", void 0);
 __decorate([state()], DevWalletBalances.prototype, "_balances", void 0);
 __decorate([state()], DevWalletBalances.prototype, "_loading", void 0);
 __decorate([state()], DevWalletBalances.prototype, "_error", void 0);
 DevWalletBalances = __decorate([customElement("dev-wallet-balances")], DevWalletBalances);
-
 //#endregion
 export { DevWalletBalances };
+
 //# sourceMappingURL=dev-wallet-balances.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-balances.mjs","names":["DevWalletBalances","#fetchBalances","#lastFetchedAddress","#lastFetchedClient","#fetchGeneration"],"sources":["../../src/ui/dev-wallet-balances.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ClientWithCoreApi } from '@mysten/sui/client';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { sectionHeaderStyles, sharedStyles, stateStyles } from './styles.js';\nimport { formatCoinBalance, getCoinSymbol } from './utils.js';\n\ninterface CoinBalance {\n\tcoinType: string;\n\tsymbol: string;\n\ttotalBalance: string;\n\tdecimals: number;\n}\n\n@customElement('dev-wallet-balances')\nexport class DevWalletBalances extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tsectionHeaderStyles,\n\t\tstateStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t.balance-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.balance-item {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\t\t\t\tpadding: 10px 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.balance-symbol {\n\t\t\t\tfont-size: 14px;\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.balance-amount {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\taddress = '';\n\n\t@property({ attribute: false })\n\tclient: ClientWithCoreApi | null = null;\n\n\t@state()\n\tprivate _balances: CoinBalance[] = [];\n\n\t@state()\n\tprivate _loading = false;\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t#lastFetchedAddress = '';\n\t#lastFetchedClient: ClientWithCoreApi | null = null;\n\t#fetchGeneration = 0;\n\n\t/** Re-fetch balances for the current address/client. */\n\trefresh() {\n\t\tif (this.address && this.client) {\n\t\t\tthis.#fetchBalances();\n\t\t}\n\t}\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (\n\t\t\t(changedProperties.has('address') || changedProperties.has('client')) &&\n\t\t\tthis.address &&\n\t\t\tthis.client &&\n\t\t\t(this.address !== this.#lastFetchedAddress || this.client !== this.#lastFetchedClient)\n\t\t) {\n\t\t\tthis.#fetchBalances();\n\t\t}\n\t}\n\n\toverride render() {\n\t\tif (!this.address || !this.client) {\n\t\t\treturn nothing;\n\t\t}\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Balances</h3>\n\t\t\t${this._loading\n\t\t\t\t? html`<div class=\"loading\" part=\"loading\" aria-live=\"polite\">Loading...</div>`\n\t\t\t\t: this._error\n\t\t\t\t\t? html`<div class=\"error-state\" part=\"error-message\" aria-live=\"polite\">\n\t\t\t\t\t\t\t${this._error}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: this._balances.length === 0\n\t\t\t\t\t\t? html`<div class=\"empty-state\" part=\"empty-state\">No balances</div>`\n\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t<div class=\"balance-list\" part=\"balance-list\">\n\t\t\t\t\t\t\t\t\t${this._balances.map(\n\t\t\t\t\t\t\t\t\t\t(balance) => html`\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"balance-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-symbol\">${balance.symbol}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-amount\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>${formatCoinBalance(balance.totalBalance, balance.decimals)}</span\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\tasync #fetchBalances() {\n\t\tthis.#lastFetchedAddress = this.address;\n\t\tthis.#lastFetchedClient = this.client;\n\t\tconst generation = ++this.#fetchGeneration;\n\t\tthis._loading = true;\n\t\tthis._error = null;\n\n\t\ttry {\n\t\t\tconst { balances } = await this.client!.core.listBalances({ owner: this.address });\n\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\n\t\t\tconst metadataResults = await Promise.all(\n\t\t\t\tbalances.map((b) =>\n\t\t\t\t\tthis.client!.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null),\n\t\t\t\t),\n\t\t\t);\n\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\t\t\tthis._balances = balances.map(\n\t\t\t\t(b, i): CoinBalance => ({\n\t\t\t\t\tcoinType: b.coinType,\n\t\t\t\t\tsymbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),\n\t\t\t\t\ttotalBalance: b.balance,\n\t\t\t\t\tdecimals: metadataResults[i]?.coinMetadata?.decimals ?? 0,\n\t\t\t\t}),\n\t\t\t);\n\t\t} catch {\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\t\t\tthis._error = 'Failed to load balances';\n\t\t\tthis._balances = [];\n\t\t} finally {\n\t\t\tif (generation === this.#fetchGeneration) {\n\t\t\t\tthis._loading = false;\n\t\t\t}\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-balances': DevWalletBalances;\n\t}\n}\n"],"mappings":";;;;;;;AAkBO,8BAAMA,4BAA0B,WAAW;;;iBAyCvC;gBAGyB;mBAGA,EAAE;kBAGlB;gBAGa;;;gBApDP;GACxB;GACA;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCH;;CAiBD,sBAAsB;CACtB,qBAA+C;CAC/C,mBAAmB;;CAGnB,UAAU;AACT,MAAI,KAAK,WAAW,KAAK,QAAQ;AAChC,SAAKC,eAAgB;;;CAIvB,AAAS,WAAW,mBAAyC;AAC5D,OACE,kBAAkB,IAAI,UAAU,IAAI,kBAAkB,IAAI,SAAS,KACpE,KAAK,WACL,KAAK,WACJ,KAAK,YAAY,MAAKC,sBAAuB,KAAK,WAAW,MAAKC,oBAClE;AACD,SAAKF,eAAgB;;;CAIvB,AAAS,SAAS;AACjB,MAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAQ;AAClC,UAAO;;AAGR,SAAO,IAAI;;KAER,KAAK,WACJ,IAAI,4EACJ,KAAK,SACJ,IAAI;SACF,KAAK,OAAO;gBAEd,KAAK,UAAU,WAAW,IACzB,IAAI,kEACJ,IAAI;;WAED,KAAK,UAAU,KACf,YAAY,IAAI;;2CAEgB,QAAQ,OAAO;;gBAE1C,kBAAkB,QAAQ,cAAc,QAAQ,SAAS,CAAC;;;YAIhE,CAAC;;SAEF;;;CAIR,OAAMA,gBAAiB;AACtB,QAAKC,qBAAsB,KAAK;AAChC,QAAKC,oBAAqB,KAAK;EAC/B,MAAM,aAAa,EAAE,MAAKC;AAC1B,OAAK,WAAW;AAChB,OAAK,SAAS;AAEd,MAAI;GACH,MAAM,EAAE,aAAa,MAAM,KAAK,OAAQ,KAAK,aAAa,EAAE,OAAO,KAAK,SAAS,CAAC;AAElF,OAAI,eAAe,MAAKA,gBAAkB;GAE1C,MAAM,kBAAkB,MAAM,QAAQ,IACrC,SAAS,KAAK,MACb,KAAK,OAAQ,KAAK,gBAAgB,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,YAAY,KAAK,CAC7E,CACD;AAED,OAAI,eAAe,MAAKA,gBAAkB;AAC1C,QAAK,YAAY,SAAS,KACxB,GAAG,OAAoB;IACvB,UAAU,EAAE;IACZ,QAAQ,gBAAgB,IAAI,cAAc,UAAU,cAAc,EAAE,SAAS;IAC7E,cAAc,EAAE;IAChB,UAAU,gBAAgB,IAAI,cAAc,YAAY;IACxD,EACD;UACM;AACP,OAAI,eAAe,MAAKA,gBAAkB;AAC1C,QAAK,SAAS;AACd,QAAK,YAAY,EAAE;YACV;AACT,OAAI,eAAe,MAAKA,iBAAkB;AACzC,SAAK,WAAW;;;;;YAtGlB,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,OAAO;YAGP,OAAO;YAGP,OAAO;gCArDR,cAAc,sBAAsB"}
+{"version":3,"file":"dev-wallet-balances.mjs","names":["#fetchBalances","#lastCoinsRef","#coinIndex","#lastFetchedAddress","#lastFetchedClient","#fetchGeneration"],"sources":["../../src/ui/dev-wallet-balances.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ClientWithCoreApi } from '@mysten/sui/client';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { sectionHeaderStyles, sharedStyles, stateStyles } from './styles.js';\nimport type { CoinManifestEntry, CoinRecord } from './utils.js';\nimport {\n\tformatAddress,\n\tformatCoinBalance,\n\tgetCoinSymbol,\n\tindexCoinsByType,\n\tisSuiCoinType,\n\tlookupCoinByType,\n} from './utils.js';\n\ninterface CoinBalance {\n\tcoinType: string;\n\tsymbol: string;\n\ttotalBalance: string;\n\tdecimals: number;\n}\n\n@customElement('dev-wallet-balances')\nexport class DevWalletBalances extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tsectionHeaderStyles,\n\t\tstateStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t.balance-list {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 2px;\n\t\t\t}\n\n\t\t\t.balance-item {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 10px;\n\t\t\t\tpadding: 8px 2px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t\tbackground: transparent;\n\t\t\t\ttransition: background 120ms;\n\t\t\t}\n\n\t\t\t.balance-item:hover {\n\t\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t\t}\n\n\t\t\t.balance-main {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.token-icon {\n\t\t\t\twidth: 28px;\n\t\t\t\theight: 28px;\n\t\t\t\tborder-radius: 50%;\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\tflex-shrink: 0;\n\t\t\t\tbackground: linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));\n\t\t\t\tcolor: #fff;\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-semibold);\n\t\t\t\tbox-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);\n\t\t\t}\n\n\t\t\t.balance-symbol {\n\t\t\t\tfont-size: 12px;\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.balance-name {\n\t\t\t\tfont-size: 11px;\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.balance-amount-stack {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: flex-end;\n\t\t\t\tgap: 1px;\n\t\t\t\tfont-size: 12px;\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-variant-numeric: tabular-nums;\n\t\t\t}\n\n\t\t\t.balance-amount-symbol {\n\t\t\t\tfont-size: 10.5px;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.coins-header {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\n\t\t\t.coins-header .section-header {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\n\t\t\t.manage-btn,\n\t\t\t.action-btn {\n\t\t\t\theight: 30px;\n\t\t\t\tpadding: 0 10px;\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: transparent;\n\t\t\t\tcolor: var(--dev-wallet-text-2);\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.manage-btn:hover,\n\t\t\t.action-btn:hover:not(:disabled) {\n\t\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t\t\tborder-color: var(--dev-wallet-border-strong);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.manage-btn:disabled {\n\t\t\t\topacity: 0.48;\n\t\t\t\tcursor: not-allowed;\n\t\t\t}\n\n\t\t\t.balance-hero {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tgap: 12px;\n\t\t\t\tmargin-bottom: 18px;\n\t\t\t\tpadding: 16px;\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tborder-radius: var(--dev-wallet-radius-lg);\n\t\t\t\tbackground:\n\t\t\t\t\tradial-gradient(\n\t\t\t\t\t\tcircle at 20% 0%,\n\t\t\t\t\t\tcolor-mix(in srgb, var(--dev-wallet-primary) 18%, transparent),\n\t\t\t\t\t\ttransparent 42%\n\t\t\t\t\t),\n\t\t\t\t\tvar(--dev-wallet-surface);\n\t\t\t}\n\n\t\t\t.hero-copy {\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.hero-balance {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\n\t\t\t.hero-value {\n\t\t\t\tfont-size: 30px;\n\t\t\t\tline-height: 1;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tletter-spacing: 0;\n\t\t\t}\n\n\t\t\t.hero-unit {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 13px;\n\t\t\t\tcolor: var(--dev-wallet-text-2);\n\t\t\t}\n\n\t\t\t.hero-note {\n\t\t\t\tmargin-top: 6px;\n\t\t\t\tfont-size: 12px;\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.empty-wallet {\n\t\t\t\ttext-align: left;\n\t\t\t\tpadding: 16px;\n\t\t\t}\n\n\t\t\t.empty-title {\n\t\t\t\tfont-size: 13px;\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.empty-copy {\n\t\t\t\tmargin-top: 6px;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 1.45;\n\t\t\t\tcolor: var(--dev-wallet-text-2);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\taddress = '';\n\n\t@property({ attribute: false })\n\tclient: ClientWithCoreApi | null = null;\n\n\t@property({ type: String })\n\tnetwork = '';\n\n\t/** Optional pre-seeded coin metadata — pass the generated `coins`\n\t *  constant from devstack codegen (`src/generated/coins.ts`) to skip\n\t *  per-coin `getCoinMetadata` RPC waterfalls on UI load. Unknown coin\n\t *  types fall through to an RPC fetch as before. */\n\t@property({ attribute: false })\n\tcoins: CoinRecord | null = null;\n\n\t@state()\n\tprivate _balances: CoinBalance[] = [];\n\n\t@state()\n\tprivate _loading = false;\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t#lastFetchedAddress = '';\n\t#lastFetchedClient: ClientWithCoreApi | null = null;\n\t#fetchGeneration = 0;\n\t#coinIndex: ReadonlyMap<string, CoinManifestEntry> = new Map();\n\t#lastCoinsRef: CoinRecord | null = null;\n\n\t/** Re-fetch balances for the current address/client. */\n\trefresh() {\n\t\tif (this.address && this.client) {\n\t\t\tthis.#fetchBalances();\n\t\t}\n\t}\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (changedProperties.has('coins') && this.coins !== this.#lastCoinsRef) {\n\t\t\tthis.#coinIndex = indexCoinsByType(this.coins);\n\t\t\tthis.#lastCoinsRef = this.coins;\n\t\t}\n\t\tif (\n\t\t\t(changedProperties.has('address') || changedProperties.has('client')) &&\n\t\t\tthis.address &&\n\t\t\tthis.client &&\n\t\t\t(this.address !== this.#lastFetchedAddress || this.client !== this.#lastFetchedClient)\n\t\t) {\n\t\t\tthis.#fetchBalances();\n\t\t}\n\t}\n\n\toverride render() {\n\t\tif (!this.address || !this.client) {\n\t\t\treturn nothing;\n\t\t}\n\n\t\tconst suiBalance = this._balances.find(\n\t\t\t(balance) => isSuiCoinType(balance.coinType) || balance.symbol === 'SUI',\n\t\t);\n\t\tconst formattedSui = suiBalance\n\t\t\t? formatCoinBalance(suiBalance.totalBalance, suiBalance.decimals)\n\t\t\t: '0.0000';\n\t\tconst networkLabel = this.network || 'active network';\n\n\t\treturn html`\n\t\t\t<div class=\"balance-hero\">\n\t\t\t\t<div class=\"hero-copy\">\n\t\t\t\t\t<div class=\"hero-balance\">\n\t\t\t\t\t\t<span class=\"hero-value\">${formattedSui}</span>\n\t\t\t\t\t\t<span class=\"hero-unit\">SUI</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"hero-note\">${formatAddress(this.address)} · ${networkLabel}</div>\n\t\t\t\t</div>\n\t\t\t\t<button class=\"action-btn\" @click=${this.refresh}>Refresh</button>\n\t\t\t</div>\n\t\t\t<div class=\"coins-header\">\n\t\t\t\t<h3 class=\"section-header\">Coins · ${this._balances.length}</h3>\n\t\t\t\t<button class=\"manage-btn\" disabled>Manage</button>\n\t\t\t</div>\n\t\t\t${this._loading\n\t\t\t\t? html`<div class=\"loading\" part=\"loading\" aria-live=\"polite\">Loading...</div>`\n\t\t\t\t: this._error\n\t\t\t\t\t? html`<div class=\"error-state\" part=\"error-message\" aria-live=\"polite\">\n\t\t\t\t\t\t\t${this._error}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: this._balances.length === 0\n\t\t\t\t\t\t? html`<div class=\"empty-state empty-wallet\" part=\"empty-state\">\n\t\t\t\t\t\t\t\t<div class=\"empty-title\">No balances on ${networkLabel}</div>\n\t\t\t\t\t\t\t\t<div class=\"empty-copy\">\n\t\t\t\t\t\t\t\t\tFund ${formatAddress(this.address)} from your local faucet or devstack seed, then\n\t\t\t\t\t\t\t\t\trefresh balances here.\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t<div class=\"balance-list\" part=\"balance-list\">\n\t\t\t\t\t\t\t\t\t${this._balances.map((balance) => {\n\t\t\t\t\t\t\t\t\t\tconst seed = lookupCoinByType(this.#coinIndex, balance.coinType);\n\t\t\t\t\t\t\t\t\t\tconst name = seed?.displayName ?? balance.symbol;\n\t\t\t\t\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"balance-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"token-icon\">${balance.symbol.slice(0, 3)}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-main\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"balance-symbol\">${balance.symbol}</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"balance-name\">${name}</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-amount-stack\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-amount\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t${formatCoinBalance(balance.totalBalance, balance.decimals)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-amount-symbol\">${balance.symbol}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t`;\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\tasync #fetchBalances() {\n\t\tthis.#lastFetchedAddress = this.address;\n\t\tthis.#lastFetchedClient = this.client;\n\t\tconst generation = ++this.#fetchGeneration;\n\t\tthis._loading = true;\n\t\tthis._error = null;\n\n\t\ttry {\n\t\t\tconst { balances } = await this.client!.core.listBalances({ owner: this.address });\n\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\n\t\t\t// Pre-seed metadata from the generated `coins` record. Each\n\t\t\t// balance with a known coinType skips the per-coin RPC entirely;\n\t\t\t// only the (typically empty) remainder hits the network.\n\t\t\tconst preseeded = balances.map((b) => lookupCoinByType(this.#coinIndex, b.coinType));\n\t\t\tconst metadataResults = await Promise.all(\n\t\t\t\tbalances.map((b, i) => {\n\t\t\t\t\tif (preseeded[i] !== undefined) return null;\n\t\t\t\t\treturn this.client!.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null);\n\t\t\t\t}),\n\t\t\t);\n\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\t\t\tthis._balances = balances.map((b, i): CoinBalance => {\n\t\t\t\tconst seed = preseeded[i];\n\t\t\t\tif (seed !== undefined) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tcoinType: b.coinType,\n\t\t\t\t\t\tsymbol: seed.symbol ?? getCoinSymbol(b.coinType),\n\t\t\t\t\t\ttotalBalance: b.balance,\n\t\t\t\t\t\tdecimals: seed.decimals,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tcoinType: b.coinType,\n\t\t\t\t\tsymbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),\n\t\t\t\t\ttotalBalance: b.balance,\n\t\t\t\t\tdecimals: metadataResults[i]?.coinMetadata?.decimals ?? 0,\n\t\t\t\t};\n\t\t\t});\n\t\t} catch {\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\t\t\tthis._error = 'Failed to load balances';\n\t\t\tthis._balances = [];\n\t\t} finally {\n\t\t\tif (generation === this.#fetchGeneration) {\n\t\t\t\tthis._loading = false;\n\t\t\t}\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-balances': DevWalletBalances;\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import * as lit8 from "lit";
+import * as _$lit from "lit";
 import { LitElement } from "lit";
 
 //#region src/ui/dev-wallet-connect.d.ts
@@ -9,7 +9,7 @@ interface AccountInfo {
 }
 declare class DevWalletConnect extends LitElement {
   #private;
-  static styles: (lit8.CSSResult | lit8.CSSResult[])[];
+  static styles: (_$lit.CSSResult | _$lit.CSSResult[])[];
   appName: string;
   appUrl: string;
   accounts: AccountInfo[];
@@ -17,7 +17,7 @@ declare class DevWalletConnect extends LitElement {
   private _error;
   private _selectedAddresses;
   willUpdate(changedProperties: Map<string, unknown>): void;
-  render(): lit8.TemplateResult<1>;
+  render(): _$lit.TemplateResult<1>;
   get selectedAddresses(): string[];
   showError(message: string): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-connect.d.mts","names":[],"sources":["../../src/ui/dev-wallet-connect.ts"],"mappings":";;;;UASU,WAAA;EACT,OAAA;EACA,KAAA;EACA,WAAA;AAAA;AAAA,cAIY,gBAAA,SAAyB,UAAA;EAAA;SACrB,MAAA,GADa,IAAA,CACP,SAAA,GAAA,IAAA,CAAA,SAAA;EA4HtB,OAAA;EAGA,MAAA;EAGA,QAAA,EAAU,WAAA;EAAA,QAGF,WAAA;EAAA,QAGA,MAAA;EAAA,QAGA,kBAAA;EAEC,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAU9B,MAAA,CAAA,GAViC,IAAA,CAU3B,cAAA;EAAA,IA8DX,iBAAA,CAAA;EAkBJ,SAAA,CAAU,OAAA;AAAA;AAAA,QAMH,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,gBAAA;EAAA;AAAA"}
+{"version":3,"file":"dev-wallet-connect.d.mts","names":[],"sources":["../../src/ui/dev-wallet-connect.ts"],"mappings":";;;;UASU,WAAA;EACT,OAAA;EACA,KAAA;EACA,WAAA;AAAA;AAAA,cAIY,gBAAA,SAAyB,UAAA;EAAA;SACrB,MAAA,GADa,KAAA,CACP,SAAA,GAAA,KAAA,CAAA,SAAA;EAuItB,OAAA;EAGA,MAAA;EAGA,QAAA,EAAU,WAAA;EAAA,QAGF,WAAA;EAAA,QAGA,MAAA;EAAA,QAGA,kBAAA;EAEC,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAU9B,MAAA,CAAA,GAViC,KAAA,CAU3B,cAAA;EAAA,IA8DX,iBAAA,CAAA;EAkBJ,SAAA,CAAU,OAAA;AAAA;AAAA,QAMH,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,gBAAA;EAAA;AAAA"}

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

@@ -1,11 +1,10 @@
 import { actionButtonStyles, sharedStyles } from "./styles.mjs";
 import { emitEvent, formatAddress, toggleSetItem } from "./utils.mjs";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.mjs";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-
 //#region src/ui/dev-wallet-connect.ts
-let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
+let DevWalletConnect = class DevWalletConnect extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.appName = "";
@@ -13,7 +12,7 @@ let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
 		this.accounts = [];
 		this._connecting = false;
 		this._error = null;
-		this._selectedAddresses = new Set();
+		this._selectedAddresses = /* @__PURE__ */ new Set();
 	}
 	static {
 		this.styles = [
@@ -22,22 +21,25 @@ let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
 			css`
 			:host {
 				display: flex;
+				flex: 1;
 				flex-direction: column;
 				min-height: 0;
 			}
 
 			.connect-content {
 				flex: 1;
+				min-height: 0;
 				padding: 16px;
+				background: var(--dev-wallet-bg-0);
 			}
 
 			.connect-header {
-				text-align: center;
-				margin-bottom: 12px;
+				text-align: left;
+				margin-bottom: 14px;
 			}
 
 			.connect-title {
-				font-size: 14px;
+				font-size: 13px;
 				font-weight: var(--dev-wallet-font-weight-semibold);
 				color: var(--dev-wallet-foreground);
 			}
@@ -68,19 +70,25 @@ let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
 			.account-list {
 				max-height: 240px;
 				overflow-y: auto;
+				display: flex;
+				flex-direction: column;
+				gap: 6px;
 			}
 
 			.account-item {
 				display: flex;
 				align-items: center;
 				gap: 8px;
-				padding: 8px;
-				border-radius: var(--dev-wallet-radius-md);
+				padding: 10px;
+				border-radius: var(--dev-wallet-radius-lg);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
 				cursor: pointer;
 			}
 
 			.account-item:hover {
-				background: var(--dev-wallet-secondary);
+				background: var(--dev-wallet-bg-hover);
+				border-color: var(--dev-wallet-border-strong);
 			}
 
 			.account-item input[type='checkbox'] {
@@ -106,8 +114,9 @@ let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
 				text-transform: uppercase;
 				letter-spacing: 0.3px;
 				padding: 1px 5px;
-				border-radius: var(--dev-wallet-radius-2xs);
-				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
+				border-radius: 999px;
+				border: 1px solid var(--dev-wallet-border-strong);
+				background: var(--dev-wallet-accent-fade);
 				color: var(--dev-wallet-primary);
 				margin-left: 6px;
 			}
@@ -115,6 +124,7 @@ let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
 			.connect-footer {
 				padding: 12px 16px;
 				border-top: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
 			}
 
 			/* Override: connect uses --primary instead of --positive for approve */
@@ -140,9 +150,7 @@ let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
 		];
 	}
 	willUpdate(changedProperties) {
-		if (changedProperties.has("accounts") && this.accounts.length > 0 && this._selectedAddresses.size === 0) {
-			this._selectedAddresses = new Set(this.accounts.map((a) => a.address));
-		}
+		if (changedProperties.has("accounts") && this.accounts.length > 0 && this._selectedAddresses.size === 0) this._selectedAddresses = new Set(this.accounts.map((a) => a.address));
 	}
 	render() {
 		return html`
@@ -219,7 +227,7 @@ __decorate([state()], DevWalletConnect.prototype, "_connecting", void 0);
 __decorate([state()], DevWalletConnect.prototype, "_error", void 0);
 __decorate([state()], DevWalletConnect.prototype, "_selectedAddresses", void 0);
 DevWalletConnect = __decorate([customElement("dev-wallet-connect")], DevWalletConnect);
-
 //#endregion
 export { DevWalletConnect };
+
 //# sourceMappingURL=dev-wallet-connect.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-connect.mjs","names":["DevWalletConnect","#toggleAccount","#reject","#approve"],"sources":["../../src/ui/dev-wallet-connect.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 { actionButtonStyles, sharedStyles } from './styles.js';\nimport { emitEvent, formatAddress, toggleSetItem } from './utils.js';\n\ninterface AccountInfo {\n\taddress: string;\n\tlabel?: string;\n\tadapterName?: string;\n}\n\n@customElement('dev-wallet-connect')\nexport class DevWalletConnect extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tactionButtonStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\n\t\t\t.connect-content {\n\t\t\t\tflex: 1;\n\t\t\t\tpadding: 16px;\n\t\t\t}\n\n\t\t\t.connect-header {\n\t\t\t\ttext-align: center;\n\t\t\t\tmargin-bottom: 12px;\n\t\t\t}\n\n\t\t\t.connect-title {\n\t\t\t\tfont-size: 14px;\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.connect-desc {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\t.app-info {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.app-name {\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\tdisplay: block;\n\t\t\t}\n\n\t\t\t.app-url {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tword-break: break-all;\n\t\t\t}\n\n\t\t\t.account-list {\n\t\t\t\tmax-height: 240px;\n\t\t\t\toverflow-y: auto;\n\t\t\t}\n\n\t\t\t.account-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;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-md);\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.account-item:hover {\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t}\n\n\t\t\t.account-item input[type='checkbox'] {\n\t\t\t\taccent-color: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.account-label {\n\t\t\t\tfont-size: 13px;\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.account-address {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.account-adapter {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-size: 9px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.3px;\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\tmargin-left: 6px;\n\t\t\t}\n\n\t\t\t.connect-footer {\n\t\t\t\tpadding: 12px 16px;\n\t\t\t\tborder-top: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t/* Override: connect uses --primary instead of --positive for approve */\n\t\t\t.btn-approve {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.btn-approve:hover {\n\t\t\t\tbackground: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);\n\t\t\t}\n\n\t\t\t.btn-approve:disabled {\n\t\t\t\tcursor: default;\n\t\t\t}\n\n\t\t\t.error-message {\n\t\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t\t\tfont-size: 12px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\tappName = '';\n\n\t@property({ type: String })\n\tappUrl = '';\n\n\t@property({ attribute: false })\n\taccounts: AccountInfo[] = [];\n\n\t@state()\n\tprivate _connecting = false;\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t@state()\n\tprivate _selectedAddresses: Set<string> = new Set();\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (\n\t\t\tchangedProperties.has('accounts') &&\n\t\t\tthis.accounts.length > 0 &&\n\t\t\tthis._selectedAddresses.size === 0\n\t\t) {\n\t\t\tthis._selectedAddresses = new Set(this.accounts.map((a) => a.address));\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"connect-content\">\n\t\t\t\t<div class=\"connect-header\">\n\t\t\t\t\t<div class=\"connect-title\">Connection Request</div>\n\t\t\t\t\t<div class=\"connect-desc\">Select accounts to share with the app</div>\n\t\t\t\t\t${this.appName\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<div class=\"app-info\">\n\t\t\t\t\t\t\t\t\t<span class=\"app-name\">${this.appName}</span>\n\t\t\t\t\t\t\t\t\t<span class=\"app-url\">${this.appUrl}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t\t${this.accounts.length > 0\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<div class=\"account-list\" part=\"account-list\">\n\t\t\t\t\t\t\t\t${this.accounts.map(\n\t\t\t\t\t\t\t\t\t(account) => html`\n\t\t\t\t\t\t\t\t\t\t<label class=\"account-item\">\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t.checked=${this._selectedAddresses.has(account.address)}\n\t\t\t\t\t\t\t\t\t\t\t\t@change=${() => this.#toggleAccount(account.address)}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t${account.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<div class=\"account-label\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t${account.label}${account.adapterName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<span class=\"account-adapter\">${account.adapterName}</span>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"account-address\">${formatAddress(account.address)}</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t\t<div class=\"connect-footer\">\n\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t<button class=\"btn btn-reject\" part=\"reject-button\" @click=${this.#reject}>Reject</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"btn btn-approve\"\n\t\t\t\t\t\tpart=\"approve-button\"\n\t\t\t\t\t\t?disabled=${this._connecting || this._selectedAddresses.size === 0}\n\t\t\t\t\t\t@click=${this.#approve}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this._connecting ? 'Connecting...' : `Connect (${this._selectedAddresses.size})`}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t${this._error\n\t\t\t\t\t? html`<p class=\"error-message\" part=\"error-message\">${this._error}</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tget selectedAddresses(): string[] {\n\t\treturn [...this._selectedAddresses];\n\t}\n\n\t#toggleAccount(address: string) {\n\t\tthis._selectedAddresses = toggleSetItem(this._selectedAddresses, address);\n\t}\n\n\t#approve() {\n\t\tthis._connecting = true;\n\t\tthis._error = null;\n\t\temitEvent(this, 'approve', { selectedAddresses: this.selectedAddresses });\n\t}\n\n\t#reject() {\n\t\temitEvent(this, 'reject');\n\t}\n\n\tshowError(message: string) {\n\t\tthis._connecting = false;\n\t\tthis._error = message;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-connect': DevWalletConnect;\n\t}\n}\n"],"mappings":";;;;;;;AAgBO,6BAAMA,2BAAyB,WAAW;;;iBA6HtC;gBAGD;kBAGiB,EAAE;qBAGN;gBAGU;4BAGU,IAAI,KAAK;;;gBA3I1B;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHH;;CAoBD,AAAS,WAAW,mBAAyC;AAC5D,MACC,kBAAkB,IAAI,WAAW,IACjC,KAAK,SAAS,SAAS,KACvB,KAAK,mBAAmB,SAAS,GAChC;AACD,QAAK,qBAAqB,IAAI,IAAI,KAAK,SAAS,KAAK,MAAM,EAAE,QAAQ,CAAC;;;CAIxE,AAAS,SAAS;AACjB,SAAO,IAAI;;;;;OAKN,KAAK,UACJ,IAAI;;kCAEsB,KAAK,QAAQ;iCACd,KAAK,OAAO;;WAGrC,QAAQ;;MAEV,KAAK,SAAS,SAAS,IACtB,IAAI;;UAED,KAAK,SAAS,KACd,YAAY,IAAI;;;;uBAIH,KAAK,mBAAmB,IAAI,QAAQ,QAAQ,CAAC;4BACxC,MAAKC,cAAe,QAAQ,QAAQ,CAAC;;;cAGnD,QAAQ,QACP,IAAI;iBACF,QAAQ,QAAQ,QAAQ,cACvB,IAAI,iCAAiC,QAAQ,YAAY,WACzD,QAAQ;wBAEX,QAAQ;2CACoB,cAAc,QAAQ,QAAQ,CAAC;;;WAIjE,CAAC;;UAGH,QAAQ;;;;kEAImD,MAAKC,OAAQ;;;;kBAI7D,KAAK,eAAe,KAAK,mBAAmB,SAAS,EAAE;eAC1D,MAAKC,QAAS;;QAErB,KAAK,cAAc,kBAAkB,YAAY,KAAK,mBAAmB,KAAK,GAAG;;;MAGnF,KAAK,SACJ,IAAI,iDAAiD,KAAK,OAAO,QACjE,QAAQ;;;;CAKd,IAAI,oBAA8B;AACjC,SAAO,CAAC,GAAG,KAAK,mBAAmB;;CAGpC,eAAe,SAAiB;AAC/B,OAAK,qBAAqB,cAAc,KAAK,oBAAoB,QAAQ;;CAG1E,WAAW;AACV,OAAK,cAAc;AACnB,OAAK,SAAS;AACd,YAAU,MAAM,WAAW,EAAE,mBAAmB,KAAK,mBAAmB,CAAC;;CAG1E,UAAU;AACT,YAAU,MAAM,SAAS;;CAG1B,UAAU,SAAiB;AAC1B,OAAK,cAAc;AACnB,OAAK,SAAS;;;YA9Gd,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,OAAO;YAGP,OAAO;YAGP,OAAO;+BA5IR,cAAc,qBAAqB"}
+{"version":3,"file":"dev-wallet-connect.mjs","names":["#toggleAccount","#reject","#approve"],"sources":["../../src/ui/dev-wallet-connect.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 { actionButtonStyles, sharedStyles } from './styles.js';\nimport { emitEvent, formatAddress, toggleSetItem } from './utils.js';\n\ninterface AccountInfo {\n\taddress: string;\n\tlabel?: string;\n\tadapterName?: string;\n}\n\n@customElement('dev-wallet-connect')\nexport class DevWalletConnect extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tactionButtonStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex: 1;\n\t\t\t\tflex-direction: column;\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\n\t\t\t.connect-content {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-height: 0;\n\t\t\t\tpadding: 16px;\n\t\t\t\tbackground: var(--dev-wallet-bg-0);\n\t\t\t}\n\n\t\t\t.connect-header {\n\t\t\t\ttext-align: left;\n\t\t\t\tmargin-bottom: 14px;\n\t\t\t}\n\n\t\t\t.connect-title {\n\t\t\t\tfont-size: 13px;\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.connect-desc {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\t.app-info {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.app-name {\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\tdisplay: block;\n\t\t\t}\n\n\t\t\t.app-url {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tword-break: break-all;\n\t\t\t}\n\n\t\t\t.account-list {\n\t\t\t\tmax-height: 240px;\n\t\t\t\toverflow-y: auto;\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.account-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: 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: var(--dev-wallet-surface);\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.account-item:hover {\n\t\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t\t\tborder-color: var(--dev-wallet-border-strong);\n\t\t\t}\n\n\t\t\t.account-item input[type='checkbox'] {\n\t\t\t\taccent-color: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.account-label {\n\t\t\t\tfont-size: 13px;\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.account-address {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.account-adapter {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-size: 9px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.3px;\n\t\t\t\tpadding: 1px 5px;\n\t\t\t\tborder-radius: 999px;\n\t\t\t\tborder: 1px solid var(--dev-wallet-border-strong);\n\t\t\t\tbackground: var(--dev-wallet-accent-fade);\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\tmargin-left: 6px;\n\t\t\t}\n\n\t\t\t.connect-footer {\n\t\t\t\tpadding: 12px 16px;\n\t\t\t\tborder-top: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t}\n\n\t\t\t/* Override: connect uses --primary instead of --positive for approve */\n\t\t\t.btn-approve {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.btn-approve:hover {\n\t\t\t\tbackground: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);\n\t\t\t}\n\n\t\t\t.btn-approve:disabled {\n\t\t\t\tcursor: default;\n\t\t\t}\n\n\t\t\t.error-message {\n\t\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t\t\tfont-size: 12px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\tappName = '';\n\n\t@property({ type: String })\n\tappUrl = '';\n\n\t@property({ attribute: false })\n\taccounts: AccountInfo[] = [];\n\n\t@state()\n\tprivate _connecting = false;\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t@state()\n\tprivate _selectedAddresses: Set<string> = new Set();\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (\n\t\t\tchangedProperties.has('accounts') &&\n\t\t\tthis.accounts.length > 0 &&\n\t\t\tthis._selectedAddresses.size === 0\n\t\t) {\n\t\t\tthis._selectedAddresses = new Set(this.accounts.map((a) => a.address));\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"connect-content\">\n\t\t\t\t<div class=\"connect-header\">\n\t\t\t\t\t<div class=\"connect-title\">Connection Request</div>\n\t\t\t\t\t<div class=\"connect-desc\">Select accounts to share with the app</div>\n\t\t\t\t\t${this.appName\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<div class=\"app-info\">\n\t\t\t\t\t\t\t\t\t<span class=\"app-name\">${this.appName}</span>\n\t\t\t\t\t\t\t\t\t<span class=\"app-url\">${this.appUrl}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t\t${this.accounts.length > 0\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<div class=\"account-list\" part=\"account-list\">\n\t\t\t\t\t\t\t\t${this.accounts.map(\n\t\t\t\t\t\t\t\t\t(account) => html`\n\t\t\t\t\t\t\t\t\t\t<label class=\"account-item\">\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t.checked=${this._selectedAddresses.has(account.address)}\n\t\t\t\t\t\t\t\t\t\t\t\t@change=${() => this.#toggleAccount(account.address)}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t${account.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<div class=\"account-label\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t${account.label}${account.adapterName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<span class=\"account-adapter\">${account.adapterName}</span>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"account-address\">${formatAddress(account.address)}</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t\t<div class=\"connect-footer\">\n\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t<button class=\"btn btn-reject\" part=\"reject-button\" @click=${this.#reject}>Reject</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"btn btn-approve\"\n\t\t\t\t\t\tpart=\"approve-button\"\n\t\t\t\t\t\t?disabled=${this._connecting || this._selectedAddresses.size === 0}\n\t\t\t\t\t\t@click=${this.#approve}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this._connecting ? 'Connecting...' : `Connect (${this._selectedAddresses.size})`}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t${this._error\n\t\t\t\t\t? html`<p class=\"error-message\" part=\"error-message\">${this._error}</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tget selectedAddresses(): string[] {\n\t\treturn [...this._selectedAddresses];\n\t}\n\n\t#toggleAccount(address: string) {\n\t\tthis._selectedAddresses = toggleSetItem(this._selectedAddresses, address);\n\t}\n\n\t#approve() {\n\t\tthis._connecting = true;\n\t\tthis._error = null;\n\t\temitEvent(this, 'approve', { selectedAddresses: this.selectedAddresses });\n\t}\n\n\t#reject() {\n\t\temitEvent(this, 'reject');\n\t}\n\n\tshowError(message: string) {\n\t\tthis._connecting = false;\n\t\tthis._error = message;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-connect': DevWalletConnect;\n\t}\n}\n"],"mappings":";;;;;;AAgBO,IAAA,mBAAA,MAAM,yBAAyB,WAAW;;;iBAwItC;gBAGD;kBAGiB,EAAE;qBAGN;gBAGU;4CAGU,IAAI,KAAK;;;gBAtJ1B;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiIH;;CAoBD,WAAoB,mBAAyC;AAC5D,MACC,kBAAkB,IAAI,WAAW,IACjC,KAAK,SAAS,SAAS,KACvB,KAAK,mBAAmB,SAAS,EAEjC,MAAK,qBAAqB,IAAI,IAAI,KAAK,SAAS,KAAK,MAAM,EAAE,QAAQ,CAAC;;CAIxE,SAAkB;AACjB,SAAO,IAAI;;;;;OAKN,KAAK,UACJ,IAAI;;kCAEsB,KAAK,QAAQ;iCACd,KAAK,OAAO;;WAGrC,QAAQ;;MAEV,KAAK,SAAS,SAAS,IACtB,IAAI;;UAED,KAAK,SAAS,KACd,YAAY,IAAI;;;;uBAIH,KAAK,mBAAmB,IAAI,QAAQ,QAAQ,CAAC;4BACxC,MAAA,cAAoB,QAAQ,QAAQ,CAAC;;;cAGnD,QAAQ,QACP,IAAI;iBACF,QAAQ,QAAQ,QAAQ,cACvB,IAAI,iCAAiC,QAAQ,YAAY,WACzD,QAAQ;wBAEX,QAAQ;2CACoB,cAAc,QAAQ,QAAQ,CAAC;;;WAIjE,CAAC;;UAGH,QAAQ;;;;kEAImD,MAAA,OAAa;;;;kBAI7D,KAAK,eAAe,KAAK,mBAAmB,SAAS,EAAE;eAC1D,MAAA,QAAc;;QAErB,KAAK,cAAc,kBAAkB,YAAY,KAAK,mBAAmB,KAAK,GAAG;;;MAGnF,KAAK,SACJ,IAAI,iDAAiD,KAAK,OAAO,QACjE,QAAQ;;;;CAKd,IAAI,oBAA8B;AACjC,SAAO,CAAC,GAAG,KAAK,mBAAmB;;CAGpC,eAAe,SAAiB;AAC/B,OAAK,qBAAqB,cAAc,KAAK,oBAAoB,QAAQ;;CAG1E,WAAW;AACV,OAAK,cAAc;AACnB,OAAK,SAAS;AACd,YAAU,MAAM,WAAW,EAAE,mBAAmB,KAAK,mBAAmB,CAAC;;CAG1E,UAAU;AACT,YAAU,MAAM,SAAS;;CAG1B,UAAU,SAAiB;AAC1B,OAAK,cAAc;AACnB,OAAK,SAAS;;;YA9Gd,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,iBAAA,WAAA,WAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,iBAAA,WAAA,UAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAG9B,OAAO,CAAA,EAAA,iBAAA,WAAA,eAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,iBAAA,WAAA,UAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,iBAAA,WAAA,sBAAA,KAAA,EAAA;+BAvJR,cAAc,qBAAqB,CAAA,EAAA,iBAAA"}

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

@@ -1,4 +1,4 @@
-import * as lit32 from "lit";
+import * as _$lit from "lit";
 import { LitElement } from "lit";
 
 //#region src/ui/dev-wallet-dropdown.d.ts
@@ -8,10 +8,10 @@ import { LitElement } from "lit";
  */
 declare class DevWalletDropdown extends LitElement {
   #private;
-  static styles: (lit32.CSSResult | lit32.CSSResult[])[];
+  static styles: (_$lit.CSSResult | _$lit.CSSResult[])[];
   open: boolean;
   fullWidth: boolean;
-  render(): lit32.TemplateResult<1>;
+  render(): _$lit.TemplateResult<1>;
   close(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-dropdown.d.mts","names":[],"sources":["../../src/ui/dev-wallet-dropdown.ts"],"mappings":";;;;;;;AAaA;cACa,iBAAA,SAA0B,UAAA;EAAA;SACtB,MAAA,GADc,KAAA,CACR,SAAA,GAAA,KAAA,CAAA,SAAA;EAmCtB,IAAA;EAGA,SAAA;EAES,MAAA,CAAA,GAxCa,KAAA,CAwCP,cAAA;EAOf,KAAA,CAAA;EA8CS,iBAAA,CAAA;EAQA,oBAAA,CAAA;EAMA,UAAA,CAAW,OAAA,EAAS,GAAA;AAAA;AAAA,QAWtB,MAAA;EAAA,UACG,qBAAA;IACT,qBAAA,EAAuB,iBAAA;EAAA;AAAA"}
+{"version":3,"file":"dev-wallet-dropdown.d.mts","names":[],"sources":["../../src/ui/dev-wallet-dropdown.ts"],"mappings":";;;;;;;AAaA;cACa,iBAAA,SAA0B,UAAA;EAAA;SACtB,MAAA,GADc,KAAA,CACR,SAAA,GAAA,KAAA,CAAA,SAAA;EAqCtB,IAAA;EAGA,SAAA;EAES,MAAA,CAAA,GA1Ca,KAAA,CA0CP,cAAA;EAOf,KAAA,CAAA;EA8CS,iBAAA,CAAA;EAQA,oBAAA,CAAA;EAMA,UAAA,CAAW,OAAA,EAAS,GAAA;AAAA;AAAA,QAWtB,MAAA;EAAA,UACG,qBAAA;IACT,qBAAA,EAAuB,iBAAA;EAAA;AAAA"}