vue-kaspa-cli 0.1.10 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/templates/nuxt/app/app.vue +6 -1
  3. package/templates/nuxt/app/components/KaspaStatus.vue +215 -122
  4. package/templates/vue/src/App.vue +1 -1
  5. package/templates/vue/src/components/KaspaStatus.vue +262 -123
  6. package/templates/vue/src/main.ts +2 -2
  7. package/templates/vue/src/style.css +6 -1
  8. package/templates/vue/vite.config.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-kaspa-cli",
3
- "version": "0.1.10",
3
+ "version": "0.1.12",
4
4
  "type": "module",
5
5
  "description": "Scaffold a Vue 3 or Nuxt app wired to the Kaspa blockchain",
6
6
  "license": "MIT",
package/templates/nuxt/app/app.vue CHANGED
@@ -31,7 +31,12 @@
31
31
  body {
32
32
  margin: 0;
33
33
  min-height: 100vh;
34
- background: var(--ks-surface);
34
+ background:
35
+ radial-gradient(ellipse 60% 55% at 8% 100%, rgba(73, 197, 163, .32) 0%, transparent 55%),
36
+ radial-gradient(ellipse 60% 55% at 92% 100%, rgba(73, 197, 163, .32) 0%, transparent 55%),
37
+ radial-gradient(ellipse 80% 28% at 50% 100%, rgba(73, 197, 163, .18) 0%, transparent 60%),
38
+ var(--ks-surface);
39
+ background-attachment: fixed;
35
40
  color: var(--ks-text);
36
41
  font-family: Inter, system-ui, -apple-system, sans-serif;
37
42
  }
package/templates/nuxt/app/components/KaspaStatus.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <script setup lang="ts">
2
- import { ref, computed, onMounted, onUnmounted } from 'vue'
3
- import { Droplet, BookOpen, Search, ArrowUpRight, Heart, Copy, Check } from 'lucide-vue-next'
2
+ import { ArrowUpRight, BookOpen, Check, Copy, Droplet, Heart, Search } from 'lucide-vue-next'
3
+ import { computed, onMounted, onUnmounted, ref } from 'vue'
4
4
  // useKaspa and useRpc are auto-imported by Nuxt.
5
5
 
6
6
  const kaspa = useKaspa()
@@ -41,12 +41,12 @@ const daaScore = computed(() =>
41
41
  )
42
42
 
43
43
  const links = [
44
- { label: 'Faucet', title: 'Testnet 10', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn10.kaspanet.io/' },
45
- { label: 'Faucet', title: 'Testnet 12', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn12.kaspanet.io/' },
46
- { label: 'Docs', title: 'vue-kaspa', desc: 'Read the full docs', icon: BookOpen, href: 'https://vue-kaspa.vercel.app/' },
47
- { label: 'Explorer', title: 'Testnet 10', desc: 'Browse transactions', icon: Search, href: 'https://tn10.kaspa.stream/' },
48
- { label: 'Explorer', title: 'Testnet 12', desc: 'Browse transactions', icon: Search, href: 'https://tn12.kaspa.stream/' },
49
- { label: 'Explorer', title: 'Mainnet', desc: 'Browse transactions', icon: Search, href: 'https://kaspa.stream/' },
44
+ { label: 'Faucet', title: 'Testnet 10', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn10.kaspanet.io/' },
45
+ { label: 'Faucet', title: 'Testnet 12', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn12.kaspanet.io/' },
46
+ { label: 'Docs', title: 'Vue Kaspa', desc: 'Read the full docs', icon: BookOpen, href: 'https://vue-kaspa.vercel.app/' },
47
+ { label: 'Explorer', title: 'Testnet 10', desc: 'Browse transactions', icon: Search, href: 'https://tn10.kaspa.stream/' },
48
+ { label: 'Explorer', title: 'Testnet 12', desc: 'Browse transactions', icon: Search, href: 'https://tn12.kaspa.stream/' },
49
+ { label: 'Explorer', title: 'Mainnet', desc: 'Browse transactions', icon: Search, href: 'https://kaspa.stream/' },
50
50
  ]
51
51
 
52
52
  function onMouseMove(e: MouseEvent) {
@@ -67,8 +67,9 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
67
67
  <dialog ref="donateDialog" class="ks-dialog" @click.self="donateDialog?.close()">
68
68
  <div class="ks-dialog-inner">
69
69
  <button class="ks-dialog-close" @click="donateDialog?.close()">✕</button>
70
- <p class="ks-dialog-title">Support vue-kaspa ❤️</p>
71
- <p class="ks-dialog-body">vue-kaspa is free and open-source. If it saves you time, consider sending some KAS — every bit helps keep the project alive and maintained.</p>
70
+ <p class="ks-dialog-title">Support Vue Kaspa ❤️</p>
71
+ <p class="ks-dialog-body">Vue Kaspa is free and open-source. If it saves you time, consider sending some KAS —
72
+ every bit helps keep the project alive and maintained.</p>
72
73
  <div class="ks-copy-wrap">
73
74
  <code class="ks-dialog-addr">{{ KASPA_ADDRESS }}</code>
74
75
  <button class="ks-copy-btn" :class="{ copied }" @click="copyAddress">
@@ -85,18 +86,14 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
85
86
 
86
87
  <!-- Header -->
87
88
  <header class="ks-header">
88
- <img src="/logo.png" alt="vue-kaspa" class="ks-header-logo" />
89
- <span class="ks-header-brand">vue-kaspa</span>
89
+ <img src="/logo.png" alt="Vue Kaspa" class="ks-header-logo" />
90
+ <span class="ks-header-brand">Vue Kaspa</span>
90
91
  <nav class="ks-header-nav">
91
- <a
92
- href="https://github.com/furatamasensei/vue-kaspa"
93
- target="_blank"
94
- rel="noopener"
95
- class="ks-icon-btn"
96
- title="GitHub"
97
- >
92
+ <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener" class="ks-icon-btn"
93
+ title="GitHub">
98
94
  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
99
- <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
95
+ <path
96
+ d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
100
97
  </svg>
101
98
  </a>
102
99
  <button class="ks-icon-btn" title="Support this project" @click="donateDialog?.showModal()">
@@ -105,68 +102,55 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
105
102
  </nav>
106
103
  </header>
107
104
 
108
- <!-- Gradient + bento grid -->
109
- <div class="ks-grid-wrap">
110
- <div ref="bento" class="ks-grid">
111
-
112
- <!-- Network card: col 1–2, row 1–3 -->
113
- <div data-shine class="ks-shine ks-net-shine">
114
- <div class="ks-card ks-net-card">
115
- <div class="ks-net-top">
116
- <span class="ks-net-icon">⬡</span>
117
- <span
118
- class="ks-badge"
119
- :style="`border-color:${badgeColor};color:${badgeColor}`"
120
- >{{ stateLabel }}</span>
105
+ <!-- Bento grid -->
106
+ <div ref="bento" class="ks-grid">
107
+
108
+ <!-- Network card: col 1–2, row 1–3 -->
109
+ <div data-shine class="ks-shine ks-net-shine">
110
+ <div class="ks-card ks-net-card">
111
+ <div class="ks-net-top">
112
+ <span class="ks-net-icon">⬡</span>
113
+ <span class="ks-badge" :style="`border-color:${badgeColor};color:${badgeColor}`">{{ stateLabel }}</span>
114
+ </div>
115
+ <div class="ks-stats">
116
+ <div class="ks-stat">
117
+ <span class="ks-stat-label">Network</span>
118
+ <span class="ks-stat-value">{{ rpc.networkId.value ?? '—' }}</span>
119
+ </div>
120
+ <div class="ks-stat">
121
+ <span class="ks-stat-label">Server version</span>
122
+ <span class="ks-stat-value">{{ rpc.serverVersion.value ?? '—' }}</span>
121
123
  </div>
122
- <div class="ks-stats">
123
- <div class="ks-stat">
124
- <span class="ks-stat-label">Network</span>
125
- <span class="ks-stat-value">{{ rpc.networkId.value ?? '—' }}</span>
126
- </div>
127
- <div class="ks-stat">
128
- <span class="ks-stat-label">Server version</span>
129
- <span class="ks-stat-value">{{ rpc.serverVersion.value ?? '—' }}</span>
130
- </div>
131
- <div class="ks-stat">
132
- <span class="ks-stat-label">DAA Score</span>
133
- <span class="ks-stat-value" style="font-family:monospace">{{ daaScore }}</span>
134
- </div>
135
- <div class="ks-stat">
136
- <span class="ks-stat-label">Synced</span>
137
- <span
138
- class="ks-stat-value"
139
- :style="`color:${rpc.isConnected.value ? (rpc.isSynced.value ? '#4caf50' : 'var(--ks-text)') : 'var(--ks-muted)'}`"
140
- >{{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}</span>
141
- </div>
124
+ <div class="ks-stat">
125
+ <span class="ks-stat-label">DAA Score</span>
126
+ <span class="ks-stat-value" style="font-family:monospace">{{ daaScore }}</span>
127
+ </div>
128
+ <div class="ks-stat">
129
+ <span class="ks-stat-label">Synced</span>
130
+ <span class="ks-stat-value"
131
+ :style="`color:${rpc.isConnected.value ? (rpc.isSynced.value ? '#4caf50' : 'var(--ks-text)') : 'var(--ks-muted)'}`">{{
132
+ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}</span>
142
133
  </div>
143
134
  </div>
144
135
  </div>
136
+ </div>
145
137
 
146
- <!-- Link cards: auto-placed into Γ shape -->
147
- <a
148
- v-for="link in links"
149
- :key="link.href"
150
- data-shine
151
- class="ks-shine ks-link-shine"
152
- :href="link.href"
153
- target="_blank"
154
- rel="noopener"
155
- >
156
- <div class="ks-card ks-link-card">
157
- <div class="ks-link-top">
158
- <component :is="link.icon" :size="20" class="ks-link-icon" />
159
- <ArrowUpRight :size="13" class="ks-link-arrow" />
160
- </div>
161
- <div>
162
- <div class="ks-link-label">{{ link.label }}</div>
163
- <div class="ks-link-title">{{ link.title }}</div>
164
- <div class="ks-link-desc">{{ link.desc }}</div>
165
- </div>
138
+ <!-- Link cards: auto-placed into Γ shape -->
139
+ <a v-for="link in links" :key="link.href" data-shine class="ks-shine ks-link-shine" :href="link.href"
140
+ target="_blank" rel="noopener">
141
+ <div class="ks-card ks-link-card">
142
+ <div class="ks-link-top">
143
+ <component :is="link.icon" :size="20" class="ks-link-icon" />
144
+ <ArrowUpRight :size="13" class="ks-link-arrow" />
166
145
  </div>
167
- </a>
146
+ <div>
147
+ <div class="ks-link-label">{{ link.label }}</div>
148
+ <div class="ks-link-title">{{ link.title }}</div>
149
+ <div class="ks-link-desc">{{ link.desc }}</div>
150
+ </div>
151
+ </div>
152
+ </a>
168
153
 
169
- </div>
170
154
  </div>
171
155
  </div>
172
156
  </template>
@@ -180,10 +164,30 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
180
164
  }
181
165
 
182
166
  /* Header */
183
- .ks-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
184
- .ks-header-logo { width: 28px; height: 28px; object-fit: contain; }
185
- .ks-header-brand { font-size: 1rem; font-weight: 700; color: var(--ks-heading); flex: 1; }
186
- .ks-header-nav { display: flex; gap: .15rem; }
167
+ .ks-header {
168
+ display: flex;
169
+ align-items: center;
170
+ gap: .6rem;
171
+ margin-bottom: .75rem;
172
+ }
173
+
174
+ .ks-header-logo {
175
+ width: 28px;
176
+ height: 28px;
177
+ object-fit: contain;
178
+ }
179
+
180
+ .ks-header-brand {
181
+ font-size: 1rem;
182
+ font-weight: 700;
183
+ color: var(--ks-heading);
184
+ flex: 1;
185
+ }
186
+
187
+ .ks-header-nav {
188
+ display: flex;
189
+ gap: .15rem;
190
+ }
187
191
 
188
192
  .ks-icon-btn {
189
193
  display: inline-flex;
@@ -199,22 +203,10 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
199
203
  text-decoration: none;
200
204
  transition: color .15s, background .15s;
201
205
  }
202
- .ks-icon-btn:hover { color: var(--ks-heading); background: var(--ks-border); }
203
206
 
204
- /* Grid wrap + U-shaped gradient backdrop */
205
- .ks-grid-wrap {
206
- position: relative;
207
- }
208
- .ks-grid-wrap::before {
209
- content: '';
210
- position: absolute;
211
- inset: 0 -20px -28px;
212
- z-index: 0;
213
- pointer-events: none;
214
- background:
215
- radial-gradient(ellipse 55% 65% at 8% 100%, rgba(73, 197, 163, .38) 0%, transparent 55%),
216
- radial-gradient(ellipse 55% 65% at 92% 100%, rgba(73, 197, 163, .38) 0%, transparent 55%),
217
- radial-gradient(ellipse 85% 30% at 50% 100%, rgba(73, 197, 163, .22) 0%, transparent 60%);
207
+ .ks-icon-btn:hover {
208
+ color: var(--ks-heading);
209
+ background: var(--ks-border);
218
210
  }
219
211
 
220
212
  /* Grid */
@@ -222,26 +214,30 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
222
214
  display: grid;
223
215
  grid-template-columns: repeat(3, 1fr);
224
216
  gap: .75rem;
225
- position: relative;
226
- z-index: 1;
227
217
  }
228
218
 
229
219
  /* Shine wrapper */
230
220
  .ks-shine {
231
221
  padding: 1px;
232
222
  border-radius: 14px;
233
- background: radial-gradient(
234
- 350px circle at var(--x, -9999px) var(--y, -9999px),
235
- var(--ks-shine),
236
- var(--ks-border) 80%
237
- );
223
+ background: radial-gradient(350px circle at var(--x, -9999px) var(--y, -9999px),
224
+ var(--ks-shine),
225
+ var(--ks-border) 80%);
238
226
  display: block;
239
227
  text-decoration: none;
240
228
  }
241
- .ks-net-shine { grid-column: 1 / span 2; grid-row: 1 / span 3; }
229
+
230
+ .ks-net-shine {
231
+ grid-column: 1 / span 2;
232
+ grid-row: 1 / span 3;
233
+ }
242
234
 
243
235
  /* Card base */
244
- .ks-card { border-radius: 13px; background: var(--ks-soft); height: 100%; }
236
+ .ks-card {
237
+ border-radius: 13px;
238
+ background: var(--ks-soft);
239
+ height: 100%;
240
+ }
245
241
 
246
242
  /* Network card */
247
243
  .ks-net-card {
@@ -251,8 +247,19 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
251
247
  gap: 1.5rem;
252
248
  min-height: 320px;
253
249
  }
254
- .ks-net-top { display: flex; align-items: center; justify-content: space-between; }
255
- .ks-net-icon { font-size: 2.25rem; color: var(--ks-accent); line-height: 1; }
250
+
251
+ .ks-net-top {
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: space-between;
255
+ }
256
+
257
+ .ks-net-icon {
258
+ font-size: 2.25rem;
259
+ color: var(--ks-accent);
260
+ line-height: 1;
261
+ }
262
+
256
263
  .ks-badge {
257
264
  font-size: .7rem;
258
265
  font-weight: 500;
@@ -261,10 +268,33 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
261
268
  border: 1px solid;
262
269
  white-space: nowrap;
263
270
  }
264
- .ks-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
265
- .ks-stat { display: flex; flex-direction: column; gap: .25rem; }
266
- .ks-stat-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-muted); }
267
- .ks-stat-value { font-size: .95rem; color: var(--ks-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
271
+
272
+ .ks-stats {
273
+ display: grid;
274
+ grid-template-columns: 1fr 1fr;
275
+ gap: 1.1rem;
276
+ }
277
+
278
+ .ks-stat {
279
+ display: flex;
280
+ flex-direction: column;
281
+ gap: .25rem;
282
+ }
283
+
284
+ .ks-stat-label {
285
+ font-size: .65rem;
286
+ text-transform: uppercase;
287
+ letter-spacing: .06em;
288
+ color: var(--ks-muted);
289
+ }
290
+
291
+ .ks-stat-value {
292
+ font-size: .95rem;
293
+ color: var(--ks-heading);
294
+ overflow: hidden;
295
+ text-overflow: ellipsis;
296
+ white-space: nowrap;
297
+ }
268
298
 
269
299
  /* Link cards */
270
300
  .ks-link-card {
@@ -275,12 +305,40 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
275
305
  gap: .5rem;
276
306
  min-height: 100px;
277
307
  }
278
- .ks-link-top { display: flex; justify-content: space-between; align-items: flex-start; }
279
- .ks-link-icon { color: var(--ks-accent); }
280
- .ks-link-arrow { color: var(--ks-muted); }
281
- .ks-link-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-muted); margin-bottom: .1rem; }
282
- .ks-link-title { font-size: .875rem; font-weight: 600; color: var(--ks-heading); }
283
- .ks-link-desc { font-size: .75rem; color: var(--ks-muted); margin-top: .1rem; }
308
+
309
+ .ks-link-top {
310
+ display: flex;
311
+ justify-content: space-between;
312
+ align-items: flex-start;
313
+ }
314
+
315
+ .ks-link-icon {
316
+ color: var(--ks-accent);
317
+ }
318
+
319
+ .ks-link-arrow {
320
+ color: var(--ks-muted);
321
+ }
322
+
323
+ .ks-link-label {
324
+ font-size: .58rem;
325
+ text-transform: uppercase;
326
+ letter-spacing: .06em;
327
+ color: var(--ks-muted);
328
+ margin-bottom: .1rem;
329
+ }
330
+
331
+ .ks-link-title {
332
+ font-size: .875rem;
333
+ font-weight: 600;
334
+ color: var(--ks-heading);
335
+ }
336
+
337
+ .ks-link-desc {
338
+ font-size: .75rem;
339
+ color: var(--ks-muted);
340
+ margin-top: .1rem;
341
+ }
284
342
 
285
343
  /* Dialog */
286
344
  .ks-dialog {
@@ -294,7 +352,12 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
294
352
  color: var(--ks-text);
295
353
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
296
354
  }
297
- .ks-dialog-inner { padding: 2rem; position: relative; }
355
+
356
+ .ks-dialog-inner {
357
+ padding: 2rem;
358
+ position: relative;
359
+ }
360
+
298
361
  .ks-dialog-close {
299
362
  position: absolute;
300
363
  top: 1rem;
@@ -307,15 +370,31 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
307
370
  padding: .25rem;
308
371
  line-height: 1;
309
372
  }
310
- .ks-dialog-close:hover { color: var(--ks-heading); }
311
- .ks-dialog-title { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; color: var(--ks-heading); }
312
- .ks-dialog-body { font-size: .875rem; color: var(--ks-muted); margin: 0 0 1.25rem; line-height: 1.65; }
373
+
374
+ .ks-dialog-close:hover {
375
+ color: var(--ks-heading);
376
+ }
377
+
378
+ .ks-dialog-title {
379
+ margin: 0 0 .75rem;
380
+ font-size: 1.05rem;
381
+ font-weight: 700;
382
+ color: var(--ks-heading);
383
+ }
384
+
385
+ .ks-dialog-body {
386
+ font-size: .875rem;
387
+ color: var(--ks-muted);
388
+ margin: 0 0 1.25rem;
389
+ line-height: 1.65;
390
+ }
313
391
 
314
392
  .ks-copy-wrap {
315
393
  display: flex;
316
394
  flex-direction: column;
317
395
  gap: .5rem;
318
396
  }
397
+
319
398
  .ks-dialog-addr {
320
399
  display: block;
321
400
  padding: .6em .85em;
@@ -328,6 +407,7 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
328
407
  white-space: normal;
329
408
  color: var(--ks-text);
330
409
  }
410
+
331
411
  .ks-copy-btn {
332
412
  display: inline-flex;
333
413
  align-items: center;
@@ -342,10 +422,23 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
342
422
  cursor: pointer;
343
423
  transition: color .15s, border-color .15s;
344
424
  }
345
- .ks-copy-btn:hover { color: var(--ks-heading); border-color: var(--ks-heading); }
346
- .ks-copy-btn.copied { color: #4caf50; border-color: #4caf50; }
347
425
 
348
- .ks-dialog-thanks { font-size: .8rem; color: var(--ks-muted); margin: .75rem 0 0; text-align: center; }
426
+ .ks-copy-btn:hover {
427
+ color: var(--ks-heading);
428
+ border-color: var(--ks-heading);
429
+ }
430
+
431
+ .ks-copy-btn.copied {
432
+ color: #4caf50;
433
+ border-color: #4caf50;
434
+ }
435
+
436
+ .ks-dialog-thanks {
437
+ font-size: .8rem;
438
+ color: var(--ks-muted);
439
+ margin: .75rem 0 0;
440
+ text-align: center;
441
+ }
349
442
  </style>
350
443
 
351
444
  <style>
package/templates/vue/src/App.vue CHANGED
@@ -6,7 +6,7 @@ import KaspaStatus from './components/KaspaStatus.vue'
6
6
  const kaspa = useKaspa()
7
7
  const rpc = useRpc()
8
8
 
9
- // KaspaPlugin doesn't call init/connect automatically — we do it here.
9
+ // VueKaspa doesn't call init/connect automatically — we do it here.
10
10
  // The promise is not awaited so the app renders immediately while WASM
11
11
  // loads and the RPC connection establishes in the background.
12
12
  onMounted(() => {
package/templates/vue/src/components/KaspaStatus.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <script setup lang="ts">
2
- import { ref, computed, onMounted, onUnmounted } from 'vue'
2
+ import { ArrowUpRight, BookOpen, Check, Copy, Droplet, Heart, Search } from 'lucide-vue-next'
3
+ import { computed, onMounted, onUnmounted, ref } from 'vue'
3
4
  import { useKaspa, useRpc } from 'vue-kaspa'
4
- import { Droplet, BookOpen, Search, ArrowUpRight, Heart, Copy, Check } from 'lucide-vue-next'
5
5
 
6
6
  const kaspa = useKaspa()
7
7
  const rpc = useRpc()
@@ -41,12 +41,12 @@ const daaScore = computed(() =>
41
41
  )
42
42
 
43
43
  const links = [
44
- { label: 'Faucet', title: 'Testnet 10', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn10.kaspanet.io/' },
45
- { label: 'Faucet', title: 'Testnet 12', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn12.kaspanet.io/' },
46
- { label: 'Docs', title: 'vue-kaspa', desc: 'Read the full docs', icon: BookOpen, href: 'https://vue-kaspa.vercel.app/' },
47
- { label: 'Explorer', title: 'Testnet 10', desc: 'Browse transactions', icon: Search, href: 'https://tn10.kaspa.stream/' },
48
- { label: 'Explorer', title: 'Testnet 12', desc: 'Browse transactions', icon: Search, href: 'https://tn12.kaspa.stream/' },
49
- { label: 'Explorer', title: 'Mainnet', desc: 'Browse transactions', icon: Search, href: 'https://kaspa.stream/' },
44
+ { label: 'Faucet', title: 'Testnet 10', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn10.kaspanet.io/' },
45
+ { label: 'Faucet', title: 'Testnet 12', desc: 'Get free test KAS', icon: Droplet, href: 'https://faucet-tn12.kaspanet.io/' },
46
+ { label: 'Docs', title: 'Vue Kaspa', desc: 'Read the full docs', icon: BookOpen, href: 'https://vue-kaspa.vercel.app/' },
47
+ { label: 'Explorer', title: 'Testnet 10', desc: 'Browse transactions', icon: Search, href: 'https://tn10.kaspa.stream/' },
48
+ { label: 'Explorer', title: 'Testnet 12', desc: 'Browse transactions', icon: Search, href: 'https://tn12.kaspa.stream/' },
49
+ { label: 'Explorer', title: 'Mainnet', desc: 'Browse transactions', icon: Search, href: 'https://kaspa.stream/' },
50
50
  ]
51
51
 
52
52
  function onMouseMove(e: MouseEvent) {
@@ -67,8 +67,9 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
67
67
  <dialog ref="donateDialog" class="dialog" @click.self="donateDialog?.close()">
68
68
  <div class="dialog-inner">
69
69
  <button class="dialog-close" @click="donateDialog?.close()">✕</button>
70
- <p class="dialog-title">Support vue-kaspa ❤️</p>
71
- <p class="dialog-body">vue-kaspa is free and open-source. If it saves you time, consider sending some KAS — every bit helps keep the project alive and maintained.</p>
70
+ <p class="dialog-title">Support Vue Kaspa ❤️</p>
71
+ <p class="dialog-body">Vue Kaspa is free and open-source. If it saves you time, consider sending some KAS — every
72
+ bit helps keep the project alive and maintained.</p>
72
73
  <div class="copy-wrap">
73
74
  <code class="dialog-addr">{{ KASPA_ADDRESS }}</code>
74
75
  <button class="copy-btn" :class="{ copied }" @click="copyAddress">
@@ -85,18 +86,14 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
85
86
 
86
87
  <!-- Header -->
87
88
  <header class="header">
88
- <img src="/logo.png" alt="vue-kaspa" class="header-logo" />
89
- <span class="header-brand">vue-kaspa</span>
89
+ <img src="/logo.png" alt="Vue Kaspa" class="header-logo" />
90
+ <span class="header-brand">Vue Kaspa</span>
90
91
  <nav class="header-nav">
91
- <a
92
- href="https://github.com/furatamasensei/vue-kaspa"
93
- target="_blank"
94
- rel="noopener"
95
- class="icon-btn"
96
- title="GitHub"
97
- >
92
+ <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener" class="icon-btn"
93
+ title="GitHub">
98
94
  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
99
- <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
95
+ <path
96
+ d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
100
97
  </svg>
101
98
  </a>
102
99
  <button class="icon-btn" title="Support this project" @click="donateDialog?.showModal()">
@@ -105,78 +102,91 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
105
102
  </nav>
106
103
  </header>
107
104
 
108
- <!-- Gradient + bento grid -->
109
- <div class="grid-wrap">
110
- <div ref="bento" class="grid">
105
+ <!-- Bento grid -->
106
+ <div ref="bento" class="grid">
111
107
 
112
- <!-- Network card: col 1–2, row 1–3 -->
113
- <div data-shine class="shine net-shine">
114
- <div class="card net-card">
115
- <div class="net-top">
116
- <span class="net-icon">⬡</span>
117
- <span class="badge" :style="`border-color:${badgeColor};color:${badgeColor}`">{{ stateLabel }}</span>
108
+ <!-- Network card: col 1–2, row 1–3 -->
109
+ <div data-shine class="shine net-shine">
110
+ <div class="card net-card">
111
+ <div class="net-top">
112
+ <span class="net-icon">⬡</span>
113
+ <span class="badge" :style="`border-color:${badgeColor};color:${badgeColor}`">{{ stateLabel }}</span>
114
+ </div>
115
+ <div class="stats">
116
+ <div class="stat">
117
+ <span class="stat-label">Network</span>
118
+ <span class="stat-value">{{ rpc.networkId.value ?? '—' }}</span>
119
+ </div>
120
+ <div class="stat">
121
+ <span class="stat-label">Server version</span>
122
+ <span class="stat-value">{{ rpc.serverVersion.value ?? '—' }}</span>
123
+ </div>
124
+ <div class="stat">
125
+ <span class="stat-label">DAA Score</span>
126
+ <span class="stat-value mono">{{ daaScore }}</span>
118
127
  </div>
119
- <div class="stats">
120
- <div class="stat">
121
- <span class="stat-label">Network</span>
122
- <span class="stat-value">{{ rpc.networkId.value ?? '—' }}</span>
123
- </div>
124
- <div class="stat">
125
- <span class="stat-label">Server version</span>
126
- <span class="stat-value">{{ rpc.serverVersion.value ?? '—' }}</span>
127
- </div>
128
- <div class="stat">
129
- <span class="stat-label">DAA Score</span>
130
- <span class="stat-value mono">{{ daaScore }}</span>
131
- </div>
132
- <div class="stat">
133
- <span class="stat-label">Synced</span>
134
- <span
135
- class="stat-value"
136
- :style="`color:${rpc.isConnected.value ? (rpc.isSynced.value ? '#4caf50' : 'var(--ks-text)') : 'var(--ks-muted)'}`"
137
- >{{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}</span>
138
- </div>
128
+ <div class="stat">
129
+ <span class="stat-label">Synced</span>
130
+ <span class="stat-value"
131
+ :style="`color:${rpc.isConnected.value ? (rpc.isSynced.value ? '#4caf50' : 'var(--ks-text)') : 'var(--ks-muted)'}`">{{
132
+ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}</span>
139
133
  </div>
140
134
  </div>
141
135
  </div>
136
+ </div>
142
137
 
143
- <!-- Link cards: auto-placed into Γ shape -->
144
- <a
145
- v-for="link in links"
146
- :key="link.href"
147
- data-shine
148
- class="shine link-shine"
149
- :href="link.href"
150
- target="_blank"
151
- rel="noopener"
152
- >
153
- <div class="card link-card">
154
- <div class="link-top">
155
- <component :is="link.icon" :size="20" class="link-icon" />
156
- <ArrowUpRight :size="13" class="link-arrow" />
157
- </div>
158
- <div>
159
- <div class="link-label">{{ link.label }}</div>
160
- <div class="link-title">{{ link.title }}</div>
161
- <div class="link-desc">{{ link.desc }}</div>
162
- </div>
138
+ <!-- Link cards: auto-placed into Γ shape -->
139
+ <a v-for="link in links" :key="link.href" data-shine class="shine link-shine" :href="link.href" target="_blank"
140
+ rel="noopener">
141
+ <div class="card link-card">
142
+ <div class="link-top">
143
+ <component :is="link.icon" :size="20" class="link-icon" />
144
+ <ArrowUpRight :size="13" class="link-arrow" />
163
145
  </div>
164
- </a>
146
+ <div>
147
+ <div class="link-label">{{ link.label }}</div>
148
+ <div class="link-title">{{ link.title }}</div>
149
+ <div class="link-desc">{{ link.desc }}</div>
150
+ </div>
151
+ </div>
152
+ </a>
165
153
 
166
- </div>
167
154
  </div>
168
155
  </div>
169
156
  </template>
170
157
 
171
158
  <style scoped>
172
159
  /* Root */
173
- .root { width: 100%; font-family: Inter, system-ui, -apple-system, sans-serif; }
160
+ .root {
161
+ width: 100%;
162
+ font-family: Inter, system-ui, -apple-system, sans-serif;
163
+ }
174
164
 
175
165
  /* Header */
176
- .header { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
177
- .header-logo { width: 28px; height: 28px; object-fit: contain; }
178
- .header-brand { font-size: 1rem; font-weight: 700; color: var(--ks-heading); flex: 1; }
179
- .header-nav { display: flex; gap: .15rem; }
166
+ .header {
167
+ display: flex;
168
+ align-items: center;
169
+ gap: .6rem;
170
+ margin-bottom: .75rem;
171
+ }
172
+
173
+ .header-logo {
174
+ width: 28px;
175
+ height: 28px;
176
+ object-fit: contain;
177
+ }
178
+
179
+ .header-brand {
180
+ font-size: 1rem;
181
+ font-weight: 700;
182
+ color: var(--ks-heading);
183
+ flex: 1;
184
+ }
185
+
186
+ .header-nav {
187
+ display: flex;
188
+ gap: .15rem;
189
+ }
180
190
 
181
191
  .icon-btn {
182
192
  display: inline-flex;
@@ -192,20 +202,10 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
192
202
  text-decoration: none;
193
203
  transition: color .15s, background .15s;
194
204
  }
195
- .icon-btn:hover { color: var(--ks-heading); background: var(--ks-border); }
196
205
 
197
- /* Grid wrap + U-shaped gradient backdrop */
198
- .grid-wrap { position: relative; }
199
- .grid-wrap::before {
200
- content: '';
201
- position: absolute;
202
- inset: 0 -20px -28px;
203
- z-index: 0;
204
- pointer-events: none;
205
- background:
206
- radial-gradient(ellipse 55% 65% at 8% 100%, rgba(73, 197, 163, .38) 0%, transparent 55%),
207
- radial-gradient(ellipse 55% 65% at 92% 100%, rgba(73, 197, 163, .38) 0%, transparent 55%),
208
- radial-gradient(ellipse 85% 30% at 50% 100%, rgba(73, 197, 163, .22) 0%, transparent 60%);
206
+ .icon-btn:hover {
207
+ color: var(--ks-heading);
208
+ background: var(--ks-border);
209
209
  }
210
210
 
211
211
  /* Grid */
@@ -213,46 +213,135 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
213
213
  display: grid;
214
214
  grid-template-columns: repeat(3, 1fr);
215
215
  gap: .75rem;
216
- position: relative;
217
- z-index: 1;
218
216
  }
219
217
 
220
218
  /* Shine wrapper */
221
219
  .shine {
222
220
  padding: 1px;
223
221
  border-radius: 14px;
224
- background: radial-gradient(
225
- 350px circle at var(--x, -9999px) var(--y, -9999px),
226
- var(--ks-shine),
227
- var(--ks-border) 80%
228
- );
222
+ background: radial-gradient(350px circle at var(--x, -9999px) var(--y, -9999px),
223
+ var(--ks-shine),
224
+ var(--ks-border) 80%);
229
225
  display: block;
230
226
  text-decoration: none;
231
227
  }
232
- .net-shine { grid-column: 1 / span 2; grid-row: 1 / span 3; }
228
+
229
+ .net-shine {
230
+ grid-column: 1 / span 2;
231
+ grid-row: 1 / span 3;
232
+ }
233
233
 
234
234
  /* Card base */
235
- .card { border-radius: 13px; background: var(--ks-soft); height: 100%; }
235
+ .card {
236
+ border-radius: 13px;
237
+ background: var(--ks-soft);
238
+ height: 100%;
239
+ }
236
240
 
237
241
  /* Network card */
238
- .net-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; min-height: 320px; }
239
- .net-top { display: flex; align-items: center; justify-content: space-between; }
240
- .net-icon { font-size: 2.25rem; color: var(--ks-accent); line-height: 1; }
241
- .badge { font-size: .7rem; font-weight: 500; padding: .2em .6em; border-radius: 999px; border: 1px solid; white-space: nowrap; }
242
- .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
243
- .stat { display: flex; flex-direction: column; gap: .25rem; }
244
- .stat-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-muted); }
245
- .stat-value { font-size: .95rem; color: var(--ks-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
246
- .mono { font-family: monospace; }
242
+ .net-card {
243
+ padding: 1.75rem;
244
+ display: flex;
245
+ flex-direction: column;
246
+ gap: 1.5rem;
247
+ min-height: 320px;
248
+ }
249
+
250
+ .net-top {
251
+ display: flex;
252
+ align-items: center;
253
+ justify-content: space-between;
254
+ }
255
+
256
+ .net-icon {
257
+ font-size: 2.25rem;
258
+ color: var(--ks-accent);
259
+ line-height: 1;
260
+ }
261
+
262
+ .badge {
263
+ font-size: .7rem;
264
+ font-weight: 500;
265
+ padding: .2em .6em;
266
+ border-radius: 999px;
267
+ border: 1px solid;
268
+ white-space: nowrap;
269
+ }
270
+
271
+ .stats {
272
+ display: grid;
273
+ grid-template-columns: 1fr 1fr;
274
+ gap: 1.1rem;
275
+ }
276
+
277
+ .stat {
278
+ display: flex;
279
+ flex-direction: column;
280
+ gap: .25rem;
281
+ }
282
+
283
+ .stat-label {
284
+ font-size: .65rem;
285
+ text-transform: uppercase;
286
+ letter-spacing: .06em;
287
+ color: var(--ks-muted);
288
+ }
289
+
290
+ .stat-value {
291
+ font-size: .95rem;
292
+ color: var(--ks-heading);
293
+ overflow: hidden;
294
+ text-overflow: ellipsis;
295
+ white-space: nowrap;
296
+ }
297
+
298
+ .mono {
299
+ font-family: monospace;
300
+ }
247
301
 
248
302
  /* Link cards */
249
- .link-card { padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; min-height: 100px; }
250
- .link-top { display: flex; justify-content: space-between; align-items: flex-start; }
251
- .link-icon { color: var(--ks-accent); }
252
- .link-arrow { color: var(--ks-muted); }
253
- .link-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ks-muted); margin-bottom: .1rem; }
254
- .link-title { font-size: .875rem; font-weight: 600; color: var(--ks-heading); }
255
- .link-desc { font-size: .75rem; color: var(--ks-muted); margin-top: .1rem; }
303
+ .link-card {
304
+ padding: 1rem;
305
+ display: flex;
306
+ flex-direction: column;
307
+ justify-content: space-between;
308
+ gap: .5rem;
309
+ min-height: 100px;
310
+ }
311
+
312
+ .link-top {
313
+ display: flex;
314
+ justify-content: space-between;
315
+ align-items: flex-start;
316
+ }
317
+
318
+ .link-icon {
319
+ color: var(--ks-accent);
320
+ }
321
+
322
+ .link-arrow {
323
+ color: var(--ks-muted);
324
+ }
325
+
326
+ .link-label {
327
+ font-size: .58rem;
328
+ text-transform: uppercase;
329
+ letter-spacing: .06em;
330
+ color: var(--ks-muted);
331
+ margin-bottom: .1rem;
332
+ }
333
+
334
+ .link-title {
335
+ font-size: .875rem;
336
+ font-weight: 600;
337
+ color: var(--ks-heading);
338
+ }
339
+
340
+ .link-desc {
341
+ font-size: .75rem;
342
+ color: var(--ks-muted);
343
+ margin-top: .1rem;
344
+ }
256
345
 
257
346
  /* Dialog */
258
347
  .dialog {
@@ -266,13 +355,49 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
266
355
  color: var(--ks-text);
267
356
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
268
357
  }
269
- .dialog-inner { padding: 2rem; position: relative; }
270
- .dialog-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: .9rem; cursor: pointer; color: var(--ks-muted); padding: .25rem; line-height: 1; }
271
- .dialog-close:hover { color: var(--ks-heading); }
272
- .dialog-title { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; color: var(--ks-heading); }
273
- .dialog-body { font-size: .875rem; color: var(--ks-muted); margin: 0 0 1.25rem; line-height: 1.65; }
274
358
 
275
- .copy-wrap { display: flex; flex-direction: column; gap: .5rem; }
359
+ .dialog-inner {
360
+ padding: 2rem;
361
+ position: relative;
362
+ }
363
+
364
+ .dialog-close {
365
+ position: absolute;
366
+ top: 1rem;
367
+ right: 1rem;
368
+ background: none;
369
+ border: none;
370
+ font-size: .9rem;
371
+ cursor: pointer;
372
+ color: var(--ks-muted);
373
+ padding: .25rem;
374
+ line-height: 1;
375
+ }
376
+
377
+ .dialog-close:hover {
378
+ color: var(--ks-heading);
379
+ }
380
+
381
+ .dialog-title {
382
+ margin: 0 0 .75rem;
383
+ font-size: 1.05rem;
384
+ font-weight: 700;
385
+ color: var(--ks-heading);
386
+ }
387
+
388
+ .dialog-body {
389
+ font-size: .875rem;
390
+ color: var(--ks-muted);
391
+ margin: 0 0 1.25rem;
392
+ line-height: 1.65;
393
+ }
394
+
395
+ .copy-wrap {
396
+ display: flex;
397
+ flex-direction: column;
398
+ gap: .5rem;
399
+ }
400
+
276
401
  .dialog-addr {
277
402
  display: block;
278
403
  padding: .6em .85em;
@@ -285,6 +410,7 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
285
410
  white-space: normal;
286
411
  color: var(--ks-text);
287
412
  }
413
+
288
414
  .copy-btn {
289
415
  display: inline-flex;
290
416
  align-items: center;
@@ -299,10 +425,23 @@ onUnmounted(() => window.removeEventListener('mousemove', onMouseMove))
299
425
  cursor: pointer;
300
426
  transition: color .15s, border-color .15s;
301
427
  }
302
- .copy-btn:hover { color: var(--ks-heading); border-color: var(--ks-heading); }
303
- .copy-btn.copied { color: #4caf50; border-color: #4caf50; }
304
428
 
305
- .dialog-thanks { font-size: .8rem; color: var(--ks-muted); margin: .75rem 0 0; text-align: center; }
429
+ .copy-btn:hover {
430
+ color: var(--ks-heading);
431
+ border-color: var(--ks-heading);
432
+ }
433
+
434
+ .copy-btn.copied {
435
+ color: #4caf50;
436
+ border-color: #4caf50;
437
+ }
438
+
439
+ .dialog-thanks {
440
+ font-size: .8rem;
441
+ color: var(--ks-muted);
442
+ margin: .75rem 0 0;
443
+ text-align: center;
444
+ }
306
445
  </style>
307
446
 
308
447
  <style>
package/templates/vue/src/main.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { createApp } from 'vue'
2
- import { KaspaPlugin } from 'vue-kaspa'
2
+ import { VueKaspa } from 'vue-kaspa'
3
3
  import App from './App.vue'
4
4
  import './style.css'
5
5
 
6
6
  createApp(App)
7
- .use(KaspaPlugin, { network: 'mainnet', autoConnect: true })
7
+ .use(VueKaspa, { network: 'mainnet', autoConnect: true })
8
8
  .mount('#app')
package/templates/vue/src/style.css CHANGED
@@ -29,7 +29,12 @@ body {
29
29
  display: flex;
30
30
  align-items: center;
31
31
  justify-content: center;
32
- background: var(--ks-surface);
32
+ background:
33
+ radial-gradient(ellipse 60% 55% at 8% 100%, rgba(73, 197, 163, .32) 0%, transparent 55%),
34
+ radial-gradient(ellipse 60% 55% at 92% 100%, rgba(73, 197, 163, .32) 0%, transparent 55%),
35
+ radial-gradient(ellipse 80% 28% at 50% 100%, rgba(73, 197, 163, .18) 0%, transparent 60%),
36
+ var(--ks-surface);
37
+ background-attachment: fixed;
33
38
  color: var(--ks-text);
34
39
  font-family: Inter, system-ui, -apple-system, sans-serif;
35
40
  padding: 2rem 1.5rem;
package/templates/vue/vite.config.ts CHANGED
@@ -7,7 +7,7 @@ export default defineConfig({
7
7
  optimizeDeps: { exclude: ['@vue-kaspa/kaspa-wasm'] },
8
8
  server: {
9
9
  headers: {
10
- 'Cross-Origin-Embedder-Policy': 'require-corp',
10
+ 'Cross-Origin-Embedder-Policy': 'credentialless',
11
11
  'Cross-Origin-Opener-Policy': 'same-origin',
12
12
  },
13
13
  },