@mysten-incubation/dev-wallet 0.0.1 → 0.2.0

package/dist/ui/dev-wallet-signing-modal.mjs

@@ -1,53 +1,61 @@
 import { sharedStyles } from "./styles.mjs";
 import { emitEvent } 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 "./dev-wallet-signing.mjs";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-
 //#region src/ui/dev-wallet-signing-modal.ts
-let DevWalletSigningModal = class DevWalletSigningModal$1 extends LitElement {
+let DevWalletSigningModal = class DevWalletSigningModal extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.request = null;
 		this.client = null;
+		this.coins = null;
 		this.walletName = "Dev Wallet";
+		this.impersonation = false;
+		this.#handleDialogCancel = (e) => {
+			e.preventDefault();
+			emitEvent(this, "reject");
+		};
 	}
 	static {
 		this.styles = [sharedStyles, css`
 			:host {
 				display: block;
+				pointer-events: auto;
 			}
 
 			dialog {
-				width: 360px;
+				width: 440px;
 				max-width: calc(100vw - 32px);
-				max-height: min(600px, 80vh);
+				max-height: min(680px, 86vh);
 				border-radius: var(--dev-wallet-radius-xl);
-				background: var(--dev-wallet-background);
-				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
+				border: 1px solid var(--dev-wallet-border-2);
 				box-shadow: var(--dev-wallet-shadow-lg);
 				overflow: hidden;
 				display: flex;
 				flex-direction: column;
 				padding: 0;
 				color: inherit;
+				pointer-events: auto;
 			}
 
 			dialog::backdrop {
-				background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
+				background: rgba(2, 6, 14, 0.55);
 			}
 
 			.modal-header {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				padding: 14px 16px;
+				padding: 12px 14px;
 				border-bottom: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-1);
 			}
 
 			.modal-title {
-				font-size: 15px;
+				font-size: 13px;
 				font-weight: var(--dev-wallet-font-weight-semibold);
 				color: var(--dev-wallet-foreground);
 			}
@@ -58,17 +66,29 @@ let DevWalletSigningModal = class DevWalletSigningModal$1 extends LitElement {
 				display: flex;
 				flex-direction: column;
 			}
+
+			/* Phase 4 P4.19 — footnote rendered when the active account
+			   is in fork-mode impersonation. Visually distinct so users
+			   don't conflate this with a real signature flow. */
+			.fork-footnote {
+				padding: 8px 16px;
+				background: rgba(234, 179, 8, 0.12);
+				border-top: 1px solid rgba(234, 179, 8, 0.35);
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+				line-height: 1.4;
+			}
+
+			.fork-footnote strong {
+				color: #92400e;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+			}
 		`];
 	}
-	#handleDialogCancel = (e) => {
-		e.preventDefault();
-		emitEvent(this, "reject");
-	};
+	#handleDialogCancel;
 	firstUpdated() {
 		const dialog = this.shadowRoot?.querySelector("dialog");
-		if (dialog && !dialog.open) {
-			dialog.showModal();
-		}
+		if (dialog && !dialog.open) dialog.showModal();
 		dialog?.addEventListener("cancel", this.#handleDialogCancel);
 	}
 	disconnectedCallback() {
@@ -89,10 +109,16 @@ let DevWalletSigningModal = class DevWalletSigningModal$1 extends LitElement {
 						exportparts="approve-button: signing-approve-button, reject-button: signing-reject-button, request-type: signing-request-type, empty-state: signing-empty-state, error-message: signing-error-message, footer: signing-footer"
 						.request=${this.request}
 						.client=${this.client}
+						.coins=${this.coins}
 						@approve=${this.#handleApprove}
 						@reject=${this.#handleReject}
 					></dev-wallet-signing>
 				</div>
+				${this.impersonation ? html`<div class="fork-footnote" part="fork-footnote">
+							<strong>Fork-only:</strong> this account is in <em>impersonation</em> mode. The fork
+							accepts the transaction with an empty signature (no real private key signs it), so it
+							would be rejected by mainnet / testnet / devnet validators.
+						</div>` : nothing}
 			</dialog>
 		`;
 	}
@@ -107,9 +133,11 @@ let DevWalletSigningModal = class DevWalletSigningModal$1 extends LitElement {
 };
 __decorate([property({ attribute: false })], DevWalletSigningModal.prototype, "request", void 0);
 __decorate([property({ attribute: false })], DevWalletSigningModal.prototype, "client", void 0);
+__decorate([property({ attribute: false })], DevWalletSigningModal.prototype, "coins", void 0);
 __decorate([property({ type: String })], DevWalletSigningModal.prototype, "walletName", void 0);
+__decorate([property({ type: Boolean })], DevWalletSigningModal.prototype, "impersonation", void 0);
 DevWalletSigningModal = __decorate([customElement("dev-wallet-signing-modal")], DevWalletSigningModal);
-
 //#endregion
 export { DevWalletSigningModal };
+
 //# sourceMappingURL=dev-wallet-signing-modal.mjs.map

package/dist/ui/dev-wallet-signing-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-signing-modal.mjs","names":["DevWalletSigningModal","#handleDialogCancel","#handleApprove","#handleReject"],"sources":["../../src/ui/dev-wallet-signing-modal.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 } from 'lit/decorators.js';\n\nimport type { PendingSigningRequest } from '../wallet/dev-wallet.js';\nimport { sharedStyles } from './styles.js';\nimport { emitEvent } from './utils.js';\nimport './dev-wallet-signing.js';\n\n/**\n * A centered modal overlay for signing requests.\n *\n * Renders a backdrop and centered dialog containing the\n * `<dev-wallet-signing>` component. Dispatches `approve` and\n * `reject` events to the parent.\n */\n@customElement('dev-wallet-signing-modal')\nexport class DevWalletSigningModal extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\tdialog {\n\t\t\t\twidth: 360px;\n\t\t\t\tmax-width: calc(100vw - 32px);\n\t\t\t\tmax-height: min(600px, 80vh);\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\t\t\tbackground: var(--dev-wallet-background);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-lg);\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tpadding: 0;\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\n\t\t\tdialog::backdrop {\n\t\t\t\tbackground: color-mix(in oklab, oklch(0 0 0) 50%, transparent);\n\t\t\t}\n\n\t\t\t.modal-header {\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: 14px 16px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.modal-title {\n\t\t\t\tfont-size: 15px;\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.modal-body {\n\t\t\t\tflex: 1;\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\trequest: PendingSigningRequest | null = null;\n\n\t@property({ attribute: false })\n\tclient: ClientWithCoreApi | null = null;\n\n\t@property({ type: String })\n\twalletName = 'Dev Wallet';\n\n\t#handleDialogCancel = (e: Event) => {\n\t\te.preventDefault();\n\t\temitEvent(this, 'reject');\n\t};\n\n\toverride firstUpdated() {\n\t\tconst dialog = this.shadowRoot?.querySelector('dialog');\n\t\tif (dialog && !dialog.open) {\n\t\t\tdialog.showModal();\n\t\t}\n\t\tdialog?.addEventListener('cancel', this.#handleDialogCancel);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tconst dialog = this.shadowRoot?.querySelector('dialog');\n\t\tdialog?.removeEventListener('cancel', this.#handleDialogCancel);\n\t\tif (dialog?.open) dialog.close();\n\t}\n\n\toverride render() {\n\t\tif (!this.request) return nothing;\n\n\t\treturn html`\n\t\t\t<dialog part=\"dialog\">\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<span class=\"modal-title\">${this.walletName}</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\t<dev-wallet-signing\n\t\t\t\t\t\texportparts=\"approve-button: signing-approve-button, reject-button: signing-reject-button, request-type: signing-request-type, empty-state: signing-empty-state, error-message: signing-error-message, footer: signing-footer\"\n\t\t\t\t\t\t.request=${this.request}\n\t\t\t\t\t\t.client=${this.client}\n\t\t\t\t\t\t@approve=${this.#handleApprove}\n\t\t\t\t\t\t@reject=${this.#handleReject}\n\t\t\t\t\t></dev-wallet-signing>\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t`;\n\t}\n\n\t#handleApprove(e: Event) {\n\t\t// Stop the composed signing event from also reaching the parent\n\t\te.stopPropagation();\n\t\temitEvent(this, 'approve');\n\t}\n\n\t#handleReject(e: Event) {\n\t\te.stopPropagation();\n\t\temitEvent(this, 'reject');\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-signing-modal': DevWalletSigningModal;\n\t}\n}\n"],"mappings":";;;;;;;;AAoBO,kCAAMA,gCAA8B,WAAW;;;iBAmDb;gBAGL;oBAGtB;;;gBAxDY,CACxB,cACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6CH;;CAWD,uBAAuB,MAAa;AACnC,IAAE,gBAAgB;AAClB,YAAU,MAAM,SAAS;;CAG1B,AAAS,eAAe;EACvB,MAAM,SAAS,KAAK,YAAY,cAAc,SAAS;AACvD,MAAI,UAAU,CAAC,OAAO,MAAM;AAC3B,UAAO,WAAW;;AAEnB,UAAQ,iBAAiB,UAAU,MAAKC,mBAAoB;;CAG7D,AAAS,uBAAuB;AAC/B,QAAM,sBAAsB;EAC5B,MAAM,SAAS,KAAK,YAAY,cAAc,SAAS;AACvD,UAAQ,oBAAoB,UAAU,MAAKA,mBAAoB;AAC/D,MAAI,QAAQ,KAAM,QAAO,OAAO;;CAGjC,AAAS,SAAS;AACjB,MAAI,CAAC,KAAK,QAAS,QAAO;AAE1B,SAAO,IAAI;;;iCAGoB,KAAK,WAAW;;;;;iBAKhC,KAAK,QAAQ;gBACd,KAAK,OAAO;iBACX,MAAKC,cAAe;gBACrB,MAAKC,aAAc;;;;;;CAOlC,eAAe,GAAU;AAExB,IAAE,iBAAiB;AACnB,YAAU,MAAM,UAAU;;CAG3B,cAAc,GAAU;AACvB,IAAE,iBAAiB;AACnB,YAAU,MAAM,SAAS;;;YA1DzB,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,SAAS,EAAE,MAAM,QAAQ,CAAC;oCAzD3B,cAAc,2BAA2B"}
+{"version":3,"file":"dev-wallet-signing-modal.mjs","names":["#handleDialogCancel","#handleApprove","#handleReject"],"sources":["../../src/ui/dev-wallet-signing-modal.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 } from 'lit/decorators.js';\n\nimport type { PendingSigningRequest } from '../wallet/dev-wallet.js';\nimport { sharedStyles } from './styles.js';\nimport type { CoinRecord } from './utils.js';\nimport { emitEvent } from './utils.js';\nimport './dev-wallet-signing.js';\n\n/**\n * A centered modal overlay for signing requests.\n *\n * Renders a backdrop and centered dialog containing the\n * `<dev-wallet-signing>` component. Dispatches `approve` and\n * `reject` events to the parent.\n */\n@customElement('dev-wallet-signing-modal')\nexport class DevWalletSigningModal extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tpointer-events: auto;\n\t\t\t}\n\n\t\t\tdialog {\n\t\t\t\twidth: 440px;\n\t\t\t\tmax-width: calc(100vw - 32px);\n\t\t\t\tmax-height: min(680px, 86vh);\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-lg);\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tpadding: 0;\n\t\t\t\tcolor: inherit;\n\t\t\t\tpointer-events: auto;\n\t\t\t}\n\n\t\t\tdialog::backdrop {\n\t\t\t\tbackground: rgba(2, 6, 14, 0.55);\n\t\t\t}\n\n\t\t\t.modal-header {\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: 12px 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.modal-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.modal-body {\n\t\t\t\tflex: 1;\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t/* Phase 4 P4.19 — footnote rendered when the active account\n\t\t\t   is in fork-mode impersonation. Visually distinct so users\n\t\t\t   don't conflate this with a real signature flow. */\n\t\t\t.fork-footnote {\n\t\t\t\tpadding: 8px 16px;\n\t\t\t\tbackground: rgba(234, 179, 8, 0.12);\n\t\t\t\tborder-top: 1px solid rgba(234, 179, 8, 0.35);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tline-height: 1.4;\n\t\t\t}\n\n\t\t\t.fork-footnote strong {\n\t\t\t\tcolor: #92400e;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\trequest: PendingSigningRequest | null = null;\n\n\t@property({ attribute: false })\n\tclient: ClientWithCoreApi | null = null;\n\n\t/** Pre-seeded coin metadata forwarded to `<dev-wallet-signing>`. See\n\t *  the matching property on `DevWalletSigning` for details. */\n\t@property({ attribute: false })\n\tcoins: CoinRecord | null = null;\n\n\t@property({ type: String })\n\twalletName = 'Dev Wallet';\n\n\t/** Phase 4 P4.19 — when the active account's `source === 'impersonate'`,\n\t *  the parent flips this on and the modal renders a footnote\n\t *  explaining no real signature will be produced. */\n\t@property({ type: Boolean })\n\timpersonation = false;\n\n\t#handleDialogCancel = (e: Event) => {\n\t\te.preventDefault();\n\t\temitEvent(this, 'reject');\n\t};\n\n\toverride firstUpdated() {\n\t\tconst dialog = this.shadowRoot?.querySelector('dialog');\n\t\tif (dialog && !dialog.open) {\n\t\t\tdialog.showModal();\n\t\t}\n\t\tdialog?.addEventListener('cancel', this.#handleDialogCancel);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tconst dialog = this.shadowRoot?.querySelector('dialog');\n\t\tdialog?.removeEventListener('cancel', this.#handleDialogCancel);\n\t\tif (dialog?.open) dialog.close();\n\t}\n\n\toverride render() {\n\t\tif (!this.request) return nothing;\n\n\t\treturn html`\n\t\t\t<dialog part=\"dialog\">\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<span class=\"modal-title\">${this.walletName}</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\t<dev-wallet-signing\n\t\t\t\t\t\texportparts=\"approve-button: signing-approve-button, reject-button: signing-reject-button, request-type: signing-request-type, empty-state: signing-empty-state, error-message: signing-error-message, footer: signing-footer\"\n\t\t\t\t\t\t.request=${this.request}\n\t\t\t\t\t\t.client=${this.client}\n\t\t\t\t\t\t.coins=${this.coins}\n\t\t\t\t\t\t@approve=${this.#handleApprove}\n\t\t\t\t\t\t@reject=${this.#handleReject}\n\t\t\t\t\t></dev-wallet-signing>\n\t\t\t\t</div>\n\t\t\t\t${this.impersonation\n\t\t\t\t\t? html`<div class=\"fork-footnote\" part=\"fork-footnote\">\n\t\t\t\t\t\t\t<strong>Fork-only:</strong> this account is in <em>impersonation</em> mode. The fork\n\t\t\t\t\t\t\taccepts the transaction with an empty signature (no real private key signs it), so it\n\t\t\t\t\t\t\twould be rejected by mainnet / testnet / devnet validators.\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing}\n\t\t\t</dialog>\n\t\t`;\n\t}\n\n\t#handleApprove(e: Event) {\n\t\t// Stop the composed signing event from also reaching the parent\n\t\te.stopPropagation();\n\t\temitEvent(this, 'approve');\n\t}\n\n\t#handleReject(e: Event) {\n\t\te.stopPropagation();\n\t\temitEvent(this, 'reject');\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-signing-modal': DevWalletSigningModal;\n\t}\n}\n"],"mappings":";;;;;;;AAqBO,IAAA,wBAAA,MAAM,8BAA8B,WAAW;;;iBAuEb;gBAGL;eAKR;oBAGd;uBAMG;8BAEO,MAAa;AACnC,KAAE,gBAAgB;AAClB,aAAU,MAAM,SAAS;;;;gBA3FD,CACxB,cACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiEH;;CAsBD;CAKA,eAAwB;EACvB,MAAM,SAAS,KAAK,YAAY,cAAc,SAAS;AACvD,MAAI,UAAU,CAAC,OAAO,KACrB,QAAO,WAAW;AAEnB,UAAQ,iBAAiB,UAAU,MAAA,mBAAyB;;CAG7D,uBAAgC;AAC/B,QAAM,sBAAsB;EAC5B,MAAM,SAAS,KAAK,YAAY,cAAc,SAAS;AACvD,UAAQ,oBAAoB,UAAU,MAAA,mBAAyB;AAC/D,MAAI,QAAQ,KAAM,QAAO,OAAO;;CAGjC,SAAkB;AACjB,MAAI,CAAC,KAAK,QAAS,QAAO;AAE1B,SAAO,IAAI;;;iCAGoB,KAAK,WAAW;;;;;iBAKhC,KAAK,QAAQ;gBACd,KAAK,OAAO;eACb,KAAK,MAAM;iBACT,MAAA,cAAoB;gBACrB,MAAA,aAAmB;;;MAG7B,KAAK,gBACJ,IAAI;;;;gBAKJ,QAAQ;;;;CAKd,eAAe,GAAU;AAExB,IAAE,iBAAiB;AACnB,YAAU,MAAM,UAAU;;CAG3B,cAAc,GAAU;AACvB,IAAE,iBAAiB;AACnB,YAAU,MAAM,SAAS;;;YA7EzB,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,sBAAA,WAAA,WAAA,KAAA,EAAA;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,sBAAA,WAAA,UAAA,KAAA,EAAA;YAK9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,sBAAA,WAAA,SAAA,KAAA,EAAA;YAG9B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,sBAAA,WAAA,cAAA,KAAA,EAAA;YAM1B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,sBAAA,WAAA,iBAAA,KAAA,EAAA;oCAxF5B,cAAc,2BAA2B,CAAA,EAAA,sBAAA"}

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

@@ -1,19 +1,25 @@
 import { PendingSigningRequest } from "../wallet/dev-wallet.mjs";
-import * as lit35 from "lit";
+import { CoinRecord } from "./utils.mjs";
+import * as _$lit from "lit";
 import { LitElement } from "lit";
 import { ClientWithCoreApi } from "@mysten/sui/client";
 
 //#region src/ui/dev-wallet-signing.d.ts
 declare class DevWalletSigning extends LitElement {
   #private;
-  static styles: (lit35.CSSResult | lit35.CSSResult[])[];
+  static styles: (_$lit.CSSResult | _$lit.CSSResult[])[];
   request: PendingSigningRequest | null;
   client: ClientWithCoreApi | null;
+  /** Optional pre-seeded coin metadata — pass the generated `coins`
+   *  constant from devstack codegen to skip per-coin `getCoinMetadata`
+   *  RPC fetches when rendering coin-flow estimates. Unknown coin types
+   *  fall through to an RPC fetch as before. */
+  coins: CoinRecord | null;
   private _analysis;
   private _analysisError;
   private _analyzing;
   willUpdate(changedProperties: Map<string, unknown>): void;
-  render(): lit35.TemplateResult<1>;
+  render(): _$lit.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"dev-wallet-signing.d.mts","names":[],"sources":["../../src/ui/dev-wallet-signing.ts"],"mappings":";;;;;;cAuBa,gBAAA,SAAyB,UAAA;EAAA;SACrB,MAAA,GADa,KAAA,CACP,SAAA,GAAA,KAAA,CAAA,SAAA;EAkQtB,OAAA,EAAS,qBAAA;EAGT,MAAA,EAAQ,iBAAA;EAAA,QAGA,SAAA;EAAA,QAGA,cAAA;EAAA,QAGA,UAAA;EAMC,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAmD9B,MAAA,CAAA,GAnDiC,KAAA,CAmD3B,cAAA;AAAA;AAAA,QA4QR,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,gBAAA;EAAA;AAAA"}
+{"version":3,"file":"dev-wallet-signing.d.mts","names":[],"sources":["../../src/ui/dev-wallet-signing.ts"],"mappings":";;;;;;;cAsCa,gBAAA,SAAyB,UAAA;EAAA;SACrB,MAAA,GADa,KAAA,CACP,SAAA,GAAA,KAAA,CAAA,SAAA;EA+OtB,OAAA,EAAS,qBAAA;EAGT,MAAA,EAAQ,iBAAA;;;;;EAOR,KAAA,EAAO,UAAA;EAAA,QAGC,SAAA;EAAA,QAGA,cAAA;EAAA,QAGA,UAAA;EASC,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAsE9B,MAAA,CAAA,GAtEiC,KAAA,CAsE3B,cAAA;AAAA;AAAA,QA8QR,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,gBAAA;EAAA;AAAA"}

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

@@ -1,34 +1,45 @@
-import { actionButtonStyles, sharedStyles } from "./styles.mjs";
-import { emitEvent, formatAddress, formatCoinBalance, getCoinSymbol } from "./utils.mjs";
+import { actionButtonStyles, copyableTextStyles, listContainerStyles, monoTruncateStyles, sharedStyles, subLabelStyles } from "./styles.mjs";
+import { emitEvent, formatAddress, formatCoinBalance, getCoinSymbol, indexCoinsByType, lookupCoinByType } from "./utils.mjs";
 import { CopyController } from "./copy-controller.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 { analyzeTransaction } from "./transaction-analyzer.mjs";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { bcs } from "@mysten/sui/bcs";
-
 //#region src/ui/dev-wallet-signing.ts
 const REQUEST_TYPE_LABELS = {
 	"sign-personal-message": "Sign Message",
 	"sign-transaction": "Sign Transaction",
 	"sign-and-execute-transaction": "Sign & Execute Transaction"
 };
-let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
+let DevWalletSigning = class DevWalletSigning extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.request = null;
 		this.client = null;
+		this.coins = null;
 		this._analysis = null;
 		this._analysisError = null;
 		this._analyzing = false;
+		this.#copy = new CopyController(this);
+		this.#analysisGeneration = 0;
+		this.#coinDecimalsCache = /* @__PURE__ */ new Map();
+		this.#coinSymbolCache = /* @__PURE__ */ new Map();
+		this.#coinIndex = /* @__PURE__ */ new Map();
+		this.#lastCoinsRef = null;
 	}
 	static {
 		this.styles = [
 			sharedStyles,
 			actionButtonStyles,
+			copyableTextStyles,
+			listContainerStyles,
+			monoTruncateStyles,
+			subLabelStyles,
 			css`
 			:host {
 				display: flex;
+				flex: 1;
 				flex-direction: column;
 				overflow: hidden;
 				min-height: 0;
@@ -38,18 +49,20 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 				flex: 1;
 				overflow-y: auto;
 				padding: 16px;
+				background: var(--dev-wallet-bg-0);
 			}
 
 			.signing-footer {
 				padding: 12px 16px;
 				border-top: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
 			}
 
 			.signing-header {
 				display: flex;
 				align-items: center;
 				gap: 8px;
-				margin-bottom: 12px;
+				margin-bottom: 10px;
 			}
 
 			.signing-badge {
@@ -72,22 +85,31 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 			}
 
 			.signing-title {
-				font-size: 14px;
+				font-size: 12px;
 				font-weight: var(--dev-wallet-font-weight-semibold);
 				color: var(--dev-wallet-foreground);
 			}
 
 			.request-type {
-				font-size: 13px;
+				display: inline-flex;
+				align-items: center;
+				height: 22px;
+				padding: 0 8px;
+				border-radius: 999px;
+				border: 1px solid var(--dev-wallet-border-strong);
+				background: var(--dev-wallet-accent-fade);
+				font-family: var(--dev-wallet-font-mono);
+				font-size: 10.5px;
 				color: var(--dev-wallet-primary);
 				font-weight: var(--dev-wallet-font-weight-medium);
-				margin-bottom: 8px;
+				margin-bottom: 10px;
 			}
 
 			.request-detail {
 				display: flex;
 				justify-content: space-between;
-				padding: 6px 0;
+				gap: 12px;
+				padding: 8px 0;
 				font-size: 12px;
 				border-bottom: 1px solid var(--dev-wallet-border);
 			}
@@ -110,18 +132,7 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 			}
 
 			.detail-value.copyable-addr {
-				cursor: pointer;
-				border-radius: var(--dev-wallet-radius-2xs);
 				padding: 1px 3px;
-				transition: background 0.15s;
-			}
-
-			.detail-value.copyable-addr:hover {
-				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
-			}
-
-			.detail-value.copied {
-				color: var(--dev-wallet-positive);
 			}
 
 			.detail-secondary {
@@ -131,30 +142,24 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 
 			.request-data {
 				margin: 12px 0;
-				padding: 8px;
-				border-radius: var(--dev-wallet-radius-xs);
-				background: var(--dev-wallet-background);
+				padding: 10px 12px;
+				border-radius: var(--dev-wallet-radius);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-bg-0);
 				font-family: var(--dev-wallet-font-mono);
-				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
-				max-height: 80px;
+				font-size: 11.5px;
+				color: var(--dev-wallet-foreground);
+				max-height: 120px;
 				overflow-y: auto;
 				word-break: break-all;
+				line-height: 1.55;
 			}
 
 			.section-label {
-				font-size: 11px;
-				font-weight: var(--dev-wallet-font-weight-semibold);
-				color: var(--dev-wallet-muted-foreground);
-				text-transform: uppercase;
-				letter-spacing: 0.5px;
 				margin: 12px 0 6px;
 			}
 
 			.coin-flows {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
 				margin-bottom: 4px;
 			}
 
@@ -162,9 +167,10 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				padding: 8px;
-				border-radius: var(--dev-wallet-radius-xs);
-				background: var(--dev-wallet-background);
+				padding: 8px 10px;
+				border-radius: var(--dev-wallet-radius);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
 				font-size: 12px;
 			}
 
@@ -178,16 +184,11 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 				color: var(--dev-wallet-destructive);
 			}
 
-			.commands-list {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
-			}
-
 			.command-item {
-				padding: 8px;
-				border-radius: var(--dev-wallet-radius-xs);
-				background: var(--dev-wallet-background);
+				padding: 10px;
+				border-radius: var(--dev-wallet-radius-lg);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
 				font-size: 12px;
 			}
 
@@ -198,12 +199,7 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 			}
 
 			.command-detail {
-				color: var(--dev-wallet-muted-foreground);
-				font-family: var(--dev-wallet-font-mono);
 				font-size: 11px;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
 			}
 
 			.command-args {
@@ -214,12 +210,7 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 
 			.command-arg {
 				font-size: 11px;
-				color: var(--dev-wallet-muted-foreground);
-				font-family: var(--dev-wallet-font-mono);
 				padding: 1px 0;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
 			}
 
 			.arg-access {
@@ -253,10 +244,6 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 				word-break: break-word;
 			}
 
-			.section-label-error {
-				color: var(--dev-wallet-destructive);
-			}
-
 			.error-title {
 				font-weight: var(--dev-wallet-font-weight-semibold);
 				margin-bottom: 4px;
@@ -280,17 +267,22 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 		`
 		];
 	}
-	#copy = new CopyController(this);
-	#analysisGeneration = 0;
-	#coinDecimalsCache = new Map();
+	#copy;
+	#analysisGeneration;
+	#coinDecimalsCache;
+	#coinSymbolCache;
+	#coinIndex;
+	#lastCoinsRef;
 	willUpdate(changedProperties) {
+		if (changedProperties.has("coins") && this.coins !== this.#lastCoinsRef) {
+			this.#coinIndex = indexCoinsByType(this.coins);
+			this.#lastCoinsRef = this.coins;
+		}
 		if (changedProperties.has("request")) {
 			this._analysis = null;
 			this._analysisError = null;
 			this._analyzing = false;
-			if (this.request && this.request.type !== "sign-personal-message") {
-				this.#analyzeTransaction();
-			}
+			if (this.request && this.request.type !== "sign-personal-message") this.#analyzeTransaction();
 		}
 	}
 	async #analyzeTransaction() {
@@ -301,29 +293,40 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 		if (generation !== this.#analysisGeneration) return;
 		if (result.kind === "rich") {
 			this._analysis = result.analysis;
-			if (this.client && result.analysis.coinFlows?.length) {
+			if (result.analysis.coinFlows?.length) {
 				const coinTypes = [...new Set(result.analysis.coinFlows.map((f) => f.coinType))];
-				await Promise.all(coinTypes.filter((ct) => !this.#coinDecimalsCache.has(ct)).map(async (ct) => {
-					try {
-						const { coinMetadata } = await this.client.core.getCoinMetadata({ coinType: ct });
-						if (coinMetadata) {
-							this.#coinDecimalsCache.set(ct, coinMetadata.decimals);
-						}
-					} catch {}
-				}));
-				if (generation !== this.#analysisGeneration) return;
+				const unresolved = [];
+				for (const ct of coinTypes) {
+					if (this.#coinDecimalsCache.has(ct)) continue;
+					const seed = lookupCoinByType(this.#coinIndex, ct);
+					if (seed !== void 0) {
+						this.#coinDecimalsCache.set(ct, seed.decimals);
+						if (seed.symbol !== void 0) this.#coinSymbolCache.set(ct, seed.symbol);
+						continue;
+					}
+					unresolved.push(ct);
+				}
+				if (this.client && unresolved.length > 0) {
+					await Promise.all(unresolved.map(async (ct) => {
+						try {
+							const { coinMetadata } = await this.client.core.getCoinMetadata({ coinType: ct });
+							if (coinMetadata) {
+								this.#coinDecimalsCache.set(ct, coinMetadata.decimals);
+								if (coinMetadata.symbol) this.#coinSymbolCache.set(ct, coinMetadata.symbol);
+							}
+						} catch {}
+					}));
+					if (generation !== this.#analysisGeneration) return;
+				}
 				this.requestUpdate();
 			}
-		} else {
-			this._analysisError = result.message;
-		}
+		} else this._analysisError = result.message;
 		this._analyzing = false;
 	}
 	render() {
-		if (!this.request) {
-			return html`<div class="no-request" part="empty-state">No pending requests</div>`;
-		}
+		if (!this.request) return html`<div class="no-request" part="empty-state">No pending requests</div>`;
 		const typeLabel = REQUEST_TYPE_LABELS[this.request.type];
+		const account = this.request.account;
 		const isTransaction = this.request.type !== "sign-personal-message";
 		const canApprove = isTransaction ? this._analysis !== null && !this._analysisError && !this._analyzing : true;
 		return html`
@@ -333,30 +336,28 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 					<span class="signing-title">Approval Required</span>
 				</div>
 
-				<div class="request-type" part="request-type">${typeLabel}</div>
-
-				<div class="request-detail">
-					<span class="detail-label">Account</span>
-					<span
-						class="detail-value copyable-addr ${this.#copy.isCopied(this.request.account.address) ? "copied" : ""}"
-						title="Click to copy"
-						role="button"
-						tabindex="0"
-						aria-label="Copy account address"
-						@click=${() => this.#copy.copy(this.request.account.address)}
-						@keydown=${(e) => {
+				<div class="request-type" part="request-type">${typeLabel ?? "Signing Request"}</div>
+
+				${account ? html`<div class="request-detail">
+							<span class="detail-label">Account</span>
+							<span
+								class="detail-value copyable-addr ${this.#copy.isCopied(account.address) ? "copied" : ""}"
+								title="Click to copy"
+								role="button"
+								tabindex="0"
+								aria-label="Copy account address"
+								@click=${() => this.#copy.copy(account.address)}
+								@keydown=${(e) => {
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
-				this.#copy.copy(this.request.account.address);
+				this.#copy.copy(account.address);
 			}
 		}}
-					>
-						${this.#copy.isCopied(this.request.account.address) ? "Copied!" : this.request.account.label ? html`${this.request.account.label}
-										<span class="detail-secondary"
-											>${formatAddress(this.request.account.address)}</span
-										>` : formatAddress(this.request.account.address)}
-					</span>
-				</div>
+							>
+								${this.#copy.isCopied(account.address) ? "Copied!" : account.label ? html`${account.label}
+												<span class="detail-secondary">${formatAddress(account.address)}</span>` : formatAddress(account.address)}
+							</span>
+						</div>` : nothing}
 				${isTransaction ? html`<div class="request-detail">
 							<span class="detail-label">Chain</span>
 							<span class="detail-value">${this.request.chain}</span>
@@ -374,11 +375,8 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 		`;
 	}
 	#renderTransactionPreview() {
-		if (this._analyzing) {
-			return html`<div class="section-label">Analyzing transaction...</div>`;
-		}
-		if (this._analysisError) {
-			return html`
+		if (this._analyzing) return html`<div class="section-label">Analyzing transaction...</div>`;
+		if (this._analysisError) return html`
 				<div class="section-label section-label-error">Analysis Failed</div>
 				<div class="error-state" part="error-message">
 					<div class="error-title">Unable to analyze this transaction</div>
@@ -389,12 +387,9 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 					</div>
 				</div>
 			`;
-		}
-		if (this._analysis) {
-			return html`
+		if (this._analysis) return html`
 				${this.#renderCoinFlows()} ${this.#renderAnalyzedCommands(this._analysis.commands)}
 			`;
-		}
 		const dataPreview = this.#getDataPreview();
 		return dataPreview ? html`<div class="request-data">${dataPreview}</div>` : nothing;
 	}
@@ -406,11 +401,10 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 			<div class="coin-flows">
 				${flows.map((flow) => {
 			const decimals = this.#coinDecimalsCache.get(flow.coinType) ?? 0;
-			const formatted = formatCoinBalance(flow.amount, decimals);
 			return html`
 						<div class="coin-flow-item">
-							<span class="coin-flow-type">${getCoinSymbol(flow.coinType)}</span>
-							<span class="coin-flow-amount"> -${formatted} </span>
+							<span class="coin-flow-type">${this.#coinSymbolCache.get(flow.coinType) ?? getCoinSymbol(flow.coinType)}</span>
+							<span class="coin-flow-amount"> -${formatCoinBalance(flow.amount, decimals)} </span>
 						</div>
 					`;
 		})}
@@ -501,28 +495,22 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 		}
 	}
 	#decodePureAddress(arg) {
-		if (arg.$kind === "Pure") {
-			try {
-				return bcs.Address.fromBase64(arg.bytes);
-			} catch {}
-		}
+		if (arg.$kind === "Pure") try {
+			return bcs.Address.fromBase64(arg.bytes);
+		} catch {}
 		return "?";
 	}
 	#getDataPreview() {
 		if (!this.request) return null;
 		if (this.request.type === "sign-personal-message") {
 			const data = this.request.data;
-			if (data instanceof Uint8Array) {
-				try {
-					return new TextDecoder().decode(data);
-				} catch {
-					return `[${data.length} bytes]`;
-				}
+			if (data instanceof Uint8Array) try {
+				return new TextDecoder().decode(data);
+			} catch {
+				return `[${data.length} bytes]`;
 			}
 		}
-		if (typeof this.request.data === "string") {
-			return this.request.data.length > 200 ? this.request.data.slice(0, 200) + "..." : this.request.data;
-		}
+		if (typeof this.request.data === "string") return this.request.data.length > 200 ? this.request.data.slice(0, 200) + "..." : this.request.data;
 		return null;
 	}
 	#approve() {
@@ -534,11 +522,12 @@ let DevWalletSigning = class DevWalletSigning$1 extends LitElement {
 };
 __decorate([property({ attribute: false })], DevWalletSigning.prototype, "request", void 0);
 __decorate([property({ attribute: false })], DevWalletSigning.prototype, "client", void 0);
+__decorate([property({ attribute: false })], DevWalletSigning.prototype, "coins", void 0);
 __decorate([state()], DevWalletSigning.prototype, "_analysis", void 0);
 __decorate([state()], DevWalletSigning.prototype, "_analysisError", void 0);
 __decorate([state()], DevWalletSigning.prototype, "_analyzing", void 0);
 DevWalletSigning = __decorate([customElement("dev-wallet-signing")], DevWalletSigning);
-
 //#endregion
 export { DevWalletSigning };
+
 //# sourceMappingURL=dev-wallet-signing.mjs.map