@mysten-incubation/dev-wallet 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +7 -4
  3. package/dist/client/connected-apps.d.mts +35 -0
  4. package/dist/client/connected-apps.d.mts.map +1 -0
  5. package/dist/client/connected-apps.mjs +50 -0
  6. package/dist/client/connected-apps.mjs.map +1 -0
  7. package/dist/client/dev-wallet-client.mjs +1 -1
  8. package/dist/client/dev-wallet-client.mjs.map +1 -1
  9. package/dist/client/index.d.mts +2 -1
  10. package/dist/client/index.mjs +2 -1
  11. package/dist/client/request-handler.d.mts +7 -0
  12. package/dist/client/request-handler.d.mts.map +1 -1
  13. package/dist/client/request-handler.mjs +17 -2
  14. package/dist/client/request-handler.mjs.map +1 -1
  15. package/dist/standalone/assets/{in-memory-adapter-Ban2kRYS.js → in-memory-adapter-uuWG4K4k.js} +1 -1
  16. package/dist/standalone/assets/main-CKYv0eR6.js +7 -0
  17. package/dist/standalone/assets/{webcrypto-adapter-Ddqn-RAu.js → webcrypto-adapter-5ShaPc_M.js} +1 -1
  18. package/dist/standalone/bookmarklet.js +1 -1
  19. package/dist/standalone/index.html +1 -1
  20. package/dist/ui/dev-wallet-balances.d.mts.map +1 -1
  21. package/dist/ui/dev-wallet-balances.mjs +20 -13
  22. package/dist/ui/dev-wallet-balances.mjs.map +1 -1
  23. package/dist/ui/dev-wallet-connect-guide.d.mts +29 -0
  24. package/dist/ui/dev-wallet-connect-guide.d.mts.map +1 -0
  25. package/dist/ui/dev-wallet-connect-guide.mjs +386 -0
  26. package/dist/ui/dev-wallet-connect-guide.mjs.map +1 -0
  27. package/dist/ui/dev-wallet-connected-apps.d.mts +27 -0
  28. package/dist/ui/dev-wallet-connected-apps.d.mts.map +1 -0
  29. package/dist/ui/dev-wallet-connected-apps.mjs +164 -0
  30. package/dist/ui/dev-wallet-connected-apps.mjs.map +1 -0
  31. package/dist/ui/dev-wallet-panel.d.mts.map +1 -1
  32. package/dist/ui/dev-wallet-panel.mjs +0 -9
  33. package/dist/ui/dev-wallet-panel.mjs.map +1 -1
  34. package/dist/ui/dev-wallet-settings.d.mts +8 -2
  35. package/dist/ui/dev-wallet-settings.d.mts.map +1 -1
  36. package/dist/ui/dev-wallet-settings.mjs +86 -171
  37. package/dist/ui/dev-wallet-settings.mjs.map +1 -1
  38. package/dist/ui/dev-wallet-standalone.d.mts +7 -2
  39. package/dist/ui/dev-wallet-standalone.d.mts.map +1 -1
  40. package/dist/ui/dev-wallet-standalone.mjs +68 -222
  41. package/dist/ui/dev-wallet-standalone.mjs.map +1 -1
  42. package/dist/ui/index.d.mts +3 -1
  43. package/dist/ui/index.mjs +3 -1
  44. package/dist/ui/wallet-controller.mjs +15 -3
  45. package/dist/ui/wallet-controller.mjs.map +1 -1
  46. package/dist/wallet/dev-wallet.d.mts +15 -3
  47. package/dist/wallet/dev-wallet.d.mts.map +1 -1
  48. package/dist/wallet/dev-wallet.mjs +94 -30
  49. package/dist/wallet/dev-wallet.mjs.map +1 -1
  50. package/dist/wallet/persisted.mjs +20 -0
  51. package/dist/wallet/persisted.mjs.map +1 -0
  52. package/package.json +6 -6
  53. package/src/app/main.ts +6 -2
  54. package/src/client/connected-apps.ts +79 -0
  55. package/src/client/dev-wallet-client.ts +2 -1
  56. package/src/client/index.ts +2 -0
  57. package/src/client/request-handler.ts +24 -1
  58. package/src/ui/dev-wallet-balances.ts +25 -13
  59. package/src/ui/dev-wallet-connect-guide.ts +428 -0
  60. package/src/ui/dev-wallet-connected-apps.ts +191 -0
  61. package/src/ui/dev-wallet-panel.ts +0 -9
  62. package/src/ui/dev-wallet-settings.ts +101 -179
  63. package/src/ui/dev-wallet-standalone.ts +80 -231
  64. package/src/ui/index.ts +2 -0
  65. package/src/ui/wallet-controller.ts +23 -3
  66. package/src/wallet/dev-wallet.ts +130 -39
  67. package/src/wallet/persisted.ts +24 -0
  68. package/dist/standalone/assets/main-xfzarPod.js +0 -7
package/dist/ui/dev-wallet-panel.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dev-wallet-panel.mjs","names":["#closePanel","#ctrl","#hadPendingRequest","#renderSidebar","#togglePanel","#walletIcon","#closeIcon","#handleKeydown"],"sources":["../../src/ui/dev-wallet-panel.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 type { ForkRelay } from '../adapters/fork-relay.js';\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport { connectDialogStyles, sharedStyles } from './styles.js';\nimport type { CoinRecord } from './utils.js';\nimport { WalletController } from './wallet-controller.js';\n\nexport type DevWalletDockStyle = 'corner-pill' | 'side-tab';\n\n@customElement('dev-wallet-panel')\nexport class DevWalletPanel extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tconnectDialogStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: fixed;\n\t\t\t\tinset: 0;\n\t\t\t\tz-index: 999999;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\t.trigger {\n\t\t\t\tposition: fixed;\n\t\t\t\tright: 20px;\n\t\t\t\tbottom: 20px;\n\t\t\t\twidth: 40px;\n\t\t\t\theight: 40px;\n\t\t\t\tborder-radius: 999px;\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-md);\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 120ms,\n\t\t\t\t\tbox-shadow 120ms,\n\t\t\t\t\tborder-color 120ms;\n\t\t\t\tpointer-events: auto;\n\t\t\t\tz-index: 2;\n\t\t\t}\n\n\t\t\t.trigger:hover {\n\t\t\t\ttransform: translateY(-1px);\n\t\t\t\tborder-color: var(--dev-wallet-border-strong);\n\t\t\t\tbox-shadow:\n\t\t\t\t\tvar(--dev-wallet-shadow-md),\n\t\t\t\t\t0 0 0 4px var(--dev-wallet-accent-fade);\n\t\t\t}\n\n\t\t\t.trigger.side-tab {\n\t\t\t\ttop: 50%;\n\t\t\t\tright: 0;\n\t\t\t\tbottom: auto;\n\t\t\t\twidth: 34px;\n\t\t\t\theight: 88px;\n\t\t\t\tborder-radius: 12px 0 0 12px;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t}\n\n\t\t\t.trigger.side-tab:hover {\n\t\t\t\ttransform: translateY(calc(-50% - 1px));\n\t\t\t}\n\n\t\t\t.trigger svg {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\n\t\t\t.status-dot {\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 3px;\n\t\t\t\tbottom: 3px;\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 999px;\n\t\t\t\tborder: 2px solid var(--dev-wallet-surface);\n\t\t\t\tbackground: var(--dev-wallet-status-connected);\n\t\t\t}\n\n\t\t\t.status-dot.notice {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tanimation: pulse-ring 1.6s ease-out infinite;\n\t\t\t}\n\n\t\t\t.scrim {\n\t\t\t\tposition: fixed;\n\t\t\t\tinset: 0;\n\t\t\t\tbackground: rgba(2, 6, 14, 0.4);\n\t\t\t\tpointer-events: auto;\n\t\t\t\tanimation: fadein 160ms ease-out;\n\t\t\t}\n\n\t\t\t.sidebar {\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 12px;\n\t\t\t\tright: 12px;\n\t\t\t\tbottom: 76px;\n\t\t\t\twidth: 400px;\n\t\t\t\tmax-width: calc(100vw - 24px);\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-drawer);\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\toverflow: hidden;\n\t\t\t\tpointer-events: auto;\n\t\t\t\tanimation: slidein-right 240ms cubic-bezier(0.2, 0.7, 0.2, 1);\n\t\t\t}\n\n\t\t\t.status-strip {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tmin-height: 30px;\n\t\t\t\tpadding: 6px 10px 6px 12px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\t}\n\n\t\t\t.status-strip .host-origin {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10.5px;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.sidebar-header {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 10px 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-1);\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\n\t\t\t.brand {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.logo-mark {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t\tborder-radius: 7px;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t\tbackground:\n\t\t\t\t\tradial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 22px),\n\t\t\t\t\tlinear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));\n\t\t\t\tbox-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.logo-mark svg {\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 14px;\n\t\t\t}\n\n\t\t\t.title-stack {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tline-height: 1.1;\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.sidebar-title {\n\t\t\t\tfont-size: 12.5px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\twhite-space: nowrap;\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\n\t\t\t.version {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 9px;\n\t\t\t\tletter-spacing: 0.12em;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.header-spacer {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 8px;\n\t\t\t}\n\n\t\t\t.close-btn {\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t\twidth: 24px;\n\t\t\t\theight: 24px;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.close-btn:hover {\n\t\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.close-btn svg {\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 14px;\n\t\t\t}\n\n\t\t\t.sidebar-body {\n\t\t\t\toverflow-y: auto;\n\t\t\t\toverflow-x: hidden;\n\t\t\t\tflex: 1;\n\t\t\t\tmin-height: 0;\n\t\t\t\tbackground: var(--dev-wallet-bg-0);\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tpadding: 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tborder-bottom: 0;\n\t\t\t}\n\n\t\t\t@media (max-width: 520px) {\n\t\t\t\t.sidebar {\n\t\t\t\t\tleft: 12px;\n\t\t\t\t\twidth: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t/** 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 RPC fetches in the balances list and signing modal. */\n\t@property({ attribute: false })\n\tcoins: CoinRecord | null = null;\n\n\t/** Phase 5 Subtopic 6 — fork admin relay. When set, the panel\n\t * surfaces a \"Fork\" tab that drives advance-clock,\n\t * advance-checkpoint, and impersonation slot management against\n\t * the devstack wallet-app server. Construct from the manifest\n\t * with `createForkRelayFromManifest(manifest)`. */\n\t@property({ attribute: false })\n\tforkRelay: ForkRelay | null = null;\n\n\t/** Optional upstream label (`'mainnet'`, `'testnet'`, …) sourced\n\t * from `meta.upstream` on the manifest. Falls back to inferring\n\t * from the active network literal when not provided. */\n\t@property({ type: String })\n\tforkUpstream = '';\n\n\t@property({ type: String, attribute: 'dock-style' })\n\tdockStyle: DevWalletDockStyle = 'corner-pill';\n\n\t@state()\n\tprivate _isOpen = false;\n\n\t#ctrl = new WalletController(this);\n\t#hadPendingRequest = false;\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (changedProperties.has('wallet')) {\n\t\t\tthis.#ctrl.wallet = this.wallet;\n\t\t}\n\t\tif (changedProperties.has('coins')) {\n\t\t\tthis.#ctrl.coins = this.coins;\n\t\t}\n\t\tif (changedProperties.has('forkRelay')) {\n\t\t\tthis.#ctrl.forkRelay = this.forkRelay;\n\t\t}\n\t\tif (changedProperties.has('forkUpstream')) {\n\t\t\tthis.#ctrl.forkUpstream = this.forkUpstream;\n\t\t}\n\t}\n\n\toverride updated() {\n\t\t// Refresh balances only when transitioning from having a pending request to not\n\t\tconst hasPending = this.#ctrl.pendingRequest !== null;\n\t\tif (this.#hadPendingRequest && !hasPending) {\n\t\t\tthis.updateComplete.then(() => {\n\t\t\t\tthis.shadowRoot\n\t\t\t\t\t?.querySelector<\n\t\t\t\t\t\timport('./dev-wallet-balances.js').DevWalletBalances\n\t\t\t\t\t>('dev-wallet-balances')\n\t\t\t\t\t?.refresh();\n\t\t\t});\n\t\t}\n\t\tthis.#hadPendingRequest = hasPending;\n\n\t\tconst dialog = this.shadowRoot?.querySelector<HTMLDialogElement>('.connect-dialog');\n\t\tif (this.#ctrl.pendingConnect && dialog && !dialog.open) {\n\t\t\tdialog.showModal();\n\t\t} else if (!this.#ctrl.pendingConnect && dialog?.open) {\n\t\t\tdialog.close();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t${this._isOpen ? this.#renderSidebar() : nothing}\n\t\t\t<button\n\t\t\t\tclass=\"trigger ${this.dockStyle === 'side-tab' ? 'side-tab' : 'corner-pill'}\"\n\t\t\t\tpart=\"trigger\"\n\t\t\t\taria-label=${this._isOpen ? 'Close Dev Wallet' : 'Open Dev Wallet'}\n\t\t\t\taria-expanded=${this._isOpen}\n\t\t\t\t@click=${this.#togglePanel}\n\t\t\t>\n\t\t\t\t${this.#walletIcon}\n\t\t\t\t<span\n\t\t\t\t\tclass=\"status-dot ${this.#ctrl.pendingRequest ? 'notice' : ''}\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></span>\n\t\t\t</button>\n\t\t\t${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}\n\t\t`;\n\t}\n\n\t#renderSidebar() {\n\t\treturn html`\n\t\t\t<button class=\"scrim\" aria-label=\"Close Dev Wallet\" @click=${this.#closePanel}></button>\n\t\t\t<div class=\"sidebar\" part=\"sidebar\">\n\t\t\t\t<div class=\"status-strip\">\n\t\t\t\t\t<span class=\"chip chip-success\">connected</span>\n\t\t\t\t\t<span class=\"host-origin\">${globalThis.location?.origin ?? 'embedded host'}</span>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"close-btn\"\n\t\t\t\t\t\tpart=\"close-button\"\n\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t@click=${this.#closePanel}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.#closeIcon}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"sidebar-header\">\n\t\t\t\t\t<div class=\"brand\">\n\t\t\t\t\t\t<span class=\"logo-mark\">${this.#walletIcon}</span>\n\t\t\t\t\t\t<span class=\"title-stack\">\n\t\t\t\t\t\t\t<span class=\"sidebar-title\">${this.wallet?.name ?? 'Dev Wallet'}</span>\n\t\t\t\t\t\t\t<span class=\"version\">v0.1.0</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"header-spacer\"></span>\n\t\t\t\t\t${this.#ctrl.renderNetworkBadge()}\n\t\t\t\t</div>\n\t\t\t\t${this.#ctrl.renderTabBar()}\n\t\t\t\t<div class=\"sidebar-body\">${this.#ctrl.renderTabContent()}</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tget #walletIcon() {\n\t\treturn html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n\t\t\t<rect x=\"2\" y=\"6\" width=\"20\" height=\"14\" rx=\"2.5\" />\n\t\t\t<path d=\"M2 10h20\" />\n\t\t\t<rect x=\"15\" y=\"12\" width=\"5\" height=\"4\" rx=\"1\" />\n\t\t\t<circle cx=\"17.5\" cy=\"14\" r=\"0.5\" fill=\"currentColor\" stroke=\"none\" />\n\t\t</svg>`;\n\t}\n\n\tget #closeIcon() {\n\t\treturn html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n\t\t\t<path d=\"M18 6L6 18\" />\n\t\t\t<path d=\"M6 6l12 12\" />\n\t\t</svg>`;\n\t}\n\n\t#togglePanel() {\n\t\tthis._isOpen = !this._isOpen;\n\t\tif (this._isOpen) {\n\t\t\tthis.#ctrl.syncState();\n\t\t}\n\t}\n\n\t#closePanel() {\n\t\tthis._isOpen = false;\n\t}\n\n\t#handleKeydown = (event: KeyboardEvent) => {\n\t\tif (event.key === 'Escape' && this._isOpen) {\n\t\t\tthis.#closePanel();\n\t\t}\n\t};\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\twindow.addEventListener('keydown', this.#handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\twindow.removeEventListener('keydown', this.#handleKeydown);\n\t\tsuper.disconnectedCallback();\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-panel': DevWalletPanel;\n\t}\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"dev-wallet-panel.mjs","names":["#closePanel","#ctrl","#hadPendingRequest","#renderSidebar","#togglePanel","#walletIcon","#closeIcon","#handleKeydown"],"sources":["../../src/ui/dev-wallet-panel.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 type { ForkRelay } from '../adapters/fork-relay.js';\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport { connectDialogStyles, sharedStyles } from './styles.js';\nimport type { CoinRecord } from './utils.js';\nimport { WalletController } from './wallet-controller.js';\n\nexport type DevWalletDockStyle = 'corner-pill' | 'side-tab';\n\n@customElement('dev-wallet-panel')\nexport class DevWalletPanel extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tconnectDialogStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: fixed;\n\t\t\t\tinset: 0;\n\t\t\t\tz-index: 999999;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\t.trigger {\n\t\t\t\tposition: fixed;\n\t\t\t\tright: 20px;\n\t\t\t\tbottom: 20px;\n\t\t\t\twidth: 40px;\n\t\t\t\theight: 40px;\n\t\t\t\tborder-radius: 999px;\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-md);\n\t\t\t\ttransition:\n\t\t\t\t\ttransform 120ms,\n\t\t\t\t\tbox-shadow 120ms,\n\t\t\t\t\tborder-color 120ms;\n\t\t\t\tpointer-events: auto;\n\t\t\t\tz-index: 2;\n\t\t\t}\n\n\t\t\t.trigger:hover {\n\t\t\t\ttransform: translateY(-1px);\n\t\t\t\tborder-color: var(--dev-wallet-border-strong);\n\t\t\t\tbox-shadow:\n\t\t\t\t\tvar(--dev-wallet-shadow-md),\n\t\t\t\t\t0 0 0 4px var(--dev-wallet-accent-fade);\n\t\t\t}\n\n\t\t\t.trigger.side-tab {\n\t\t\t\ttop: 50%;\n\t\t\t\tright: 0;\n\t\t\t\tbottom: auto;\n\t\t\t\twidth: 34px;\n\t\t\t\theight: 88px;\n\t\t\t\tborder-radius: 12px 0 0 12px;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t}\n\n\t\t\t.trigger.side-tab:hover {\n\t\t\t\ttransform: translateY(calc(-50% - 1px));\n\t\t\t}\n\n\t\t\t.trigger svg {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\n\t\t\t.status-dot {\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 3px;\n\t\t\t\tbottom: 3px;\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 999px;\n\t\t\t\tborder: 2px solid var(--dev-wallet-surface);\n\t\t\t\tbackground: var(--dev-wallet-status-connected);\n\t\t\t}\n\n\t\t\t.status-dot.notice {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tanimation: pulse-ring 1.6s ease-out infinite;\n\t\t\t}\n\n\t\t\t.scrim {\n\t\t\t\tposition: fixed;\n\t\t\t\tinset: 0;\n\t\t\t\tbackground: rgba(2, 6, 14, 0.4);\n\t\t\t\tpointer-events: auto;\n\t\t\t\tanimation: fadein 160ms ease-out;\n\t\t\t}\n\n\t\t\t.sidebar {\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 12px;\n\t\t\t\tright: 12px;\n\t\t\t\tbottom: 76px;\n\t\t\t\twidth: 400px;\n\t\t\t\tmax-width: calc(100vw - 24px);\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border-2);\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-drawer);\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\toverflow: hidden;\n\t\t\t\tpointer-events: auto;\n\t\t\t\tanimation: slidein-right 240ms cubic-bezier(0.2, 0.7, 0.2, 1);\n\t\t\t}\n\n\t\t\t.status-strip {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tmin-height: 30px;\n\t\t\t\tpadding: 6px 10px 6px 12px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\t}\n\n\t\t\t.status-strip .host-origin {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10.5px;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.sidebar-header {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 10px 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-1);\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\n\t\t\t.brand {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.logo-mark {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t\tborder-radius: 7px;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t\tbackground:\n\t\t\t\t\tradial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 22px),\n\t\t\t\t\tlinear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));\n\t\t\t\tbox-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.logo-mark svg {\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 14px;\n\t\t\t}\n\n\t\t\t.title-stack {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tline-height: 1.1;\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.sidebar-title {\n\t\t\t\tfont-size: 12.5px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\twhite-space: nowrap;\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t}\n\n\t\t\t.header-spacer {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 8px;\n\t\t\t}\n\n\t\t\t.close-btn {\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t\twidth: 24px;\n\t\t\t\theight: 24px;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.close-btn:hover {\n\t\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.close-btn svg {\n\t\t\t\twidth: 14px;\n\t\t\t\theight: 14px;\n\t\t\t}\n\n\t\t\t.sidebar-body {\n\t\t\t\toverflow-y: auto;\n\t\t\t\toverflow-x: hidden;\n\t\t\t\tflex: 1;\n\t\t\t\tmin-height: 0;\n\t\t\t\tbackground: var(--dev-wallet-bg-0);\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tpadding: 14px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tborder-bottom: 0;\n\t\t\t}\n\n\t\t\t@media (max-width: 520px) {\n\t\t\t\t.sidebar {\n\t\t\t\t\tleft: 12px;\n\t\t\t\t\twidth: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t/** 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 RPC fetches in the balances list and signing modal. */\n\t@property({ attribute: false })\n\tcoins: CoinRecord | null = null;\n\n\t/** Phase 5 Subtopic 6 — fork admin relay. When set, the panel\n\t * surfaces a \"Fork\" tab that drives advance-clock,\n\t * advance-checkpoint, and impersonation slot management against\n\t * the devstack wallet-app server. Construct from the manifest\n\t * with `createForkRelayFromManifest(manifest)`. */\n\t@property({ attribute: false })\n\tforkRelay: ForkRelay | null = null;\n\n\t/** Optional upstream label (`'mainnet'`, `'testnet'`, …) sourced\n\t * from `meta.upstream` on the manifest. Falls back to inferring\n\t * from the active network literal when not provided. */\n\t@property({ type: String })\n\tforkUpstream = '';\n\n\t@property({ type: String, attribute: 'dock-style' })\n\tdockStyle: DevWalletDockStyle = 'corner-pill';\n\n\t@state()\n\tprivate _isOpen = false;\n\n\t#ctrl = new WalletController(this);\n\t#hadPendingRequest = false;\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (changedProperties.has('wallet')) {\n\t\t\tthis.#ctrl.wallet = this.wallet;\n\t\t}\n\t\tif (changedProperties.has('coins')) {\n\t\t\tthis.#ctrl.coins = this.coins;\n\t\t}\n\t\tif (changedProperties.has('forkRelay')) {\n\t\t\tthis.#ctrl.forkRelay = this.forkRelay;\n\t\t}\n\t\tif (changedProperties.has('forkUpstream')) {\n\t\t\tthis.#ctrl.forkUpstream = this.forkUpstream;\n\t\t}\n\t}\n\n\toverride updated() {\n\t\t// Refresh balances only when transitioning from having a pending request to not\n\t\tconst hasPending = this.#ctrl.pendingRequest !== null;\n\t\tif (this.#hadPendingRequest && !hasPending) {\n\t\t\tthis.updateComplete.then(() => {\n\t\t\t\tthis.shadowRoot\n\t\t\t\t\t?.querySelector<\n\t\t\t\t\t\timport('./dev-wallet-balances.js').DevWalletBalances\n\t\t\t\t\t>('dev-wallet-balances')\n\t\t\t\t\t?.refresh();\n\t\t\t});\n\t\t}\n\t\tthis.#hadPendingRequest = hasPending;\n\n\t\tconst dialog = this.shadowRoot?.querySelector<HTMLDialogElement>('.connect-dialog');\n\t\tif (this.#ctrl.pendingConnect && dialog && !dialog.open) {\n\t\t\tdialog.showModal();\n\t\t} else if (!this.#ctrl.pendingConnect && dialog?.open) {\n\t\t\tdialog.close();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t${this._isOpen ? this.#renderSidebar() : nothing}\n\t\t\t<button\n\t\t\t\tclass=\"trigger ${this.dockStyle === 'side-tab' ? 'side-tab' : 'corner-pill'}\"\n\t\t\t\tpart=\"trigger\"\n\t\t\t\taria-label=${this._isOpen ? 'Close Dev Wallet' : 'Open Dev Wallet'}\n\t\t\t\taria-expanded=${this._isOpen}\n\t\t\t\t@click=${this.#togglePanel}\n\t\t\t>\n\t\t\t\t${this.#walletIcon}\n\t\t\t\t<span\n\t\t\t\t\tclass=\"status-dot ${this.#ctrl.pendingRequest ? 'notice' : ''}\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></span>\n\t\t\t</button>\n\t\t\t${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}\n\t\t`;\n\t}\n\n\t#renderSidebar() {\n\t\treturn html`\n\t\t\t<button class=\"scrim\" aria-label=\"Close Dev Wallet\" @click=${this.#closePanel}></button>\n\t\t\t<div class=\"sidebar\" part=\"sidebar\">\n\t\t\t\t<div class=\"status-strip\">\n\t\t\t\t\t<span class=\"chip chip-success\">connected</span>\n\t\t\t\t\t<span class=\"host-origin\">${globalThis.location?.origin ?? 'embedded host'}</span>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"close-btn\"\n\t\t\t\t\t\tpart=\"close-button\"\n\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\t@click=${this.#closePanel}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this.#closeIcon}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"sidebar-header\">\n\t\t\t\t\t<div class=\"brand\">\n\t\t\t\t\t\t<span class=\"logo-mark\">${this.#walletIcon}</span>\n\t\t\t\t\t\t<span class=\"title-stack\">\n\t\t\t\t\t\t\t<span class=\"sidebar-title\">${this.wallet?.name ?? 'Dev Wallet'}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"header-spacer\"></span>\n\t\t\t\t\t${this.#ctrl.renderNetworkBadge()}\n\t\t\t\t</div>\n\t\t\t\t${this.#ctrl.renderTabBar()}\n\t\t\t\t<div class=\"sidebar-body\">${this.#ctrl.renderTabContent()}</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tget #walletIcon() {\n\t\treturn html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n\t\t\t<rect x=\"2\" y=\"6\" width=\"20\" height=\"14\" rx=\"2.5\" />\n\t\t\t<path d=\"M2 10h20\" />\n\t\t\t<rect x=\"15\" y=\"12\" width=\"5\" height=\"4\" rx=\"1\" />\n\t\t\t<circle cx=\"17.5\" cy=\"14\" r=\"0.5\" fill=\"currentColor\" stroke=\"none\" />\n\t\t</svg>`;\n\t}\n\n\tget #closeIcon() {\n\t\treturn html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n\t\t\t<path d=\"M18 6L6 18\" />\n\t\t\t<path d=\"M6 6l12 12\" />\n\t\t</svg>`;\n\t}\n\n\t#togglePanel() {\n\t\tthis._isOpen = !this._isOpen;\n\t\tif (this._isOpen) {\n\t\t\tthis.#ctrl.syncState();\n\t\t}\n\t}\n\n\t#closePanel() {\n\t\tthis._isOpen = false;\n\t}\n\n\t#handleKeydown = (event: KeyboardEvent) => {\n\t\tif (event.key === 'Escape' && this._isOpen) {\n\t\t\tthis.#closePanel();\n\t\t}\n\t};\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\twindow.addEventListener('keydown', this.#handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\twindow.removeEventListener('keydown', this.#handleKeydown);\n\t\tsuper.disconnectedCallback();\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-panel': DevWalletPanel;\n\t}\n}\n"],"mappings":"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"}
package/dist/ui/dev-wallet-settings.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { SignerAdapter } from "../types.mjs";
2
+ import { ConnectedAppsStore } from "../client/connected-apps.mjs";
2
3
  import { DevWallet } from "../wallet/dev-wallet.mjs";
3
4
  import { ReadonlyWalletAccount } from "@mysten/wallet-standard";
4
5
  import { LitElement } from "lit";
@@ -11,14 +12,19 @@ declare class DevWalletSettings extends LitElement {
11
12
  accounts: readonly ReadonlyWalletAccount[];
12
13
  adapters: SignerAdapter[];
13
14
  activeAddress: string;
14
- bookmarkletOrigin: string;
15
+ /** Origin of a standalone/hosted wallet. When set, Settings leads with the
16
+ * connect guide so it's reachable when the standalone aside is hidden. */
17
+ walletOrigin: string;
18
+ /** Connected-dApps store of a standalone wallet; listed below the guide. */
19
+ connectedApps: ConnectedAppsStore | null;
15
20
  private _showAddNetwork;
16
21
  private _networkName;
17
22
  private _networkUrl;
23
+ private _networkFaucet;
18
24
  private _error;
19
25
  private _editingNetwork;
20
26
  private _editingUrl;
21
- private _copied;
27
+ private _editingFaucet;
22
28
  render(): import("lit").TemplateResult<1>;
23
29
  }
24
30
  declare global {
package/dist/ui/dev-wallet-settings.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dev-wallet-settings.d.mts","names":[],"sources":["../../src/ui/dev-wallet-settings.ts"],"mappings":";;;;;;cAwBa,iBAAA,SAA0B,UAAA;EAAA;SACtB,MAAA,iBAAM,SAAA,iBAAA,SAAA;EAiVtB,MAAA,EAAQ,SAAA;EAGR,QAAA,WAAmB,qBAAA;EAGnB,QAAA,EAAU,aAAA;EAGV,aAAA;EAGA,iBAAA;EAAA,QAGQ,eAAA;EAAA,QAGA,YAAA;EAAA,QAGA,WAAA;EAAA,QAGA,MAAA;EAAA,QAGA,eAAA;EAAA,QAGA,WAAA;EAAA,QAGA,OAAA;EAEC,MAAA,kBAAM,cAAA;AAAA;AAAA,QAmWR,MAAA;EAAA,UACG,qBAAA;IACT,qBAAA,EAAuB,iBAAiB;EAAA;AAAA"}
1
+ {"version":3,"file":"dev-wallet-settings.d.mts","names":[],"sources":["../../src/ui/dev-wallet-settings.ts"],"mappings":";;;;;;;cA2Ba,iBAAA,SAA0B,UAAA;EAAA;SACtB,MAAA,iBAAM,SAAA,iBAAA,SAAA;EA2PtB,MAAA,EAAQ,SAAA;EAGR,QAAA,WAAmB,qBAAA;EAGnB,QAAA,EAAU,aAAA;EAGV,aAAA;EAHU;;EAQV,YAAA;EA1QgD;EA8QhD,aAAA,EAAe,kBAAA;EAAA,QAGP,eAAA;EAAA,QAGA,YAAA;EAAA,QAGA,WAAA;EAAA,QAGA,cAAA;EAAA,QAGA,MAAA;EAAA,QAGA,eAAA;EAAA,QAGA,WAAA;EAAA,QAGA,cAAA;EAEC,MAAA,kBAAM,cAAA;AAAA;AAAA,QA+VR,MAAA;EAAA,UACG,qBAAA;IACT,qBAAA,EAAuB,iBAAiB;EAAA;AAAA"}
package/dist/ui/dev-wallet-settings.mjs CHANGED
@@ -2,6 +2,8 @@ import { badgeStyles, cardItemStyles, formInputStyles, iconButtonStyles, inlineE
2
2
  import { NETWORK_COLORS, emitEvent, formatAddress, getErrorMessage } from "./utils.mjs";
3
3
  import { __decorate } from "../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.mjs";
4
4
  import "./dev-wallet-accounts.mjs";
5
+ import "./dev-wallet-connect-guide.mjs";
6
+ import "./dev-wallet-connected-apps.mjs";
5
7
  import { LitElement, css, html, nothing } from "lit";
6
8
  import { customElement, property, state } from "lit/decorators.js";
7
9
  //#region src/ui/dev-wallet-settings.ts
@@ -12,14 +14,20 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
12
14
  this.accounts = [];
13
15
  this.adapters = [];
14
16
  this.activeAddress = "";
15
- this.bookmarkletOrigin = "";
17
+ this.walletOrigin = "";
18
+ this.connectedApps = null;
16
19
  this._showAddNetwork = false;
17
20
  this._networkName = "";
18
21
  this._networkUrl = "";
22
+ this._networkFaucet = "";
19
23
  this._error = null;
20
24
  this._editingNetwork = null;
21
25
  this._editingUrl = "";
22
- this._copied = false;
26
+ this._editingFaucet = "";
27
+ this.#onAddKeydown = (e) => {
28
+ if (e.key === "Enter") this.#addNetwork();
29
+ if (e.key === "Escape") this.#cancelAddNetwork();
30
+ };
23
31
  }
24
32
  static {
25
33
  this.styles = [
@@ -104,6 +112,9 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
104
112
  .network-info {
105
113
  flex: 1;
106
114
  min-width: 0;
115
+ display: flex;
116
+ flex-direction: column;
117
+ gap: 3px;
107
118
  }
108
119
 
109
120
  .network-url {
@@ -117,6 +128,8 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
117
128
  background: var(--dev-wallet-background);
118
129
  font-size: 10px;
119
130
  font-family: var(--dev-wallet-font-mono);
131
+ width: 100%;
132
+ box-sizing: border-box;
120
133
  }
121
134
 
122
135
  .network-actions {
@@ -251,103 +264,12 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
251
264
  margin-top: 4px;
252
265
  }
253
266
 
254
- .bookmarklet-link-wrapper {
255
- margin-top: 8px;
256
- }
257
-
258
- .bookmarklet-link {
259
- display: inline-flex;
260
- align-items: center;
261
- gap: 6px;
262
- padding: 8px 14px;
263
- border-radius: var(--dev-wallet-radius-sm);
264
- background: var(--dev-wallet-primary);
265
- color: var(--dev-wallet-primary-foreground);
266
- font-size: 13px;
267
- font-weight: var(--dev-wallet-font-weight-semibold);
268
- text-decoration: none;
269
- cursor: grab;
270
- user-select: none;
271
- }
272
-
273
- .bookmarklet-link:hover {
274
- opacity: 0.9;
275
- }
276
-
277
- .bookmarklet-link:active {
278
- cursor: grabbing;
279
- }
280
-
281
- .bookmarklet-url {
282
- font-family: var(--dev-wallet-font-mono);
283
- font-size: 10px;
284
- color: var(--dev-wallet-muted-foreground);
285
- word-break: break-all;
286
- user-select: all;
287
- }
288
-
289
- .console-snippet {
290
- margin-top: 8px;
291
- border-radius: var(--dev-wallet-radius);
292
- background: var(--dev-wallet-bg-0);
293
- border: 1px solid var(--dev-wallet-border);
294
- overflow: hidden;
295
- }
296
-
297
- .console-snippet-header {
298
- display: flex;
299
- align-items: center;
300
- justify-content: space-between;
301
- gap: 8px;
302
- padding: 7px 8px 7px 10px;
303
- border-bottom: 1px solid var(--dev-wallet-border);
304
- background: color-mix(in srgb, var(--dev-wallet-bg-1) 72%, transparent);
305
- }
306
-
307
- .console-snippet-label {
308
- font-family: var(--dev-wallet-font-mono);
309
- font-size: 9.5px;
310
- font-weight: var(--dev-wallet-font-weight-medium);
311
- letter-spacing: 0.12em;
312
- text-transform: uppercase;
313
- color: var(--dev-wallet-text-3);
314
- }
315
-
316
- .console-snippet-code {
317
- margin: 0;
318
- max-width: 100%;
319
- padding: 10px 12px 12px;
320
- overflow-x: auto;
321
- font-family: var(--dev-wallet-font-mono);
322
- font-size: 11px;
323
- color: var(--dev-wallet-foreground);
324
- line-height: 1.5;
325
- white-space: pre-wrap;
326
- overflow-wrap: anywhere;
327
- user-select: all;
328
- }
329
-
330
- .btn-copy {
331
- display: inline-flex;
332
- align-items: center;
333
- justify-content: center;
334
- min-width: 54px;
335
- height: 24px;
336
- padding: 0 8px;
337
- border-radius: var(--dev-wallet-radius-xs);
338
- border: 1px solid var(--dev-wallet-border);
339
- background: var(--dev-wallet-bg-2);
340
- color: var(--dev-wallet-foreground);
341
- font-size: 10px;
342
- font-weight: var(--dev-wallet-font-weight-medium);
343
- cursor: pointer;
344
- white-space: nowrap;
345
- }
346
-
347
- .btn-copy:hover {
348
- background: var(--dev-wallet-bg-hover);
349
- border-color: var(--dev-wallet-border-strong);
350
- color: var(--dev-wallet-foreground);
267
+ /* The standalone page shows these in side rails above 1240px
268
+ (see dev-wallet-standalone.ts); only repeat them here below that. */
269
+ @media (min-width: 1241px) {
270
+ .rail-mirror {
271
+ display: none;
272
+ }
351
273
  }
352
274
 
353
275
  @media (max-width: 420px) {
@@ -360,11 +282,16 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
360
282
  }
361
283
  render() {
362
284
  return html`
285
+ ${this.walletOrigin ? html`<div class="section rail-mirror">
286
+ <dev-wallet-connect-guide .origin=${this.walletOrigin}></dev-wallet-connect-guide>
287
+ </div>` : nothing}
288
+ ${this.connectedApps ? html`<div class="section rail-mirror">
289
+ <dev-wallet-connected-apps .store=${this.connectedApps}></dev-wallet-connected-apps>
290
+ </div>` : nothing}
363
291
  <div class="section">${this.#renderSummary()}</div>
364
292
  <div class="section">${this.#renderNetworks()}</div>
365
293
  ${this.#hasCliAdapter() ? html`<div class="section">${this.#renderCliSigner()}</div>` : nothing}
366
294
  <div class="section">${this.#renderAccounts()}</div>
367
- ${this.bookmarkletOrigin ? html`<div class="section">${this.#renderBookmarklet()}</div>` : nothing}
368
295
  `;
369
296
  }
370
297
  #renderSummary() {
@@ -391,6 +318,7 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
391
318
  const networks = this.wallet.availableNetworks;
392
319
  const activeNetwork = this.wallet.activeNetwork;
393
320
  const urls = this.wallet.networkUrls;
321
+ const faucets = this.wallet.faucetUrls;
394
322
  return html`
395
323
  <h3 class="section-header">Networks</h3>
396
324
  <div class="network-list">
@@ -404,26 +332,38 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
404
332
  <div class="network-info">
405
333
  <span class="network-name">${name}</span>
406
334
  ${isEditing ? html`<input
407
- class="network-url-input"
408
- type="text"
409
- .value=${this._editingUrl}
410
- @input=${(e) => {
335
+ class="network-url-input"
336
+ type="text"
337
+ aria-label="gRPC URL"
338
+ .value=${this._editingUrl}
339
+ @input=${(e) => {
411
340
  this._editingUrl = e.target.value;
412
341
  }}
413
- @keydown=${(e) => {
414
- if (e.key === "Enter") this.#saveNetworkUrl(name);
415
- if (e.key === "Escape") this.#cancelEditNetwork();
342
+ @keydown=${this.#onEditKeydown(name)}
343
+ />
344
+ <input
345
+ class="network-url-input"
346
+ type="text"
347
+ aria-label="Faucet URL"
348
+ placeholder="Faucet URL (optional)"
349
+ .value=${this._editingFaucet}
350
+ @input=${(e) => {
351
+ this._editingFaucet = e.target.value;
416
352
  }}
417
- />` : html`<span class="network-url" title=${urls[name] ?? ""}
418
- >${urls[name] ?? ""}</span
419
- >`}
353
+ @keydown=${this.#onEditKeydown(name)}
354
+ />
355
+ ${this._error ? html`<div class="error">${this._error}</div>` : nothing}` : html`<span class="network-url" title=${urls[name] ?? ""}
356
+ >${urls[name] ?? ""}</span
357
+ >${faucets[name] ? html`<span class="network-url" title=${faucets[name]}
358
+ >faucet: ${faucets[name]}</span
359
+ >` : nothing}`}
420
360
  </div>
421
361
  <div class="network-actions">
422
362
  ${isEditing ? html`
423
363
  <button
424
364
  class="btn-icon"
425
365
  title="Save"
426
- aria-label="Save URL"
366
+ aria-label="Save network"
427
367
  @click=${() => this.#saveNetworkUrl(name)}
428
368
  >
429
369
  &#10003;
@@ -439,9 +379,9 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
439
379
  ` : html`
440
380
  <button
441
381
  class="btn-icon"
442
- title="Edit URL"
443
- aria-label="Edit network URL"
444
- @click=${() => this.#startEditNetwork(name, urls[name] ?? "")}
382
+ title="Edit"
383
+ aria-label="Edit network"
384
+ @click=${() => this.#startEditNetwork(name, urls[name] ?? "", faucets[name] ?? "")}
445
385
  >
446
386
  &#9998;
447
387
  </button>
@@ -494,10 +434,18 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
494
434
  this._networkUrl = e.target.value;
495
435
  this._error = null;
496
436
  }}
497
- @keydown=${(e) => {
498
- if (e.key === "Enter") this.#addNetwork();
499
- if (e.key === "Escape") this.#cancelAddNetwork();
437
+ @keydown=${this.#onAddKeydown}
438
+ />
439
+ <input
440
+ class="form-input"
441
+ type="text"
442
+ placeholder="Faucet URL (optional, e.g. http://localhost:9123)"
443
+ .value=${this._networkFaucet}
444
+ @input=${(e) => {
445
+ this._networkFaucet = e.target.value;
446
+ this._error = null;
500
447
  }}
448
+ @keydown=${this.#onAddKeydown}
501
449
  />
502
450
  ${this._error ? html`<div class="error">${this._error}</div>` : nothing}
503
451
  <div class="form-actions">
@@ -565,68 +513,21 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
565
513
  ></dev-wallet-accounts>
566
514
  `;
567
515
  }
568
- #renderBookmarklet() {
569
- if (!this.bookmarkletOrigin) return nothing;
570
- const bookmarkletJs = `${this.bookmarkletOrigin}/bookmarklet.js`;
571
- const bookmarkletHref = `javascript:void(document.head.appendChild(Object.assign(document.createElement('script'),{src:'${bookmarkletJs}'})))`;
572
- const consoleSnippet = `var s=document.createElement('script');s.src='${bookmarkletJs}';document.head.appendChild(s);`;
573
- return html`
574
- <h3 class="section-header">Bookmarklet</h3>
575
- <div class="about">
576
- Drag this link to your bookmarks bar, then click it on any dApp to inject the wallet:
577
- </div>
578
- <div class="bookmarklet-link-wrapper">
579
- <a
580
- class="bookmarklet-link"
581
- href=${bookmarkletHref}
582
- title="Drag to bookmarks bar"
583
- @click=${(e) => e.preventDefault()}
584
- >
585
- Dev Wallet
586
- </a>
587
- </div>
588
- <div class="about" style="margin-top: 12px">Or paste this in the browser console:</div>
589
- <div class="console-snippet">
590
- <div class="console-snippet-header">
591
- <span class="console-snippet-label">Console</span>
592
- <button
593
- class="btn-copy"
594
- type="button"
595
- aria-label="Copy console snippet"
596
- @click=${() => this.#copySnippet(consoleSnippet)}
597
- >
598
- ${this._copied ? "Copied" : "Copy"}
599
- </button>
600
- </div>
601
- <pre class="console-snippet-code"><code>${consoleSnippet}</code></pre>
602
- </div>
603
- <div class="about" style="margin-top: 8px">
604
- Or add this script to your page:<br />
605
- <code class="bookmarklet-url">${bookmarkletJs}</code>
606
- </div>
607
- `;
608
- }
609
- #copySnippet(text) {
610
- navigator.clipboard.writeText(text).then(() => {
611
- this._copied = true;
612
- setTimeout(() => {
613
- this._copied = false;
614
- }, 2e3);
615
- });
616
- }
617
516
  #addNetwork() {
618
517
  if (!this.wallet) return;
619
518
  const name = this._networkName.trim();
620
519
  const url = this._networkUrl.trim();
520
+ const faucet = this._networkFaucet.trim();
621
521
  if (!name || !url) return;
622
522
  if (this.wallet.availableNetworks.includes(name)) {
623
523
  this._error = `Network "${name}" already exists`;
624
524
  return;
625
525
  }
626
526
  try {
627
- this.wallet.addNetwork(name, url);
527
+ this.wallet.addNetwork(name, url, faucet || void 0);
628
528
  this._networkName = "";
629
529
  this._networkUrl = "";
530
+ this._networkFaucet = "";
630
531
  this._showAddNetwork = false;
631
532
  this._error = null;
632
533
  emitEvent(this, "network-added", {
@@ -641,20 +542,31 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
641
542
  this._showAddNetwork = false;
642
543
  this._networkName = "";
643
544
  this._networkUrl = "";
545
+ this._networkFaucet = "";
644
546
  this._error = null;
645
547
  }
646
- #startEditNetwork(name, url) {
548
+ #onAddKeydown;
549
+ #onEditKeydown(name) {
550
+ return (e) => {
551
+ if (e.key === "Enter") this.#saveNetworkUrl(name);
552
+ if (e.key === "Escape") this.#cancelEditNetwork();
553
+ };
554
+ }
555
+ #startEditNetwork(name, url, faucet) {
647
556
  this._editingNetwork = name;
648
557
  this._editingUrl = url;
558
+ this._editingFaucet = faucet;
649
559
  }
650
560
  #saveNetworkUrl(name) {
651
561
  if (!this.wallet) return;
652
562
  const url = this._editingUrl.trim();
563
+ const faucet = this._editingFaucet.trim();
653
564
  if (!url) return;
654
565
  try {
655
- this.wallet.addNetwork(name, url);
566
+ this.wallet.addNetwork(name, url, faucet || null);
656
567
  this._editingNetwork = null;
657
568
  this._editingUrl = "";
569
+ this._editingFaucet = "";
658
570
  } catch (error) {
659
571
  this._error = error instanceof Error ? error.message : "Invalid URL";
660
572
  }
@@ -662,6 +574,7 @@ let DevWalletSettings = class DevWalletSettings extends LitElement {
662
574
  #cancelEditNetwork() {
663
575
  this._editingNetwork = null;
664
576
  this._editingUrl = "";
577
+ this._editingFaucet = "";
665
578
  }
666
579
  #removeNetwork(name) {
667
580
  if (!this.wallet) return;
@@ -672,14 +585,16 @@ __decorate([property({ attribute: false })], DevWalletSettings.prototype, "walle
672
585
  __decorate([property({ attribute: false })], DevWalletSettings.prototype, "accounts", void 0);
673
586
  __decorate([property({ attribute: false })], DevWalletSettings.prototype, "adapters", void 0);
674
587
  __decorate([property({ type: String })], DevWalletSettings.prototype, "activeAddress", void 0);
675
- __decorate([property({ type: String })], DevWalletSettings.prototype, "bookmarkletOrigin", void 0);
588
+ __decorate([property({ type: String })], DevWalletSettings.prototype, "walletOrigin", void 0);
589
+ __decorate([property({ attribute: false })], DevWalletSettings.prototype, "connectedApps", void 0);
676
590
  __decorate([state()], DevWalletSettings.prototype, "_showAddNetwork", void 0);
677
591
  __decorate([state()], DevWalletSettings.prototype, "_networkName", void 0);
678
592
  __decorate([state()], DevWalletSettings.prototype, "_networkUrl", void 0);
593
+ __decorate([state()], DevWalletSettings.prototype, "_networkFaucet", void 0);
679
594
  __decorate([state()], DevWalletSettings.prototype, "_error", void 0);
680
595
  __decorate([state()], DevWalletSettings.prototype, "_editingNetwork", void 0);
681
596
  __decorate([state()], DevWalletSettings.prototype, "_editingUrl", void 0);
682
- __decorate([state()], DevWalletSettings.prototype, "_copied", void 0);
597
+ __decorate([state()], DevWalletSettings.prototype, "_editingFaucet", void 0);
683
598
  DevWalletSettings = __decorate([customElement("dev-wallet-settings")], DevWalletSettings);
684
599
  //#endregion
685
600
  export { DevWalletSettings };
package/dist/ui/dev-wallet-settings.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dev-wallet-settings.mjs","names":["#renderSummary","#renderNetworks","#hasCliAdapter","#renderCliSigner","#renderAccounts","#renderBookmarklet","#saveNetworkUrl","#cancelEditNetwork","#startEditNetwork","#removeNetwork","#renderAddNetworkForm","#addNetwork","#cancelAddNetwork","#copySnippet"],"sources":["../../src/ui/dev-wallet-settings.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReadonlyWalletAccount } from '@mysten/wallet-standard';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport type { SignerAdapter } from '../types.js';\nimport {\n\tbadgeStyles,\n\tcardItemStyles,\n\tformInputStyles,\n\ticonButtonStyles,\n\tinlineErrorStyles,\n\tlistContainerStyles,\n\tmonoTruncateStyles,\n\tsectionHeaderStyles,\n\tsharedStyles,\n} from './styles.js';\nimport { emitEvent, formatAddress, getErrorMessage, NETWORK_COLORS } from './utils.js';\nimport './dev-wallet-accounts.js';\n\n@customElement('dev-wallet-settings')\nexport class DevWalletSettings extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tsectionHeaderStyles,\n\t\tcardItemStyles,\n\t\tlistContainerStyles,\n\t\tformInputStyles,\n\t\ticonButtonStyles,\n\t\tbadgeStyles,\n\t\tinlineErrorStyles,\n\t\tmonoTruncateStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tpadding: 14px;\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t\tpadding: 12px;\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: var(--dev-wallet-surface);\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\n\t\t\t.settings-summary {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(3, minmax(0, 1fr));\n\t\t\t\tgap: 8px;\n\t\t\t}\n\n\t\t\t.summary-cell {\n\t\t\t\tmin-width: 0;\n\t\t\t\tpadding: 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: var(--dev-wallet-bg-0);\n\t\t\t}\n\n\t\t\t.summary-label {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 9.5px;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.12em;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.summary-value {\n\t\t\t\tmargin-top: 5px;\n\t\t\t\tfont-size: 12px;\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\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.network-item {\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 9px 10px;\n\t\t\t}\n\n\t\t\t.network-dot {\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 8px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.network-name {\n\t\t\t\tflex: 1;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t}\n\n\t\t\t.network-info {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t}\n\n\t\t\t.network-url {\n\t\t\t\tfont-size: 10px;\n\t\t\t}\n\n\t\t\t.network-url-input {\n\t\t\t\tpadding: 3px 6px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tborder: 1px solid var(--dev-wallet-primary);\n\t\t\t\tbackground: var(--dev-wallet-background);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t}\n\n\t\t\t.network-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 2px;\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.btn-icon {\n\t\t\t\twidth: 22px;\n\t\t\t\theight: 22px;\n\t\t\t\tfont-size: 11px;\n\t\t\t}\n\n\t\t\t.btn-icon-danger:hover {\n\t\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t\t}\n\n\t\t\t.network-active-badge {\n\t\t\t\theight: 16px;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tpadding: 0 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\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t}\n\n\t\t\t.add-network-form {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 8px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\tpadding: 12px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-lg);\n\t\t\t\tborder: 1px dashed var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t}\n\n\t\t\t.form-input {\n\t\t\t\tpadding: 6px 8px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t\tborder: 1px solid var(--dev-wallet-input);\n\t\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\t\tfont-size: 12px;\n\t\t\t}\n\n\t\t\t.form-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 6px;\n\t\t\t}\n\n\t\t\t.btn-sm {\n\t\t\t\tpadding: 5px 10px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t}\n\n\t\t\t.btn-add {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t}\n\n\t\t\t.btn-add:disabled {\n\t\t\t\topacity: 0.5;\n\t\t\t}\n\n\t\t\t.btn-cancel {\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.btn-toggle {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\theight: 30px;\n\t\t\t\tpadding: 0 10px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t}\n\n\t\t\t.btn-toggle: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.cli-section-column {\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: flex-start;\n\t\t\t\tgap: 6px;\n\t\t\t}\n\n\t\t\t.cli-header-row {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.cli-accounts-list {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding-left: 16px;\n\t\t\t}\n\n\t\t\t.cli-accounts-list .network-url {\n\t\t\t\tpadding: 2px 0;\n\t\t\t}\n\n\t\t\t.cli-hint {\n\t\t\t\tpadding-left: 16px;\n\t\t\t\tmargin-top: 0;\n\t\t\t\tfont-size: 12px;\n\t\t\t}\n\n\t\t\t.cli-unpaired-hint {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.about {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tline-height: 1.5;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\t.bookmarklet-link-wrapper {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.bookmarklet-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 6px;\n\t\t\t\tpadding: 8px 14px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\ttext-decoration: none;\n\t\t\t\tcursor: grab;\n\t\t\t\tuser-select: none;\n\t\t\t}\n\n\t\t\t.bookmarklet-link:hover {\n\t\t\t\topacity: 0.9;\n\t\t\t}\n\n\t\t\t.bookmarklet-link:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t.bookmarklet-url {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tword-break: break-all;\n\t\t\t\tuser-select: all;\n\t\t\t}\n\n\t\t\t.console-snippet {\n\t\t\t\tmargin-top: 8px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t\tbackground: var(--dev-wallet-bg-0);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n\t\t\t.console-snippet-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\tpadding: 7px 8px 7px 10px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: color-mix(in srgb, var(--dev-wallet-bg-1) 72%, transparent);\n\t\t\t}\n\n\t\t\t.console-snippet-label {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 9.5px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tletter-spacing: 0.12em;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.console-snippet-code {\n\t\t\t\tmargin: 0;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: 10px 12px 12px;\n\t\t\t\toverflow-x: auto;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tline-height: 1.5;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t\toverflow-wrap: anywhere;\n\t\t\t\tuser-select: all;\n\t\t\t}\n\n\t\t\t.btn-copy {\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\tmin-width: 54px;\n\t\t\t\theight: 24px;\n\t\t\t\tpadding: 0 8px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tcursor: pointer;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.btn-copy: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\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t@media (max-width: 420px) {\n\t\t\t\t.settings-summary {\n\t\t\t\t\tgrid-template-columns: 1fr;\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t@property({ attribute: false })\n\taccounts: readonly ReadonlyWalletAccount[] = [];\n\n\t@property({ attribute: false })\n\tadapters: SignerAdapter[] = [];\n\n\t@property({ type: String })\n\tactiveAddress = '';\n\n\t@property({ type: String })\n\tbookmarkletOrigin = '';\n\n\t@state()\n\tprivate _showAddNetwork = false;\n\n\t@state()\n\tprivate _networkName = '';\n\n\t@state()\n\tprivate _networkUrl = '';\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t@state()\n\tprivate _editingNetwork: string | null = null;\n\n\t@state()\n\tprivate _editingUrl = '';\n\n\t@state()\n\tprivate _copied = false;\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"section\">${this.#renderSummary()}</div>\n\t\t\t<div class=\"section\">${this.#renderNetworks()}</div>\n\t\t\t${this.#hasCliAdapter()\n\t\t\t\t? html`<div class=\"section\">${this.#renderCliSigner()}</div>`\n\t\t\t\t: nothing}\n\t\t\t<div class=\"section\">${this.#renderAccounts()}</div>\n\t\t\t${this.bookmarkletOrigin\n\t\t\t\t? html`<div class=\"section\">${this.#renderBookmarklet()}</div>`\n\t\t\t\t: nothing}\n\t\t`;\n\t}\n\n\t#renderSummary() {\n\t\tconst activeNetwork = this.wallet?.activeNetwork ?? 'none';\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Wallet</h3>\n\t\t\t<div class=\"settings-summary\">\n\t\t\t\t<div class=\"summary-cell\">\n\t\t\t\t\t<div class=\"summary-label\">Network</div>\n\t\t\t\t\t<div class=\"summary-value\">${activeNetwork}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"summary-cell\">\n\t\t\t\t\t<div class=\"summary-label\">Accounts</div>\n\t\t\t\t\t<div class=\"summary-value\">${this.accounts.length}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"summary-cell\">\n\t\t\t\t\t<div class=\"summary-label\">Adapters</div>\n\t\t\t\t\t<div class=\"summary-value\">${this.adapters.length}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#renderNetworks() {\n\t\tif (!this.wallet) return nothing;\n\n\t\tconst networks = this.wallet.availableNetworks;\n\t\tconst activeNetwork = this.wallet.activeNetwork;\n\t\tconst urls = this.wallet.networkUrls;\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Networks</h3>\n\t\t\t<div class=\"network-list\">\n\t\t\t\t${networks.map((name) => {\n\t\t\t\t\tconst color = NETWORK_COLORS[name] ?? '#6b7280';\n\t\t\t\t\tconst isActive = name === activeNetwork;\n\t\t\t\t\tconst isEditing = this._editingNetwork === name;\n\t\t\t\t\treturn html`\n\t\t\t\t\t\t<div class=\"network-item ${isActive ? 'active' : ''}\">\n\t\t\t\t\t\t\t<span class=\"network-dot\" style=\"background: ${color}\"></span>\n\t\t\t\t\t\t\t<div class=\"network-info\">\n\t\t\t\t\t\t\t\t<span class=\"network-name\">${name}</span>\n\t\t\t\t\t\t\t\t${isEditing\n\t\t\t\t\t\t\t\t\t? html`<input\n\t\t\t\t\t\t\t\t\t\t\tclass=\"network-url-input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t.value=${this._editingUrl}\n\t\t\t\t\t\t\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis._editingUrl = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t@keydown=${(e: KeyboardEvent) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') this.#saveNetworkUrl(name);\n\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Escape') this.#cancelEditNetwork();\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>`\n\t\t\t\t\t\t\t\t\t: html`<span class=\"network-url\" title=${urls[name] ?? ''}\n\t\t\t\t\t\t\t\t\t\t\t>${urls[name] ?? ''}</span\n\t\t\t\t\t\t\t\t\t\t>`}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"network-actions\">\n\t\t\t\t\t\t\t\t${isEditing\n\t\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Save\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Save URL\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#saveNetworkUrl(name)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#10003;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Cancel\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Cancel editing\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${this.#cancelEditNetwork}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#10005;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Edit URL\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Edit network URL\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#startEditNetwork(name, urls[name] ?? '')}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#9998;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t${!isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? html`<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon btn-icon-danger\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Remove\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Remove network\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#removeNetwork(name)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t&#10005;\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>`\n\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t\t\t${isActive ? html`<span class=\"network-active-badge\">Active</span>` : nothing}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`;\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t${this._showAddNetwork\n\t\t\t\t? this.#renderAddNetworkForm()\n\t\t\t\t: html`\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"btn-toggle\"\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis._showAddNetwork = true;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+ Add Network\n\t\t\t\t\t\t</button>\n\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\t#renderAddNetworkForm() {\n\t\treturn html`\n\t\t\t<div class=\"add-network-form\">\n\t\t\t\t<input\n\t\t\t\t\tclass=\"form-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"Network name (e.g. custom)\"\n\t\t\t\t\t.value=${this._networkName}\n\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\tthis._networkName = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\tthis._error = null;\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"form-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"gRPC URL (e.g. http://localhost:9000)\"\n\t\t\t\t\t.value=${this._networkUrl}\n\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\tthis._networkUrl = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\tthis._error = null;\n\t\t\t\t\t}}\n\t\t\t\t\t@keydown=${(e: KeyboardEvent) => {\n\t\t\t\t\t\tif (e.key === 'Enter') this.#addNetwork();\n\t\t\t\t\t\tif (e.key === 'Escape') this.#cancelAddNetwork();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t${this._error ? html`<div class=\"error\">${this._error}</div>` : nothing}\n\t\t\t\t<div class=\"form-actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"btn-sm btn-add\"\n\t\t\t\t\t\t?disabled=${!this._networkName.trim() || !this._networkUrl.trim()}\n\t\t\t\t\t\t@click=${this.#addNetwork}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"btn-sm btn-cancel\" @click=${this.#cancelAddNetwork}>Cancel</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#hasCliAdapter(): boolean {\n\t\treturn this.adapters.some((a) => a.id === 'remote-cli');\n\t}\n\n\t#renderCliSigner() {\n\t\tconst cliAdapter = this.adapters.find((a) => a.id === 'remote-cli');\n\t\tif (!cliAdapter) return nothing;\n\n\t\tconst isPaired = 'isPaired' in cliAdapter && (cliAdapter as { isPaired: boolean }).isPaired;\n\t\tconst cliAccounts = cliAdapter.getAccounts();\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">CLI Signer</h3>\n\t\t\t${isPaired\n\t\t\t\t? html`\n\t\t\t\t\t\t<div class=\"network-item active cli-section-column\">\n\t\t\t\t\t\t\t<div class=\"cli-header-row\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"network-dot\"\n\t\t\t\t\t\t\t\t\tstyle=\"background: var(--dev-wallet-status-connected)\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t<span class=\"network-name\">Connected</span>\n\t\t\t\t\t\t\t\t${cliAccounts.length > 0\n\t\t\t\t\t\t\t\t\t? html`<span class=\"network-active-badge\">${cliAccounts.length} imported</span>`\n\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t${cliAccounts.length > 0\n\t\t\t\t\t\t\t\t? html`<div class=\"cli-accounts-list\">\n\t\t\t\t\t\t\t\t\t\t${cliAccounts.map(\n\t\t\t\t\t\t\t\t\t\t\t(acc) => html`\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"network-url\">${acc.label} (${formatAddress(acc.address)})</div>\n\t\t\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: html`<div class=\"about cli-hint\">Use + Add above to import CLI accounts.</div>`}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`\n\t\t\t\t: html`\n\t\t\t\t\t\t<div class=\"network-item\">\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"network-dot\"\n\t\t\t\t\t\t\t\tstyle=\"background: var(--dev-wallet-status-disconnected)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t<span class=\"network-name\" style=\"color: var(--dev-wallet-muted-foreground)\"\n\t\t\t\t\t\t\t\t>Not connected</span\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"about cli-unpaired-hint\">\n\t\t\t\t\t\t\tOpen the token URL from your terminal to connect CLI accounts.\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\t#renderAccounts() {\n\t\treturn html`\n\t\t\t<dev-wallet-accounts\n\t\t\t\texportparts=\"account-list: accounts-account-list, add-button: accounts-add-button, empty-state: accounts-empty-state\"\n\t\t\t\t.accounts=${this.accounts}\n\t\t\t\t.adapters=${this.adapters}\n\t\t\t\t.activeAddress=${this.activeAddress}\n\t\t\t></dev-wallet-accounts>\n\t\t`;\n\t}\n\n\t#renderBookmarklet() {\n\t\tif (!this.bookmarkletOrigin) return nothing;\n\t\tconst origin = this.bookmarkletOrigin;\n\n\t\tconst bookmarkletJs = `${origin}/bookmarklet.js`;\n\t\tconst bookmarkletHref = `javascript:void(document.head.appendChild(Object.assign(document.createElement('script'),{src:'${bookmarkletJs}'})))`;\n\t\tconst consoleSnippet = `var s=document.createElement('script');s.src='${bookmarkletJs}';document.head.appendChild(s);`;\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Bookmarklet</h3>\n\t\t\t<div class=\"about\">\n\t\t\t\tDrag this link to your bookmarks bar, then click it on any dApp to inject the wallet:\n\t\t\t</div>\n\t\t\t<div class=\"bookmarklet-link-wrapper\">\n\t\t\t\t<a\n\t\t\t\t\tclass=\"bookmarklet-link\"\n\t\t\t\t\thref=${bookmarkletHref}\n\t\t\t\t\ttitle=\"Drag to bookmarks bar\"\n\t\t\t\t\t@click=${(e: MouseEvent) => e.preventDefault()}\n\t\t\t\t>\n\t\t\t\t\tDev Wallet\n\t\t\t\t</a>\n\t\t\t</div>\n\t\t\t<div class=\"about\" style=\"margin-top: 12px\">Or paste this in the browser console:</div>\n\t\t\t<div class=\"console-snippet\">\n\t\t\t\t<div class=\"console-snippet-header\">\n\t\t\t\t\t<span class=\"console-snippet-label\">Console</span>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"btn-copy\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-label=\"Copy console snippet\"\n\t\t\t\t\t\t@click=${() => this.#copySnippet(consoleSnippet)}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this._copied ? 'Copied' : 'Copy'}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<pre class=\"console-snippet-code\"><code>${consoleSnippet}</code></pre>\n\t\t\t</div>\n\t\t\t<div class=\"about\" style=\"margin-top: 8px\">\n\t\t\t\tOr add this script to your page:<br />\n\t\t\t\t<code class=\"bookmarklet-url\">${bookmarkletJs}</code>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#copySnippet(text: string) {\n\t\tnavigator.clipboard.writeText(text).then(() => {\n\t\t\tthis._copied = true;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis._copied = false;\n\t\t\t}, 2000);\n\t\t});\n\t}\n\n\t#addNetwork() {\n\t\tif (!this.wallet) return;\n\n\t\tconst name = this._networkName.trim();\n\t\tconst url = this._networkUrl.trim();\n\n\t\tif (!name || !url) return;\n\n\t\tif (this.wallet.availableNetworks.includes(name)) {\n\t\t\tthis._error = `Network \"${name}\" already exists`;\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tthis.wallet.addNetwork(name, url);\n\t\t\tthis._networkName = '';\n\t\t\tthis._networkUrl = '';\n\t\t\tthis._showAddNetwork = false;\n\t\t\tthis._error = null;\n\t\t\temitEvent(this, 'network-added', { name, url });\n\t\t} catch (err) {\n\t\t\tthis._error = getErrorMessage(err, 'Failed to add network');\n\t\t}\n\t}\n\n\t#cancelAddNetwork() {\n\t\tthis._showAddNetwork = false;\n\t\tthis._networkName = '';\n\t\tthis._networkUrl = '';\n\t\tthis._error = null;\n\t}\n\n\t#startEditNetwork(name: string, url: string) {\n\t\tthis._editingNetwork = name;\n\t\tthis._editingUrl = url;\n\t}\n\n\t#saveNetworkUrl(name: string) {\n\t\tif (!this.wallet) return;\n\t\tconst url = this._editingUrl.trim();\n\t\tif (!url) return;\n\n\t\ttry {\n\t\t\tthis.wallet.addNetwork(name, url);\n\t\t\tthis._editingNetwork = null;\n\t\t\tthis._editingUrl = '';\n\t\t} catch (error) {\n\t\t\tthis._error = error instanceof Error ? error.message : 'Invalid URL';\n\t\t}\n\t}\n\n\t#cancelEditNetwork() {\n\t\tthis._editingNetwork = null;\n\t\tthis._editingUrl = '';\n\t}\n\n\t#removeNetwork(name: string) {\n\t\tif (!this.wallet) return;\n\t\tthis.wallet.removeNetwork(name);\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-settings': DevWalletSettings;\n\t}\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"dev-wallet-settings.mjs","names":["#addNetwork","#cancelAddNetwork","#renderSummary","#renderNetworks","#hasCliAdapter","#renderCliSigner","#renderAccounts","#onEditKeydown","#saveNetworkUrl","#cancelEditNetwork","#startEditNetwork","#removeNetwork","#renderAddNetworkForm","#onAddKeydown"],"sources":["../../src/ui/dev-wallet-settings.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReadonlyWalletAccount } from '@mysten/wallet-standard';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport type { ConnectedAppsStore } from '../client/connected-apps.js';\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport type { SignerAdapter } from '../types.js';\nimport {\n\tbadgeStyles,\n\tcardItemStyles,\n\tformInputStyles,\n\ticonButtonStyles,\n\tinlineErrorStyles,\n\tlistContainerStyles,\n\tmonoTruncateStyles,\n\tsectionHeaderStyles,\n\tsharedStyles,\n} from './styles.js';\nimport { emitEvent, formatAddress, getErrorMessage, NETWORK_COLORS } from './utils.js';\nimport './dev-wallet-accounts.js';\nimport './dev-wallet-connect-guide.js';\nimport './dev-wallet-connected-apps.js';\n\n@customElement('dev-wallet-settings')\nexport class DevWalletSettings extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tsectionHeaderStyles,\n\t\tcardItemStyles,\n\t\tlistContainerStyles,\n\t\tformInputStyles,\n\t\ticonButtonStyles,\n\t\tbadgeStyles,\n\t\tinlineErrorStyles,\n\t\tmonoTruncateStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tpadding: 14px;\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t\tpadding: 12px;\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: var(--dev-wallet-surface);\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\n\t\t\t.settings-summary {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(3, minmax(0, 1fr));\n\t\t\t\tgap: 8px;\n\t\t\t}\n\n\t\t\t.summary-cell {\n\t\t\t\tmin-width: 0;\n\t\t\t\tpadding: 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: var(--dev-wallet-bg-0);\n\t\t\t}\n\n\t\t\t.summary-label {\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tfont-size: 9.5px;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.12em;\n\t\t\t\tcolor: var(--dev-wallet-text-3);\n\t\t\t}\n\n\t\t\t.summary-value {\n\t\t\t\tmargin-top: 5px;\n\t\t\t\tfont-size: 12px;\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\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.network-item {\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 9px 10px;\n\t\t\t}\n\n\t\t\t.network-dot {\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 8px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.network-name {\n\t\t\t\tflex: 1;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t}\n\n\t\t\t.network-info {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 3px;\n\t\t\t}\n\n\t\t\t.network-url {\n\t\t\t\tfont-size: 10px;\n\t\t\t}\n\n\t\t\t.network-url-input {\n\t\t\t\tpadding: 3px 6px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tborder: 1px solid var(--dev-wallet-primary);\n\t\t\t\tbackground: var(--dev-wallet-background);\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\n\t\t\t.network-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 2px;\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.btn-icon {\n\t\t\t\twidth: 22px;\n\t\t\t\theight: 22px;\n\t\t\t\tfont-size: 11px;\n\t\t\t}\n\n\t\t\t.btn-icon-danger:hover {\n\t\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t\t}\n\n\t\t\t.network-active-badge {\n\t\t\t\theight: 16px;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\talign-items: center;\n\t\t\t\tpadding: 0 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\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t}\n\n\t\t\t.add-network-form {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 8px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\tpadding: 12px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-lg);\n\t\t\t\tborder: 1px dashed var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t}\n\n\t\t\t.form-input {\n\t\t\t\tpadding: 6px 8px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t\tborder: 1px solid var(--dev-wallet-input);\n\t\t\t\tbackground: var(--dev-wallet-bg-2);\n\t\t\t\tfont-size: 12px;\n\t\t\t}\n\n\t\t\t.form-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 6px;\n\t\t\t}\n\n\t\t\t.btn-sm {\n\t\t\t\tpadding: 5px 10px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xs);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t}\n\n\t\t\t.btn-add {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\n\t\t\t}\n\n\t\t\t.btn-add:disabled {\n\t\t\t\topacity: 0.5;\n\t\t\t}\n\n\t\t\t.btn-cancel {\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.btn-toggle {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\theight: 30px;\n\t\t\t\tpadding: 0 10px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tborder-radius: var(--dev-wallet-radius);\n\t\t\t}\n\n\t\t\t.btn-toggle: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.cli-section-column {\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: flex-start;\n\t\t\t\tgap: 6px;\n\t\t\t}\n\n\t\t\t.cli-header-row {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.cli-accounts-list {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding-left: 16px;\n\t\t\t}\n\n\t\t\t.cli-accounts-list .network-url {\n\t\t\t\tpadding: 2px 0;\n\t\t\t}\n\n\t\t\t.cli-hint {\n\t\t\t\tpadding-left: 16px;\n\t\t\t\tmargin-top: 0;\n\t\t\t\tfont-size: 12px;\n\t\t\t}\n\n\t\t\t.cli-unpaired-hint {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.about {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tline-height: 1.5;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\t/* The standalone page shows these in side rails above 1240px\n\t\t\t (see dev-wallet-standalone.ts); only repeat them here below that. */\n\t\t\t@media (min-width: 1241px) {\n\t\t\t\t.rail-mirror {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@media (max-width: 420px) {\n\t\t\t\t.settings-summary {\n\t\t\t\t\tgrid-template-columns: 1fr;\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t@property({ attribute: false })\n\taccounts: readonly ReadonlyWalletAccount[] = [];\n\n\t@property({ attribute: false })\n\tadapters: SignerAdapter[] = [];\n\n\t@property({ type: String })\n\tactiveAddress = '';\n\n\t/** Origin of a standalone/hosted wallet. When set, Settings leads with the\n\t * connect guide so it's reachable when the standalone aside is hidden. */\n\t@property({ type: String })\n\twalletOrigin = '';\n\n\t/** Connected-dApps store of a standalone wallet; listed below the guide. */\n\t@property({ attribute: false })\n\tconnectedApps: ConnectedAppsStore | null = null;\n\n\t@state()\n\tprivate _showAddNetwork = false;\n\n\t@state()\n\tprivate _networkName = '';\n\n\t@state()\n\tprivate _networkUrl = '';\n\n\t@state()\n\tprivate _networkFaucet = '';\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t@state()\n\tprivate _editingNetwork: string | null = null;\n\n\t@state()\n\tprivate _editingUrl = '';\n\n\t@state()\n\tprivate _editingFaucet = '';\n\n\toverride render() {\n\t\treturn html`\n\t\t\t${this.walletOrigin\n\t\t\t\t? html`<div class=\"section rail-mirror\">\n\t\t\t\t\t\t<dev-wallet-connect-guide .origin=${this.walletOrigin}></dev-wallet-connect-guide>\n\t\t\t\t\t</div>`\n\t\t\t\t: nothing}\n\t\t\t${this.connectedApps\n\t\t\t\t? html`<div class=\"section rail-mirror\">\n\t\t\t\t\t\t<dev-wallet-connected-apps .store=${this.connectedApps}></dev-wallet-connected-apps>\n\t\t\t\t\t</div>`\n\t\t\t\t: nothing}\n\t\t\t<div class=\"section\">${this.#renderSummary()}</div>\n\t\t\t<div class=\"section\">${this.#renderNetworks()}</div>\n\t\t\t${this.#hasCliAdapter()\n\t\t\t\t? html`<div class=\"section\">${this.#renderCliSigner()}</div>`\n\t\t\t\t: nothing}\n\t\t\t<div class=\"section\">${this.#renderAccounts()}</div>\n\t\t`;\n\t}\n\n\t#renderSummary() {\n\t\tconst activeNetwork = this.wallet?.activeNetwork ?? 'none';\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Wallet</h3>\n\t\t\t<div class=\"settings-summary\">\n\t\t\t\t<div class=\"summary-cell\">\n\t\t\t\t\t<div class=\"summary-label\">Network</div>\n\t\t\t\t\t<div class=\"summary-value\">${activeNetwork}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"summary-cell\">\n\t\t\t\t\t<div class=\"summary-label\">Accounts</div>\n\t\t\t\t\t<div class=\"summary-value\">${this.accounts.length}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"summary-cell\">\n\t\t\t\t\t<div class=\"summary-label\">Adapters</div>\n\t\t\t\t\t<div class=\"summary-value\">${this.adapters.length}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#renderNetworks() {\n\t\tif (!this.wallet) return nothing;\n\n\t\tconst networks = this.wallet.availableNetworks;\n\t\tconst activeNetwork = this.wallet.activeNetwork;\n\t\tconst urls = this.wallet.networkUrls;\n\t\tconst faucets = this.wallet.faucetUrls;\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Networks</h3>\n\t\t\t<div class=\"network-list\">\n\t\t\t\t${networks.map((name) => {\n\t\t\t\t\tconst color = NETWORK_COLORS[name] ?? '#6b7280';\n\t\t\t\t\tconst isActive = name === activeNetwork;\n\t\t\t\t\tconst isEditing = this._editingNetwork === name;\n\t\t\t\t\treturn html`\n\t\t\t\t\t\t<div class=\"network-item ${isActive ? 'active' : ''}\">\n\t\t\t\t\t\t\t<span class=\"network-dot\" style=\"background: ${color}\"></span>\n\t\t\t\t\t\t\t<div class=\"network-info\">\n\t\t\t\t\t\t\t\t<span class=\"network-name\">${name}</span>\n\t\t\t\t\t\t\t\t${isEditing\n\t\t\t\t\t\t\t\t\t? html`<input\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"network-url-input\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"gRPC URL\"\n\t\t\t\t\t\t\t\t\t\t\t\t.value=${this._editingUrl}\n\t\t\t\t\t\t\t\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._editingUrl = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t@keydown=${this.#onEditKeydown(name)}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"network-url-input\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Faucet URL\"\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Faucet URL (optional)\"\n\t\t\t\t\t\t\t\t\t\t\t\t.value=${this._editingFaucet}\n\t\t\t\t\t\t\t\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._editingFaucet = (e.target as HTMLInputElement).value;\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\t@keydown=${this.#onEditKeydown(name)}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t${this._error ? html`<div class=\"error\">${this._error}</div>` : nothing}`\n\t\t\t\t\t\t\t\t\t: html`<span class=\"network-url\" title=${urls[name] ?? ''}\n\t\t\t\t\t\t\t\t\t\t\t\t>${urls[name] ?? ''}</span\n\t\t\t\t\t\t\t\t\t\t\t>${faucets[name]\n\t\t\t\t\t\t\t\t\t\t\t\t? html`<span class=\"network-url\" title=${faucets[name]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>faucet: ${faucets[name]}</span\n\t\t\t\t\t\t\t\t\t\t\t\t\t>`\n\t\t\t\t\t\t\t\t\t\t\t\t: nothing}`}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"network-actions\">\n\t\t\t\t\t\t\t\t${isEditing\n\t\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Save\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Save network\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#saveNetworkUrl(name)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#10003;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Cancel\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Cancel editing\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${this.#cancelEditNetwork}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#10005;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Edit\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Edit network\"\n\t\t\t\t\t\t\t\t\t\t\t\t@click=${() =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.#startEditNetwork(name, urls[name] ?? '', faucets[name] ?? '')}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t&#9998;\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t${!isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? html`<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"btn-icon btn-icon-danger\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Remove\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Remove network\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t@click=${() => this.#removeNetwork(name)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t&#10005;\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>`\n\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t\t\t${isActive ? html`<span class=\"network-active-badge\">Active</span>` : nothing}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`;\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t${this._showAddNetwork\n\t\t\t\t? this.#renderAddNetworkForm()\n\t\t\t\t: html`\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"btn-toggle\"\n\t\t\t\t\t\t\t@click=${() => {\n\t\t\t\t\t\t\t\tthis._showAddNetwork = true;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+ Add Network\n\t\t\t\t\t\t</button>\n\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\t#renderAddNetworkForm() {\n\t\treturn html`\n\t\t\t<div class=\"add-network-form\">\n\t\t\t\t<input\n\t\t\t\t\tclass=\"form-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"Network name (e.g. custom)\"\n\t\t\t\t\t.value=${this._networkName}\n\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\tthis._networkName = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\tthis._error = null;\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"form-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"gRPC URL (e.g. http://localhost:9000)\"\n\t\t\t\t\t.value=${this._networkUrl}\n\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\tthis._networkUrl = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\tthis._error = null;\n\t\t\t\t\t}}\n\t\t\t\t\t@keydown=${this.#onAddKeydown}\n\t\t\t\t/>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"form-input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder=\"Faucet URL (optional, e.g. http://localhost:9123)\"\n\t\t\t\t\t.value=${this._networkFaucet}\n\t\t\t\t\t@input=${(e: InputEvent) => {\n\t\t\t\t\t\tthis._networkFaucet = (e.target as HTMLInputElement).value;\n\t\t\t\t\t\tthis._error = null;\n\t\t\t\t\t}}\n\t\t\t\t\t@keydown=${this.#onAddKeydown}\n\t\t\t\t/>\n\t\t\t\t${this._error ? html`<div class=\"error\">${this._error}</div>` : nothing}\n\t\t\t\t<div class=\"form-actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"btn-sm btn-add\"\n\t\t\t\t\t\t?disabled=${!this._networkName.trim() || !this._networkUrl.trim()}\n\t\t\t\t\t\t@click=${this.#addNetwork}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"btn-sm btn-cancel\" @click=${this.#cancelAddNetwork}>Cancel</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#hasCliAdapter(): boolean {\n\t\treturn this.adapters.some((a) => a.id === 'remote-cli');\n\t}\n\n\t#renderCliSigner() {\n\t\tconst cliAdapter = this.adapters.find((a) => a.id === 'remote-cli');\n\t\tif (!cliAdapter) return nothing;\n\n\t\tconst isPaired = 'isPaired' in cliAdapter && (cliAdapter as { isPaired: boolean }).isPaired;\n\t\tconst cliAccounts = cliAdapter.getAccounts();\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">CLI Signer</h3>\n\t\t\t${isPaired\n\t\t\t\t? html`\n\t\t\t\t\t\t<div class=\"network-item active cli-section-column\">\n\t\t\t\t\t\t\t<div class=\"cli-header-row\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"network-dot\"\n\t\t\t\t\t\t\t\t\tstyle=\"background: var(--dev-wallet-status-connected)\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t<span class=\"network-name\">Connected</span>\n\t\t\t\t\t\t\t\t${cliAccounts.length > 0\n\t\t\t\t\t\t\t\t\t? html`<span class=\"network-active-badge\">${cliAccounts.length} imported</span>`\n\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t${cliAccounts.length > 0\n\t\t\t\t\t\t\t\t? html`<div class=\"cli-accounts-list\">\n\t\t\t\t\t\t\t\t\t\t${cliAccounts.map(\n\t\t\t\t\t\t\t\t\t\t\t(acc) => html`\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"network-url\">${acc.label} (${formatAddress(acc.address)})</div>\n\t\t\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: html`<div class=\"about cli-hint\">Use + Add above to import CLI accounts.</div>`}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`\n\t\t\t\t: html`\n\t\t\t\t\t\t<div class=\"network-item\">\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"network-dot\"\n\t\t\t\t\t\t\t\tstyle=\"background: var(--dev-wallet-status-disconnected)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t<span class=\"network-name\" style=\"color: var(--dev-wallet-muted-foreground)\"\n\t\t\t\t\t\t\t\t>Not connected</span\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"about cli-unpaired-hint\">\n\t\t\t\t\t\t\tOpen the token URL from your terminal to connect CLI accounts.\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\t#renderAccounts() {\n\t\treturn html`\n\t\t\t<dev-wallet-accounts\n\t\t\t\texportparts=\"account-list: accounts-account-list, add-button: accounts-add-button, empty-state: accounts-empty-state\"\n\t\t\t\t.accounts=${this.accounts}\n\t\t\t\t.adapters=${this.adapters}\n\t\t\t\t.activeAddress=${this.activeAddress}\n\t\t\t></dev-wallet-accounts>\n\t\t`;\n\t}\n\n\t#addNetwork() {\n\t\tif (!this.wallet) return;\n\n\t\tconst name = this._networkName.trim();\n\t\tconst url = this._networkUrl.trim();\n\t\tconst faucet = this._networkFaucet.trim();\n\n\t\tif (!name || !url) return;\n\n\t\tif (this.wallet.availableNetworks.includes(name)) {\n\t\t\tthis._error = `Network \"${name}\" already exists`;\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tthis.wallet.addNetwork(name, url, faucet || undefined);\n\t\t\tthis._networkName = '';\n\t\t\tthis._networkUrl = '';\n\t\t\tthis._networkFaucet = '';\n\t\t\tthis._showAddNetwork = false;\n\t\t\tthis._error = null;\n\t\t\temitEvent(this, 'network-added', { name, url });\n\t\t} catch (err) {\n\t\t\tthis._error = getErrorMessage(err, 'Failed to add network');\n\t\t}\n\t}\n\n\t#cancelAddNetwork() {\n\t\tthis._showAddNetwork = false;\n\t\tthis._networkName = '';\n\t\tthis._networkUrl = '';\n\t\tthis._networkFaucet = '';\n\t\tthis._error = null;\n\t}\n\n\t#onAddKeydown = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Enter') this.#addNetwork();\n\t\tif (e.key === 'Escape') this.#cancelAddNetwork();\n\t};\n\n\t#onEditKeydown(name: string) {\n\t\treturn (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Enter') this.#saveNetworkUrl(name);\n\t\t\tif (e.key === 'Escape') this.#cancelEditNetwork();\n\t\t};\n\t}\n\n\t#startEditNetwork(name: string, url: string, faucet: string) {\n\t\tthis._editingNetwork = name;\n\t\tthis._editingUrl = url;\n\t\tthis._editingFaucet = faucet;\n\t}\n\n\t#saveNetworkUrl(name: string) {\n\t\tif (!this.wallet) return;\n\t\tconst url = this._editingUrl.trim();\n\t\tconst faucet = this._editingFaucet.trim();\n\t\tif (!url) return;\n\n\t\ttry {\n\t\t\tthis.wallet.addNetwork(name, url, faucet || null);\n\t\t\tthis._editingNetwork = null;\n\t\t\tthis._editingUrl = '';\n\t\t\tthis._editingFaucet = '';\n\t\t} catch (error) {\n\t\t\tthis._error = error instanceof Error ? error.message : 'Invalid URL';\n\t\t}\n\t}\n\n\t#cancelEditNetwork() {\n\t\tthis._editingNetwork = null;\n\t\tthis._editingUrl = '';\n\t\tthis._editingFaucet = '';\n\t}\n\n\t#removeNetwork(name: string) {\n\t\tif (!this.wallet) return;\n\t\tthis.wallet.removeNetwork(name);\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-settings': DevWalletSettings;\n\t}\n}\n"],"mappings":"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"}