Merge pull request #4 from HiamQuan/feature/main_page

221025/polling_mock_data_network_tab

src/assets/scss/__animations.scss

@@ -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);
+    }
+}

src/views/Home/components/NetworkTab.vue

@@ -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,
+    daaScore: 0,
-    dagHeader: 1507472,
+    dagHeader: 0,
-    dagBlocks: 1507472,
+    dagBlocks: 0,
-    difficulty: 32931885262483752.0,
+    difficulty: 0,
-    medianOffset: '00:00:04',
+    medianOffset: '00:00:00',
-    medianTimeUTC: '2025-10-21 03:05:57',
+    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>

vite.config.ts

@@ -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,