dactyclaw 1.0.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.
- package/README.md +36 -0
- package/agent.json +7 -0
- package/api/tokens.js +20 -0
- package/api/top-tokens.js +25 -0
- package/bin/dacty-create.js +44 -0
- package/bin/dacty-launch.js +40 -0
- package/index.html +1395 -0
- package/package.json +32 -0
- package/proxy.js +112 -0
- package/vercel.json +6 -0
package/index.html
ADDED
|
@@ -0,0 +1,1395 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>DACTYCLAW - Agent Monitor & Deployer</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="DACTYCLAW — Live Agent Infrastructure for Clawn Ecosystem on Base. Deploy AI agents, launch tokens via Clanker, and track the live token leaderboard.">
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
|
|
11
|
+
<style>
|
|
12
|
+
* {
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
html,
|
|
19
|
+
body {
|
|
20
|
+
height: 100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
body {
|
|
24
|
+
font-family: 'Courier Prime', monospace;
|
|
25
|
+
background: linear-gradient(135deg, #000000 0%, #001a2a 100%);
|
|
26
|
+
color: #00d4ff;
|
|
27
|
+
line-height: 1.6;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* ── Header ── */
|
|
33
|
+
header {
|
|
34
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
|
|
35
|
+
border-bottom: 2px solid #00d4ff;
|
|
36
|
+
border-left: 6px solid #00d4ff;
|
|
37
|
+
padding: 2.5rem 2rem 2.5rem 3rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
header h1 {
|
|
41
|
+
font-size: 2rem;
|
|
42
|
+
font-weight: bold;
|
|
43
|
+
letter-spacing: 0.4em;
|
|
44
|
+
text-transform: uppercase;
|
|
45
|
+
margin-bottom: 0.5rem;
|
|
46
|
+
color: #00d4ff;
|
|
47
|
+
text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
header p {
|
|
51
|
+
font-size: 0.75rem;
|
|
52
|
+
letter-spacing: 0.15em;
|
|
53
|
+
text-transform: uppercase;
|
|
54
|
+
color: #0099bb;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* ── Nav ── */
|
|
58
|
+
nav {
|
|
59
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
|
|
60
|
+
border-bottom: 1px solid rgba(0, 212, 255, 0.3);
|
|
61
|
+
display: flex;
|
|
62
|
+
gap: 3rem;
|
|
63
|
+
padding: 0 2rem 0 3rem;
|
|
64
|
+
position: sticky;
|
|
65
|
+
top: 0;
|
|
66
|
+
z-index: 40;
|
|
67
|
+
flex-wrap: wrap;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
nav button {
|
|
71
|
+
background: transparent;
|
|
72
|
+
border: none;
|
|
73
|
+
border-bottom: 3px solid transparent;
|
|
74
|
+
color: #0099bb;
|
|
75
|
+
padding: 1.2rem 0;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
font-family: 'Courier Prime', monospace;
|
|
78
|
+
font-size: 0.85rem;
|
|
79
|
+
font-weight: bold;
|
|
80
|
+
letter-spacing: 0.15em;
|
|
81
|
+
text-transform: uppercase;
|
|
82
|
+
transition: all 0.3s ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
nav button:hover {
|
|
86
|
+
color: #00d4ff;
|
|
87
|
+
border-bottom-color: rgba(0, 212, 255, 0.5);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
nav button.active {
|
|
91
|
+
border-bottom-color: #00d4ff;
|
|
92
|
+
color: #00d4ff;
|
|
93
|
+
text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* ── Main Layout ── */
|
|
97
|
+
main {
|
|
98
|
+
flex: 1;
|
|
99
|
+
display: grid;
|
|
100
|
+
grid-template-columns: 1fr 300px;
|
|
101
|
+
gap: 2rem;
|
|
102
|
+
padding: 2rem;
|
|
103
|
+
max-width: 1200px;
|
|
104
|
+
margin: 0 auto;
|
|
105
|
+
width: 100%;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.content-wrapper {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.content-section {
|
|
114
|
+
display: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.content-section.active {
|
|
118
|
+
display: block;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* ── Sidebar ── */
|
|
122
|
+
.sidebar {
|
|
123
|
+
background: linear-gradient(180deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.02) 100%);
|
|
124
|
+
border-left: 3px solid #00d4ff;
|
|
125
|
+
border-top: 3px solid #00d4ff;
|
|
126
|
+
padding: 2rem;
|
|
127
|
+
height: fit-content;
|
|
128
|
+
position: sticky;
|
|
129
|
+
top: 100px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.sidebar-title {
|
|
133
|
+
font-size: 0.7rem;
|
|
134
|
+
text-transform: uppercase;
|
|
135
|
+
letter-spacing: 0.2em;
|
|
136
|
+
color: #0099bb;
|
|
137
|
+
margin-bottom: 1.5rem;
|
|
138
|
+
font-weight: bold;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.sidebar-item {
|
|
142
|
+
margin-bottom: 1.5rem;
|
|
143
|
+
padding-bottom: 1.5rem;
|
|
144
|
+
border-bottom: 1px solid rgba(0, 212, 255, 0.2);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.sidebar-item:last-child {
|
|
148
|
+
border-bottom: none;
|
|
149
|
+
margin-bottom: 0;
|
|
150
|
+
padding-bottom: 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.sidebar-label {
|
|
154
|
+
font-size: 0.65rem;
|
|
155
|
+
color: #0099bb;
|
|
156
|
+
text-transform: uppercase;
|
|
157
|
+
letter-spacing: 0.1em;
|
|
158
|
+
margin-bottom: 0.5rem;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.sidebar-value {
|
|
162
|
+
font-size: 0.8rem;
|
|
163
|
+
color: #00d4ff;
|
|
164
|
+
font-weight: bold;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* ── Helpers ── */
|
|
168
|
+
.spawn-label {
|
|
169
|
+
font-size: 0.65rem;
|
|
170
|
+
text-transform: uppercase;
|
|
171
|
+
letter-spacing: 0.2em;
|
|
172
|
+
font-weight: bold;
|
|
173
|
+
color: #0099bb;
|
|
174
|
+
margin-bottom: 1rem;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.section-title {
|
|
178
|
+
font-size: 2.2rem;
|
|
179
|
+
font-weight: bold;
|
|
180
|
+
text-transform: uppercase;
|
|
181
|
+
line-height: 1.2;
|
|
182
|
+
margin-bottom: 1rem;
|
|
183
|
+
color: #00d4ff;
|
|
184
|
+
letter-spacing: 0.1em;
|
|
185
|
+
text-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.section-description {
|
|
189
|
+
font-size: 0.9rem;
|
|
190
|
+
color: #0099bb;
|
|
191
|
+
line-height: 1.8;
|
|
192
|
+
max-width: 600px;
|
|
193
|
+
margin-bottom: 2.5rem;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* ── Hero ── */
|
|
197
|
+
.hero-section {
|
|
198
|
+
margin-bottom: 3rem;
|
|
199
|
+
padding: 2rem;
|
|
200
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.08) 0%, transparent 100%);
|
|
201
|
+
border-left: 3px solid #00d4ff;
|
|
202
|
+
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.hero-title {
|
|
206
|
+
font-size: 2.8rem;
|
|
207
|
+
font-weight: bold;
|
|
208
|
+
text-transform: uppercase;
|
|
209
|
+
line-height: 1.1;
|
|
210
|
+
margin-bottom: 1.5rem;
|
|
211
|
+
color: #00d4ff;
|
|
212
|
+
letter-spacing: 0.1em;
|
|
213
|
+
text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.hero-subtitle {
|
|
217
|
+
font-size: 1.1rem;
|
|
218
|
+
color: #0099bb;
|
|
219
|
+
line-height: 1.8;
|
|
220
|
+
max-width: 700px;
|
|
221
|
+
margin-bottom: 2rem;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* ── Features Grid ── */
|
|
225
|
+
.features-grid {
|
|
226
|
+
display: grid;
|
|
227
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
228
|
+
gap: 1.5rem;
|
|
229
|
+
margin-bottom: 2rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.feature-card {
|
|
233
|
+
border-left: 3px solid #00d4ff;
|
|
234
|
+
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
235
|
+
padding: 1.5rem;
|
|
236
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.feature-title {
|
|
240
|
+
font-size: 0.95rem;
|
|
241
|
+
font-weight: bold;
|
|
242
|
+
text-transform: uppercase;
|
|
243
|
+
color: #00d4ff;
|
|
244
|
+
letter-spacing: 0.1em;
|
|
245
|
+
margin-bottom: 0.75rem;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.feature-description {
|
|
249
|
+
font-size: 0.8rem;
|
|
250
|
+
color: #0099bb;
|
|
251
|
+
line-height: 1.6;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* ── CTA ── */
|
|
255
|
+
.cta-button {
|
|
256
|
+
display: inline-block;
|
|
257
|
+
background: transparent;
|
|
258
|
+
border: 2px solid #00d4ff;
|
|
259
|
+
color: #00d4ff;
|
|
260
|
+
padding: 0.75rem 2rem;
|
|
261
|
+
font-family: 'Courier Prime', monospace;
|
|
262
|
+
font-size: 0.8rem;
|
|
263
|
+
font-weight: bold;
|
|
264
|
+
letter-spacing: 0.15em;
|
|
265
|
+
text-transform: uppercase;
|
|
266
|
+
cursor: pointer;
|
|
267
|
+
transition: all 0.3s ease;
|
|
268
|
+
text-decoration: none;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.cta-button:hover {
|
|
272
|
+
background: rgba(0, 212, 255, 0.1);
|
|
273
|
+
box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* ── Steps ── */
|
|
277
|
+
.step {
|
|
278
|
+
margin-bottom: 2.5rem;
|
|
279
|
+
padding: 1.5rem;
|
|
280
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
|
|
281
|
+
border-left: 3px solid #00d4ff;
|
|
282
|
+
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.step-number {
|
|
286
|
+
font-size: 1.8rem;
|
|
287
|
+
font-weight: bold;
|
|
288
|
+
color: #00d4ff;
|
|
289
|
+
letter-spacing: 0.1em;
|
|
290
|
+
margin-bottom: 0.5rem;
|
|
291
|
+
text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.step-title {
|
|
295
|
+
font-size: 1.1rem;
|
|
296
|
+
font-weight: bold;
|
|
297
|
+
text-transform: uppercase;
|
|
298
|
+
color: #00d4ff;
|
|
299
|
+
letter-spacing: 0.1em;
|
|
300
|
+
margin-bottom: 0.5rem;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.step-description {
|
|
304
|
+
font-size: 0.85rem;
|
|
305
|
+
color: #0099bb;
|
|
306
|
+
margin-bottom: 1rem;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.step-command {
|
|
310
|
+
border-left: 3px solid #00d4ff;
|
|
311
|
+
padding: 1rem 1rem 1rem 1.5rem;
|
|
312
|
+
margin-bottom: 1rem;
|
|
313
|
+
background: rgba(0, 0, 0, 0.5);
|
|
314
|
+
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.command {
|
|
318
|
+
font-family: 'Courier Prime', monospace;
|
|
319
|
+
font-size: 0.85rem;
|
|
320
|
+
color: #00d4ff;
|
|
321
|
+
font-weight: bold;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.step-details {
|
|
325
|
+
font-size: 0.8rem;
|
|
326
|
+
color: #0099bb;
|
|
327
|
+
margin-left: 1rem;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.step-details li {
|
|
331
|
+
list-style: none;
|
|
332
|
+
margin-bottom: 0.5rem;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.step-details li::before {
|
|
336
|
+
content: "▸ ";
|
|
337
|
+
color: #00d4ff;
|
|
338
|
+
margin-right: 0.5rem;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* ── Resources ── */
|
|
342
|
+
.resources-section {
|
|
343
|
+
border-left: 3px solid #00d4ff;
|
|
344
|
+
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
345
|
+
padding: 2rem;
|
|
346
|
+
margin-top: 2rem;
|
|
347
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.resources-label {
|
|
351
|
+
font-size: 0.65rem;
|
|
352
|
+
text-transform: uppercase;
|
|
353
|
+
letter-spacing: 0.2em;
|
|
354
|
+
font-weight: bold;
|
|
355
|
+
color: #0099bb;
|
|
356
|
+
margin-bottom: 1.5rem;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.resources-grid {
|
|
360
|
+
display: grid;
|
|
361
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
362
|
+
gap: 1rem;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.resource-item {
|
|
366
|
+
border-left: 2px solid #00d4ff;
|
|
367
|
+
padding: 1rem 1rem 1rem 1.5rem;
|
|
368
|
+
background: rgba(0, 212, 255, 0.03);
|
|
369
|
+
transition: all 0.3s ease;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.resource-item:hover {
|
|
373
|
+
background: rgba(0, 212, 255, 0.08);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.resource-link {
|
|
377
|
+
color: #00d4ff;
|
|
378
|
+
text-decoration: none;
|
|
379
|
+
font-size: 0.75rem;
|
|
380
|
+
text-transform: uppercase;
|
|
381
|
+
letter-spacing: 0.1em;
|
|
382
|
+
transition: all 0.3s ease;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.resource-link:hover {
|
|
386
|
+
text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* ── Token Leaderboard ── */
|
|
390
|
+
.leaderboard-header {
|
|
391
|
+
display: flex;
|
|
392
|
+
justify-content: space-between;
|
|
393
|
+
align-items: center;
|
|
394
|
+
margin-bottom: 1.5rem;
|
|
395
|
+
flex-wrap: wrap;
|
|
396
|
+
gap: 1rem;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.leaderboard-stats {
|
|
400
|
+
display: flex;
|
|
401
|
+
gap: 2rem;
|
|
402
|
+
flex-wrap: wrap;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.stat-box {
|
|
406
|
+
border-left: 2px solid #00d4ff;
|
|
407
|
+
padding: 0.5rem 1rem;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.stat-label {
|
|
411
|
+
font-size: 0.6rem;
|
|
412
|
+
text-transform: uppercase;
|
|
413
|
+
letter-spacing: 0.15em;
|
|
414
|
+
color: #0099bb;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.stat-value {
|
|
418
|
+
font-size: 1.2rem;
|
|
419
|
+
font-weight: bold;
|
|
420
|
+
color: #00d4ff;
|
|
421
|
+
text-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.token-table-wrap {
|
|
425
|
+
overflow-x: auto;
|
|
426
|
+
margin-bottom: 1.5rem;
|
|
427
|
+
border-left: 3px solid #00d4ff;
|
|
428
|
+
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
429
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.04) 0%, transparent 100%);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.token-table {
|
|
433
|
+
width: 100%;
|
|
434
|
+
border-collapse: collapse;
|
|
435
|
+
font-size: 0.78rem;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.token-table th {
|
|
439
|
+
text-align: left;
|
|
440
|
+
padding: 0.9rem 1rem;
|
|
441
|
+
font-size: 0.65rem;
|
|
442
|
+
text-transform: uppercase;
|
|
443
|
+
letter-spacing: 0.15em;
|
|
444
|
+
color: #0099bb;
|
|
445
|
+
border-bottom: 1px solid rgba(0, 212, 255, 0.3);
|
|
446
|
+
white-space: nowrap;
|
|
447
|
+
background: rgba(0, 212, 255, 0.06);
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.token-table td {
|
|
451
|
+
padding: 0.75rem 1rem;
|
|
452
|
+
border-bottom: 1px solid rgba(0, 212, 255, 0.1);
|
|
453
|
+
color: #00d4ff;
|
|
454
|
+
white-space: nowrap;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.token-table tr:hover td {
|
|
458
|
+
background: rgba(0, 212, 255, 0.06);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.token-table .symbol-cell {
|
|
462
|
+
font-weight: bold;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.token-table .name-cell {
|
|
466
|
+
color: #0099bb;
|
|
467
|
+
max-width: 180px;
|
|
468
|
+
overflow: hidden;
|
|
469
|
+
text-overflow: ellipsis;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.token-table .agent-cell {
|
|
473
|
+
color: #00aadd;
|
|
474
|
+
max-width: 160px;
|
|
475
|
+
overflow: hidden;
|
|
476
|
+
text-overflow: ellipsis;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.token-table .source-cell {
|
|
480
|
+
font-size: 0.7rem;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.token-table .time-cell {
|
|
484
|
+
color: #0099bb;
|
|
485
|
+
font-size: 0.7rem;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.token-table .links-cell a {
|
|
489
|
+
color: #00d4ff;
|
|
490
|
+
text-decoration: none;
|
|
491
|
+
font-size: 0.65rem;
|
|
492
|
+
text-transform: uppercase;
|
|
493
|
+
letter-spacing: 0.05em;
|
|
494
|
+
margin-right: 0.8rem;
|
|
495
|
+
transition: all 0.3s ease;
|
|
496
|
+
border-bottom: 1px solid transparent;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.token-table .links-cell a:hover {
|
|
500
|
+
text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
|
|
501
|
+
border-bottom-color: #00d4ff;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.source-badge {
|
|
505
|
+
display: inline-block;
|
|
506
|
+
padding: 0.15rem 0.5rem;
|
|
507
|
+
font-size: 0.6rem;
|
|
508
|
+
text-transform: uppercase;
|
|
509
|
+
letter-spacing: 0.1em;
|
|
510
|
+
border: 1px solid;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.source-badge.clawncher {
|
|
514
|
+
border-color: #00d4ff;
|
|
515
|
+
color: #00d4ff;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.source-badge.fourclaw {
|
|
519
|
+
border-color: #ffaa00;
|
|
520
|
+
color: #ffaa00;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.load-more-btn {
|
|
524
|
+
display: block;
|
|
525
|
+
width: 100%;
|
|
526
|
+
padding: 1rem;
|
|
527
|
+
margin-top: 1rem;
|
|
528
|
+
background: transparent;
|
|
529
|
+
border: 2px solid rgba(0, 212, 255, 0.4);
|
|
530
|
+
color: #00d4ff;
|
|
531
|
+
font-family: 'Courier Prime', monospace;
|
|
532
|
+
font-size: 0.8rem;
|
|
533
|
+
font-weight: bold;
|
|
534
|
+
text-transform: uppercase;
|
|
535
|
+
letter-spacing: 0.15em;
|
|
536
|
+
cursor: pointer;
|
|
537
|
+
transition: all 0.3s ease;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.load-more-btn:hover {
|
|
541
|
+
border-color: #00d4ff;
|
|
542
|
+
background: rgba(0, 212, 255, 0.08);
|
|
543
|
+
box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
.load-more-btn:disabled {
|
|
547
|
+
opacity: 0.4;
|
|
548
|
+
cursor: not-allowed;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.refresh-bar {
|
|
552
|
+
display: flex;
|
|
553
|
+
justify-content: space-between;
|
|
554
|
+
align-items: center;
|
|
555
|
+
margin-bottom: 1rem;
|
|
556
|
+
font-size: 0.7rem;
|
|
557
|
+
color: #0099bb;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.refresh-bar button {
|
|
561
|
+
background: transparent;
|
|
562
|
+
border: 1px solid rgba(0, 212, 255, 0.4);
|
|
563
|
+
color: #00d4ff;
|
|
564
|
+
font-family: 'Courier Prime', monospace;
|
|
565
|
+
font-size: 0.7rem;
|
|
566
|
+
padding: 0.4rem 1rem;
|
|
567
|
+
cursor: pointer;
|
|
568
|
+
text-transform: uppercase;
|
|
569
|
+
letter-spacing: 0.1em;
|
|
570
|
+
transition: all 0.3s ease;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.refresh-bar button:hover {
|
|
574
|
+
border-color: #00d4ff;
|
|
575
|
+
background: rgba(0, 212, 255, 0.08);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.loading-indicator {
|
|
579
|
+
text-align: center;
|
|
580
|
+
padding: 3rem;
|
|
581
|
+
color: #0099bb;
|
|
582
|
+
font-size: 0.85rem;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.loading-indicator .spinner {
|
|
586
|
+
display: inline-block;
|
|
587
|
+
width: 24px;
|
|
588
|
+
height: 24px;
|
|
589
|
+
border: 2px solid rgba(0, 212, 255, 0.2);
|
|
590
|
+
border-top-color: #00d4ff;
|
|
591
|
+
border-radius: 50%;
|
|
592
|
+
animation: spin 1s linear infinite;
|
|
593
|
+
margin-bottom: 1rem;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
@keyframes spin {
|
|
597
|
+
to {
|
|
598
|
+
transform: rotate(360deg);
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
@keyframes pulse {
|
|
603
|
+
|
|
604
|
+
0%,
|
|
605
|
+
100% {
|
|
606
|
+
opacity: 1;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
50% {
|
|
610
|
+
opacity: 0.5;
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.live-dot {
|
|
615
|
+
display: inline-block;
|
|
616
|
+
width: 8px;
|
|
617
|
+
height: 8px;
|
|
618
|
+
border-radius: 50%;
|
|
619
|
+
background: #00d4ff;
|
|
620
|
+
margin-right: 0.5rem;
|
|
621
|
+
animation: pulse 2s ease infinite;
|
|
622
|
+
box-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.error-msg {
|
|
626
|
+
padding: 1.5rem;
|
|
627
|
+
border-left: 3px solid #ff4444;
|
|
628
|
+
background: rgba(255, 0, 0, 0.05);
|
|
629
|
+
color: #ff6666;
|
|
630
|
+
font-size: 0.8rem;
|
|
631
|
+
margin-bottom: 1.5rem;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.error-msg a {
|
|
635
|
+
color: #00d4ff;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
/* ── Top 5 MCap ── */
|
|
639
|
+
.top5-section {
|
|
640
|
+
margin-bottom: 2rem;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.top5-label {
|
|
644
|
+
font-size: 0.65rem;
|
|
645
|
+
text-transform: uppercase;
|
|
646
|
+
letter-spacing: 0.2em;
|
|
647
|
+
color: #0099bb;
|
|
648
|
+
font-weight: bold;
|
|
649
|
+
margin-bottom: 1rem;
|
|
650
|
+
display: flex;
|
|
651
|
+
align-items: center;
|
|
652
|
+
gap: 0.5rem;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.top5-label::after {
|
|
656
|
+
content: '';
|
|
657
|
+
flex: 1;
|
|
658
|
+
height: 1px;
|
|
659
|
+
background: rgba(0, 212, 255, 0.2);
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.top5-grid {
|
|
663
|
+
display: grid;
|
|
664
|
+
grid-template-columns: repeat(5, 1fr);
|
|
665
|
+
gap: 0.75rem;
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
@media (max-width: 1024px) {
|
|
669
|
+
.top5-grid {
|
|
670
|
+
grid-template-columns: repeat(3, 1fr);
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
@media (max-width: 600px) {
|
|
675
|
+
.top5-grid {
|
|
676
|
+
grid-template-columns: repeat(2, 1fr);
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.top5-card {
|
|
681
|
+
background: rgba(0, 212, 255, 0.04);
|
|
682
|
+
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
683
|
+
border-top: 3px solid rgba(0, 212, 255, 0.3);
|
|
684
|
+
padding: 1rem;
|
|
685
|
+
position: relative;
|
|
686
|
+
transition: all 0.3s ease;
|
|
687
|
+
cursor: default;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.top5-card:hover {
|
|
691
|
+
background: rgba(0, 212, 255, 0.08);
|
|
692
|
+
border-color: rgba(0, 212, 255, 0.5);
|
|
693
|
+
transform: translateY(-2px);
|
|
694
|
+
box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.top5-card.rank-1 {
|
|
698
|
+
border-top-color: #ffd700;
|
|
699
|
+
background: rgba(255, 215, 0, 0.04);
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.top5-card.rank-1:hover {
|
|
703
|
+
background: rgba(255, 215, 0, 0.08);
|
|
704
|
+
border-color: rgba(255, 215, 0, 0.5);
|
|
705
|
+
box-shadow: 0 4px 20px rgba(255, 215, 0, 0.1);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.top5-card.rank-2 {
|
|
709
|
+
border-top-color: #c0c0c0;
|
|
710
|
+
background: rgba(192, 192, 192, 0.03);
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
.top5-card.rank-2:hover {
|
|
714
|
+
background: rgba(192, 192, 192, 0.07);
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.top5-card.rank-3 {
|
|
718
|
+
border-top-color: #cd7f32;
|
|
719
|
+
background: rgba(205, 127, 50, 0.03);
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
.top5-card.rank-3:hover {
|
|
723
|
+
background: rgba(205, 127, 50, 0.07);
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
.top5-rank {
|
|
727
|
+
font-size: 0.6rem;
|
|
728
|
+
text-transform: uppercase;
|
|
729
|
+
letter-spacing: 0.15em;
|
|
730
|
+
margin-bottom: 0.4rem;
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.top5-card.rank-1 .top5-rank {
|
|
734
|
+
color: #ffd700;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.top5-card.rank-2 .top5-rank {
|
|
738
|
+
color: #c0c0c0;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.top5-card.rank-3 .top5-rank {
|
|
742
|
+
color: #cd7f32;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.top5-card.rank-4 .top5-rank,
|
|
746
|
+
.top5-card.rank-5 .top5-rank {
|
|
747
|
+
color: #0099bb;
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
.top5-symbol {
|
|
751
|
+
font-size: 1.1rem;
|
|
752
|
+
font-weight: bold;
|
|
753
|
+
color: #00d4ff;
|
|
754
|
+
text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
|
|
755
|
+
margin-bottom: 0.2rem;
|
|
756
|
+
overflow: hidden;
|
|
757
|
+
text-overflow: ellipsis;
|
|
758
|
+
white-space: nowrap;
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
.top5-card.rank-1 .top5-symbol {
|
|
762
|
+
color: #ffd700;
|
|
763
|
+
text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
.top5-name {
|
|
767
|
+
font-size: 0.68rem;
|
|
768
|
+
color: #0099bb;
|
|
769
|
+
margin-bottom: 0.6rem;
|
|
770
|
+
overflow: hidden;
|
|
771
|
+
text-overflow: ellipsis;
|
|
772
|
+
white-space: nowrap;
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
.top5-mcap {
|
|
776
|
+
font-size: 0.85rem;
|
|
777
|
+
font-weight: bold;
|
|
778
|
+
color: #00d4ff;
|
|
779
|
+
margin-bottom: 0.2rem;
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
.top5-card.rank-1 .top5-mcap {
|
|
783
|
+
color: #ffd700;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
.top5-price {
|
|
787
|
+
font-size: 0.65rem;
|
|
788
|
+
color: #0099bb;
|
|
789
|
+
margin-bottom: 0.6rem;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
.top5-links {
|
|
793
|
+
display: flex;
|
|
794
|
+
gap: 0.5rem;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.top5-links a {
|
|
798
|
+
font-size: 0.6rem;
|
|
799
|
+
text-transform: uppercase;
|
|
800
|
+
letter-spacing: 0.08em;
|
|
801
|
+
color: #00d4ff;
|
|
802
|
+
text-decoration: none;
|
|
803
|
+
border-bottom: 1px solid transparent;
|
|
804
|
+
transition: all 0.2s ease;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.top5-links a:hover {
|
|
808
|
+
border-bottom-color: #00d4ff;
|
|
809
|
+
text-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
.top5-section-label {
|
|
813
|
+
font-size: 0.65rem;
|
|
814
|
+
text-transform: uppercase;
|
|
815
|
+
letter-spacing: 0.2em;
|
|
816
|
+
color: #0099bb;
|
|
817
|
+
font-weight: bold;
|
|
818
|
+
margin-bottom: 1rem;
|
|
819
|
+
margin-top: 0.5rem;
|
|
820
|
+
display: flex;
|
|
821
|
+
align-items: center;
|
|
822
|
+
gap: 0.5rem;
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
.top5-section-label::after {
|
|
826
|
+
content: '';
|
|
827
|
+
flex: 1;
|
|
828
|
+
height: 1px;
|
|
829
|
+
background: rgba(0, 212, 255, 0.2);
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
/* ── Footer ── */
|
|
833
|
+
footer {
|
|
834
|
+
border-top: 2px solid #00d4ff;
|
|
835
|
+
border-left: 6px solid #00d4ff;
|
|
836
|
+
background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
|
|
837
|
+
padding: 2rem 2rem 2rem 3rem;
|
|
838
|
+
text-align: left;
|
|
839
|
+
font-size: 0.65rem;
|
|
840
|
+
text-transform: uppercase;
|
|
841
|
+
letter-spacing: 0.1em;
|
|
842
|
+
color: #0099bb;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
/* ── Responsive ── */
|
|
846
|
+
@media (max-width: 1024px) {
|
|
847
|
+
main {
|
|
848
|
+
grid-template-columns: 1fr;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.sidebar {
|
|
852
|
+
position: static;
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
@media (max-width: 768px) {
|
|
857
|
+
main {
|
|
858
|
+
padding: 1rem;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
header {
|
|
862
|
+
padding: 1.5rem 1rem 1.5rem 1.5rem;
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
nav {
|
|
866
|
+
padding: 0 1rem 0 1.5rem;
|
|
867
|
+
gap: 1.5rem;
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
.section-title {
|
|
871
|
+
font-size: 1.5rem;
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
.hero-title {
|
|
875
|
+
font-size: 1.8rem;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
.step {
|
|
879
|
+
padding: 1rem;
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
.token-table {
|
|
883
|
+
font-size: 0.7rem;
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
.token-table th,
|
|
887
|
+
.token-table td {
|
|
888
|
+
padding: 0.5rem 0.6rem;
|
|
889
|
+
}
|
|
890
|
+
}
|
|
891
|
+
</style>
|
|
892
|
+
</head>
|
|
893
|
+
|
|
894
|
+
<body>
|
|
895
|
+
<header>
|
|
896
|
+
<h1>DACTYCLAW</h1>
|
|
897
|
+
<p>Agent Monitor & Deployer for Clawn Ecosystem</p>
|
|
898
|
+
</header>
|
|
899
|
+
|
|
900
|
+
<nav>
|
|
901
|
+
<button data-tab="home" class="nav-btn active">Home</button>
|
|
902
|
+
<button data-tab="leaderboard" class="nav-btn">Leaderboard</button>
|
|
903
|
+
<button data-tab="deploy" class="nav-btn">Deploy</button>
|
|
904
|
+
<button data-tab="docs" class="nav-btn">Documentation</button>
|
|
905
|
+
</nav>
|
|
906
|
+
|
|
907
|
+
<main>
|
|
908
|
+
<div class="content-wrapper">
|
|
909
|
+
|
|
910
|
+
<!-- ═══ HOME ═══ -->
|
|
911
|
+
<div id="home" class="content-section active">
|
|
912
|
+
<div class="hero-section">
|
|
913
|
+
<div class="hero-title">Autonomous Agents on Base</div>
|
|
914
|
+
<p class="hero-subtitle">
|
|
915
|
+
Create, deploy, and manage AI agents that operate autonomously on the Base network.
|
|
916
|
+
One command launches your agent with its own wallet, DNA signature, and token.
|
|
917
|
+
Earn 80% of trading fees automatically.
|
|
918
|
+
</p>
|
|
919
|
+
<button class="cta-button" onclick="switchTab('deploy')">Get Started</button>
|
|
920
|
+
</div>
|
|
921
|
+
|
|
922
|
+
<div class="spawn-label">Why DACTYCLAW?</div>
|
|
923
|
+
<div class="features-grid">
|
|
924
|
+
<div class="feature-card">
|
|
925
|
+
<div class="feature-title">One Command Deploy</div>
|
|
926
|
+
<div class="feature-description">Launch a fully autonomous AI agent in seconds. No complex
|
|
927
|
+
setup, no manual configuration.</div>
|
|
928
|
+
</div>
|
|
929
|
+
<div class="feature-card">
|
|
930
|
+
<div class="feature-title">Automatic Wallet</div>
|
|
931
|
+
<div class="feature-description">Each agent gets a unique DNA signature and autonomous wallet
|
|
932
|
+
for managing tokens and trades.</div>
|
|
933
|
+
</div>
|
|
934
|
+
<div class="feature-card">
|
|
935
|
+
<div class="feature-title">Fee Distribution</div>
|
|
936
|
+
<div class="feature-description">Earn 80% of trading fees from your agent's transactions
|
|
937
|
+
automatically to your wallet.</div>
|
|
938
|
+
</div>
|
|
939
|
+
<div class="feature-card">
|
|
940
|
+
<div class="feature-title">Base Network</div>
|
|
941
|
+
<div class="feature-description">Deploy on Ethereum's Layer 2 for fast, low-cost transactions
|
|
942
|
+
and maximum efficiency.</div>
|
|
943
|
+
</div>
|
|
944
|
+
<div class="feature-card">
|
|
945
|
+
<div class="feature-title">Live Leaderboard</div>
|
|
946
|
+
<div class="feature-description">Track 58,000+ tokens launched by agents in real-time from the
|
|
947
|
+
Clawn ecosystem.</div>
|
|
948
|
+
</div>
|
|
949
|
+
<div class="feature-card">
|
|
950
|
+
<div class="feature-title">Clanker Integration</div>
|
|
951
|
+
<div class="feature-description">Deploy ERC-20 tokens directly on Base via Clanker. Audited
|
|
952
|
+
smart contracts, instant listing.</div>
|
|
953
|
+
</div>
|
|
954
|
+
</div>
|
|
955
|
+
|
|
956
|
+
<div class="resources-section">
|
|
957
|
+
<div class="resources-label">Quick Links</div>
|
|
958
|
+
<div class="resources-grid">
|
|
959
|
+
<div class="resource-item"><a href="#leaderboard" class="resource-link"
|
|
960
|
+
onclick="switchTab('leaderboard')">Token Leaderboard</a></div>
|
|
961
|
+
<div class="resource-item"><a href="https://clanker.world" target="_blank"
|
|
962
|
+
class="resource-link">Clanker.world</a></div>
|
|
963
|
+
<div class="resource-item"><a href="https://clawn.ch/pad/" target="_blank"
|
|
964
|
+
class="resource-link">Clawnchpad</a></div>
|
|
965
|
+
<div class="resource-item"><a href="https://github.com/dactyclaw/dactyclaw" target="_blank"
|
|
966
|
+
class="resource-link">GitHub</a></div>
|
|
967
|
+
</div>
|
|
968
|
+
</div>
|
|
969
|
+
</div>
|
|
970
|
+
|
|
971
|
+
<!-- ═══ LEADERBOARD ═══ -->
|
|
972
|
+
<div id="leaderboard" class="content-section">
|
|
973
|
+
<div class="spawn-label"><span class="live-dot"></span> Live Feed</div>
|
|
974
|
+
<h2 class="section-title">Token Leaderboard</h2>
|
|
975
|
+
<p class="section-description">
|
|
976
|
+
Real-time token launches from the Clawn ecosystem on Base network via Clanker.
|
|
977
|
+
</p>
|
|
978
|
+
|
|
979
|
+
<div class="leaderboard-stats" id="leaderboard-stats">
|
|
980
|
+
<div class="stat-box">
|
|
981
|
+
<div class="stat-label">Total Tokens</div>
|
|
982
|
+
<div class="stat-value" id="stat-total">---</div>
|
|
983
|
+
</div>
|
|
984
|
+
<div class="stat-box">
|
|
985
|
+
<div class="stat-label">Source</div>
|
|
986
|
+
<div class="stat-value">clawn.ch</div>
|
|
987
|
+
</div>
|
|
988
|
+
<div class="stat-box">
|
|
989
|
+
<div class="stat-label">Network</div>
|
|
990
|
+
<div class="stat-value">Base</div>
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
|
|
994
|
+
<!-- Top 5 by MCap -->
|
|
995
|
+
<div class="top5-section">
|
|
996
|
+
<div class="top5-label">🏆 Top 5 by Market Cap</div>
|
|
997
|
+
<div class="top5-grid" id="top5-container">
|
|
998
|
+
<!-- populated by JS -->
|
|
999
|
+
</div>
|
|
1000
|
+
</div>
|
|
1001
|
+
|
|
1002
|
+
<!-- Recently Launched -->
|
|
1003
|
+
<div class="top5-section-label">🕐 Recently Launched</div>
|
|
1004
|
+
|
|
1005
|
+
<div class="refresh-bar">
|
|
1006
|
+
<span id="last-updated">Loading...</span>
|
|
1007
|
+
<button onclick="refreshTokens()" id="refresh-btn">↻ Refresh</button>
|
|
1008
|
+
</div>
|
|
1009
|
+
|
|
1010
|
+
<div id="token-container">
|
|
1011
|
+
<div class="loading-indicator" id="loading">
|
|
1012
|
+
<div class="spinner"></div>
|
|
1013
|
+
<div>Fetching tokens from clawn.ch...</div>
|
|
1014
|
+
</div>
|
|
1015
|
+
</div>
|
|
1016
|
+
|
|
1017
|
+
<button class="load-more-btn" id="load-more-btn" onclick="loadMoreTokens()" style="display:none;">
|
|
1018
|
+
Load More Tokens
|
|
1019
|
+
</button>
|
|
1020
|
+
</div>
|
|
1021
|
+
|
|
1022
|
+
<!-- ═══ DEPLOY ═══ -->
|
|
1023
|
+
<div id="deploy" class="content-section">
|
|
1024
|
+
<div class="spawn-label">Quick Deploy</div>
|
|
1025
|
+
<h2 class="section-title">Deploy</h2>
|
|
1026
|
+
|
|
1027
|
+
<div class="step-command" style="margin-bottom:1.5rem;">
|
|
1028
|
+
<div class="command">$ npx dacty-create</div>
|
|
1029
|
+
<div style="color:#0099bb;font-size:0.75rem;margin-top:0.3rem;">Create agent → DNA + wallet
|
|
1030
|
+
generated</div>
|
|
1031
|
+
</div>
|
|
1032
|
+
|
|
1033
|
+
<div class="step-command" style="margin-bottom:1.5rem;">
|
|
1034
|
+
<div class="command">$ npx dacty-launch</div>
|
|
1035
|
+
<div style="color:#0099bb;font-size:0.75rem;margin-top:0.3rem;">Launch token on Base via Clanker
|
|
1036
|
+
</div>
|
|
1037
|
+
</div>
|
|
1038
|
+
|
|
1039
|
+
<div style="display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem;">
|
|
1040
|
+
<button class="cta-button" onclick="switchTab('docs')">Full Docs →</button>
|
|
1041
|
+
</div>
|
|
1042
|
+
</div>
|
|
1043
|
+
|
|
1044
|
+
<!-- ═══ DOCS ═══ -->
|
|
1045
|
+
<div id="docs" class="content-section">
|
|
1046
|
+
<div class="spawn-label">Complete Guide</div>
|
|
1047
|
+
<h2 class="section-title">Documentation</h2>
|
|
1048
|
+
<p class="section-description">Complete guide to creating, launching, and managing your AI agents on
|
|
1049
|
+
Base network.</p>
|
|
1050
|
+
|
|
1051
|
+
<div class="step">
|
|
1052
|
+
<div class="step-title">Quick Start</div>
|
|
1053
|
+
<div class="step-description">Get up and running in 2 commands</div>
|
|
1054
|
+
<div class="step-command">
|
|
1055
|
+
<div class="command">$ npx dacty-create && npx dacty-launch</div>
|
|
1056
|
+
</div>
|
|
1057
|
+
</div>
|
|
1058
|
+
|
|
1059
|
+
<div class="step">
|
|
1060
|
+
<div class="step-title">Core Concepts</div>
|
|
1061
|
+
<ul class="step-details">
|
|
1062
|
+
<li><strong>Agent DNA:</strong> Unique identifier for your agent</li>
|
|
1063
|
+
<li><strong>Wallet:</strong> Autonomous wallet for token management</li>
|
|
1064
|
+
<li><strong>Private Key:</strong> Secure access to agent operations</li>
|
|
1065
|
+
<li><strong>Fee Distribution:</strong> Automatic earnings from trades (80/20 split)</li>
|
|
1066
|
+
<li><strong>Base Network:</strong> Ethereum Layer 2 for fast, low-cost launches</li>
|
|
1067
|
+
<li><strong>Clanker:</strong> Audited smart-contract system for creating ERC-20 token markets
|
|
1068
|
+
</li>
|
|
1069
|
+
</ul>
|
|
1070
|
+
</div>
|
|
1071
|
+
|
|
1072
|
+
<div class="step">
|
|
1073
|
+
<div class="step-title">Step-by-Step Guide</div>
|
|
1074
|
+
<div class="step-description">Detailed walkthrough of the entire process</div>
|
|
1075
|
+
<ul class="step-details">
|
|
1076
|
+
<li>Install DACTYCLAW CLI</li>
|
|
1077
|
+
<li>Create your agent with custom name</li>
|
|
1078
|
+
<li>Configure token parameters</li>
|
|
1079
|
+
<li>Deploy to Base network via Clanker</li>
|
|
1080
|
+
<li>Monitor agent performance on the leaderboard</li>
|
|
1081
|
+
</ul>
|
|
1082
|
+
</div>
|
|
1083
|
+
|
|
1084
|
+
<div class="step">
|
|
1085
|
+
<div class="step-title">CLI Commands</div>
|
|
1086
|
+
<div class="step-command">
|
|
1087
|
+
<div class="command">$ npx dacty-create [name]</div>
|
|
1088
|
+
<div style="color:#0099bb;font-size:0.75rem;margin-top:0.5rem;">Create a new agent</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
<div class="step-command">
|
|
1091
|
+
<div class="command">$ npx dacty-launch</div>
|
|
1092
|
+
<div style="color:#0099bb;font-size:0.75rem;margin-top:0.5rem;">Launch token on Base via Clanker
|
|
1093
|
+
</div>
|
|
1094
|
+
</div>
|
|
1095
|
+
<div class="step-command">
|
|
1096
|
+
<div class="command">$ npx dacty-status</div>
|
|
1097
|
+
<div style="color:#0099bb;font-size:0.75rem;margin-top:0.5rem;">Check agent status</div>
|
|
1098
|
+
</div>
|
|
1099
|
+
</div>
|
|
1100
|
+
|
|
1101
|
+
<div class="step">
|
|
1102
|
+
<div class="step-title">External Links</div>
|
|
1103
|
+
<ul class="step-details">
|
|
1104
|
+
<li><a href="https://clawn.ch" target="_blank" style="color:#00d4ff;">clawn.ch</a> — Token
|
|
1105
|
+
infrastructure for agents</li>
|
|
1106
|
+
<li><a href="https://clawn.ch/pad/" target="_blank" style="color:#00d4ff;">Clawnchpad</a> —
|
|
1107
|
+
Ecosystem dashboard & agent skills toolkit</li>
|
|
1108
|
+
<li><a href="https://clanker.world" target="_blank" style="color:#00d4ff;">Clanker.world</a> —
|
|
1109
|
+
ERC-20 token deployment on Base</li>
|
|
1110
|
+
<li><a href="https://clawn.ch/docs" target="_blank" style="color:#00d4ff;">Clawn Docs</a> —
|
|
1111
|
+
Technical documentation</li>
|
|
1112
|
+
<li><a href="https://clawn.ch/api/tokens" target="_blank" style="color:#00d4ff;">API:
|
|
1113
|
+
/api/tokens</a> — Public token data API</li>
|
|
1114
|
+
</ul>
|
|
1115
|
+
</div>
|
|
1116
|
+
|
|
1117
|
+
<div class="step">
|
|
1118
|
+
<div class="step-title">Security Guidelines</div>
|
|
1119
|
+
<ul class="step-details">
|
|
1120
|
+
<li>Never share your agent's private key</li>
|
|
1121
|
+
<li>Keep your wallet secure</li>
|
|
1122
|
+
<li>Verify contract addresses before deployment</li>
|
|
1123
|
+
<li>Monitor agent activity regularly</li>
|
|
1124
|
+
</ul>
|
|
1125
|
+
</div>
|
|
1126
|
+
|
|
1127
|
+
<div class="step">
|
|
1128
|
+
<div class="step-title">Troubleshooting</div>
|
|
1129
|
+
<ul class="step-details">
|
|
1130
|
+
<li>Deployment failed? Check Base network connection</li>
|
|
1131
|
+
<li>Agent not responding? Verify wallet balance</li>
|
|
1132
|
+
<li>Token not trading? Check <a href="https://clanker.world" target="_blank"
|
|
1133
|
+
style="color:#00d4ff;">Clanker listing</a></li>
|
|
1134
|
+
</ul>
|
|
1135
|
+
</div>
|
|
1136
|
+
</div>
|
|
1137
|
+
</div>
|
|
1138
|
+
|
|
1139
|
+
<!-- ── Sidebar ── -->
|
|
1140
|
+
<aside class="sidebar">
|
|
1141
|
+
<div class="sidebar-title">Status</div>
|
|
1142
|
+
<div class="sidebar-item">
|
|
1143
|
+
<div class="sidebar-label">Network</div>
|
|
1144
|
+
<div class="sidebar-value">Base Mainnet</div>
|
|
1145
|
+
</div>
|
|
1146
|
+
<div class="sidebar-item">
|
|
1147
|
+
<div class="sidebar-label">Version</div>
|
|
1148
|
+
<div class="sidebar-value">v2.2</div>
|
|
1149
|
+
</div>
|
|
1150
|
+
<div class="sidebar-item">
|
|
1151
|
+
<div class="sidebar-label">Status</div>
|
|
1152
|
+
<div class="sidebar-value"><span class="live-dot"></span>Active</div>
|
|
1153
|
+
</div>
|
|
1154
|
+
<div class="sidebar-item">
|
|
1155
|
+
<div class="sidebar-label">Fee Split</div>
|
|
1156
|
+
<div class="sidebar-value">80% / 20%</div>
|
|
1157
|
+
</div>
|
|
1158
|
+
<div class="sidebar-item">
|
|
1159
|
+
<div class="sidebar-label">Tokens Tracked</div>
|
|
1160
|
+
<div class="sidebar-value" id="sidebar-tokens">---</div>
|
|
1161
|
+
</div>
|
|
1162
|
+
<div class="sidebar-item">
|
|
1163
|
+
<div class="sidebar-label">Ecosystem</div>
|
|
1164
|
+
<div style="margin-top:0.5rem;">
|
|
1165
|
+
<a href="https://clawn.ch" target="_blank" class="resource-link"
|
|
1166
|
+
style="display:block;margin-bottom:0.5rem;">clawn.ch</a>
|
|
1167
|
+
<a href="https://clanker.world" target="_blank" class="resource-link"
|
|
1168
|
+
style="display:block;margin-bottom:0.5rem;">clanker.world</a>
|
|
1169
|
+
<a href="https://github.com/dactyclaw/dactyclaw" target="_blank" class="resource-link"
|
|
1170
|
+
style="display:block;">github</a>
|
|
1171
|
+
</div>
|
|
1172
|
+
</div>
|
|
1173
|
+
</aside>
|
|
1174
|
+
</main>
|
|
1175
|
+
|
|
1176
|
+
<footer>DACTYCLAW v2.2 — Live Agent Infrastructure for Clawn Ecosystem on Base</footer>
|
|
1177
|
+
|
|
1178
|
+
<script>
|
|
1179
|
+
/* ── Tab Navigation ── */
|
|
1180
|
+
const navButtons = document.querySelectorAll('.nav-btn');
|
|
1181
|
+
const sections = document.querySelectorAll('.content-section');
|
|
1182
|
+
|
|
1183
|
+
function switchTab(tabName) {
|
|
1184
|
+
navButtons.forEach(btn => btn.classList.remove('active'));
|
|
1185
|
+
sections.forEach(sec => sec.classList.remove('active'));
|
|
1186
|
+
const btn = document.querySelector(`[data-tab="${tabName}"]`);
|
|
1187
|
+
if (btn) btn.classList.add('active');
|
|
1188
|
+
const sec = document.getElementById(tabName);
|
|
1189
|
+
if (sec) sec.classList.add('active');
|
|
1190
|
+
window.location.hash = tabName;
|
|
1191
|
+
|
|
1192
|
+
if (tabName === 'leaderboard' && allTokens.length === 0) {
|
|
1193
|
+
fetchTokens();
|
|
1194
|
+
}
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
navButtons.forEach(button => {
|
|
1198
|
+
button.addEventListener('click', () => switchTab(button.getAttribute('data-tab')));
|
|
1199
|
+
});
|
|
1200
|
+
|
|
1201
|
+
/* ── Token Leaderboard ── */
|
|
1202
|
+
let allTokens = [];
|
|
1203
|
+
let displayedCount = 0;
|
|
1204
|
+
const PER_PAGE = 50;
|
|
1205
|
+
let totalTokens = 0;
|
|
1206
|
+
let autoRefreshInterval = null;
|
|
1207
|
+
|
|
1208
|
+
async function fetchTokens() {
|
|
1209
|
+
const loading = document.getElementById('loading');
|
|
1210
|
+
const container = document.getElementById('token-container');
|
|
1211
|
+
const loadMoreBtn = document.getElementById('load-more-btn');
|
|
1212
|
+
|
|
1213
|
+
loading.style.display = 'block';
|
|
1214
|
+
loadMoreBtn.style.display = 'none';
|
|
1215
|
+
|
|
1216
|
+
try {
|
|
1217
|
+
let data, topData;
|
|
1218
|
+
|
|
1219
|
+
// Fetch both recent tokens and top tokens in parallel
|
|
1220
|
+
const [recentRes, topRes] = await Promise.all([
|
|
1221
|
+
fetch('/api/tokens'),
|
|
1222
|
+
fetch('/api/top-tokens')
|
|
1223
|
+
]);
|
|
1224
|
+
|
|
1225
|
+
if (!recentRes.ok || !topRes.ok) throw new Error('proxy unavailable');
|
|
1226
|
+
|
|
1227
|
+
data = await recentRes.json();
|
|
1228
|
+
topData = await topRes.json();
|
|
1229
|
+
|
|
1230
|
+
if (data.success && data.tokens) {
|
|
1231
|
+
allTokens = data.tokens;
|
|
1232
|
+
totalTokens = data.count || data.tokens.length;
|
|
1233
|
+
displayedCount = 0;
|
|
1234
|
+
|
|
1235
|
+
document.getElementById('stat-total').textContent = totalTokens.toLocaleString();
|
|
1236
|
+
document.getElementById('sidebar-tokens').textContent = totalTokens.toLocaleString();
|
|
1237
|
+
|
|
1238
|
+
// render top 5 from the new endpoint, which has market cap data
|
|
1239
|
+
const topTokensList = topData.success && topData.tokens ? topData.tokens : allTokens;
|
|
1240
|
+
renderTop5(topTokensList);
|
|
1241
|
+
renderTokenTable();
|
|
1242
|
+
updateTimestamp();
|
|
1243
|
+
|
|
1244
|
+
if (!autoRefreshInterval) {
|
|
1245
|
+
autoRefreshInterval = setInterval(refreshTokens, 30000);
|
|
1246
|
+
}
|
|
1247
|
+
}
|
|
1248
|
+
} catch (err) {
|
|
1249
|
+
container.innerHTML = `
|
|
1250
|
+
<div class="error-msg">
|
|
1251
|
+
⚠ Could not fetch tokens. Check your connection.<br><br>
|
|
1252
|
+
View directly at: <a href="https://clawn.ch/pad/" target="_blank">clawn.ch/pad/</a>
|
|
1253
|
+
</div>
|
|
1254
|
+
`;
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
loading.style.display = 'none';
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
function fmtMcap(val) {
|
|
1261
|
+
if (!val || val === null) return 'N/A';
|
|
1262
|
+
const n = parseFloat(val);
|
|
1263
|
+
if (n >= 1e9) return '$' + (n / 1e9).toFixed(2) + 'B';
|
|
1264
|
+
if (n >= 1e6) return '$' + (n / 1e6).toFixed(2) + 'M';
|
|
1265
|
+
if (n >= 1e3) return '$' + (n / 1e3).toFixed(1) + 'K';
|
|
1266
|
+
return '$' + n.toFixed(2);
|
|
1267
|
+
}
|
|
1268
|
+
|
|
1269
|
+
function fmtPrice(val) {
|
|
1270
|
+
if (!val || val === null) return 'N/A';
|
|
1271
|
+
const n = parseFloat(val);
|
|
1272
|
+
if (n < 0.000001) return '$' + n.toExponential(2);
|
|
1273
|
+
if (n < 0.01) return '$' + n.toFixed(6);
|
|
1274
|
+
return '$' + n.toFixed(4);
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
function renderTop5(tokens) {
|
|
1278
|
+
const container = document.getElementById('top5-container');
|
|
1279
|
+
// Sort by marketCap desc, filter nulls first; fallback to all tokens if none have mcap
|
|
1280
|
+
const withMcap = tokens.filter(t => t.marketCap !== null && t.marketCap > 0);
|
|
1281
|
+
const sorted = withMcap.sort((a, b) => b.marketCap - a.marketCap).slice(0, 5);
|
|
1282
|
+
|
|
1283
|
+
// If no mcap data, fallback to top 5 by recency (first 5 in list)
|
|
1284
|
+
const top5 = sorted.length >= 3 ? sorted : tokens.slice(0, 5);
|
|
1285
|
+
const noMcapData = sorted.length < 3;
|
|
1286
|
+
|
|
1287
|
+
const rankEmoji = ['🥇', '🥈', '🥉', '4th', '5th'];
|
|
1288
|
+
let html = '';
|
|
1289
|
+
top5.forEach((t, i) => {
|
|
1290
|
+
const rank = i + 1;
|
|
1291
|
+
const srcClass = t.source === '4claw' ? 'fourclaw' : 'clawncher';
|
|
1292
|
+
html += `
|
|
1293
|
+
<div class="top5-card rank-${rank}">
|
|
1294
|
+
<div class="top5-rank">${rankEmoji[i]} Rank #${rank}</div>
|
|
1295
|
+
<div class="top5-symbol" title="${escHtml(t.symbol)}">${escHtml(t.symbol)}</div>
|
|
1296
|
+
<div class="top5-name" title="${escHtml(t.name)}">${escHtml(t.name)}</div>
|
|
1297
|
+
<div class="top5-mcap">${noMcapData ? '—' : fmtMcap(t.marketCap)}</div>
|
|
1298
|
+
<div class="top5-price">${noMcapData ? 'By recency' : fmtPrice(t.priceUsd)}</div>
|
|
1299
|
+
<div class="top5-links">
|
|
1300
|
+
<a href="${escHtml(t.clanker_url)}" target="_blank">Clanker</a>
|
|
1301
|
+
<a href="${escHtml(t.explorer_url)}" target="_blank">BaseScan</a>
|
|
1302
|
+
${t.source_url ? `<a href="${escHtml(t.source_url)}" target="_blank">Source</a>` : ''}
|
|
1303
|
+
</div>
|
|
1304
|
+
</div>`;
|
|
1305
|
+
});
|
|
1306
|
+
container.innerHTML = html || '<div style="color:#0099bb;font-size:0.8rem;">No market cap data available yet.</div>';
|
|
1307
|
+
}
|
|
1308
|
+
|
|
1309
|
+
function renderTokenTable() {
|
|
1310
|
+
const container = document.getElementById('token-container');
|
|
1311
|
+
const loadMoreBtn = document.getElementById('load-more-btn');
|
|
1312
|
+
const end = Math.min(displayedCount + PER_PAGE, allTokens.length);
|
|
1313
|
+
const tokensToShow = allTokens.slice(0, end);
|
|
1314
|
+
displayedCount = end;
|
|
1315
|
+
|
|
1316
|
+
let html = `<div class="token-table-wrap"><table class="token-table">
|
|
1317
|
+
<thead><tr>
|
|
1318
|
+
<th>#</th><th>Symbol</th><th>Name</th><th>Agent</th><th>Source</th><th>Launched</th><th>Links</th>
|
|
1319
|
+
</tr></thead><tbody>`;
|
|
1320
|
+
|
|
1321
|
+
tokensToShow.forEach((t, i) => {
|
|
1322
|
+
const time = timeAgo(t.launchedAt);
|
|
1323
|
+
const srcClass = t.source === '4claw' ? 'fourclaw' : 'clawncher';
|
|
1324
|
+
const srcLabel = t.source === '4claw' ? '4claw' : 'clawncher';
|
|
1325
|
+
html += `<tr>
|
|
1326
|
+
<td style="color:#0099bb;">${i + 1}</td>
|
|
1327
|
+
<td class="symbol-cell">${escHtml(t.symbol)}</td>
|
|
1328
|
+
<td class="name-cell" title="${escHtml(t.name)}">${escHtml(t.name)}</td>
|
|
1329
|
+
<td class="agent-cell" title="${escHtml(t.agent)}">${escHtml(t.agent)}</td>
|
|
1330
|
+
<td class="source-cell"><span class="source-badge ${srcClass}">${srcLabel}</span></td>
|
|
1331
|
+
<td class="time-cell">${time}</td>
|
|
1332
|
+
<td class="links-cell">
|
|
1333
|
+
<a href="${t.clanker_url}" target="_blank">Clanker</a>
|
|
1334
|
+
<a href="${t.explorer_url}" target="_blank">BaseScan</a>
|
|
1335
|
+
${t.source_url ? `<a href="${t.source_url}" target="_blank">Source</a>` : ''}
|
|
1336
|
+
</td>
|
|
1337
|
+
</tr>`;
|
|
1338
|
+
});
|
|
1339
|
+
|
|
1340
|
+
html += '</tbody></table></div>';
|
|
1341
|
+
container.innerHTML = html;
|
|
1342
|
+
|
|
1343
|
+
if (displayedCount < allTokens.length) {
|
|
1344
|
+
loadMoreBtn.style.display = 'block';
|
|
1345
|
+
loadMoreBtn.textContent = `Load More (${displayedCount} of ${allTokens.length})`;
|
|
1346
|
+
} else {
|
|
1347
|
+
loadMoreBtn.style.display = 'none';
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
|
|
1351
|
+
function loadMoreTokens() {
|
|
1352
|
+
renderTokenTable();
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
async function refreshTokens() {
|
|
1356
|
+
document.getElementById('refresh-btn').textContent = '↻ Refreshing...';
|
|
1357
|
+
await fetchTokens();
|
|
1358
|
+
document.getElementById('refresh-btn').textContent = '↻ Refresh';
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
function updateTimestamp() {
|
|
1362
|
+
const now = new Date();
|
|
1363
|
+
document.getElementById('last-updated').textContent =
|
|
1364
|
+
`Last updated: ${now.toLocaleTimeString()} — Auto-refresh every 30s`;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
function timeAgo(dateStr) {
|
|
1368
|
+
const diff = Date.now() - new Date(dateStr).getTime();
|
|
1369
|
+
const s = Math.floor(diff / 1000);
|
|
1370
|
+
if (s < 60) return s + 's ago';
|
|
1371
|
+
const m = Math.floor(s / 60);
|
|
1372
|
+
if (m < 60) return m + 'm ago';
|
|
1373
|
+
const h = Math.floor(m / 60);
|
|
1374
|
+
if (h < 24) return h + 'h ago';
|
|
1375
|
+
const d = Math.floor(h / 24);
|
|
1376
|
+
return d + 'd ago';
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
function escHtml(str) {
|
|
1380
|
+
if (!str) return '';
|
|
1381
|
+
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1384
|
+
/* ── Hash Navigation ── */
|
|
1385
|
+
const validTabs = ['home', 'leaderboard', 'deploy', 'docs'];
|
|
1386
|
+
window.addEventListener('hashchange', () => {
|
|
1387
|
+
const h = window.location.hash.slice(1);
|
|
1388
|
+
if (validTabs.includes(h)) switchTab(h);
|
|
1389
|
+
});
|
|
1390
|
+
const initHash = window.location.hash.slice(1);
|
|
1391
|
+
if (validTabs.includes(initHash)) switchTab(initHash);
|
|
1392
|
+
</script>
|
|
1393
|
+
</body>
|
|
1394
|
+
|
|
1395
|
+
</html>
|