From 95b015e94baf4eae9fba332e26f59a0149fb3b70 Mon Sep 17 00:00:00 2001 From: lukas Date: Tue, 3 Sep 2024 19:32:09 +0200 Subject: [PATCH] fix: fix steak --- app/page.tsx | 391 ++++++++++++++++++++++++++------------------------- 1 file changed, 197 insertions(+), 194 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 4a74b565..ec91a003 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,211 +1,214 @@ -'use client'; - -import { Epoch } from '@components/common/Epoch'; -import { ErrorCard } from '@components/common/ErrorCard'; -import { LoadingCard } from '@components/common/LoadingCard'; -import { Slot } from '@components/common/Slot'; -import { TableCardBody } from '@components/common/TableCardBody'; -import { TimestampToggle } from '@components/common/TimestampToggle'; -import { LiveTransactionStatsCard } from '@components/LiveTransactionStatsCard'; -import { StatsNotReady } from '@components/StatsNotReady'; -import { useVoteAccounts } from '@providers/accounts/vote-accounts'; -import { useCluster } from '@providers/cluster'; -import { StatsProvider } from '@providers/stats'; -import { - ClusterStatsStatus, - useDashboardInfo, - usePerformanceInfo, - useStatsProvider, -} from '@providers/stats/solanaClusterStats'; -import { Status, SupplyProvider, useFetchSupply, useSupply } from '@providers/supply'; -import { ClusterStatus } from '@utils/cluster'; -import { abbreviatedNumber, lamportsToSol, slotsToHumanString } from '@utils/index'; -import { percentage } from '@utils/math'; -import React from 'react'; - -export default function Page() { - return ( - - -
- -
-
-
-
-

Live Cluster Stats

-
-
-
- -
- +'use client' + +import { Epoch } from '@components/common/Epoch' +import { ErrorCard } from '@components/common/ErrorCard' +import { LoadingCard } from '@components/common/LoadingCard' +import { Slot } from '@components/common/Slot' +import { TableCardBody } from '@components/common/TableCardBody' +import { TimestampToggle } from '@components/common/TimestampToggle' +import { LiveTransactionStatsCard } from '@components/LiveTransactionStatsCard' +import { StatsNotReady } from '@components/StatsNotReady' +import { useVoteAccounts } from '@providers/accounts/vote-accounts' +import { useCluster } from '@providers/cluster' +import { StatsProvider } from '@providers/stats' +import { ClusterStatsStatus, useDashboardInfo, usePerformanceInfo, useStatsProvider } from '@providers/stats/solanaClusterStats' +import { Status, SupplyProvider, useFetchSupply, useSupply } from '@providers/supply' +import { ClusterStatus } from '@utils/cluster' +import { abbreviatedNumber, lamportsToSol, slotsToHumanString } from '@utils/index' +import { percentage } from '@utils/math' +import React from 'react' + +export default function Page () { + return ( + + +
+ +
+
+
+
+

Live Cluster Stats

- - - ); +
+
+ +
+ +
+ + + ) } -function StakingComponent() { - const { status } = useCluster(); - const supply = useSupply(); - const fetchSupply = useFetchSupply(); - const { fetchVoteAccounts, voteAccounts } = useVoteAccounts(); +function StakingComponent () { + const { status } = useCluster() + const supply = useSupply() + const fetchSupply = useFetchSupply() + const { fetchVoteAccounts, voteAccounts } = useVoteAccounts() - function fetchData() { - fetchSupply(); - fetchVoteAccounts(); - } + function fetchData () { + fetchSupply() + fetchVoteAccounts() + } - React.useEffect(() => { - if (status === ClusterStatus.Connected) { - fetchData(); - } - }, [status]); // eslint-disable-line react-hooks/exhaustive-deps - - const delinquentStake = React.useMemo(() => { - if (voteAccounts) { - return voteAccounts.delinquent.reduce((prev, current) => prev + current.activatedStake, BigInt(0)); - } - }, [voteAccounts]); - - const activeStake = React.useMemo(() => { - if (voteAccounts && delinquentStake) { - return voteAccounts.current.reduce((prev, current) => prev + current.activatedStake, BigInt(0)) + delinquentStake; - } - }, [voteAccounts, delinquentStake]); - - if (supply === Status.Disconnected) { - // we'll return here to prevent flicker - return null; + React.useEffect(() => { + if (status === ClusterStatus.Connected) { + fetchData() } + }, [status]) // eslint-disable-line react-hooks/exhaustive-deps - if (supply === Status.Idle || supply === Status.Connecting) { - return ; - } else if (typeof supply === 'string') { - return ; + const delinquentStake = React.useMemo(() => { + if (voteAccounts) { + return voteAccounts.delinquent.reduce((prev, current) => prev + current.activatedStake, BigInt(0)) + } + else { + console.warn('Vote accounts not available') } + }, [voteAccounts]) - // Calculate to 2dp for accuracy, then display as 1 - const circulatingPercentage = percentage(supply.circulating, supply.total, 2).toFixed(1); + const activeStake = React.useMemo(() => { + if (voteAccounts && delinquentStake !== undefined) { + return voteAccounts.current.reduce((prev, current) => prev + current.activatedStake, BigInt(0)) + delinquentStake - let delinquentStakePercentage; - if (delinquentStake && activeStake) { - delinquentStakePercentage = percentage(delinquentStake, activeStake, 2).toFixed(1); } - - return ( -
-
-
-
-

Circulating Supply

-

- {displayLamports(supply.circulating)} /{' '} - {displayLamports(supply.total)} -

-
- {circulatingPercentage}% is circulating -
-
-
-
-
-
-
-

Active Stake

- {activeStake ? ( -

- {displayLamports(activeStake)} / {displayLamports(supply.total)} -

- ) : null} - {delinquentStakePercentage && ( -
- Delinquent stake: {delinquentStakePercentage}% -
- )} -
-
-
+ else { + console.warn('Vote / Delinquent stake accounts not available') + } + }, [voteAccounts, delinquentStake]) + + if (supply === Status.Disconnected) { + // we'll return here to prevent flicker + return null + } + + if (supply === Status.Idle || supply === Status.Connecting) { + return + } + else if (typeof supply === 'string') { + return + } + + // Calculate to 2dp for accuracy, then display as 1 + const circulatingPercentage = percentage(supply.circulating, supply.total, 2).toFixed(1) + + let delinquentStakePercentage + if (delinquentStake && activeStake) { + delinquentStakePercentage = percentage(delinquentStake, activeStake, 2).toFixed(1) + } + + return ( +
+
+
+
+

Circulating Supply

+

+ {displayLamports(supply.circulating)} /{' '} + {displayLamports(supply.total)} +

+
+ {circulatingPercentage}% is circulating +
+
+
+
+
+
+
+

Active Stake

+ {activeStake ? ( +

+ {displayLamports(activeStake)} / {displayLamports(supply.total)} +

+ ) : null} + {delinquentStakePercentage && ( +
+ Delinquent stake: {delinquentStakePercentage}% +
+ )} +
- ); +
+
+ ) } -function displayLamports(value: number | bigint) { - return abbreviatedNumber(lamportsToSol(value)); +function displayLamports (value: number | bigint) { + return abbreviatedNumber(lamportsToSol(value)) } -function StatsCardBody() { - const dashboardInfo = useDashboardInfo(); - const performanceInfo = usePerformanceInfo(); - const { setActive } = useStatsProvider(); - const { cluster } = useCluster(); - - React.useEffect(() => { - setActive(true); - return () => setActive(false); - }, [setActive, cluster]); - - if (performanceInfo.status !== ClusterStatsStatus.Ready || dashboardInfo.status !== ClusterStatsStatus.Ready) { - const error = - performanceInfo.status === ClusterStatsStatus.Error || dashboardInfo.status === ClusterStatsStatus.Error; - return ; - } - - const { avgSlotTime_1h, avgSlotTime_1min, epochInfo, blockTime } = dashboardInfo; - const hourlySlotTime = Math.round(1000 * avgSlotTime_1h); - const averageSlotTime = Math.round(1000 * avgSlotTime_1min); - const { slotIndex, slotsInEpoch } = epochInfo; - const epochProgress = percentage(slotIndex, slotsInEpoch, 2).toFixed(1) + '%'; - const epochTimeRemaining = slotsToHumanString(Number(slotsInEpoch - slotIndex), hourlySlotTime); - const { blockHeight, absoluteSlot } = epochInfo; - - return ( - - - Slot - - - - - {blockHeight !== undefined && ( - - Block height - - - - - )} - {blockTime && ( - - Cluster time - - - - - )} - - Slot time (1min average) - {averageSlotTime}ms - - - Slot time (1hr average) - {hourlySlotTime}ms - - - Epoch - - - - - - Epoch progress - {epochProgress} - - - Epoch time remaining (approx.) - ~{epochTimeRemaining} - - - ); +function StatsCardBody () { + const dashboardInfo = useDashboardInfo() + const performanceInfo = usePerformanceInfo() + const { setActive } = useStatsProvider() + const { cluster } = useCluster() + + React.useEffect(() => { + setActive(true) + return () => setActive(false) + }, [setActive, cluster]) + + if (performanceInfo.status !== ClusterStatsStatus.Ready || dashboardInfo.status !== ClusterStatsStatus.Ready) { + const error = + performanceInfo.status === ClusterStatsStatus.Error || dashboardInfo.status === ClusterStatsStatus.Error + return + } + + const { avgSlotTime_1h, avgSlotTime_1min, epochInfo, blockTime } = dashboardInfo + const hourlySlotTime = Math.round(1000 * avgSlotTime_1h) + const averageSlotTime = Math.round(1000 * avgSlotTime_1min) + const { slotIndex, slotsInEpoch } = epochInfo + const epochProgress = percentage(slotIndex, slotsInEpoch, 2).toFixed(1) + '%' + const epochTimeRemaining = slotsToHumanString(Number(slotsInEpoch - slotIndex), hourlySlotTime) + const { blockHeight, absoluteSlot } = epochInfo + + return ( + + + Slot + + + + + {blockHeight !== undefined && ( + + Block height + + + + + )} + {blockTime && ( + + Cluster time + + + + + )} + + Slot time (1min average) + {averageSlotTime}ms + + + Slot time (1hr average) + {hourlySlotTime}ms + + + Epoch + + + + + + Epoch progress + {epochProgress} + + + Epoch time remaining (approx.) + ~{epochTimeRemaining} + + + ) }