vue-kaspa-cli 0.1.7 → 0.1.8

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 (3) hide show
  1. package/package.json +1 -1
  2. package/templates/nuxt/app/components/KaspaStatus.vue +62 -30
  3. package/templates/vue/src/components/KaspaStatus.vue +105 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-kaspa-cli",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
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/components/KaspaStatus.vue CHANGED
@@ -28,43 +28,75 @@ const badgeColor = computed(() => {
28
28
  const daaScore = computed(() =>
29
29
  rpc.virtualDaaScore.value > 0n ? rpc.virtualDaaScore.value.toLocaleString() : '—'
30
30
  )
31
+
32
+ const links = [
33
+ { label: 'Faucet', title: 'Testnet 10', href: 'https://faucet-tn10.kaspanet.io/' },
34
+ { label: 'Faucet', title: 'Testnet 12', href: 'https://faucet-tn12.kaspanet.io/' },
35
+ { label: 'Docs', title: 'vue-kaspa', href: 'https://vue-kaspa.vercel.app/' },
36
+ { label: 'Explorer', title: 'Testnet 10', href: 'https://tn10.kaspa.stream/' },
37
+ { label: 'Explorer', title: 'Testnet 12', href: 'https://tn12.kaspa.stream/' },
38
+ { label: 'Explorer', title: 'Mainnet', href: 'https://kaspa.stream/' },
39
+ ]
31
40
  </script>
32
41
 
33
42
  <template>
34
- <div style="width:100%;max-width:480px;padding:2rem;border:1px solid #e2e8f0;border-radius:10px;background:#f9f9f9;display:flex;flex-direction:column;gap:1.5rem;font-family:Inter,system-ui,sans-serif;">
35
- <header style="display:flex;align-items:center;gap:.75rem;">
36
- <span style="font-size:1.75rem;color:#49c5a3;line-height:1;">⬡</span>
37
- <h1 style="font-size:1.25rem;font-weight:600;color:#1a1a1a;flex:1;margin:0;">vue-kaspa</h1>
38
- <span :style="`font-size:.75rem;font-weight:500;padding:.2em .65em;border-radius:999px;border:1px solid ${badgeColor};color:${badgeColor};white-space:nowrap;`">
39
- {{ stateLabel }}
40
- </span>
41
- </header>
43
+ <div style="width:100%;max-width:480px;display:flex;flex-direction:column;gap:0.75rem;font-family:Inter,system-ui,sans-serif;">
42
44
 
43
- <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
44
- <div style="display:flex;flex-direction:column;gap:.25rem;">
45
- <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Network</span>
46
- <span style="font-size:.95rem;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ rpc.networkId.value ?? '—' }}</span>
47
- </div>
48
- <div style="display:flex;flex-direction:column;gap:.25rem;">
49
- <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Server version</span>
50
- <span style="font-size:.95rem;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ rpc.serverVersion.value ?? '—' }}</span>
51
- </div>
52
- <div style="display:flex;flex-direction:column;gap:.25rem;">
53
- <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">DAA Score</span>
54
- <span style="font-size:.95rem;color:#1a1a1a;font-family:monospace;">{{ daaScore }}</span>
55
- </div>
56
- <div style="display:flex;flex-direction:column;gap:.25rem;">
57
- <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Synced</span>
58
- <span :style="`font-size:.95rem;color:${rpc.isConnected.value ? (rpc.isSynced.value ? '#4caf50' : '#1a1a1a') : '#9ca3af'};`">
59
- {{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}
45
+ <!-- Network status card (unchanged) -->
46
+ <div style="padding:2rem;border:1px solid #e2e8f0;border-radius:10px;background:#f9f9f9;display:flex;flex-direction:column;gap:1.5rem;">
47
+ <header style="display:flex;align-items:center;gap:.75rem;">
48
+ <span style="font-size:1.75rem;color:#49c5a3;line-height:1;">⬡</span>
49
+ <h1 style="font-size:1.25rem;font-weight:600;color:#1a1a1a;flex:1;margin:0;">vue-kaspa</h1>
50
+ <span :style="`font-size:.75rem;font-weight:500;padding:.2em .65em;border-radius:999px;border:1px solid ${badgeColor};color:${badgeColor};white-space:nowrap;`">
51
+ {{ stateLabel }}
60
52
  </span>
53
+ </header>
54
+
55
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
56
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
57
+ <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Network</span>
58
+ <span style="font-size:.95rem;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ rpc.networkId.value ?? '—' }}</span>
59
+ </div>
60
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
61
+ <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Server version</span>
62
+ <span style="font-size:.95rem;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ rpc.serverVersion.value ?? '—' }}</span>
63
+ </div>
64
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
65
+ <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">DAA Score</span>
66
+ <span style="font-size:.95rem;color:#1a1a1a;font-family:monospace;">{{ daaScore }}</span>
67
+ </div>
68
+ <div style="display:flex;flex-direction:column;gap:.25rem;">
69
+ <span style="font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">Synced</span>
70
+ <span :style="`font-size:.95rem;color:${rpc.isConnected.value ? (rpc.isSynced.value ? '#4caf50' : '#1a1a1a') : '#9ca3af'};`">
71
+ {{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}
72
+ </span>
73
+ </div>
61
74
  </div>
75
+
76
+ <footer style="display:flex;align-items:center;gap:.5rem;font-size:.85rem;border-top:1px solid #e2e8f0;padding-top:1rem;">
77
+ <a href="https://vue-kaspa.vercel.app" target="_blank" rel="noopener" style="color:#374151;text-decoration:none;">Docs</a>
78
+ <span>·</span>
79
+ <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener" style="color:#374151;text-decoration:none;">GitHub</a>
80
+ </footer>
81
+ </div>
82
+
83
+ <!-- Bento link cards -->
84
+ <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;">
85
+ <a
86
+ v-for="link in links"
87
+ :key="link.href"
88
+ :href="link.href"
89
+ target="_blank"
90
+ rel="noopener"
91
+ style="display:flex;flex-direction:column;justify-content:space-between;gap:0.75rem;padding:1rem;border:1px solid #e2e8f0;border-radius:10px;background:#f9f9f9;text-decoration:none;cursor:pointer;"
92
+ >
93
+ <div style="display:flex;justify-content:space-between;align-items:center;">
94
+ <span style="font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;">{{ link.label }}</span>
95
+ <span style="font-size:.75rem;color:#9ca3af;">↗</span>
96
+ </div>
97
+ <span style="font-size:.85rem;font-weight:600;color:#1a1a1a;">{{ link.title }}</span>
98
+ </a>
62
99
  </div>
63
100
 
64
- <footer style="display:flex;align-items:center;gap:.5rem;font-size:.85rem;border-top:1px solid #e2e8f0;padding-top:1rem;">
65
- <a href="https://vue-kaspa.vercel.app" target="_blank" rel="noopener" style="color:#374151;text-decoration:none;">Docs</a>
66
- <span>·</span>
67
- <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener" style="color:#374151;text-decoration:none;">GitHub</a>
68
- </footer>
69
101
  </div>
70
102
  </template>
package/templates/vue/src/components/KaspaStatus.vue CHANGED
@@ -27,49 +27,86 @@ const stateClass = computed(() => {
27
27
  const daaScore = computed(() =>
28
28
  rpc.virtualDaaScore.value > 0n ? rpc.virtualDaaScore.value.toLocaleString() : '—'
29
29
  )
30
+
31
+ const links = [
32
+ { label: 'Faucet', title: 'Testnet 10', href: 'https://faucet-tn10.kaspanet.io/' },
33
+ { label: 'Faucet', title: 'Testnet 12', href: 'https://faucet-tn12.kaspanet.io/' },
34
+ { label: 'Docs', title: 'vue-kaspa', href: 'https://vue-kaspa.vercel.app/' },
35
+ { label: 'Explorer', title: 'Testnet 10', href: 'https://tn10.kaspa.stream/' },
36
+ { label: 'Explorer', title: 'Testnet 12', href: 'https://tn12.kaspa.stream/' },
37
+ { label: 'Explorer', title: 'Mainnet', href: 'https://kaspa.stream/' },
38
+ ]
30
39
  </script>
31
40
 
32
41
  <template>
33
- <div class="card">
34
- <header class="card__header">
35
- <span class="logo">⬡</span>
36
- <h1 class="card__title">vue-kaspa</h1>
37
- <span class="badge" :class="stateClass">{{ stateLabel }}</span>
38
- </header>
42
+ <div class="bento">
39
43
 
40
- <div class="grid">
41
- <div class="stat">
42
- <span class="stat__label">Network</span>
43
- <span class="stat__value">{{ rpc.networkId.value ?? '—' }}</span>
44
- </div>
45
- <div class="stat">
46
- <span class="stat__label">Server version</span>
47
- <span class="stat__value">{{ rpc.serverVersion.value ?? '—' }}</span>
48
- </div>
49
- <div class="stat">
50
- <span class="stat__label">DAA Score</span>
51
- <span class="stat__value mono">{{ daaScore }}</span>
52
- </div>
53
- <div class="stat">
54
- <span class="stat__label">Synced</span>
55
- <span class="stat__value" :class="{ ok: rpc.isSynced.value, muted: !rpc.isConnected.value }">
56
- {{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}
57
- </span>
44
+ <!-- Network status card (unchanged) -->
45
+ <div class="card">
46
+ <header class="card__header">
47
+ <span class="logo">⬡</span>
48
+ <h1 class="card__title">vue-kaspa</h1>
49
+ <span class="badge" :class="stateClass">{{ stateLabel }}</span>
50
+ </header>
51
+
52
+ <div class="grid">
53
+ <div class="stat">
54
+ <span class="stat__label">Network</span>
55
+ <span class="stat__value">{{ rpc.networkId.value ?? '—' }}</span>
56
+ </div>
57
+ <div class="stat">
58
+ <span class="stat__label">Server version</span>
59
+ <span class="stat__value">{{ rpc.serverVersion.value ?? '—' }}</span>
60
+ </div>
61
+ <div class="stat">
62
+ <span class="stat__label">DAA Score</span>
63
+ <span class="stat__value mono">{{ daaScore }}</span>
64
+ </div>
65
+ <div class="stat">
66
+ <span class="stat__label">Synced</span>
67
+ <span class="stat__value" :class="{ ok: rpc.isSynced.value, muted: !rpc.isConnected.value }">
68
+ {{ rpc.isConnected.value ? (rpc.isSynced.value ? 'Yes' : 'Syncing…') : '—' }}
69
+ </span>
70
+ </div>
58
71
  </div>
72
+
73
+ <footer class="card__footer">
74
+ <a href="https://vue-kaspa.vercel.app" target="_blank" rel="noopener">Docs</a>
75
+ <span>·</span>
76
+ <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener">GitHub</a>
77
+ </footer>
78
+ </div>
79
+
80
+ <!-- Bento link cards -->
81
+ <div class="link-grid">
82
+ <a
83
+ v-for="link in links"
84
+ :key="link.href"
85
+ :href="link.href"
86
+ target="_blank"
87
+ rel="noopener"
88
+ class="link-card"
89
+ >
90
+ <div class="link-card__top">
91
+ <span class="link-card__label">{{ link.label }}</span>
92
+ <span class="link-card__arrow">↗</span>
93
+ </div>
94
+ <span class="link-card__title">{{ link.title }}</span>
95
+ </a>
59
96
  </div>
60
97
 
61
- <footer class="card__footer">
62
- <a href="https://vue-kaspa.vercel.app" target="_blank" rel="noopener">Docs</a>
63
- <span>·</span>
64
- <a href="https://github.com/furatamasensei/vue-kaspa" target="_blank" rel="noopener">GitHub</a>
65
- </footer>
66
98
  </div>
67
99
  </template>
68
100
 
69
101
  <style scoped>
70
- .card {
102
+ .bento {
71
103
  width: 100%;
72
104
  max-width: 480px;
105
+ display: flex;
106
+ flex-direction: column;
107
+ gap: 0.75rem;
108
+ }
109
+ .card {
73
110
  padding: 2rem;
74
111
  border: 1px solid var(--color-border);
75
112
  border-radius: 10px;
@@ -120,4 +157,42 @@ const daaScore = computed(() =>
120
157
  }
121
158
  .card__footer a { color: var(--color-text); text-decoration: none; }
122
159
  .card__footer a:hover { color: var(--color-heading); }
160
+
161
+ /* Bento link grid */
162
+ .link-grid {
163
+ display: grid;
164
+ grid-template-columns: repeat(3, 1fr);
165
+ gap: 0.75rem;
166
+ }
167
+ .link-card {
168
+ display: flex;
169
+ flex-direction: column;
170
+ justify-content: space-between;
171
+ gap: 0.75rem;
172
+ padding: 1rem;
173
+ border: 1px solid var(--color-border);
174
+ border-radius: 10px;
175
+ background: var(--color-background-soft);
176
+ text-decoration: none;
177
+ cursor: pointer;
178
+ transition: border-color 0.15s;
179
+ }
180
+ .link-card:hover { border-color: #49c5a3; }
181
+ .link-card__top {
182
+ display: flex;
183
+ justify-content: space-between;
184
+ align-items: center;
185
+ }
186
+ .link-card__label {
187
+ font-size: .65rem;
188
+ text-transform: uppercase;
189
+ letter-spacing: .05em;
190
+ color: var(--color-muted, #888);
191
+ }
192
+ .link-card__arrow { font-size: .75rem; color: var(--color-muted, #888); }
193
+ .link-card__title {
194
+ font-size: .85rem;
195
+ font-weight: 600;
196
+ color: var(--color-heading);
197
+ }
123
198
  </style>