ethagent 1.1.0 → 1.1.2
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.
- package/README.md +19 -80
- package/package.json +10 -8
- package/src/app/FirstRun.tsx +2 -0
- package/src/chat/ChatScreen.tsx +8 -3
- package/src/chat/ContinuityEditReviewView.tsx +6 -0
- package/src/chat/ConversationStack.tsx +3 -0
- package/src/chat/TranscriptView.tsx +6 -0
- package/src/chat/chatTurnOrchestrator.ts +1 -1
- package/src/cli/updateNotice.ts +1 -1
- package/src/identity/hub/IdentityHub.tsx +4 -2
- package/src/identity/hub/identityHubModel.ts +80 -0
- package/src/identity/hub/identityHubReducer.ts +2 -2
- package/src/identity/hub/screens/ContinuityDashboardScreen.tsx +14 -2
- package/src/identity/hub/screens/EditProfileFlow.tsx +1 -0
- package/src/identity/hub/screens/ErrorScreen.tsx +1 -1
- package/src/identity/hub/screens/IdentitySummary.tsx +36 -20
- package/src/identity/hub/screens/MenuScreen.tsx +2 -2
- package/src/identity/hub/screens/RecoveryConfirmScreen.tsx +24 -16
- package/src/identity/hub/screens/StorageCredentialScreen.tsx +3 -0
- package/src/identity/wallet/wallet-page/wallet.html +370 -379
- package/src/ui/Select.tsx +1 -1
- package/src/ui/Surface.tsx +1 -1
- package/src/ui/TextInput.tsx +142 -23
|
@@ -27,6 +27,17 @@
|
|
|
27
27
|
--c-blue-700: #2954c6;
|
|
28
28
|
--c-danger: #e5484d;
|
|
29
29
|
--c-success: #1aa86b;
|
|
30
|
+
--pastel-red: #f6b7ba;
|
|
31
|
+
--pastel-peach: #f8cdbb;
|
|
32
|
+
--pastel-yellow: #f5e6b3;
|
|
33
|
+
--pastel-mint: #bfe8cd;
|
|
34
|
+
--pastel-sky: #bfdcf4;
|
|
35
|
+
--pastel-blue: #a9c7f7;
|
|
36
|
+
--mint-accent: #7070f0;
|
|
37
|
+
--mint-accent-strong: #5858d8;
|
|
38
|
+
--mint-accent-soft: rgba(112, 112, 240, 0.16);
|
|
39
|
+
--mint-glow: rgba(112, 112, 240, 0.28);
|
|
40
|
+
--c-text-accent: #9eaae0;
|
|
30
41
|
--ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
|
|
31
42
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
32
43
|
--fg-1: #1f2330;
|
|
@@ -39,55 +50,55 @@
|
|
|
39
50
|
overflow: hidden;
|
|
40
51
|
}
|
|
41
52
|
|
|
42
|
-
body {
|
|
43
|
-
position: relative;
|
|
44
|
-
font-family: var(--font-ui);
|
|
45
|
-
color: var(--fg-1);
|
|
46
|
-
background: #fbfaf6;
|
|
47
|
-
display: grid;
|
|
48
|
-
place-items: center;
|
|
49
|
-
padding: clamp(18px, 3vw, 28px);
|
|
53
|
+
body {
|
|
54
|
+
position: relative;
|
|
55
|
+
font-family: var(--font-ui);
|
|
56
|
+
color: var(--fg-1);
|
|
57
|
+
background: #fbfaf6;
|
|
58
|
+
display: grid;
|
|
59
|
+
place-items: center;
|
|
60
|
+
padding: clamp(18px, 3vw, 28px);
|
|
50
61
|
}
|
|
51
62
|
|
|
52
63
|
body::before {
|
|
53
64
|
content: "";
|
|
54
65
|
position: fixed;
|
|
55
|
-
inset: 0;
|
|
56
|
-
z-index: 0;
|
|
57
|
-
background:
|
|
58
|
-
radial-gradient(55% 45% at 12% 18%, rgba(245, 216, 216, 0.85), transparent 65%),
|
|
59
|
-
radial-gradient(60% 50% at 88% 22%, rgba(245, 231, 207, 0.85), transparent 65%),
|
|
60
|
-
radial-gradient(55% 55% at 50% 50%, rgba(245, 240, 212, 0.75), transparent 70%),
|
|
61
|
-
radial-gradient(60% 55% at 18% 88%, rgba(212, 238, 221, 0.85), transparent 65%),
|
|
62
|
-
radial-gradient(60% 55% at 85% 85%, rgba(212, 230, 245, 0.85), transparent 65%),
|
|
63
|
-
linear-gradient(180deg, #fef3ee 0%, #fef7e8 40%, #f1f9ee 75%, #ecf3fb 100%);
|
|
64
|
-
filter: saturate(1.05);
|
|
66
|
+
inset: 0;
|
|
67
|
+
z-index: 0;
|
|
68
|
+
background:
|
|
69
|
+
radial-gradient(55% 45% at 12% 18%, rgba(245, 216, 216, 0.85), transparent 65%),
|
|
70
|
+
radial-gradient(60% 50% at 88% 22%, rgba(245, 231, 207, 0.85), transparent 65%),
|
|
71
|
+
radial-gradient(55% 55% at 50% 50%, rgba(245, 240, 212, 0.75), transparent 70%),
|
|
72
|
+
radial-gradient(60% 55% at 18% 88%, rgba(212, 238, 221, 0.85), transparent 65%),
|
|
73
|
+
radial-gradient(60% 55% at 85% 85%, rgba(212, 230, 245, 0.85), transparent 65%),
|
|
74
|
+
linear-gradient(180deg, #fef3ee 0%, #fef7e8 40%, #f1f9ee 75%, #ecf3fb 100%);
|
|
75
|
+
filter: saturate(1.05);
|
|
65
76
|
}
|
|
66
77
|
|
|
67
78
|
body::after {
|
|
68
79
|
content: "";
|
|
69
80
|
position: fixed;
|
|
70
|
-
inset: 0;
|
|
71
|
-
z-index: 0;
|
|
72
|
-
pointer-events: none;
|
|
73
|
-
background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
|
|
74
|
-
background-size: 3px 3px;
|
|
75
|
-
mix-blend-mode: multiply;
|
|
76
|
-
opacity: 0.6;
|
|
81
|
+
inset: 0;
|
|
82
|
+
z-index: 0;
|
|
83
|
+
pointer-events: none;
|
|
84
|
+
background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
|
|
85
|
+
background-size: 3px 3px;
|
|
86
|
+
mix-blend-mode: multiply;
|
|
87
|
+
opacity: 0.6;
|
|
77
88
|
}
|
|
78
89
|
|
|
79
90
|
main {
|
|
80
91
|
position: relative;
|
|
81
92
|
z-index: 1;
|
|
82
|
-
width: min(700px, 100%);
|
|
83
|
-
max-height: calc(100dvh - 36px);
|
|
93
|
+
width: min(700px, 100%);
|
|
94
|
+
max-height: calc(100dvh - 36px);
|
|
84
95
|
display: flex;
|
|
85
96
|
flex-direction: column;
|
|
86
97
|
background: rgba(255, 255, 255, 0.95);
|
|
87
98
|
backdrop-filter: blur(40px) saturate(1.4);
|
|
88
99
|
-webkit-backdrop-filter: blur(40px) saturate(1.4);
|
|
89
100
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
90
|
-
border-radius: 26px;
|
|
101
|
+
border-radius: 26px;
|
|
91
102
|
box-shadow:
|
|
92
103
|
0 1px 0 rgba(255, 255, 255, 0.9) inset,
|
|
93
104
|
0 -1px 0 rgba(255, 255, 255, 0.4) inset,
|
|
@@ -97,86 +108,56 @@
|
|
|
97
108
|
height: fit-content;
|
|
98
109
|
}
|
|
99
110
|
|
|
100
|
-
main::before {
|
|
101
|
-
content: "";
|
|
102
|
-
position: absolute;
|
|
103
|
-
top: 0;
|
|
104
|
-
left: 12%;
|
|
105
|
-
right: 12%;
|
|
106
|
-
height: 1px;
|
|
107
|
-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
|
|
108
|
-
pointer-events: none;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
111
|
.chrome {
|
|
112
|
-
display: flex;
|
|
113
|
-
align-items: center;
|
|
114
|
-
|
|
115
|
-
padding: 14px 20px;
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
padding: 14px 20px;
|
|
116
116
|
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
|
117
|
-
background:
|
|
117
|
+
background: transparent;
|
|
118
118
|
flex: none;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
.light {
|
|
122
|
-
width: 10px;
|
|
123
|
-
height: 10px;
|
|
124
|
-
border-radius: 999px;
|
|
125
|
-
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.light.r {
|
|
129
|
-
background: #ff5f57;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.light.y {
|
|
133
|
-
background: #febc2e;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.light.g {
|
|
137
|
-
background: #28c840;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
121
|
.chrome-title {
|
|
141
|
-
flex: 1;
|
|
142
|
-
text-align: center;
|
|
143
|
-
font-size: 11.5px;
|
|
122
|
+
flex: 1;
|
|
123
|
+
text-align: center;
|
|
124
|
+
font-size: 11.5px;
|
|
144
125
|
color: rgba(31, 35, 48, 0.55);
|
|
145
126
|
font-weight: 500;
|
|
146
127
|
letter-spacing: 0.01em;
|
|
147
|
-
margin
|
|
128
|
+
margin: 0;
|
|
148
129
|
}
|
|
149
130
|
|
|
150
131
|
.body {
|
|
151
|
-
flex: 1;
|
|
152
|
-
min-height: 0;
|
|
153
|
-
padding: clamp(20px, 3vw, 28px) clamp(22px, 4vw, 32px) clamp(22px, 3vw, 30px);
|
|
154
|
-
display: flex;
|
|
155
|
-
flex-direction: column;
|
|
156
|
-
gap: 15px;
|
|
132
|
+
flex: 1;
|
|
133
|
+
min-height: 0;
|
|
134
|
+
padding: clamp(20px, 3vw, 28px) clamp(22px, 4vw, 32px) clamp(22px, 3vw, 30px);
|
|
135
|
+
display: flex;
|
|
136
|
+
flex-direction: column;
|
|
137
|
+
gap: 15px;
|
|
157
138
|
overflow: hidden;
|
|
158
139
|
}
|
|
159
140
|
|
|
160
141
|
.splash-wrap {
|
|
161
|
-
flex: none;
|
|
162
|
-
display: flex;
|
|
163
|
-
justify-content: center;
|
|
164
|
-
margin: 6px 0 2px;
|
|
165
|
-
padding: 4px 0;
|
|
142
|
+
flex: none;
|
|
143
|
+
display: flex;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
margin: 6px 0 2px;
|
|
146
|
+
padding: 4px 0;
|
|
166
147
|
}
|
|
167
148
|
|
|
168
149
|
.splash {
|
|
169
|
-
font-family: var(--font-mono);
|
|
170
|
-
font-size: clamp(9.5px, 1.35vw, 11px);
|
|
171
|
-
font-weight:
|
|
150
|
+
font-family: var(--font-mono);
|
|
151
|
+
font-size: clamp(9.5px, 1.35vw, 11px);
|
|
152
|
+
font-weight: 700;
|
|
172
153
|
line-height: 1.05;
|
|
173
154
|
letter-spacing: 0;
|
|
174
155
|
white-space: pre;
|
|
175
156
|
margin: 0;
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
transform: scaleX(0.75);
|
|
157
|
+
text-align: left;
|
|
158
|
+
transform: scaleX(0.8);
|
|
179
159
|
transform-origin: 50% 50%;
|
|
160
|
+
color: rgba(255, 255, 255, 0.18);
|
|
180
161
|
}
|
|
181
162
|
|
|
182
163
|
.spinner {
|
|
@@ -196,20 +177,20 @@
|
|
|
196
177
|
}
|
|
197
178
|
|
|
198
179
|
[data-flow] {
|
|
199
|
-
--accent:
|
|
200
|
-
--accent-soft:
|
|
201
|
-
--glow:
|
|
180
|
+
--accent: var(--mint-accent);
|
|
181
|
+
--accent-soft: var(--mint-accent-soft);
|
|
182
|
+
--glow: var(--mint-glow);
|
|
202
183
|
}
|
|
203
184
|
|
|
204
185
|
main,
|
|
205
186
|
.head .label,
|
|
206
|
-
.status,
|
|
207
|
-
.status-line,
|
|
208
|
-
.status-hint,
|
|
209
|
-
.flow-detail,
|
|
210
|
-
#error-block-slot,
|
|
211
|
-
.net-pill {
|
|
212
|
-
transition: height 480ms var(--ease-standard), background-color 320ms var(--ease-standard), border-color 320ms var(--ease-standard), color 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard);
|
|
187
|
+
.status,
|
|
188
|
+
.status-line,
|
|
189
|
+
.status-hint,
|
|
190
|
+
.flow-detail,
|
|
191
|
+
#error-block-slot,
|
|
192
|
+
.net-pill {
|
|
193
|
+
transition: height 480ms var(--ease-standard), background-color 320ms var(--ease-standard), border-color 320ms var(--ease-standard), color 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard);
|
|
213
194
|
}
|
|
214
195
|
|
|
215
196
|
.status-line,
|
|
@@ -225,22 +206,22 @@
|
|
|
225
206
|
|
|
226
207
|
.head {
|
|
227
208
|
display: flex;
|
|
228
|
-
align-items: center;
|
|
229
|
-
justify-content: space-between;
|
|
230
|
-
gap: 12px;
|
|
209
|
+
align-items: center;
|
|
210
|
+
justify-content: space-between;
|
|
211
|
+
gap: 12px;
|
|
231
212
|
}
|
|
232
213
|
|
|
233
214
|
.head .label {
|
|
234
215
|
font-family: var(--font-ui);
|
|
235
216
|
color: var(--c-gray-800);
|
|
236
|
-
font-size: 11.5px;
|
|
217
|
+
font-size: 11.5px;
|
|
237
218
|
font-weight: 500;
|
|
238
219
|
letter-spacing: 0;
|
|
239
220
|
text-transform: capitalize;
|
|
240
221
|
display: inline-flex;
|
|
241
222
|
align-items: center;
|
|
242
|
-
gap: 6px;
|
|
243
|
-
padding: 5px 13px 5px 10px;
|
|
223
|
+
gap: 6px;
|
|
224
|
+
padding: 5px 13px 5px 10px;
|
|
244
225
|
background: rgba(255, 255, 255, 0.6);
|
|
245
226
|
border-radius: 999px;
|
|
246
227
|
border: 1px solid rgba(255, 255, 255, 0.85);
|
|
@@ -258,9 +239,9 @@
|
|
|
258
239
|
|
|
259
240
|
.flow-title {
|
|
260
241
|
font-family: var(--font-display);
|
|
261
|
-
font-size: clamp(18px, 2.6vw, 20px);
|
|
262
|
-
font-weight: 600;
|
|
263
|
-
line-height: 1.22;
|
|
242
|
+
font-size: clamp(18px, 2.6vw, 20px);
|
|
243
|
+
font-weight: 600;
|
|
244
|
+
line-height: 1.22;
|
|
264
245
|
letter-spacing: 0;
|
|
265
246
|
margin: 0;
|
|
266
247
|
color: var(--c-gray-900);
|
|
@@ -268,16 +249,16 @@
|
|
|
268
249
|
}
|
|
269
250
|
|
|
270
251
|
.details {
|
|
271
|
-
display: flex;
|
|
272
|
-
flex-direction: column;
|
|
273
|
-
gap: 9px;
|
|
274
|
-
padding: 14px 16px;
|
|
252
|
+
display: flex;
|
|
253
|
+
flex-direction: column;
|
|
254
|
+
gap: 9px;
|
|
255
|
+
padding: 14px 16px;
|
|
275
256
|
background: rgba(255, 255, 255, 0.45);
|
|
276
257
|
backdrop-filter: blur(16px);
|
|
277
258
|
border: 1px solid rgba(255, 255, 255, 0.85);
|
|
278
|
-
border-radius: 14px;
|
|
259
|
+
border-radius: 14px;
|
|
279
260
|
box-shadow: 0 4px 16px -4px rgba(31, 35, 48, 0.08), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
|
280
|
-
max-height: 210px;
|
|
261
|
+
max-height: 210px;
|
|
281
262
|
opacity: 1;
|
|
282
263
|
margin-top: 0;
|
|
283
264
|
overflow: hidden;
|
|
@@ -298,13 +279,13 @@
|
|
|
298
279
|
|
|
299
280
|
.flow-detail {
|
|
300
281
|
display: grid;
|
|
301
|
-
grid-template-columns: 96px 1fr;
|
|
302
|
-
align-items: center;
|
|
303
|
-
gap: 12px;
|
|
304
|
-
font-size: 13.5px;
|
|
282
|
+
grid-template-columns: 96px 1fr;
|
|
283
|
+
align-items: center;
|
|
284
|
+
gap: 12px;
|
|
285
|
+
font-size: 13.5px;
|
|
305
286
|
color: var(--c-gray-700);
|
|
306
287
|
margin: 0;
|
|
307
|
-
line-height: 1.35;
|
|
288
|
+
line-height: 1.35;
|
|
308
289
|
}
|
|
309
290
|
|
|
310
291
|
.flow-detail[hidden] {
|
|
@@ -313,12 +294,12 @@
|
|
|
313
294
|
|
|
314
295
|
.flow-detail .key {
|
|
315
296
|
font-family: var(--font-mono);
|
|
316
|
-
font-size: 10px;
|
|
297
|
+
font-size: 10px;
|
|
317
298
|
font-weight: 500;
|
|
318
299
|
color: var(--c-gray-500);
|
|
319
300
|
text-transform: lowercase;
|
|
320
301
|
letter-spacing: 0.05em;
|
|
321
|
-
padding: 3px 8px;
|
|
302
|
+
padding: 3px 8px;
|
|
322
303
|
background: rgba(15, 17, 23, 0.04);
|
|
323
304
|
border: 1px solid rgba(15, 17, 23, 0.06);
|
|
324
305
|
border-radius: 6px;
|
|
@@ -333,22 +314,22 @@
|
|
|
333
314
|
}
|
|
334
315
|
|
|
335
316
|
.status {
|
|
336
|
-
display: flex;
|
|
337
|
-
flex-direction: column;
|
|
338
|
-
gap: 7px;
|
|
339
|
-
padding: 15px 17px;
|
|
317
|
+
display: flex;
|
|
318
|
+
flex-direction: column;
|
|
319
|
+
gap: 7px;
|
|
320
|
+
padding: 15px 17px;
|
|
340
321
|
background: rgba(255, 255, 255, 0.45);
|
|
341
322
|
backdrop-filter: blur(16px);
|
|
342
323
|
border: 1px solid rgba(255, 255, 255, 0.85);
|
|
343
|
-
border-radius: 14px;
|
|
344
|
-
box-shadow: 0
|
|
324
|
+
border-radius: 14px;
|
|
325
|
+
box-shadow: 0 4px 16px -4px rgba(31, 35, 48, 0.08), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
|
345
326
|
}
|
|
346
327
|
|
|
347
328
|
.status-line {
|
|
348
|
-
display: flex;
|
|
349
|
-
align-items: center;
|
|
350
|
-
gap: 12px;
|
|
351
|
-
font-size: 13.5px;
|
|
329
|
+
display: flex;
|
|
330
|
+
align-items: center;
|
|
331
|
+
gap: 12px;
|
|
332
|
+
font-size: 13.5px;
|
|
352
333
|
font-weight: 500;
|
|
353
334
|
color: var(--c-gray-900);
|
|
354
335
|
margin: 0;
|
|
@@ -356,29 +337,32 @@
|
|
|
356
337
|
|
|
357
338
|
.status-line .marker {
|
|
358
339
|
font-family: var(--font-mono);
|
|
359
|
-
font-size: 13px;
|
|
360
|
-
width: 29px;
|
|
361
|
-
height: 29px;
|
|
340
|
+
font-size: 13px;
|
|
341
|
+
width: 29px;
|
|
342
|
+
height: 29px;
|
|
362
343
|
display: inline-flex;
|
|
363
344
|
align-items: center;
|
|
364
345
|
justify-content: center;
|
|
365
346
|
border-radius: 999px;
|
|
366
|
-
background:
|
|
367
|
-
|
|
347
|
+
background: rgba(255, 255, 255, 0.55);
|
|
348
|
+
backdrop-filter: blur(12px);
|
|
349
|
+
-webkit-backdrop-filter: blur(12px);
|
|
350
|
+
border: 1px solid rgba(255, 255, 255, 0.75);
|
|
351
|
+
box-shadow: 0 2px 8px -2px rgba(31, 35, 48, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
|
|
352
|
+
color: var(--c-text-accent);
|
|
368
353
|
flex: none;
|
|
369
354
|
font-variant-numeric: tabular-nums;
|
|
370
355
|
font-weight: 600;
|
|
371
|
-
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset;
|
|
372
356
|
}
|
|
373
357
|
|
|
374
358
|
.status-hint {
|
|
375
|
-
font-size: 12.5px;
|
|
376
|
-
color: var(--c-gray-500);
|
|
377
|
-
margin: 0 0 0 41px;
|
|
378
|
-
line-height: 1.4;
|
|
359
|
+
font-size: 12.5px;
|
|
360
|
+
color: var(--c-gray-500);
|
|
361
|
+
margin: 0 0 0 41px;
|
|
362
|
+
line-height: 1.4;
|
|
379
363
|
}
|
|
380
364
|
|
|
381
|
-
#error-block-slot:empty {
|
|
365
|
+
#error-block-slot:empty {
|
|
382
366
|
display: block;
|
|
383
367
|
max-height: 0;
|
|
384
368
|
opacity: 0;
|
|
@@ -391,11 +375,11 @@
|
|
|
391
375
|
}
|
|
392
376
|
|
|
393
377
|
#error-block-slot {
|
|
394
|
-
padding: 12px 14px;
|
|
378
|
+
padding: 12px 14px;
|
|
395
379
|
background: rgba(255, 255, 255, 0.45);
|
|
396
380
|
backdrop-filter: blur(16px);
|
|
397
381
|
border: 1px solid rgba(255, 255, 255, 0.85);
|
|
398
|
-
border-radius: 14px;
|
|
382
|
+
border-radius: 14px;
|
|
399
383
|
box-shadow: 0 8px 24px -6px rgba(31, 35, 48, 0.08), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
|
400
384
|
max-height: 400px;
|
|
401
385
|
opacity: 1;
|
|
@@ -406,7 +390,7 @@
|
|
|
406
390
|
|
|
407
391
|
.error-title {
|
|
408
392
|
color: var(--c-gray-900);
|
|
409
|
-
font-size: 12px;
|
|
393
|
+
font-size: 12px;
|
|
410
394
|
font-weight: 600;
|
|
411
395
|
letter-spacing: 0;
|
|
412
396
|
text-transform: capitalize;
|
|
@@ -415,7 +399,7 @@
|
|
|
415
399
|
|
|
416
400
|
.error-msg {
|
|
417
401
|
color: var(--c-gray-900);
|
|
418
|
-
font-size: 13px;
|
|
402
|
+
font-size: 13px;
|
|
419
403
|
font-weight: 600;
|
|
420
404
|
margin: 0 0 6px;
|
|
421
405
|
line-height: 1.45;
|
|
@@ -423,22 +407,22 @@
|
|
|
423
407
|
|
|
424
408
|
.error-hint {
|
|
425
409
|
color: var(--c-gray-500);
|
|
426
|
-
font-size: 11.5px;
|
|
410
|
+
font-size: 11.5px;
|
|
427
411
|
margin: 0;
|
|
428
412
|
line-height: 1.5;
|
|
429
413
|
}
|
|
430
414
|
|
|
431
415
|
.error-hint a {
|
|
432
|
-
color: var(--accent);
|
|
416
|
+
color: var(--c-text-accent);
|
|
433
417
|
text-decoration: none;
|
|
434
418
|
font-weight: 600;
|
|
435
|
-
border-bottom: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
|
|
419
|
+
border-bottom: 1px dashed color-mix(in srgb, var(--c-text-accent) 50%, transparent);
|
|
436
420
|
padding-bottom: 1px;
|
|
437
421
|
transition: all 0.2s ease;
|
|
438
422
|
}
|
|
439
423
|
|
|
440
424
|
.error-hint a:hover {
|
|
441
|
-
color: var(--accent);
|
|
425
|
+
color: var(--c-text-accent);
|
|
442
426
|
border-bottom-style: solid;
|
|
443
427
|
}
|
|
444
428
|
|
|
@@ -453,35 +437,36 @@
|
|
|
453
437
|
|
|
454
438
|
.footer {
|
|
455
439
|
flex: none;
|
|
456
|
-
padding: 15px 22px 17px;
|
|
440
|
+
padding: 15px 22px 17px;
|
|
457
441
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
|
458
|
-
background:
|
|
442
|
+
background: transparent;
|
|
459
443
|
display: flex;
|
|
460
444
|
align-items: center;
|
|
461
445
|
justify-content: space-between;
|
|
462
|
-
gap: 12px;
|
|
446
|
+
gap: 12px;
|
|
463
447
|
}
|
|
464
448
|
|
|
465
449
|
.net-pill {
|
|
466
450
|
display: inline-flex;
|
|
467
451
|
align-items: center;
|
|
468
452
|
gap: 6px;
|
|
469
|
-
font-family: var(--font-
|
|
470
|
-
font-size:
|
|
471
|
-
|
|
472
|
-
|
|
453
|
+
font-family: var(--font-ui);
|
|
454
|
+
font-size: 11.5px;
|
|
455
|
+
font-weight: 500;
|
|
456
|
+
color: var(--c-gray-800);
|
|
457
|
+
padding: 5px 13px 5px 10px;
|
|
473
458
|
background: rgba(255, 255, 255, 0.6);
|
|
474
|
-
border: 1px solid rgba(255, 255, 255, 0.
|
|
459
|
+
border: 1px solid rgba(255, 255, 255, 0.85);
|
|
475
460
|
border-radius: 999px;
|
|
476
|
-
box-shadow: 0 1px 2px rgba(31, 35, 48, 0.
|
|
461
|
+
box-shadow: 0 1px 2px rgba(31, 35, 48, 0.05), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
|
|
477
462
|
}
|
|
478
463
|
|
|
479
464
|
.net-pill .dot {
|
|
480
465
|
width: 6px;
|
|
481
466
|
height: 6px;
|
|
482
467
|
border-radius: 999px;
|
|
483
|
-
background: var(--
|
|
484
|
-
box-shadow: 0 0 0 2px
|
|
468
|
+
background: var(--accent);
|
|
469
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
|
|
485
470
|
}
|
|
486
471
|
|
|
487
472
|
.net-pill[hidden] {
|
|
@@ -491,23 +476,24 @@
|
|
|
491
476
|
.actions {
|
|
492
477
|
display: inline-flex;
|
|
493
478
|
align-items: center;
|
|
494
|
-
gap: 10px;
|
|
479
|
+
gap: 10px;
|
|
495
480
|
}
|
|
496
481
|
|
|
497
482
|
.shortcut {
|
|
498
483
|
font: inherit;
|
|
499
484
|
font-family: var(--font-ui);
|
|
500
|
-
|
|
485
|
+
|
|
486
|
+
font-size: 12.5px;
|
|
501
487
|
font-weight: 500;
|
|
502
488
|
background: rgba(255, 255, 255, 0.7);
|
|
503
489
|
border: 1px solid rgba(255, 255, 255, 0.85);
|
|
504
|
-
padding:
|
|
490
|
+
padding: 5px 10px;
|
|
505
491
|
cursor: pointer;
|
|
506
492
|
color: var(--c-gray-700);
|
|
507
493
|
display: inline-flex;
|
|
508
494
|
align-items: center;
|
|
509
|
-
gap: 6px;
|
|
510
|
-
border-radius:
|
|
495
|
+
gap: 6px;
|
|
496
|
+
border-radius: 7px;
|
|
511
497
|
transition: all 0.15s var(--ease-standard);
|
|
512
498
|
box-shadow: 0 1px 2px rgba(31, 35, 48, 0.03), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
|
|
513
499
|
}
|
|
@@ -563,9 +549,9 @@
|
|
|
563
549
|
align-items: center;
|
|
564
550
|
justify-content: center;
|
|
565
551
|
gap: 4px;
|
|
566
|
-
padding: 2px 6px;
|
|
552
|
+
padding: 2px 6px;
|
|
567
553
|
font-family: var(--font-mono);
|
|
568
|
-
font-size: 10.5px;
|
|
554
|
+
font-size: 10.5px;
|
|
569
555
|
font-weight: 500;
|
|
570
556
|
color: var(--c-gray-500);
|
|
571
557
|
background: rgba(15, 17, 23, 0.04);
|
|
@@ -580,94 +566,94 @@
|
|
|
580
566
|
display: inline-flex;
|
|
581
567
|
}
|
|
582
568
|
|
|
583
|
-
.head .net {
|
|
584
|
-
display: none;
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
@media (max-width: 560px), (max-height: 680px) {
|
|
588
|
-
body {
|
|
589
|
-
padding: 10px;
|
|
590
|
-
}
|
|
591
|
-
|
|
592
|
-
main {
|
|
593
|
-
max-height: calc(100dvh - 20px);
|
|
594
|
-
border-radius: 18px;
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
.chrome {
|
|
598
|
-
padding: 9px 12px;
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
.body {
|
|
602
|
-
padding: 12px 13px 14px;
|
|
603
|
-
gap: 9px;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
.splash-wrap {
|
|
607
|
-
margin: 2px 0 0;
|
|
608
|
-
padding: 2px 0;
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
.splash {
|
|
612
|
-
font-size: 8px;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
.flow-title {
|
|
616
|
-
font-size: 16px;
|
|
617
|
-
}
|
|
618
|
-
|
|
619
|
-
.details,
|
|
620
|
-
.status {
|
|
621
|
-
padding: 10px 11px;
|
|
622
|
-
border-radius: 12px;
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
.flow-detail {
|
|
626
|
-
grid-template-columns: 74px 1fr;
|
|
627
|
-
gap: 8px;
|
|
628
|
-
font-size: 12px;
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
.status-line {
|
|
632
|
-
gap: 8px;
|
|
633
|
-
font-size: 12px;
|
|
634
|
-
}
|
|
635
|
-
|
|
636
|
-
.status-line .marker {
|
|
637
|
-
width: 24px;
|
|
638
|
-
height: 24px;
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
.status-hint {
|
|
642
|
-
margin-left: 32px;
|
|
643
|
-
font-size: 11.5px;
|
|
644
|
-
}
|
|
645
|
-
|
|
646
|
-
.footer {
|
|
647
|
-
padding: 10px 12px 12px;
|
|
648
|
-
gap: 8px;
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
.actions {
|
|
652
|
-
gap: 7px;
|
|
653
|
-
}
|
|
654
|
-
|
|
655
|
-
.shortcut {
|
|
656
|
-
font-size:
|
|
657
|
-
padding:
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
.net-pill {
|
|
661
|
-
font-size: 10px;
|
|
662
|
-
padding: 4px 8px;
|
|
663
|
-
}
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
/* dark mode: terminal-style window. */
|
|
667
|
-
main {
|
|
668
|
-
background: #0b0f14;
|
|
669
|
-
color: #f1f1f1;
|
|
670
|
-
border-color: rgba(255, 255, 255, 0.08);
|
|
569
|
+
.head .net {
|
|
570
|
+
display: none;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
@media (max-width: 560px), (max-height: 680px) {
|
|
574
|
+
body {
|
|
575
|
+
padding: 10px;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
main {
|
|
579
|
+
max-height: calc(100dvh - 20px);
|
|
580
|
+
border-radius: 18px;
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
.chrome {
|
|
584
|
+
padding: 9px 12px;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.body {
|
|
588
|
+
padding: 12px 13px 14px;
|
|
589
|
+
gap: 9px;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.splash-wrap {
|
|
593
|
+
margin: 2px 0 0;
|
|
594
|
+
padding: 2px 0;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.splash {
|
|
598
|
+
font-size: 8px;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.flow-title {
|
|
602
|
+
font-size: 16px;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.details,
|
|
606
|
+
.status {
|
|
607
|
+
padding: 10px 11px;
|
|
608
|
+
border-radius: 12px;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.flow-detail {
|
|
612
|
+
grid-template-columns: 74px 1fr;
|
|
613
|
+
gap: 8px;
|
|
614
|
+
font-size: 12px;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.status-line {
|
|
618
|
+
gap: 8px;
|
|
619
|
+
font-size: 12px;
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.status-line .marker {
|
|
623
|
+
width: 24px;
|
|
624
|
+
height: 24px;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.status-hint {
|
|
628
|
+
margin-left: 32px;
|
|
629
|
+
font-size: 11.5px;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.footer {
|
|
633
|
+
padding: 10px 12px 12px;
|
|
634
|
+
gap: 8px;
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
.actions {
|
|
638
|
+
gap: 7px;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.shortcut {
|
|
642
|
+
font-size: 11.5px;
|
|
643
|
+
padding: 4px 8px;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.net-pill {
|
|
647
|
+
font-size: 10px;
|
|
648
|
+
padding: 4px 8px;
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
/* dark mode: terminal-style window. */
|
|
653
|
+
main {
|
|
654
|
+
background: #0b0f14;
|
|
655
|
+
color: #f1f1f1;
|
|
656
|
+
border-color: rgba(255, 255, 255, 0.08);
|
|
671
657
|
box-shadow:
|
|
672
658
|
0 1px 0 rgba(255, 255, 255, 0.05) inset,
|
|
673
659
|
0 -1px 0 rgba(0, 0, 0, 0.4) inset,
|
|
@@ -677,20 +663,16 @@
|
|
|
677
663
|
--c-gray-800: #d8d8d8;
|
|
678
664
|
--c-gray-700: #b0b0b0;
|
|
679
665
|
--c-gray-500: #8a8a8a;
|
|
680
|
-
--c-gray-400: #6f6f6f;
|
|
681
|
-
}
|
|
682
|
-
|
|
683
|
-
.splash {
|
|
684
|
-
color:
|
|
685
|
-
}
|
|
686
|
-
|
|
687
|
-
main::before {
|
|
688
|
-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
|
|
666
|
+
--c-gray-400: #6f6f6f;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
.splash {
|
|
670
|
+
color: rgba(255, 255, 255, 0.7);
|
|
689
671
|
}
|
|
690
672
|
|
|
691
673
|
.chrome {
|
|
692
674
|
border-bottom-color: rgba(255, 255, 255, 0.06);
|
|
693
|
-
background:
|
|
675
|
+
background: transparent;
|
|
694
676
|
}
|
|
695
677
|
|
|
696
678
|
.chrome-title {
|
|
@@ -703,14 +685,25 @@
|
|
|
703
685
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
|
|
704
686
|
}
|
|
705
687
|
|
|
706
|
-
.details,
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
688
|
+
.details,
|
|
689
|
+
#error-block-slot {
|
|
690
|
+
background: rgba(255, 255, 255, 0.04);
|
|
691
|
+
border-color: rgba(255, 255, 255, 0.08);
|
|
692
|
+
box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.status {
|
|
696
|
+
background: rgba(255, 255, 255, 0.04);
|
|
697
|
+
border-color: rgba(255, 255, 255, 0.08);
|
|
711
698
|
box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
|
|
712
699
|
}
|
|
713
700
|
|
|
701
|
+
.status-line .marker {
|
|
702
|
+
background: rgba(255, 255, 255, 0.07);
|
|
703
|
+
border-color: rgba(255, 255, 255, 0.12);
|
|
704
|
+
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.07) inset;
|
|
705
|
+
}
|
|
706
|
+
|
|
714
707
|
.flow-detail .key {
|
|
715
708
|
background: rgba(255, 255, 255, 0.05);
|
|
716
709
|
border-color: rgba(255, 255, 255, 0.08);
|
|
@@ -722,27 +715,27 @@
|
|
|
722
715
|
|
|
723
716
|
.footer {
|
|
724
717
|
border-top-color: rgba(255, 255, 255, 0.06);
|
|
725
|
-
background:
|
|
718
|
+
background: transparent;
|
|
726
719
|
}
|
|
727
720
|
|
|
728
721
|
.net-pill {
|
|
729
|
-
background: rgba(255, 255, 255, 0.
|
|
722
|
+
background: rgba(255, 255, 255, 0.06);
|
|
723
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
724
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
/* esc key: secondary black */
|
|
728
|
+
#cancel.shortcut {
|
|
729
|
+
background: #1f2330;
|
|
730
730
|
border-color: rgba(255, 255, 255, 0.08);
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
#cancel.shortcut {
|
|
736
|
-
background: #
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
#cancel.shortcut:hover:not(:disabled) {
|
|
743
|
-
background: #2a2e3c;
|
|
744
|
-
color: #f1f1f1;
|
|
745
|
-
}
|
|
731
|
+
color: #b0b0b0;
|
|
732
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
#cancel.shortcut:hover:not(:disabled) {
|
|
736
|
+
background: #2a2e3c;
|
|
737
|
+
color: #f1f1f1;
|
|
738
|
+
}
|
|
746
739
|
|
|
747
740
|
/* primary action: pin literal so the var override does not bleed through */
|
|
748
741
|
.shortcut.primary {
|
|
@@ -773,9 +766,6 @@
|
|
|
773
766
|
<body>
|
|
774
767
|
<main data-flow="sign" id="card">
|
|
775
768
|
<div class="chrome">
|
|
776
|
-
<span class="light r"></span>
|
|
777
|
-
<span class="light y"></span>
|
|
778
|
-
<span class="light g"></span>
|
|
779
769
|
<span class="chrome-title" id="chrome-title">ethagent</span>
|
|
780
770
|
</div>
|
|
781
771
|
<div class="body">
|
|
@@ -789,11 +779,11 @@
|
|
|
789
779
|
id="detail-val">—</span></p>
|
|
790
780
|
</div>
|
|
791
781
|
<div class="status" id="status-block">
|
|
792
|
-
<p class="status-line"><span class="marker" id="status-marker"
|
|
782
|
+
<p class="status-line"><span class="marker" id="status-marker"></span><span id="status-text">connecting to your
|
|
793
783
|
wallet…</span></p>
|
|
794
784
|
<p class="status-hint" id="status-hint">open your wallet extension if it doesn't pop up automatically.</p>
|
|
795
785
|
</div>
|
|
796
|
-
<div id="error-block-slot"></div>
|
|
786
|
+
<div id="error-block-slot"></div>
|
|
797
787
|
</div>
|
|
798
788
|
<div class="footer">
|
|
799
789
|
<span class="net-pill" id="network-row"><span class="dot"></span><span id="net-val">Sepolia</span></span>
|
|
@@ -810,22 +800,22 @@
|
|
|
810
800
|
</main>
|
|
811
801
|
<script>
|
|
812
802
|
const glyphs = {
|
|
813
|
-
eyes:
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
803
|
+
eyes: `
|
|
804
|
+
-+:
|
|
805
|
+
:=- -%@@@%.
|
|
806
|
+
*@@@@@#- *@@-
|
|
807
|
+
+@@. +@
|
|
808
|
+
@@= -#=-+++=+:
|
|
809
|
+
#% .:===-: -@* +@@@@%
|
|
810
|
+
*@-+@@@@@: %@@+ @@@=#@
|
|
811
|
+
*@= @@@@@@@- .@.@@@@@@@ :
|
|
812
|
+
@@+=@@@@@@@@@@@@: .% *@@@@@*-=
|
|
813
|
+
#:-@ -@@@@@@@@@-+% @ -@@@- #
|
|
814
|
+
: #+ @@@@@@@- -% =# =
|
|
815
|
+
-@: *@ .+%%
|
|
816
|
+
:%#: --
|
|
817
|
+
.-:
|
|
818
|
+
`,
|
|
829
819
|
ellipsis: "…",
|
|
830
820
|
emDash: "—"
|
|
831
821
|
};
|
|
@@ -836,24 +826,24 @@
|
|
|
836
826
|
document.getElementById("splash").innerHTML = renderEyes();
|
|
837
827
|
|
|
838
828
|
const config = window.__WALLET_CONFIG__ || { sessionToken: "preview", kind: "sign", chainIdHex: "0xaa36a7", message: "identity proof for 0x9F2a…BC4e" };
|
|
839
|
-
const CLOSE_DELAY_MS = 10000;
|
|
840
|
-
const TX_CLOSE_DELAY_MS = 10000;
|
|
841
|
-
const CANCEL_CLOSE_DELAY_MS =
|
|
829
|
+
const CLOSE_DELAY_MS = 10000;
|
|
830
|
+
const TX_CLOSE_DELAY_MS = 10000;
|
|
831
|
+
const CANCEL_CLOSE_DELAY_MS = 10000;
|
|
842
832
|
const WALLET_PROVIDER_WAIT_MS = 3000;
|
|
843
833
|
const WALLET_PROVIDER_POLL_MS = 100;
|
|
844
834
|
const CHAINS = { "0x1": { name: "Ethereum Mainnet" }, "0xaa36a7": { name: "Sepolia" }, "0x2105": { name: "Base" }, "0x14a34": { name: "Base Sepolia" }, "0xa": { name: "OP Mainnet" }, "0xa4b1": { name: "Arbitrum One" } };
|
|
845
835
|
const FLOW_COPY = {
|
|
846
836
|
account: { accent: "sign", tabTitle: "connect wallet", label: "wallet request", title: "Connect wallet to find your agent", detail: null },
|
|
847
837
|
sign: { accent: "sign", tabTitle: "sign message", label: "signature request", title: "Sign a message to prove ownership", detail: "message" },
|
|
848
|
-
"sign-transaction": { accent: "transaction", tabTitle: "approve identity update", label: "identity approval", title: "Sign, then save identity files", detail: "message" },
|
|
838
|
+
"sign-transaction": { accent: "transaction", tabTitle: "approve identity update", label: "identity approval", title: "Sign, then save identity files", detail: "message" },
|
|
849
839
|
transaction: { accent: "transaction", tabTitle: "submit transaction", label: "transaction request", title: "Submit transaction to mint your ERC-8004 agent", detail: "registry" }
|
|
850
840
|
};
|
|
851
|
-
const STATE_TITLES = { connecting: "
|
|
852
|
-
function chainLabel(hex) { const k = String(hex || "").toLowerCase(); return (CHAINS[k] && CHAINS[k].name) || ("chain " + k); }
|
|
853
|
-
function shortAddr(addr) { if (!addr || typeof addr !== "string") return glyphs.emDash; if (addr.length <= 14) return addr; return addr.slice(0, 6) + glyphs.ellipsis + addr.slice(-4); }
|
|
854
|
-
function isTransactionFlow() { return config.kind === "transaction" || config.kind === "sign-transaction"; }
|
|
855
|
-
|
|
856
|
-
const card = document.getElementById("card");
|
|
841
|
+
const STATE_TITLES = { connecting: "Connecting wallet", approveSign: "Approve signature", preparingTransaction: "Preparing transaction", approveTransaction: "Approve transaction", error: "Wallet error", default: "Wallet request" };
|
|
842
|
+
function chainLabel(hex) { const k = String(hex || "").toLowerCase(); return (CHAINS[k] && CHAINS[k].name) || ("chain " + k); }
|
|
843
|
+
function shortAddr(addr) { if (!addr || typeof addr !== "string") return glyphs.emDash; if (addr.length <= 14) return addr; return addr.slice(0, 6) + glyphs.ellipsis + addr.slice(-4); }
|
|
844
|
+
function isTransactionFlow() { return config.kind === "transaction" || config.kind === "sign-transaction"; }
|
|
845
|
+
|
|
846
|
+
const card = document.getElementById("card");
|
|
857
847
|
const promptText = document.getElementById("prompt-text");
|
|
858
848
|
const flowTitle = document.getElementById("flow-title");
|
|
859
849
|
const networkRow = document.getElementById("network-row");
|
|
@@ -864,14 +854,14 @@
|
|
|
864
854
|
const netVal = document.getElementById("net-val");
|
|
865
855
|
const statusBlock = document.getElementById("status-block");
|
|
866
856
|
const statusMarker = document.getElementById("status-marker");
|
|
867
|
-
const statusText = document.getElementById("status-text");
|
|
868
|
-
const statusHint = document.getElementById("status-hint");
|
|
869
|
-
const errorSlot = document.getElementById("error-block-slot");
|
|
870
|
-
const approve = document.getElementById("approve");
|
|
857
|
+
const statusText = document.getElementById("status-text");
|
|
858
|
+
const statusHint = document.getElementById("status-hint");
|
|
859
|
+
const errorSlot = document.getElementById("error-block-slot");
|
|
860
|
+
const approve = document.getElementById("approve");
|
|
871
861
|
const cancel = document.getElementById("cancel");
|
|
872
|
-
let announcedEthereum = null;
|
|
873
|
-
let activeEthereum = null;
|
|
874
|
-
let closeCountdown = null;
|
|
862
|
+
let announcedEthereum = null;
|
|
863
|
+
let activeEthereum = null;
|
|
864
|
+
let closeCountdown = null;
|
|
875
865
|
|
|
876
866
|
function rememberAnnouncedProvider(event) { const provider = event && event.detail && event.detail.provider; if (provider && !announcedEthereum) announcedEthereum = provider; }
|
|
877
867
|
window.addEventListener("eip6963:announceProvider", rememberAnnouncedProvider);
|
|
@@ -934,19 +924,19 @@
|
|
|
934
924
|
if (state === "approve-transaction") return STATE_TITLES.approveTransaction;
|
|
935
925
|
if (state === "error") return STATE_TITLES.error;
|
|
936
926
|
if (state === "approve") {
|
|
937
|
-
if (config.kind === "account") return "
|
|
927
|
+
if (config.kind === "account") return "Approve connection";
|
|
938
928
|
if (config.kind === "sign") return STATE_TITLES.approveSign;
|
|
939
929
|
return STATE_TITLES.approveTransaction;
|
|
940
930
|
}
|
|
941
931
|
if (state === "submitting") {
|
|
942
932
|
if (config.kind === "account") return STATE_TITLES.connecting;
|
|
943
|
-
if (config.kind === "sign") return "
|
|
944
|
-
return "
|
|
933
|
+
if (config.kind === "sign") return "Verifying signature";
|
|
934
|
+
return "Confirming transaction";
|
|
945
935
|
}
|
|
946
936
|
if (state === "done") {
|
|
947
|
-
if (config.kind === "account") return "
|
|
948
|
-
if (config.kind === "sign") return "
|
|
949
|
-
return "
|
|
937
|
+
if (config.kind === "account") return "Wallet connected";
|
|
938
|
+
if (config.kind === "sign") return "Message signed";
|
|
939
|
+
return "Transaction submitted";
|
|
950
940
|
}
|
|
951
941
|
return flowCopy().tabTitle || STATE_TITLES.default;
|
|
952
942
|
}
|
|
@@ -1018,36 +1008,37 @@
|
|
|
1018
1008
|
|
|
1019
1009
|
function setState(state, payload) {
|
|
1020
1010
|
payload = payload || {};
|
|
1021
|
-
errorSlot.innerHTML = "";
|
|
1022
|
-
statusBlock.style.display = "flex";
|
|
1023
|
-
setTabTitle(tabTitleForState(state));
|
|
1024
|
-
switch (state) {
|
|
1011
|
+
errorSlot.innerHTML = "";
|
|
1012
|
+
statusBlock.style.display = "flex";
|
|
1013
|
+
setTabTitle(tabTitleForState(state));
|
|
1014
|
+
switch (state) {
|
|
1025
1015
|
case "connecting":
|
|
1026
|
-
setStatus("·", "
|
|
1016
|
+
setStatus("·", "Connecting to your wallet…", "Open your wallet extension if it doesn't pop up automatically.", true);
|
|
1027
1017
|
break;
|
|
1028
1018
|
case "approve":
|
|
1029
|
-
if (config.kind === "account") setStatus("·", "
|
|
1030
|
-
else if (config.kind === "sign") setStatus("·", "
|
|
1031
|
-
else setStatus("·", "
|
|
1019
|
+
if (config.kind === "account") setStatus("·", "Approve wallet connection", "The selected address will be used to search for owned agents.", true);
|
|
1020
|
+
else if (config.kind === "sign") setStatus("·", "Approve the signature in your wallet", "A prompt should be open. Waiting for your signature.", true);
|
|
1021
|
+
else setStatus("·", "Review and submit the transaction in your wallet", "Check the network and contract address before approving.", true);
|
|
1022
|
+
break;
|
|
1023
|
+
case "approve-sign":
|
|
1024
|
+
setStatus("·", "Approve the signature in your wallet", "This encrypts or decrypts SOUL.md and MEMORY.md.", true);
|
|
1032
1025
|
break;
|
|
1033
|
-
case "
|
|
1034
|
-
setStatus("·", "
|
|
1035
|
-
break;
|
|
1036
|
-
case "preparing-transaction":
|
|
1037
|
-
setStatus("·", "encrypting SOUL.md and MEMORY.md, then preparing the update...", "keep this page open. the transaction prompt will appear here.", true);
|
|
1026
|
+
case "preparing-transaction":
|
|
1027
|
+
setStatus("·", "Encrypting SOUL.md and MEMORY.md, then preparing the update...", "Keep this page open. The transaction prompt will appear here.", true);
|
|
1038
1028
|
break;
|
|
1039
1029
|
case "approve-transaction":
|
|
1040
|
-
setStatus("·", "
|
|
1030
|
+
setStatus("·", "Review and submit the transaction in your wallet", "Check the network and contract address before approving.", true);
|
|
1041
1031
|
break;
|
|
1042
1032
|
case "submitting":
|
|
1043
|
-
if (config.kind === "account") setStatus("·", "
|
|
1044
|
-
else if (config.kind === "sign") setStatus("·", "
|
|
1045
|
-
else setStatus("·", "
|
|
1033
|
+
if (config.kind === "account") setStatus("·", "Connecting wallet…", "Sending the selected address back.", true);
|
|
1034
|
+
else if (config.kind === "sign") setStatus("·", "Verifying signature…", "Recovering the signing address.", true);
|
|
1035
|
+
else setStatus("·", "Submitted · waiting for confirmation…", "Your wallet has accepted the transaction.", true);
|
|
1046
1036
|
break;
|
|
1047
1037
|
case "done":
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1038
|
+
stopSpinner();
|
|
1039
|
+
statusMarker.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
|
|
1040
|
+
statusText.textContent = config.kind === "account" ? "Connected · returning" : config.kind === "sign" ? "Signed · returning" : "Submitted · returning";
|
|
1041
|
+
statusHint.textContent = payload.txHash ? (isTransactionFlow() ? "Transaction submitted. Returning." : "This tab will close shortly.") : "This tab will close shortly.";
|
|
1051
1042
|
break;
|
|
1052
1043
|
case "error":
|
|
1053
1044
|
stopSpinner();
|
|
@@ -1062,20 +1053,20 @@
|
|
|
1062
1053
|
const isNoWallet = /no wallet|window\.ethereum|metamask|rabby|brave|extension/i.test(msg);
|
|
1063
1054
|
const isUserReject = /user rejected|user denied|cancelled|canceled/i.test(msg);
|
|
1064
1055
|
const isWrongChain = /chain|network/i.test(msg) && !isNoWallet;
|
|
1065
|
-
let title = "
|
|
1056
|
+
let title = "Wallet error";
|
|
1066
1057
|
let body = msg;
|
|
1067
|
-
let hint = "
|
|
1058
|
+
let hint = "Press enter to retry, or esc to abort.";
|
|
1068
1059
|
if (isNoWallet) {
|
|
1069
|
-
title = "
|
|
1070
|
-
body = "
|
|
1060
|
+
title = "No wallet";
|
|
1061
|
+
body = "Install a browser wallet.";
|
|
1071
1062
|
hint = 'Get <a href="https://phantom.com/download" target="_blank" rel="noopener">Phantom</a>, then press <code>enter</code>.';
|
|
1072
1063
|
} else if (isUserReject) {
|
|
1073
|
-
title = "
|
|
1074
|
-
body = "
|
|
1075
|
-
hint = "
|
|
1064
|
+
title = "Rejected";
|
|
1065
|
+
body = "Request declined in wallet.";
|
|
1066
|
+
hint = "Press <code>enter</code> to retry, or <code>esc</code> to abort.";
|
|
1076
1067
|
} else if (isWrongChain) {
|
|
1077
|
-
title = "
|
|
1078
|
-
hint = "
|
|
1068
|
+
title = "Wrong network";
|
|
1069
|
+
hint = "Expected <code>" + escapeHtml(chainLabel(config.chainIdHex)) + "</code>. Switch networks, then retry.";
|
|
1079
1070
|
}
|
|
1080
1071
|
errorSlot.innerHTML = '<p class="error-title">' + escapeHtml(title) + "</p>" + '<p class="error-msg">' + escapeHtml(body) + "</p>" + '<p class="error-hint">' + hint + "</p>";
|
|
1081
1072
|
}
|
|
@@ -1086,27 +1077,27 @@
|
|
|
1086
1077
|
if (!r.ok || !d.ok) throw new Error(d.error || "wallet request failed");
|
|
1087
1078
|
return d;
|
|
1088
1079
|
}
|
|
1089
|
-
function showCloseCountdown(delayMs) {
|
|
1090
|
-
if (closeCountdown) clearInterval(closeCountdown);
|
|
1091
|
-
const deadline = Date.now() + delayMs;
|
|
1092
|
-
const update = () => {
|
|
1093
|
-
const seconds = Math.max(1, Math.ceil((deadline - Date.now()) / 1000));
|
|
1094
|
-
statusHint.textContent = "
|
|
1095
|
-
};
|
|
1096
|
-
update();
|
|
1097
|
-
closeCountdown = setInterval(update, 250);
|
|
1098
|
-
}
|
|
1099
|
-
function closeSoon(delayMs) {
|
|
1100
|
-
const ms = delayMs == null ? CLOSE_DELAY_MS : delayMs;
|
|
1101
|
-
showCloseCountdown(ms);
|
|
1102
|
-
setTimeout(() => {
|
|
1103
|
-
if (closeCountdown) clearInterval(closeCountdown);
|
|
1104
|
-
try { if (window.opener && !window.opener.closed) window.opener.focus(); } catch (_) { }
|
|
1105
|
-
window.close();
|
|
1106
|
-
window.open("", "_self");
|
|
1107
|
-
window.close();
|
|
1108
|
-
}, ms);
|
|
1109
|
-
}
|
|
1080
|
+
function showCloseCountdown(delayMs) {
|
|
1081
|
+
if (closeCountdown) clearInterval(closeCountdown);
|
|
1082
|
+
const deadline = Date.now() + delayMs;
|
|
1083
|
+
const update = () => {
|
|
1084
|
+
const seconds = Math.max(1, Math.ceil((deadline - Date.now()) / 1000));
|
|
1085
|
+
statusHint.textContent = "Return to your terminal. Closing in " + seconds + "s.";
|
|
1086
|
+
};
|
|
1087
|
+
update();
|
|
1088
|
+
closeCountdown = setInterval(update, 250);
|
|
1089
|
+
}
|
|
1090
|
+
function closeSoon(delayMs) {
|
|
1091
|
+
const ms = delayMs == null ? CLOSE_DELAY_MS : delayMs;
|
|
1092
|
+
showCloseCountdown(ms);
|
|
1093
|
+
setTimeout(() => {
|
|
1094
|
+
if (closeCountdown) clearInterval(closeCountdown);
|
|
1095
|
+
try { if (window.opener && !window.opener.closed) window.opener.focus(); } catch (_) { }
|
|
1096
|
+
window.close();
|
|
1097
|
+
window.open("", "_self");
|
|
1098
|
+
window.close();
|
|
1099
|
+
}, ms);
|
|
1100
|
+
}
|
|
1110
1101
|
|
|
1111
1102
|
async function ensureWallet() {
|
|
1112
1103
|
setState("connecting");
|
|
@@ -1188,7 +1179,7 @@
|
|
|
1188
1179
|
cancel.disabled = true;
|
|
1189
1180
|
await post("/cancel", {}).catch(() => { });
|
|
1190
1181
|
setState("done");
|
|
1191
|
-
statusText.textContent = "
|
|
1182
|
+
statusText.textContent = "Cancelled · returning";
|
|
1192
1183
|
closeSoon(CANCEL_CLOSE_DELAY_MS);
|
|
1193
1184
|
}
|
|
1194
1185
|
approve.onclick = runWalletFlow;
|
|
@@ -1208,4 +1199,4 @@
|
|
|
1208
1199
|
</script>
|
|
1209
1200
|
</body>
|
|
1210
1201
|
|
|
1211
|
-
</html>
|
|
1202
|
+
</html>
|