@mysten-incubation/dev-wallet 0.0.1 → 0.2.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 (182) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/LICENSE +189 -0
  3. package/dist/_virtual/{_@oxc-project_runtime@0.107.0 → _@oxc-project_runtime@0.127.0}/helpers/decorate.mjs +2 -3
  4. package/dist/adapters/base-adapter.mjs +6 -7
  5. package/dist/adapters/base-adapter.mjs.map +1 -1
  6. package/dist/adapters/browser.d.mts +4 -1
  7. package/dist/adapters/browser.mjs +4 -2
  8. package/dist/adapters/build-managed-account.mjs +8 -10
  9. package/dist/adapters/build-managed-account.mjs.map +1 -1
  10. package/dist/adapters/devstack-adapter.d.mts +111 -0
  11. package/dist/adapters/devstack-adapter.d.mts.map +1 -0
  12. package/dist/adapters/devstack-adapter.mjs +224 -0
  13. package/dist/adapters/devstack-adapter.mjs.map +1 -0
  14. package/dist/adapters/devstack-paths.d.mts +12 -0
  15. package/dist/adapters/devstack-paths.d.mts.map +1 -0
  16. package/dist/adapters/devstack-paths.mjs +12 -0
  17. package/dist/adapters/devstack-paths.mjs.map +1 -0
  18. package/dist/adapters/fork-relay.d.mts +109 -0
  19. package/dist/adapters/fork-relay.d.mts.map +1 -0
  20. package/dist/adapters/fork-relay.mjs +208 -0
  21. package/dist/adapters/fork-relay.mjs.map +1 -0
  22. package/dist/adapters/idb-store.mjs +12 -16
  23. package/dist/adapters/idb-store.mjs.map +1 -1
  24. package/dist/adapters/in-memory-adapter.mjs +4 -10
  25. package/dist/adapters/in-memory-adapter.mjs.map +1 -1
  26. package/dist/adapters/passkey-adapter.mjs +4 -12
  27. package/dist/adapters/passkey-adapter.mjs.map +1 -1
  28. package/dist/adapters/remote-cli-adapter.mjs +37 -72
  29. package/dist/adapters/remote-cli-adapter.mjs.map +1 -1
  30. package/dist/adapters/webcrypto-adapter.mjs +2 -4
  31. package/dist/adapters/webcrypto-adapter.mjs.map +1 -1
  32. package/dist/bin/cli.mjs +9 -22
  33. package/dist/bin/cli.mjs.map +1 -1
  34. package/dist/client/dev-wallet-client.mjs +13 -28
  35. package/dist/client/dev-wallet-client.mjs.map +1 -1
  36. package/dist/client/index.mjs +1 -2
  37. package/dist/client/request-handler.mjs +36 -42
  38. package/dist/client/request-handler.mjs.map +1 -1
  39. package/dist/index.mjs +1 -2
  40. package/dist/react/components.d.mts +9 -9
  41. package/dist/react/components.d.mts.map +1 -1
  42. package/dist/react/components.mjs +2 -5
  43. package/dist/react/components.mjs.map +1 -1
  44. package/dist/react/context.d.mts +3 -3
  45. package/dist/react/context.d.mts.map +1 -1
  46. package/dist/react/context.mjs +3 -8
  47. package/dist/react/context.mjs.map +1 -1
  48. package/dist/react/index.mjs +1 -2
  49. package/dist/react/useDevWallet.d.mts +3 -0
  50. package/dist/react/useDevWallet.d.mts.map +1 -1
  51. package/dist/react/useDevWallet.mjs +9 -14
  52. package/dist/react/useDevWallet.mjs.map +1 -1
  53. package/dist/server/cli-signing-middleware.mjs +7 -20
  54. package/dist/server/cli-signing-middleware.mjs.map +1 -1
  55. package/dist/server/index.mjs +1 -2
  56. package/dist/standalone/assets/{in-memory-adapter-CBF4h2KD.js → in-memory-adapter-qRkNfj9O.js} +1 -1
  57. package/dist/standalone/assets/main-DDltQnzR.js +3954 -0
  58. package/dist/standalone/assets/{webcrypto-adapter-DysAubFb.js → webcrypto-adapter-FejcrL9x.js} +1 -1
  59. package/dist/standalone/index.html +11 -12
  60. package/dist/ui/copy-controller.mjs +3 -3
  61. package/dist/ui/copy-controller.mjs.map +1 -1
  62. package/dist/ui/dev-wallet-account-selector.d.mts +3 -4
  63. package/dist/ui/dev-wallet-account-selector.d.mts.map +1 -1
  64. package/dist/ui/dev-wallet-account-selector.mjs +48 -25
  65. package/dist/ui/dev-wallet-account-selector.mjs.map +1 -1
  66. package/dist/ui/dev-wallet-accounts.d.mts +9 -4
  67. package/dist/ui/dev-wallet-accounts.d.mts.map +1 -1
  68. package/dist/ui/dev-wallet-accounts.mjs +62 -140
  69. package/dist/ui/dev-wallet-accounts.mjs.map +1 -1
  70. package/dist/ui/dev-wallet-balances.d.mts +10 -3
  71. package/dist/ui/dev-wallet-balances.d.mts.map +1 -1
  72. package/dist/ui/dev-wallet-balances.mjs +241 -43
  73. package/dist/ui/dev-wallet-balances.mjs.map +1 -1
  74. package/dist/ui/dev-wallet-connect.d.mts +3 -3
  75. package/dist/ui/dev-wallet-connect.d.mts.map +1 -1
  76. package/dist/ui/dev-wallet-connect.mjs +24 -16
  77. package/dist/ui/dev-wallet-connect.mjs.map +1 -1
  78. package/dist/ui/dev-wallet-dropdown.d.mts +3 -3
  79. package/dist/ui/dev-wallet-dropdown.d.mts.map +1 -1
  80. package/dist/ui/dev-wallet-dropdown.mjs +37 -47
  81. package/dist/ui/dev-wallet-dropdown.mjs.map +1 -1
  82. package/dist/ui/dev-wallet-fork-panel.d.mts +43 -0
  83. package/dist/ui/dev-wallet-fork-panel.d.mts.map +1 -0
  84. package/dist/ui/dev-wallet-fork-panel.mjs +500 -0
  85. package/dist/ui/dev-wallet-fork-panel.mjs.map +1 -0
  86. package/dist/ui/dev-wallet-network-badge.d.mts +3 -4
  87. package/dist/ui/dev-wallet-network-badge.d.mts.map +1 -1
  88. package/dist/ui/dev-wallet-network-badge.mjs +52 -21
  89. package/dist/ui/dev-wallet-network-badge.mjs.map +1 -1
  90. package/dist/ui/dev-wallet-new-account.d.mts +3 -4
  91. package/dist/ui/dev-wallet-new-account.d.mts.map +1 -1
  92. package/dist/ui/dev-wallet-new-account.mjs +31 -105
  93. package/dist/ui/dev-wallet-new-account.mjs.map +1 -1
  94. package/dist/ui/dev-wallet-objects.d.mts +3 -3
  95. package/dist/ui/dev-wallet-objects.d.mts.map +1 -1
  96. package/dist/ui/dev-wallet-objects.mjs +76 -39
  97. package/dist/ui/dev-wallet-objects.mjs.map +1 -1
  98. package/dist/ui/dev-wallet-panel.d.mts +24 -4
  99. package/dist/ui/dev-wallet-panel.d.mts.map +1 -1
  100. package/dist/ui/dev-wallet-panel.mjs +247 -64
  101. package/dist/ui/dev-wallet-panel.mjs.map +1 -1
  102. package/dist/ui/dev-wallet-popup.d.mts +3 -5
  103. package/dist/ui/dev-wallet-popup.d.mts.map +1 -1
  104. package/dist/ui/dev-wallet-popup.mjs +19 -15
  105. package/dist/ui/dev-wallet-popup.mjs.map +1 -1
  106. package/dist/ui/dev-wallet-settings.d.mts +3 -4
  107. package/dist/ui/dev-wallet-settings.d.mts.map +1 -1
  108. package/dist/ui/dev-wallet-settings.mjs +149 -97
  109. package/dist/ui/dev-wallet-settings.mjs.map +1 -1
  110. package/dist/ui/dev-wallet-signing-modal.d.mts +11 -4
  111. package/dist/ui/dev-wallet-signing-modal.d.mts.map +1 -1
  112. package/dist/ui/dev-wallet-signing-modal.mjs +46 -18
  113. package/dist/ui/dev-wallet-signing-modal.mjs.map +1 -1
  114. package/dist/ui/dev-wallet-signing.d.mts +9 -3
  115. package/dist/ui/dev-wallet-signing.d.mts.map +1 -1
  116. package/dist/ui/dev-wallet-signing.mjs +119 -130
  117. package/dist/ui/dev-wallet-signing.mjs.map +1 -1
  118. package/dist/ui/dev-wallet-standalone.d.mts +8 -3
  119. package/dist/ui/dev-wallet-standalone.d.mts.map +1 -1
  120. package/dist/ui/dev-wallet-standalone.mjs +303 -38
  121. package/dist/ui/dev-wallet-standalone.mjs.map +1 -1
  122. package/dist/ui/dev-wallet-tab-bar.d.mts +13 -5
  123. package/dist/ui/dev-wallet-tab-bar.d.mts.map +1 -1
  124. package/dist/ui/dev-wallet-tab-bar.mjs +143 -82
  125. package/dist/ui/dev-wallet-tab-bar.mjs.map +1 -1
  126. package/dist/ui/index.d.mts +3 -2
  127. package/dist/ui/index.mjs +2 -2
  128. package/dist/ui/mount.d.mts +14 -1
  129. package/dist/ui/mount.d.mts.map +1 -1
  130. package/dist/ui/mount.mjs +5 -2
  131. package/dist/ui/mount.mjs.map +1 -1
  132. package/dist/ui/styles.mjs +428 -66
  133. package/dist/ui/styles.mjs.map +1 -1
  134. package/dist/ui/transaction-analyzer.mjs +19 -30
  135. package/dist/ui/transaction-analyzer.mjs.map +1 -1
  136. package/dist/ui/utils.d.mts +59 -0
  137. package/dist/ui/utils.d.mts.map +1 -0
  138. package/dist/ui/utils.mjs +42 -15
  139. package/dist/ui/utils.mjs.map +1 -1
  140. package/dist/ui/wallet-controller.mjs +89 -20
  141. package/dist/ui/wallet-controller.mjs.map +1 -1
  142. package/dist/wallet/constants.d.mts +9 -0
  143. package/dist/wallet/constants.d.mts.map +1 -0
  144. package/dist/wallet/constants.mjs +1 -1
  145. package/dist/wallet/dev-wallet.mjs +42 -99
  146. package/dist/wallet/dev-wallet.mjs.map +1 -1
  147. package/dist/wallet/initializer.d.mts +3 -0
  148. package/dist/wallet/initializer.d.mts.map +1 -1
  149. package/dist/wallet/initializer.mjs +9 -14
  150. package/dist/wallet/initializer.mjs.map +1 -1
  151. package/dist/wallet/signing.mjs +8 -21
  152. package/dist/wallet/signing.mjs.map +1 -1
  153. package/package.json +8 -6
  154. package/src/adapters/browser.ts +21 -0
  155. package/src/adapters/devstack-adapter.ts +342 -0
  156. package/src/adapters/devstack-paths.ts +16 -0
  157. package/src/adapters/fork-relay.ts +321 -0
  158. package/src/app/index.html +10 -11
  159. package/src/react/useDevWallet.ts +5 -1
  160. package/src/ui/dev-wallet-account-selector.ts +44 -17
  161. package/src/ui/dev-wallet-accounts.ts +87 -124
  162. package/src/ui/dev-wallet-balances.ts +248 -27
  163. package/src/ui/dev-wallet-connect.ts +19 -8
  164. package/src/ui/dev-wallet-dropdown.ts +7 -5
  165. package/src/ui/dev-wallet-fork-panel.ts +591 -0
  166. package/src/ui/dev-wallet-network-badge.ts +49 -10
  167. package/src/ui/dev-wallet-new-account.ts +21 -62
  168. package/src/ui/dev-wallet-objects.ts +59 -19
  169. package/src/ui/dev-wallet-panel.ts +261 -42
  170. package/src/ui/dev-wallet-popup.ts +12 -6
  171. package/src/ui/dev-wallet-settings.ts +159 -94
  172. package/src/ui/dev-wallet-signing-modal.ts +47 -7
  173. package/src/ui/dev-wallet-signing.ts +124 -97
  174. package/src/ui/dev-wallet-standalone.ts +310 -22
  175. package/src/ui/dev-wallet-tab-bar.ts +132 -70
  176. package/src/ui/index.ts +3 -0
  177. package/src/ui/mount.ts +23 -1
  178. package/src/ui/styles.ts +434 -58
  179. package/src/ui/utils.ts +66 -0
  180. package/src/ui/wallet-controller.ts +103 -5
  181. package/src/wallet/initializer.ts +7 -1
  182. package/dist/standalone/assets/main-VE4olb-Q.js +0 -2841
@@ -1,15 +1,23 @@
1
1
  import { connectDialogStyles, sharedStyles } from "./styles.mjs";
2
- import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
2
+ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.mjs";
3
3
  import { WalletController } from "./wallet-controller.mjs";
4
4
  import { LitElement, css, html, nothing } from "lit";
5
5
  import { customElement, property, state } from "lit/decorators.js";
6
-
7
6
  //#region src/ui/dev-wallet-panel.ts
8
- let DevWalletPanel = class DevWalletPanel$1 extends LitElement {
7
+ let DevWalletPanel = class DevWalletPanel extends LitElement {
9
8
  constructor(..._args) {
10
9
  super(..._args);
11
10
  this.wallet = null;
11
+ this.coins = null;
12
+ this.forkRelay = null;
13
+ this.forkUpstream = "";
14
+ this.dockStyle = "corner-pill";
12
15
  this._isOpen = false;
16
+ this.#ctrl = new WalletController(this);
17
+ this.#hadPendingRequest = false;
18
+ this.#handleKeydown = (event) => {
19
+ if (event.key === "Escape" && this._isOpen) this.#closePanel();
20
+ };
13
21
  }
14
22
  static {
15
23
  this.styles = [
@@ -19,152 +27,304 @@ let DevWalletPanel = class DevWalletPanel$1 extends LitElement {
19
27
  :host {
20
28
  display: block;
21
29
  position: fixed;
22
- bottom: 16px;
23
- right: 16px;
30
+ inset: 0;
24
31
  z-index: 999999;
25
- font-size: 14px;
32
+ font-size: 13px;
33
+ pointer-events: none;
26
34
  }
27
35
 
28
36
  .trigger {
29
- width: 48px;
30
- height: 48px;
31
- border-radius: 50%;
32
- background: var(--dev-wallet-primary);
33
- color: var(--dev-wallet-primary-foreground);
37
+ position: fixed;
38
+ right: 20px;
39
+ bottom: 20px;
40
+ width: 40px;
41
+ height: 40px;
42
+ border-radius: 999px;
43
+ background: var(--dev-wallet-surface);
44
+ color: var(--dev-wallet-primary);
45
+ border: 1px solid var(--dev-wallet-border-2);
34
46
  display: flex;
35
47
  align-items: center;
36
48
  justify-content: center;
37
49
  box-shadow: var(--dev-wallet-shadow-md);
38
- transition: transform 0.15s;
39
- position: relative;
50
+ transition:
51
+ transform 120ms,
52
+ box-shadow 120ms,
53
+ border-color 120ms;
54
+ pointer-events: auto;
55
+ z-index: 2;
40
56
  }
41
57
 
42
58
  .trigger:hover {
43
- transform: scale(1.05);
59
+ transform: translateY(-1px);
60
+ border-color: var(--dev-wallet-border-strong);
61
+ box-shadow:
62
+ var(--dev-wallet-shadow-md),
63
+ 0 0 0 4px var(--dev-wallet-accent-fade);
64
+ }
65
+
66
+ .trigger.side-tab {
67
+ top: 50%;
68
+ right: 0;
69
+ bottom: auto;
70
+ width: 34px;
71
+ height: 88px;
72
+ border-radius: 12px 0 0 12px;
73
+ transform: translateY(-50%);
74
+ }
75
+
76
+ .trigger.side-tab:hover {
77
+ transform: translateY(calc(-50% - 1px));
44
78
  }
45
79
 
46
80
  .trigger svg {
47
- width: 24px;
48
- height: 24px;
81
+ width: 20px;
82
+ height: 20px;
49
83
  }
50
84
 
51
- .sidebar {
85
+ .status-dot {
52
86
  position: absolute;
53
- bottom: 56px;
54
- right: 0;
55
- width: 360px;
56
- max-width: calc(100vw - 32px);
57
- max-height: 520px;
87
+ right: 3px;
88
+ bottom: 3px;
89
+ width: 10px;
90
+ height: 10px;
91
+ border-radius: 999px;
92
+ border: 2px solid var(--dev-wallet-surface);
93
+ background: var(--dev-wallet-status-connected);
94
+ }
95
+
96
+ .status-dot.notice {
97
+ background: var(--dev-wallet-primary);
98
+ animation: pulse-ring 1.6s ease-out infinite;
99
+ }
100
+
101
+ .scrim {
102
+ position: fixed;
103
+ inset: 0;
104
+ background: rgba(2, 6, 14, 0.4);
105
+ pointer-events: auto;
106
+ animation: fadein 160ms ease-out;
107
+ }
108
+
109
+ .sidebar {
110
+ position: fixed;
111
+ top: 12px;
112
+ right: 12px;
113
+ bottom: 76px;
114
+ width: 400px;
115
+ max-width: calc(100vw - 24px);
58
116
  border-radius: var(--dev-wallet-radius-xl);
59
- background: var(--dev-wallet-background);
60
- border: 1px solid var(--dev-wallet-border);
61
- box-shadow: var(--dev-wallet-shadow-lg);
117
+ background: var(--dev-wallet-surface);
118
+ border: 1px solid var(--dev-wallet-border-2);
119
+ box-shadow: var(--dev-wallet-shadow-drawer);
62
120
  display: flex;
63
121
  flex-direction: column;
122
+ overflow: hidden;
123
+ pointer-events: auto;
124
+ animation: slidein-right 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
125
+ }
126
+
127
+ .status-strip {
128
+ display: flex;
129
+ align-items: center;
130
+ gap: 8px;
131
+ min-height: 30px;
132
+ padding: 6px 10px 6px 12px;
133
+ border-bottom: 1px solid var(--dev-wallet-border);
134
+ background: var(--dev-wallet-bg-2);
135
+ }
136
+
137
+ .status-strip .host-origin {
138
+ flex: 1;
139
+ min-width: 0;
140
+ font-family: var(--dev-wallet-font-mono);
141
+ font-size: 10.5px;
142
+ color: var(--dev-wallet-text-3);
143
+ overflow: hidden;
144
+ text-overflow: ellipsis;
145
+ white-space: nowrap;
64
146
  }
65
147
 
66
148
  .sidebar-header {
67
149
  display: flex;
68
- justify-content: space-between;
69
150
  align-items: center;
70
- padding: 14px 16px;
151
+ gap: 8px;
152
+ padding: 10px 14px;
71
153
  border-bottom: 1px solid var(--dev-wallet-border);
154
+ background: var(--dev-wallet-bg-1);
72
155
  position: relative;
73
156
  z-index: 1;
74
157
  }
75
158
 
159
+ .brand {
160
+ display: flex;
161
+ align-items: center;
162
+ gap: 8px;
163
+ min-width: 0;
164
+ }
165
+
166
+ .logo-mark {
167
+ width: 20px;
168
+ height: 20px;
169
+ border-radius: 7px;
170
+ display: inline-flex;
171
+ align-items: center;
172
+ justify-content: center;
173
+ color: var(--dev-wallet-primary-foreground);
174
+ background:
175
+ radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 22px),
176
+ linear-gradient(135deg, var(--dev-wallet-primary), var(--dev-wallet-teal));
177
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
178
+ flex-shrink: 0;
179
+ }
180
+
181
+ .logo-mark svg {
182
+ width: 14px;
183
+ height: 14px;
184
+ }
185
+
186
+ .title-stack {
187
+ display: flex;
188
+ flex-direction: column;
189
+ line-height: 1.1;
190
+ min-width: 0;
191
+ }
192
+
76
193
  .sidebar-title {
77
- font-size: 15px;
194
+ font-size: 12.5px;
78
195
  font-weight: var(--dev-wallet-font-weight-semibold);
79
196
  color: var(--dev-wallet-foreground);
197
+ white-space: nowrap;
198
+ overflow: hidden;
199
+ text-overflow: ellipsis;
200
+ }
201
+
202
+ .version {
203
+ font-family: var(--dev-wallet-font-mono);
204
+ font-size: 9px;
205
+ letter-spacing: 0.12em;
206
+ text-transform: uppercase;
207
+ color: var(--dev-wallet-text-3);
208
+ }
209
+
210
+ .header-spacer {
211
+ flex: 1;
212
+ min-width: 8px;
80
213
  }
81
214
 
82
215
  .close-btn {
83
- font-size: 18px;
84
- color: var(--dev-wallet-muted-foreground);
85
- width: 28px;
86
- height: 28px;
216
+ color: var(--dev-wallet-text-3);
217
+ width: 24px;
218
+ height: 24px;
87
219
  display: flex;
88
220
  align-items: center;
89
221
  justify-content: center;
90
- border-radius: var(--dev-wallet-radius-xs);
222
+ border-radius: var(--dev-wallet-radius);
223
+ flex-shrink: 0;
91
224
  }
92
225
 
93
226
  .close-btn:hover {
94
- background: var(--dev-wallet-secondary);
227
+ background: var(--dev-wallet-bg-hover);
228
+ color: var(--dev-wallet-foreground);
229
+ }
230
+
231
+ .close-btn svg {
232
+ width: 14px;
233
+ height: 14px;
95
234
  }
96
235
 
97
236
  .sidebar-body {
98
- padding: 16px;
99
237
  overflow-y: auto;
100
238
  overflow-x: hidden;
101
239
  flex: 1;
102
240
  min-height: 0;
241
+ background: var(--dev-wallet-bg-0);
103
242
  }
104
243
 
105
244
  .section {
106
- margin-bottom: 16px;
245
+ padding: 14px;
246
+ border-bottom: 1px solid var(--dev-wallet-border);
107
247
  }
108
248
 
109
249
  .section:last-child {
110
- margin-bottom: 0;
250
+ border-bottom: 0;
251
+ }
252
+
253
+ @media (max-width: 520px) {
254
+ .sidebar {
255
+ left: 12px;
256
+ width: auto;
257
+ }
111
258
  }
112
259
  `
113
260
  ];
114
261
  }
115
- #ctrl = new WalletController(this);
116
- #hadPendingRequest = false;
262
+ #ctrl;
263
+ #hadPendingRequest;
117
264
  willUpdate(changedProperties) {
118
- if (changedProperties.has("wallet")) {
119
- this.#ctrl.wallet = this.wallet;
120
- }
265
+ if (changedProperties.has("wallet")) this.#ctrl.wallet = this.wallet;
266
+ if (changedProperties.has("coins")) this.#ctrl.coins = this.coins;
267
+ if (changedProperties.has("forkRelay")) this.#ctrl.forkRelay = this.forkRelay;
268
+ if (changedProperties.has("forkUpstream")) this.#ctrl.forkUpstream = this.forkUpstream;
121
269
  }
122
270
  updated() {
123
271
  const hasPending = this.#ctrl.pendingRequest !== null;
124
- if (this.#hadPendingRequest && !hasPending) {
125
- this.updateComplete.then(() => {
126
- this.shadowRoot?.querySelector("dev-wallet-balances")?.refresh();
127
- });
128
- }
272
+ if (this.#hadPendingRequest && !hasPending) this.updateComplete.then(() => {
273
+ this.shadowRoot?.querySelector("dev-wallet-balances")?.refresh();
274
+ });
129
275
  this.#hadPendingRequest = hasPending;
130
276
  const dialog = this.shadowRoot?.querySelector(".connect-dialog");
131
- if (this.#ctrl.pendingConnect && dialog && !dialog.open) {
132
- dialog.showModal();
133
- } else if (!this.#ctrl.pendingConnect && dialog?.open) {
134
- dialog.close();
135
- }
277
+ if (this.#ctrl.pendingConnect && dialog && !dialog.open) dialog.showModal();
278
+ else if (!this.#ctrl.pendingConnect && dialog?.open) dialog.close();
136
279
  }
137
280
  render() {
138
281
  return html`
139
282
  ${this._isOpen ? this.#renderSidebar() : nothing}
140
283
  <button
141
- class="trigger"
284
+ class="trigger ${this.dockStyle === "side-tab" ? "side-tab" : "corner-pill"}"
142
285
  part="trigger"
143
- aria-label="Open Dev Wallet"
286
+ aria-label=${this._isOpen ? "Close Dev Wallet" : "Open Dev Wallet"}
287
+ aria-expanded=${this._isOpen}
144
288
  @click=${this.#togglePanel}
145
289
  >
146
290
  ${this.#walletIcon}
291
+ <span
292
+ class="status-dot ${this.#ctrl.pendingRequest ? "notice" : ""}"
293
+ aria-hidden="true"
294
+ ></span>
147
295
  </button>
148
296
  ${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}
149
297
  `;
150
298
  }
151
299
  #renderSidebar() {
152
300
  return html`
301
+ <button class="scrim" aria-label="Close Dev Wallet" @click=${this.#closePanel}></button>
153
302
  <div class="sidebar" part="sidebar">
154
- <div class="sidebar-header">
155
- <span class="sidebar-title">${this.wallet?.name ?? "Dev Wallet"}</span>
156
- ${this.#ctrl.renderNetworkBadge()}
303
+ <div class="status-strip">
304
+ <span class="chip chip-success">connected</span>
305
+ <span class="host-origin">${globalThis.location?.origin ?? "embedded host"}</span>
157
306
  <button
158
307
  class="close-btn"
159
308
  part="close-button"
160
309
  aria-label="Close"
161
- @click=${this.#togglePanel}
310
+ @click=${this.#closePanel}
162
311
  >
163
- &times;
312
+ ${this.#closeIcon}
164
313
  </button>
165
314
  </div>
166
- <div class="sidebar-body">${this.#ctrl.renderTabContent()}</div>
315
+ <div class="sidebar-header">
316
+ <div class="brand">
317
+ <span class="logo-mark">${this.#walletIcon}</span>
318
+ <span class="title-stack">
319
+ <span class="sidebar-title">${this.wallet?.name ?? "Dev Wallet"}</span>
320
+ <span class="version">v0.1.0</span>
321
+ </span>
322
+ </div>
323
+ <span class="header-spacer"></span>
324
+ ${this.#ctrl.renderNetworkBadge()}
325
+ </div>
167
326
  ${this.#ctrl.renderTabBar()}
327
+ <div class="sidebar-body">${this.#ctrl.renderTabContent()}</div>
168
328
  </div>
169
329
  `;
170
330
  }
@@ -176,17 +336,40 @@ let DevWalletPanel = class DevWalletPanel$1 extends LitElement {
176
336
  <circle cx="17.5" cy="14" r="0.5" fill="currentColor" stroke="none" />
177
337
  </svg>`;
178
338
  }
339
+ get #closeIcon() {
340
+ return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
341
+ <path d="M18 6L6 18" />
342
+ <path d="M6 6l12 12" />
343
+ </svg>`;
344
+ }
179
345
  #togglePanel() {
180
346
  this._isOpen = !this._isOpen;
181
- if (this._isOpen) {
182
- this.#ctrl.syncState();
183
- }
347
+ if (this._isOpen) this.#ctrl.syncState();
348
+ }
349
+ #closePanel() {
350
+ this._isOpen = false;
351
+ }
352
+ #handleKeydown;
353
+ connectedCallback() {
354
+ super.connectedCallback();
355
+ window.addEventListener("keydown", this.#handleKeydown);
356
+ }
357
+ disconnectedCallback() {
358
+ window.removeEventListener("keydown", this.#handleKeydown);
359
+ super.disconnectedCallback();
184
360
  }
185
361
  };
186
362
  __decorate([property({ attribute: false })], DevWalletPanel.prototype, "wallet", void 0);
363
+ __decorate([property({ attribute: false })], DevWalletPanel.prototype, "coins", void 0);
364
+ __decorate([property({ attribute: false })], DevWalletPanel.prototype, "forkRelay", void 0);
365
+ __decorate([property({ type: String })], DevWalletPanel.prototype, "forkUpstream", void 0);
366
+ __decorate([property({
367
+ type: String,
368
+ attribute: "dock-style"
369
+ })], DevWalletPanel.prototype, "dockStyle", void 0);
187
370
  __decorate([state()], DevWalletPanel.prototype, "_isOpen", void 0);
188
371
  DevWalletPanel = __decorate([customElement("dev-wallet-panel")], DevWalletPanel);
189
-
190
372
  //#endregion
191
373
  export { DevWalletPanel };
374
+
192
375
  //# sourceMappingURL=dev-wallet-panel.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"dev-wallet-panel.mjs","names":["DevWalletPanel","#ctrl","#hadPendingRequest","#renderSidebar","#togglePanel","#walletIcon"],"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 { DevWallet } from '../wallet/dev-wallet.js';\nimport { connectDialogStyles, sharedStyles } from './styles.js';\nimport { WalletController } from './wallet-controller.js';\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\tbottom: 16px;\n\t\t\t\tright: 16px;\n\t\t\t\tz-index: 999999;\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\n\t\t\t.trigger {\n\t\t\t\twidth: 48px;\n\t\t\t\theight: 48px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t\tcolor: var(--dev-wallet-primary-foreground);\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: transform 0.15s;\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t.trigger:hover {\n\t\t\t\ttransform: scale(1.05);\n\t\t\t}\n\n\t\t\t.trigger svg {\n\t\t\t\twidth: 24px;\n\t\t\t\theight: 24px;\n\t\t\t}\n\n\t\t\t.sidebar {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: 56px;\n\t\t\t\tright: 0;\n\t\t\t\twidth: 360px;\n\t\t\t\tmax-width: calc(100vw - 32px);\n\t\t\t\tmax-height: 520px;\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\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t}\n\n\t\t\t.sidebar-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\tposition: relative;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\n\t\t\t.sidebar-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.close-btn {\n\t\t\t\tfont-size: 18px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\twidth: 28px;\n\t\t\t\theight: 28px;\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-xs);\n\t\t\t}\n\n\t\t\t.close-btn:hover {\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t}\n\n\t\t\t.sidebar-body {\n\t\t\t\tpadding: 16px;\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}\n\n\t\t\t.section {\n\t\t\t\tmargin-bottom: 16px;\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\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}\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\"\n\t\t\t\tpart=\"trigger\"\n\t\t\t\taria-label=\"Open Dev Wallet\"\n\t\t\t\t@click=${this.#togglePanel}\n\t\t\t>\n\t\t\t\t${this.#walletIcon}\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<div class=\"sidebar\" part=\"sidebar\">\n\t\t\t\t<div class=\"sidebar-header\">\n\t\t\t\t\t<span class=\"sidebar-title\">${this.wallet?.name ?? 'Dev Wallet'}</span>\n\t\t\t\t\t${this.#ctrl.renderNetworkBadge()}\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.#togglePanel}\n\t\t\t\t\t>\n\t\t\t\t\t\t&times;\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"sidebar-body\">${this.#ctrl.renderTabContent()}</div>\n\t\t\t\t${this.#ctrl.renderTabBar()}\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\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\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-panel': DevWalletPanel;\n\t}\n}\n"],"mappings":";;;;;;;AAWO,2BAAMA,yBAAuB,WAAW;;;gBAsGnB;iBAGT;;;gBAxGO;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FH;;CAQD,QAAQ,IAAI,iBAAiB,KAAK;CAClC,qBAAqB;CAErB,AAAS,WAAW,mBAAyC;AAC5D,MAAI,kBAAkB,IAAI,SAAS,EAAE;AACpC,SAAKC,KAAM,SAAS,KAAK;;;CAI3B,AAAS,UAAU;EAElB,MAAM,aAAa,MAAKA,KAAM,mBAAmB;AACjD,MAAI,MAAKC,qBAAsB,CAAC,YAAY;AAC3C,QAAK,eAAe,WAAW;AAC9B,SAAK,YACF,cAEA,sBAAsB,EACtB,SAAS;KACX;;AAEH,QAAKA,oBAAqB;EAE1B,MAAM,SAAS,KAAK,YAAY,cAAiC,kBAAkB;AACnF,MAAI,MAAKD,KAAM,kBAAkB,UAAU,CAAC,OAAO,MAAM;AACxD,UAAO,WAAW;aACR,CAAC,MAAKA,KAAM,kBAAkB,QAAQ,MAAM;AACtD,UAAO,OAAO;;;CAIhB,AAAS,SAAS;AACjB,SAAO,IAAI;KACR,KAAK,UAAU,MAAKE,eAAgB,GAAG,QAAQ;;;;;aAKvC,MAAKC,YAAa;;MAEzB,MAAKC,WAAY;;KAElB,MAAKJ,KAAM,oBAAoB,CAAC,GAAG,MAAKA,KAAM,qBAAqB,CAAC;;;CAIxE,iBAAiB;AAChB,SAAO,IAAI;;;mCAGsB,KAAK,QAAQ,QAAQ,aAAa;OAC9D,MAAKA,KAAM,oBAAoB,CAAC;;;;;eAKxB,MAAKG,YAAa;;;;;gCAKD,MAAKH,KAAM,kBAAkB,CAAC;MACxD,MAAKA,KAAM,cAAc,CAAC;;;;CAK/B,KAAII,aAAc;AACjB,SAAO,IAAI;;;;;;;CAQZ,eAAe;AACd,OAAK,UAAU,CAAC,KAAK;AACrB,MAAI,KAAK,SAAS;AACjB,SAAKJ,KAAM,WAAW;;;;YArFvB,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,OAAO;6BAzGR,cAAc,mBAAmB"}
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":";;;;;;AAeO,IAAA,iBAAA,MAAM,uBAAuB,WAAW;;;gBAiPnB;eAMA;mBAQG;sBAMf;mBAGiB;iBAGd;eAEV,IAAI,iBAAiB,KAAK;4BACb;yBAuHH,UAAyB;AAC1C,OAAI,MAAM,QAAQ,YAAY,KAAK,QAClC,OAAA,YAAkB;;;;gBAtYK;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0OH;;CA+BD;CACA;CAEA,WAAoB,mBAAyC;AAC5D,MAAI,kBAAkB,IAAI,SAAS,CAClC,OAAA,KAAW,SAAS,KAAK;AAE1B,MAAI,kBAAkB,IAAI,QAAQ,CACjC,OAAA,KAAW,QAAQ,KAAK;AAEzB,MAAI,kBAAkB,IAAI,YAAY,CACrC,OAAA,KAAW,YAAY,KAAK;AAE7B,MAAI,kBAAkB,IAAI,eAAe,CACxC,OAAA,KAAW,eAAe,KAAK;;CAIjC,UAAmB;EAElB,MAAM,aAAa,MAAA,KAAW,mBAAmB;AACjD,MAAI,MAAA,qBAA2B,CAAC,WAC/B,MAAK,eAAe,WAAW;AAC9B,QAAK,YACF,cAEA,sBAAsB,EACtB,SAAS;IACX;AAEH,QAAA,oBAA0B;EAE1B,MAAM,SAAS,KAAK,YAAY,cAAiC,kBAAkB;AACnF,MAAI,MAAA,KAAW,kBAAkB,UAAU,CAAC,OAAO,KAClD,QAAO,WAAW;WACR,CAAC,MAAA,KAAW,kBAAkB,QAAQ,KAChD,QAAO,OAAO;;CAIhB,SAAkB;AACjB,SAAO,IAAI;KACR,KAAK,UAAU,MAAA,eAAqB,GAAG,QAAQ;;qBAE/B,KAAK,cAAc,aAAa,aAAa,cAAc;;iBAE/D,KAAK,UAAU,qBAAqB,kBAAkB;oBACnD,KAAK,QAAQ;aACpB,MAAA,YAAkB;;MAEzB,MAAA,WAAiB;;yBAEE,MAAA,KAAW,iBAAiB,WAAW,GAAG;;;;KAI9D,MAAA,KAAW,oBAAoB,CAAC,GAAG,MAAA,KAAW,qBAAqB,CAAC;;;CAIxE,iBAAiB;AAChB,SAAO,IAAI;gEACmD,MAAA,WAAiB;;;;iCAIhD,WAAW,UAAU,UAAU,gBAAgB;;;;;eAKjE,MAAA,WAAiB;;QAExB,MAAA,UAAgB;;;;;gCAKQ,MAAA,WAAiB;;qCAEZ,KAAK,QAAQ,QAAQ,aAAa;;;;;OAKhE,MAAA,KAAW,oBAAoB,CAAC;;MAEjC,MAAA,KAAW,cAAc,CAAC;gCACA,MAAA,KAAW,kBAAkB,CAAC;;;;CAK7D,KAAA,aAAkB;AACjB,SAAO,IAAI;;;;;;;CAQZ,KAAA,YAAiB;AAChB,SAAO,IAAI;;;;;CAMZ,eAAe;AACd,OAAK,UAAU,CAAC,KAAK;AACrB,MAAI,KAAK,QACR,OAAA,KAAW,WAAW;;CAIxB,cAAc;AACb,OAAK,UAAU;;CAGhB;CAMA,oBAA6B;AAC5B,QAAM,mBAAmB;AACzB,SAAO,iBAAiB,WAAW,MAAA,cAAoB;;CAGxD,uBAAgC;AAC/B,SAAO,oBAAoB,WAAW,MAAA,cAAoB;AAC1D,QAAM,sBAAsB;;;YAlK5B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAM9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAQ9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAM9B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAG1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAGnD,OAAO,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;6BA3QR,cAAc,mBAAmB,CAAA,EAAA,eAAA"}
@@ -1,13 +1,11 @@
1
- import "./dev-wallet-signing.mjs";
2
- import "./dev-wallet-connect.mjs";
3
- import * as lit23 from "lit";
1
+ import * as _$lit from "lit";
4
2
  import { LitElement } from "lit";
5
3
  import { ClientWithCoreApi } from "@mysten/sui/client";
6
4
 
7
5
  //#region src/ui/dev-wallet-popup.d.ts
8
6
  declare class DevWalletPopup extends LitElement {
9
7
  #private;
10
- static styles: (lit23.CSSResult | lit23.CSSResult[])[];
8
+ static styles: (_$lit.CSSResult | _$lit.CSSResult[])[];
11
9
  walletName: string;
12
10
  requestType: 'connect' | 'sign-transaction' | 'sign-and-execute-transaction' | 'sign-personal-message';
13
11
  appName: string;
@@ -24,7 +22,7 @@ declare class DevWalletPopup extends LitElement {
24
22
  }>;
25
23
  private _request;
26
24
  willUpdate(changed: Map<string, unknown>): void;
27
- render(): lit23.TemplateResult<1>;
25
+ render(): _$lit.TemplateResult<1>;
28
26
  }
29
27
  declare global {
30
28
  interface HTMLElementTagNameMap {
@@ -1 +1 @@
1
- {"version":3,"file":"dev-wallet-popup.d.mts","names":[],"sources":["../../src/ui/dev-wallet-popup.ts"],"mappings":";;;;;;;cAaa,cAAA,SAAuB,UAAA;EAAA;SACnB,MAAA,GADW,KAAA,CACL,SAAA,GAAA,KAAA,CAAA,SAAA;EA+CtB,UAAA;EAGA,WAAA;EAOA,OAAA;EAGA,MAAA;EAGA,OAAA;EAGA,YAAA;EAGA,KAAA;EAGA,IAAA,WAAe,UAAA;EAGf,MAAA,EAAQ,iBAAA;EAGR,eAAA,EAAiB,KAAA;IAAQ,OAAA;IAAiB,KAAA;IAAgB,WAAA;EAAA;EAAA,QAGlD,QAAA;EAIC,UAAA,CAAW,OAAA,EAAS,GAAA;EA4BpB,MAAA,CAAA,GA5BuB,KAAA,CA4BjB,cAAA;AAAA;AAAA,QAqCR,MAAA;EAAA,UACG,qBAAA;IACT,kBAAA,EAAoB,cAAA;EAAA;AAAA"}
1
+ {"version":3,"file":"dev-wallet-popup.d.mts","names":[],"sources":["../../src/ui/dev-wallet-popup.ts"],"mappings":";;;;;cAaa,cAAA,SAAuB,UAAA;EAAA;SACnB,MAAA,GADW,KAAA,CACL,SAAA,GAAA,KAAA,CAAA,SAAA;EAqDtB,UAAA;EAGA,WAAA;EAOA,OAAA;EAGA,MAAA;EAGA,OAAA;EAGA,YAAA;EAGA,KAAA;EAGA,IAAA,WAAe,UAAA;EAGf,MAAA,EAAQ,iBAAA;EAGR,eAAA,EAAiB,KAAA;IAAQ,OAAA;IAAiB,KAAA;IAAgB,WAAA;EAAA;EAAA,QAGlD,QAAA;EAIC,UAAA,CAAW,OAAA,EAAS,GAAA;EA4BpB,MAAA,CAAA,GA5BuB,KAAA,CA4BjB,cAAA;AAAA;AAAA,QAqCR,MAAA;EAAA,UACG,qBAAA;IACT,kBAAA,EAAoB,cAAA;EAAA;AAAA"}
@@ -1,12 +1,11 @@
1
1
  import { sharedStyles } from "./styles.mjs";
2
- import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
2
+ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.mjs";
3
3
  import "./dev-wallet-connect.mjs";
4
4
  import "./dev-wallet-signing.mjs";
5
5
  import { LitElement, css, html } from "lit";
6
6
  import { customElement, property, state } from "lit/decorators.js";
7
-
8
7
  //#region src/ui/dev-wallet-popup.ts
9
- let DevWalletPopup = class DevWalletPopup$1 extends LitElement {
8
+ let DevWalletPopup = class DevWalletPopup extends LitElement {
10
9
  constructor(..._args) {
11
10
  super(..._args);
12
11
  this.walletName = "Dev Wallet (Web)";
@@ -20,6 +19,7 @@ let DevWalletPopup = class DevWalletPopup$1 extends LitElement {
20
19
  this.client = null;
21
20
  this.connectAccounts = [];
22
21
  this._request = null;
22
+ this.#requestId = null;
23
23
  }
24
24
  static {
25
25
  this.styles = [sharedStyles, css`
@@ -29,14 +29,19 @@ let DevWalletPopup = class DevWalletPopup$1 extends LitElement {
29
29
  justify-content: center;
30
30
  min-height: 100vh;
31
31
  padding: 20px;
32
+ background-color: var(--dev-wallet-bg-0);
33
+ background-image:
34
+ linear-gradient(var(--dev-wallet-border) 1px, transparent 1px),
35
+ linear-gradient(90deg, var(--dev-wallet-border) 1px, transparent 1px);
36
+ background-size: 32px 32px;
32
37
  }
33
38
 
34
39
  .popup-card {
35
- width: 360px;
36
- max-height: min(600px, 80vh);
40
+ width: 440px;
41
+ max-height: min(680px, 86vh);
37
42
  border-radius: var(--dev-wallet-radius-xl);
38
- background: var(--dev-wallet-background);
39
- border: 1px solid var(--dev-wallet-border);
43
+ background: var(--dev-wallet-surface);
44
+ border: 1px solid var(--dev-wallet-border-2);
40
45
  box-shadow: var(--dev-wallet-shadow-lg);
41
46
  overflow: hidden;
42
47
  display: flex;
@@ -47,12 +52,13 @@ let DevWalletPopup = class DevWalletPopup$1 extends LitElement {
47
52
  display: flex;
48
53
  justify-content: space-between;
49
54
  align-items: center;
50
- padding: 14px 16px;
55
+ padding: 12px 14px;
51
56
  border-bottom: 1px solid var(--dev-wallet-border);
57
+ background: var(--dev-wallet-bg-1);
52
58
  }
53
59
 
54
60
  .popup-title {
55
- font-size: 15px;
61
+ font-size: 13px;
56
62
  font-weight: var(--dev-wallet-font-weight-semibold);
57
63
  color: var(--dev-wallet-foreground);
58
64
  }
@@ -65,18 +71,16 @@ let DevWalletPopup = class DevWalletPopup$1 extends LitElement {
65
71
  }
66
72
  `];
67
73
  }
68
- #requestId = null;
74
+ #requestId;
69
75
  willUpdate(changed) {
70
76
  if (this.requestType !== "connect" && (changed.has("requestType") || changed.has("address") || changed.has("accountLabel") || changed.has("chain") || changed.has("data"))) {
71
- if (!this.#requestId) {
72
- this.#requestId = crypto.randomUUID();
73
- }
77
+ if (!this.#requestId) this.#requestId = crypto.randomUUID();
74
78
  this._request = {
75
79
  id: this.#requestId,
76
80
  type: this.requestType,
77
81
  account: {
78
82
  address: this.address,
79
- label: this.accountLabel || undefined,
83
+ label: this.accountLabel || void 0,
80
84
  publicKey: new Uint8Array(0),
81
85
  chains: [],
82
86
  features: []
@@ -131,7 +135,7 @@ __decorate([property({ attribute: false })], DevWalletPopup.prototype, "client",
131
135
  __decorate([property({ attribute: false })], DevWalletPopup.prototype, "connectAccounts", void 0);
132
136
  __decorate([state()], DevWalletPopup.prototype, "_request", void 0);
133
137
  DevWalletPopup = __decorate([customElement("dev-wallet-popup")], DevWalletPopup);
134
-
135
138
  //#endregion
136
139
  export { DevWalletPopup };
140
+
137
141
  //# sourceMappingURL=dev-wallet-popup.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"dev-wallet-popup.mjs","names":["DevWalletPopup","#requestId","#renderConnect","#renderSigning"],"sources":["../../src/ui/dev-wallet-popup.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 } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport type { PendingSigningRequest } from '../wallet/dev-wallet.js';\nimport { sharedStyles } from './styles.js';\nimport './dev-wallet-connect.js';\nimport './dev-wallet-signing.js';\n\n@customElement('dev-wallet-popup')\nexport class DevWalletPopup extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-height: 100vh;\n\t\t\t\tpadding: 20px;\n\t\t\t}\n\n\t\t\t.popup-card {\n\t\t\t\twidth: 360px;\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}\n\n\t\t\t.popup-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.popup-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.popup-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({ type: String })\n\twalletName = 'Dev Wallet (Web)';\n\n\t@property({ type: String })\n\trequestType:\n\t\t| 'connect'\n\t\t| 'sign-transaction'\n\t\t| 'sign-and-execute-transaction'\n\t\t| 'sign-personal-message' = 'connect';\n\n\t@property({ type: String })\n\tappName = '';\n\n\t@property({ type: String })\n\tappUrl = '';\n\n\t@property({ type: String })\n\taddress = '';\n\n\t@property({ type: String })\n\taccountLabel = '';\n\n\t@property({ type: String })\n\tchain = '';\n\n\t@property({ attribute: false })\n\tdata: string | Uint8Array | null = null;\n\n\t@property({ attribute: false })\n\tclient: ClientWithCoreApi | null = null;\n\n\t@property({ attribute: false })\n\tconnectAccounts: Array<{ address: string; label?: string; adapterName?: string }> = [];\n\n\t@state()\n\tprivate _request: PendingSigningRequest | null = null;\n\n\t#requestId: string | null = null;\n\n\toverride willUpdate(changed: Map<string, unknown>) {\n\t\tif (\n\t\t\tthis.requestType !== 'connect' &&\n\t\t\t(changed.has('requestType') ||\n\t\t\t\tchanged.has('address') ||\n\t\t\t\tchanged.has('accountLabel') ||\n\t\t\t\tchanged.has('chain') ||\n\t\t\t\tchanged.has('data'))\n\t\t) {\n\t\t\tif (!this.#requestId) {\n\t\t\t\tthis.#requestId = crypto.randomUUID();\n\t\t\t}\n\t\t\tthis._request = {\n\t\t\t\tid: this.#requestId,\n\t\t\t\ttype: this.requestType as PendingSigningRequest['type'],\n\t\t\t\taccount: {\n\t\t\t\t\taddress: this.address,\n\t\t\t\t\tlabel: this.accountLabel || undefined,\n\t\t\t\t\tpublicKey: new Uint8Array(0),\n\t\t\t\t\tchains: [],\n\t\t\t\t\tfeatures: [],\n\t\t\t\t},\n\t\t\t\tchain: this.chain,\n\t\t\t\tdata: this.data ?? '',\n\t\t\t};\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"popup-card\" part=\"card\">\n\t\t\t\t<div class=\"popup-header\">\n\t\t\t\t\t<span class=\"popup-title\">${this.walletName}</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"popup-body\">\n\t\t\t\t\t${this.requestType === 'connect' ? this.#renderConnect() : this.#renderSigning()}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#renderConnect() {\n\t\treturn html`\n\t\t\t<dev-wallet-connect\n\t\t\t\texportparts=\"approve-button: connect-approve-button, reject-button: connect-reject-button, account-list: connect-account-list, error-message: connect-error-message\"\n\t\t\t\t.appName=${this.appName}\n\t\t\t\t.appUrl=${this.appUrl}\n\t\t\t\t.accounts=${this.connectAccounts}\n\t\t\t></dev-wallet-connect>\n\t\t`;\n\t}\n\n\t#renderSigning() {\n\t\tif (!this._request) return html``;\n\n\t\treturn html`\n\t\t\t<dev-wallet-signing\n\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.request=${this._request}\n\t\t\t\t.client=${this.client}\n\t\t\t></dev-wallet-signing>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-popup': DevWalletPopup;\n\t}\n}\n"],"mappings":";;;;;;;;AAaO,2BAAMA,yBAAuB,WAAW;;;oBAgDjC;qBAOgB;iBAGnB;gBAGD;iBAGC;sBAGK;eAGP;cAG2B;gBAGA;yBAGiD,EAAE;kBAGrC;;;gBAjFxB,CACxB,cACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0CH;;CAuCD,aAA4B;CAE5B,AAAS,WAAW,SAA+B;AAClD,MACC,KAAK,gBAAgB,cACpB,QAAQ,IAAI,cAAc,IAC1B,QAAQ,IAAI,UAAU,IACtB,QAAQ,IAAI,eAAe,IAC3B,QAAQ,IAAI,QAAQ,IACpB,QAAQ,IAAI,OAAO,GACnB;AACD,OAAI,CAAC,MAAKC,WAAY;AACrB,UAAKA,YAAa,OAAO,YAAY;;AAEtC,QAAK,WAAW;IACf,IAAI,MAAKA;IACT,MAAM,KAAK;IACX,SAAS;KACR,SAAS,KAAK;KACd,OAAO,KAAK,gBAAgB;KAC5B,WAAW,IAAI,WAAW,EAAE;KAC5B,QAAQ,EAAE;KACV,UAAU,EAAE;KACZ;IACD,OAAO,KAAK;IACZ,MAAM,KAAK,QAAQ;IACnB;;;CAIH,AAAS,SAAS;AACjB,SAAO,IAAI;;;iCAGoB,KAAK,WAAW;;;OAG1C,KAAK,gBAAgB,YAAY,MAAKC,eAAgB,GAAG,MAAKC,eAAgB,CAAC;;;;;CAMrF,iBAAiB;AAChB,SAAO,IAAI;;;eAGE,KAAK,QAAQ;cACd,KAAK,OAAO;gBACV,KAAK,gBAAgB;;;;CAKpC,iBAAiB;AAChB,MAAI,CAAC,KAAK,SAAU,QAAO,IAAI;AAE/B,SAAO,IAAI;;;eAGE,KAAK,SAAS;cACf,KAAK,OAAO;;;;;YAlGxB,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAO1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,OAAO;6BAlFR,cAAc,mBAAmB"}
1
+ {"version":3,"file":"dev-wallet-popup.mjs","names":["#requestId","#renderConnect","#renderSigning"],"sources":["../../src/ui/dev-wallet-popup.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 } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport type { PendingSigningRequest } from '../wallet/dev-wallet.js';\nimport { sharedStyles } from './styles.js';\nimport './dev-wallet-connect.js';\nimport './dev-wallet-signing.js';\n\n@customElement('dev-wallet-popup')\nexport class DevWalletPopup extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-height: 100vh;\n\t\t\t\tpadding: 20px;\n\t\t\t\tbackground-color: var(--dev-wallet-bg-0);\n\t\t\t\tbackground-image:\n\t\t\t\t\tlinear-gradient(var(--dev-wallet-border) 1px, transparent 1px),\n\t\t\t\t\tlinear-gradient(90deg, var(--dev-wallet-border) 1px, transparent 1px);\n\t\t\t\tbackground-size: 32px 32px;\n\t\t\t}\n\n\t\t\t.popup-card {\n\t\t\t\twidth: 440px;\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}\n\n\t\t\t.popup-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.popup-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.popup-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({ type: String })\n\twalletName = 'Dev Wallet (Web)';\n\n\t@property({ type: String })\n\trequestType:\n\t\t| 'connect'\n\t\t| 'sign-transaction'\n\t\t| 'sign-and-execute-transaction'\n\t\t| 'sign-personal-message' = 'connect';\n\n\t@property({ type: String })\n\tappName = '';\n\n\t@property({ type: String })\n\tappUrl = '';\n\n\t@property({ type: String })\n\taddress = '';\n\n\t@property({ type: String })\n\taccountLabel = '';\n\n\t@property({ type: String })\n\tchain = '';\n\n\t@property({ attribute: false })\n\tdata: string | Uint8Array | null = null;\n\n\t@property({ attribute: false })\n\tclient: ClientWithCoreApi | null = null;\n\n\t@property({ attribute: false })\n\tconnectAccounts: Array<{ address: string; label?: string; adapterName?: string }> = [];\n\n\t@state()\n\tprivate _request: PendingSigningRequest | null = null;\n\n\t#requestId: string | null = null;\n\n\toverride willUpdate(changed: Map<string, unknown>) {\n\t\tif (\n\t\t\tthis.requestType !== 'connect' &&\n\t\t\t(changed.has('requestType') ||\n\t\t\t\tchanged.has('address') ||\n\t\t\t\tchanged.has('accountLabel') ||\n\t\t\t\tchanged.has('chain') ||\n\t\t\t\tchanged.has('data'))\n\t\t) {\n\t\t\tif (!this.#requestId) {\n\t\t\t\tthis.#requestId = crypto.randomUUID();\n\t\t\t}\n\t\t\tthis._request = {\n\t\t\t\tid: this.#requestId,\n\t\t\t\ttype: this.requestType as PendingSigningRequest['type'],\n\t\t\t\taccount: {\n\t\t\t\t\taddress: this.address,\n\t\t\t\t\tlabel: this.accountLabel || undefined,\n\t\t\t\t\tpublicKey: new Uint8Array(0),\n\t\t\t\t\tchains: [],\n\t\t\t\t\tfeatures: [],\n\t\t\t\t},\n\t\t\t\tchain: this.chain,\n\t\t\t\tdata: this.data ?? '',\n\t\t\t};\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"popup-card\" part=\"card\">\n\t\t\t\t<div class=\"popup-header\">\n\t\t\t\t\t<span class=\"popup-title\">${this.walletName}</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"popup-body\">\n\t\t\t\t\t${this.requestType === 'connect' ? this.#renderConnect() : this.#renderSigning()}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#renderConnect() {\n\t\treturn html`\n\t\t\t<dev-wallet-connect\n\t\t\t\texportparts=\"approve-button: connect-approve-button, reject-button: connect-reject-button, account-list: connect-account-list, error-message: connect-error-message\"\n\t\t\t\t.appName=${this.appName}\n\t\t\t\t.appUrl=${this.appUrl}\n\t\t\t\t.accounts=${this.connectAccounts}\n\t\t\t></dev-wallet-connect>\n\t\t`;\n\t}\n\n\t#renderSigning() {\n\t\tif (!this._request) return html``;\n\n\t\treturn html`\n\t\t\t<dev-wallet-signing\n\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.request=${this._request}\n\t\t\t\t.client=${this.client}\n\t\t\t></dev-wallet-signing>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-popup': DevWalletPopup;\n\t}\n}\n"],"mappings":";;;;;;;AAaO,IAAA,iBAAA,MAAM,uBAAuB,WAAW;;;oBAsDjC;qBAOgB;iBAGnB;gBAGD;iBAGC;sBAGK;eAGP;cAG2B;gBAGA;yBAGiD,EAAE;kBAGrC;oBAErB;;;gBAzFH,CACxB,cACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgDH;;CAuCD;CAEA,WAAoB,SAA+B;AAClD,MACC,KAAK,gBAAgB,cACpB,QAAQ,IAAI,cAAc,IAC1B,QAAQ,IAAI,UAAU,IACtB,QAAQ,IAAI,eAAe,IAC3B,QAAQ,IAAI,QAAQ,IACpB,QAAQ,IAAI,OAAO,GACnB;AACD,OAAI,CAAC,MAAA,UACJ,OAAA,YAAkB,OAAO,YAAY;AAEtC,QAAK,WAAW;IACf,IAAI,MAAA;IACJ,MAAM,KAAK;IACX,SAAS;KACR,SAAS,KAAK;KACd,OAAO,KAAK,gBAAgB;KAC5B,WAAW,IAAI,WAAW,EAAE;KAC5B,QAAQ,EAAE;KACV,UAAU,EAAE;KACZ;IACD,OAAO,KAAK;IACZ,MAAM,KAAK,QAAQ;IACnB;;;CAIH,SAAkB;AACjB,SAAO,IAAI;;;iCAGoB,KAAK,WAAW;;;OAG1C,KAAK,gBAAgB,YAAY,MAAA,eAAqB,GAAG,MAAA,eAAqB,CAAC;;;;;CAMrF,iBAAiB;AAChB,SAAO,IAAI;;;eAGE,KAAK,QAAQ;cACd,KAAK,OAAO;gBACV,KAAK,gBAAgB;;;;CAKpC,iBAAiB;AAChB,MAAI,CAAC,KAAK,SAAU,QAAO,IAAI;AAE/B,SAAO,IAAI;;;eAGE,KAAK,SAAS;cACf,KAAK,OAAO;;;;;YAlGxB,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,eAAA,KAAA,EAAA;YAO1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,mBAAA,KAAA,EAAA;YAG9B,OAAO,CAAA,EAAA,eAAA,WAAA,YAAA,KAAA,EAAA;6BAxFR,cAAc,mBAAmB,CAAA,EAAA,eAAA"}