neptune-web-wallet/src/views/Home/components/NetworkTab.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { formatNumberToLocaleString } from '@/utils'
import type { NetworkStatus } from '@/interface'

const networkStatus = ref<NetworkStatus>({
    network: 'kaspa-mainnet',
    daaScore: 0,
    dagHeader: 0,
    dagBlocks: 0,
    difficulty: 0,
    medianOffset: '00:00:00',
    medianTimeUTC: '',
})

const loading = ref(true)
const error = ref('')
const isConnected = ref(false)

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()
    }
}

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),
            }

            const mockSubscription = setInterval(() => {
                networkStatus.value.daaScore += 1
                networkStatus.value.dagHeader += 1
                networkStatus.value.dagBlocks += 1
                updateMedianTime()
            }, 1000)

            unsubscribe = () => clearInterval(mockSubscription)

            resolve()
        }, 1000)
    })
}

const updateMedianTime = () => {
    networkStatus.value.medianTimeUTC = new Date().toISOString().replace('T', ' ').substring(0, 19)
}

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),
    }
}

const retryConnection = () => {
    initializeKaspaRPC()
}

const cleanup = () => {
    if (unsubscribe) {
        unsubscribe()
        unsubscribe = null
    }
    if (rpcClient) {
        rpcClient.disconnect()
        rpcClient = null
    }
    isConnected.value = false
}

onMounted(() => {
    initializeKaspaRPC()
})

onUnmounted(() => {
    cleanup()
})
</script>

<template>
    <div class="content-card">
        <div class="network-status-container">
            <h2 class="section-title">NETWORK STATUS</h2>

            <!-- 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>
                </div>

                <div class="status-item">
                    <span class="status-label">DAA Score</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.daaScore)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">DAG Header</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.dagHeader)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">DAG Blocks</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.dagBlocks)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">Difficulty</span>
                    <span class="status-value">{{
                        formatNumberToLocaleString(networkStatus.difficulty)
                    }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">Median Offset</span>
                    <span class="status-value">{{ networkStatus.medianOffset }}</span>
                </div>

                <div class="status-item">
                    <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>
</template>

<style lang="scss" scoped>
.content-card {
    @include card-base;
}

.network-status-container {
    .section-title {
        font-size: var(--font-xl);
        font-weight: var(--font-bold);
        color: var(--text-primary);
        margin-bottom: var(--spacing-2xl);
        letter-spacing: var(--tracking-wider);
        text-align: center;
        padding-bottom: var(--spacing-lg);
        border-bottom: 3px solid var(--primary-color);
    }

    .status-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-lg) var(--spacing-xl);
        background: var(--bg-light);
        border-radius: var(--radius-md);
        transition: var(--transition-all);

        &:hover {
            background: var(--bg-hover);
            transform: translateX(5px);
        }

        .status-label {
            font-weight: var(--font-semibold);
            color: var(--text-secondary);
            font-size: var(--font-md);
        }

        .status-value {
            font-weight: var(--font-semibold);
            color: var(--text-primary);
            font-size: var(--font-lg);
            text-align: right;
            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>