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

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { formatNumberToLocaleString } from '@/utils'
import { SpinnerCommon } from '@/components'
import { useNeptuneStore } from '@/stores/neptuneStore'
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
import { message } from 'ant-design-vue'

const neptuneStore = useNeptuneStore()
const { getBlockHeight, getNetworkInfo } = useNeptuneWallet()

const blockHeight = ref(0)
const networkInfo = ref<any>(null)
const loading = ref(true)
const error = ref('')
const lastUpdate = ref<Date | null>(null)

// let pollingInterval: number | null = null

const network = computed(() => neptuneStore.getNetwork)

const loadNetworkData = async () => {
    try {
        error.value = ''

        const [heightResult, infoResult] = await Promise.all([getBlockHeight(), getNetworkInfo()])

        if (heightResult !== undefined) {
            blockHeight.value =
                typeof heightResult === 'number'
                    ? heightResult
                    : heightResult.height || heightResult || 0
        }

        if (infoResult) {
            networkInfo.value = infoResult
        }

        lastUpdate.value = new Date()

        if (loading.value) {
            loading.value = false
        }
    } catch (err) {
        const errorMsg = err instanceof Error ? err.message : 'Failed to load network data'
        error.value = errorMsg
        loading.value = false
        message.error(errorMsg)
    }
}

const retryConnection = async () => {
    loading.value = true
    error.value = ''
    await loadNetworkData()
}

// const startPolling = () => {
//     pollingInterval = window.setInterval(() => {
//         if (!loading.value) {
//             loadNetworkData()
//         }
//     }, 10000)
// }

// const stopPolling = () => {
//     if (pollingInterval) {
//         clearInterval(pollingInterval)
//         pollingInterval = null
//     }
// }

onMounted(async () => {
    await loadNetworkData()
    // startPolling()
})

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

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

            <!-- Loading State -->
            <div v-if="loading && !blockHeight" class="loading-state">
                <SpinnerCommon size="medium" />
                <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">Neptune {{ network }}</span>
                </div>

                <div class="status-item">
                    <span class="status-label">Block Height</span>
                    <span class="status-value">{{ formatNumberToLocaleString(blockHeight) }}</span>
                </div>

                <div v-if="networkInfo?.version" class="status-item">
                    <span class="status-label">Version</span>
                    <span class="status-value">{{ networkInfo.version }}</span>
                </div>

                <div v-if="networkInfo?.peer_count !== undefined" class="status-item">
                    <span class="status-label">Peers</span>
                    <span class="status-value">{{ networkInfo.peer_count }}</span>
                </div>

                <div v-if="networkInfo?.chain_id" class="status-item">
                    <span class="status-label">Chain ID</span>
                    <span class="status-value">{{ networkInfo.chain_id }}</span>
                </div>

                <div v-if="lastUpdate" class="status-item">
                    <span class="status-label">Last Updated</span>
                    <span class="status-value">{{ lastUpdate.toLocaleTimeString() }}</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 {
        @include center_flex;
        padding: var(--spacing-4xl);
        color: var(--text-secondary);
    }

    // Error State
    .error-state {
        @include center_flex;
        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);
            }
        }
    }
}
</style>