221025/polling_mock_data_network_tab
This commit is contained in:
parent
232255cd84
commit
61884f5675
@ -8,3 +8,21 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { formatNumberToLocaleString } from '@/utils'
|
||||
import type { NetworkStatus } from '@/interface'
|
||||
|
||||
const networkStatus = ref<NetworkStatus>({
|
||||
network: 'kaspa-mainnet',
|
||||
daaScore: 255953336,
|
||||
dagHeader: 1507472,
|
||||
dagBlocks: 1507472,
|
||||
difficulty: 32931885262483752.0,
|
||||
medianOffset: '00:00:04',
|
||||
medianTimeUTC: '2025-10-21 03:05:57',
|
||||
daaScore: 0,
|
||||
dagHeader: 0,
|
||||
dagBlocks: 0,
|
||||
difficulty: 0,
|
||||
medianOffset: '00:00:00',
|
||||
medianTimeUTC: '',
|
||||
})
|
||||
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const isConnected = ref(false)
|
||||
|
||||
// Kaspa RPC Client instance (placeholder)
|
||||
// You'll need to implement this using kaspa-wasm or kaspa RPC library
|
||||
let rpcClient: any = null
|
||||
let unsubscribe: (() => void) | null = null
|
||||
|
||||
// Initialize Kaspa RPC connection
|
||||
const initializeKaspaRPC = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
await simulateRPCConnection()
|
||||
|
||||
isConnected.value = true
|
||||
loading.value = false
|
||||
} catch (err) {
|
||||
error.value = 'Failed to connect to Kaspa network'
|
||||
loading.value = false
|
||||
isConnected.value = false
|
||||
|
||||
useMockData()
|
||||
}
|
||||
}
|
||||
|
||||
// Simulate RPC connection (mock for development)
|
||||
const simulateRPCConnection = async (): Promise<void> => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// Initial data
|
||||
networkStatus.value = {
|
||||
network: 'kaspa-mainnet',
|
||||
daaScore: 256315320,
|
||||
dagHeader: 1437265,
|
||||
dagBlocks: 1437265,
|
||||
difficulty: 33048964118340300.0,
|
||||
medianOffset: '00:00:00',
|
||||
medianTimeUTC: new Date().toISOString().replace('T', ' ').substring(0, 19),
|
||||
}
|
||||
|
||||
// Simulate DAA score increment (real Kaspa ~1 block/sec)
|
||||
const mockSubscription = setInterval(() => {
|
||||
networkStatus.value.daaScore += 1
|
||||
networkStatus.value.dagHeader += 1
|
||||
networkStatus.value.dagBlocks += 1
|
||||
updateMedianTime()
|
||||
}, 1000)
|
||||
|
||||
// Store cleanup function
|
||||
unsubscribe = () => clearInterval(mockSubscription)
|
||||
|
||||
resolve()
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
// Update median time
|
||||
const updateMedianTime = () => {
|
||||
networkStatus.value.medianTimeUTC = new Date().toISOString().replace('T', ' ').substring(0, 19)
|
||||
}
|
||||
|
||||
// Use mock data fallback
|
||||
const useMockData = () => {
|
||||
networkStatus.value = {
|
||||
network: 'kaspa-mainnet',
|
||||
daaScore: 256315320,
|
||||
dagHeader: 1437265,
|
||||
dagBlocks: 1437265,
|
||||
difficulty: 33048964118340300.0,
|
||||
medianOffset: '00:00:00',
|
||||
medianTimeUTC: new Date().toISOString().replace('T', ' ').substring(0, 19),
|
||||
}
|
||||
}
|
||||
|
||||
// Retry connection
|
||||
const retryConnection = () => {
|
||||
initializeKaspaRPC()
|
||||
}
|
||||
|
||||
// Cleanup on unmount
|
||||
const cleanup = () => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
unsubscribe = null
|
||||
}
|
||||
if (rpcClient) {
|
||||
// TODO: Disconnect RPC client
|
||||
rpcClient.disconnect()
|
||||
rpcClient = null
|
||||
}
|
||||
isConnected.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initializeKaspaRPC()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanup()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -19,7 +123,20 @@ const networkStatus = ref<NetworkStatus>({
|
||||
<div class="network-status-container">
|
||||
<h2 class="section-title">NETWORK STATUS</h2>
|
||||
|
||||
<div class="status-grid">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && networkStatus.daaScore === 0" class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading network data...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="error-state">
|
||||
<p>{{ error }}</p>
|
||||
<button @click="retryConnection" class="retry-button">Retry Connection</button>
|
||||
</div>
|
||||
|
||||
<!-- Data Display -->
|
||||
<div v-else class="status-grid">
|
||||
<div class="status-item">
|
||||
<span class="status-label">Network</span>
|
||||
<span class="status-value">{{ networkStatus.network }}</span>
|
||||
@ -62,6 +179,14 @@ const networkStatus = ref<NetworkStatus>({
|
||||
<span class="status-label">Median Time UTC</span>
|
||||
<span class="status-value">{{ networkStatus.medianTimeUTC }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Last Update Indicator -->
|
||||
<div class="update-indicator">
|
||||
<span class="update-dot" :class="{ connected: isConnected }"></span>
|
||||
<span class="update-text">
|
||||
{{ isConnected ? 'Connected - Live updates' : 'Connecting...' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,5 +243,83 @@ const networkStatus = ref<NetworkStatus>({
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading State
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-4xl);
|
||||
color: var(--text-secondary);
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
border: 4px solid var(--border-light);
|
||||
border-top-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: var(--font-md);
|
||||
}
|
||||
}
|
||||
|
||||
// Error State
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-4xl);
|
||||
color: var(--error-color);
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
font-size: var(--font-md);
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background: var(--primary-color);
|
||||
color: var(--text-light);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-sm);
|
||||
transition: var(--transition-all);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update Indicator
|
||||
.update-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-2xl);
|
||||
padding-top: var(--spacing-lg);
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
.update-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--text-muted);
|
||||
border-radius: 50%;
|
||||
transition: var(--transition-all);
|
||||
|
||||
&.connected {
|
||||
background: var(--success-color);
|
||||
animation: pulse-dot 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.update-text {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 3008,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user