1
+ // Import libraries
1
2
import React , { useState , useEffect } from "react"
2
3
import styled from "@emotion/styled"
3
4
import { useIntl } from "react-intl"
4
-
5
+ import { Spinner } from "@chakra-ui/react"
6
+ // Import components
5
7
import Translation from "../Translation"
6
- import StatErrorMessage from "../StatErrorMessage"
7
- import { getLocaleForNumberFormat } from "../../utils/translations"
8
- import { getData } from "../../utils/cache"
9
- import calculateStakingRewards from "../../utils/calculateStakingRewards"
8
+ // Import utilities
10
9
import { Lang } from "../../utils/languages"
10
+ import { getData } from "../../utils/cache"
11
+ import { getLocaleForNumberFormat } from "../../utils/translations"
12
+
13
+ // Constants
14
+ const NA_ERROR = "n/a"
15
+ const ZERO = "0"
11
16
17
+ // Styled components
12
18
const Container = styled . div `
13
19
display: flex;
14
20
@media (max-width: ${ ( { theme } ) => theme . breakpoints . m } ) {
@@ -49,14 +55,20 @@ const Label = styled.p`
49
55
margin-top: 0.5rem;
50
56
`
51
57
58
+ // Interfaces
52
59
export interface IProps { }
53
60
54
- const StatsBoxGrid : React . FC < IProps > = ( ) => {
61
+ // StatsBox component
62
+ const StakingStatsBox : React . FC < IProps > = ( ) => {
55
63
const intl = useIntl ( )
56
- const [ totalEth , setTotalEth ] = useState < string > ( "0" )
57
- const [ totalValidators , setTotalValidators ] = useState < string > ( "0" )
58
- const [ currentApr , setCurrentApr ] = useState < string > ( "0" )
59
- const [ error , setError ] = useState ( false )
64
+ /**
65
+ * State variables:
66
+ * - ZERO is default string, "0", representing loading state
67
+ * - null is error state
68
+ */
69
+ const [ totalEth , setTotalEth ] = useState < string | null > ( ZERO )
70
+ const [ totalValidators , setTotalValidators ] = useState < string | null > ( ZERO )
71
+ const [ currentApr , setCurrentApr ] = useState < string | null > ( ZERO )
60
72
61
73
useEffect ( ( ) => {
62
74
const localeForStatsBoxNumbers = getLocaleForNumberFormat (
@@ -80,47 +92,64 @@ const StatsBoxGrid: React.FC<IProps> = () => {
80
92
} = await getData < {
81
93
data : { totalvalidatorbalance : number ; validatorscount : number }
82
94
} > ( "https://mainnet.beaconcha.in/api/v1/epoch/latest" )
83
-
84
95
const valueTotalEth = formatInteger (
85
96
Number ( ( totalvalidatorbalance * 1e-9 ) . toFixed ( 0 ) )
86
97
)
87
98
const valueTotalValidators = formatInteger ( validatorscount )
88
- const currentAprDecimal = calculateStakingRewards (
89
- totalvalidatorbalance * 1e-9
90
- )
91
- const valueCurrentApr = formatPercentage ( currentAprDecimal )
92
99
setTotalEth ( valueTotalEth )
93
100
setTotalValidators ( valueTotalValidators )
94
- setCurrentApr ( `~${ valueCurrentApr } ` )
95
- setError ( false )
96
101
} catch ( error ) {
97
- setTotalEth ( "n/a" )
98
- setTotalValidators ( "n/a" )
99
- setCurrentApr ( "n/a" )
100
- setError ( true )
102
+ setTotalEth ( null )
103
+ setTotalValidators ( null )
104
+ }
105
+ } ) ( )
106
+ ; ( async ( ) => {
107
+ try {
108
+ const {
109
+ data : { apr } ,
110
+ } = await getData < {
111
+ data : { apr : number }
112
+ } > ( "https://beaconcha.in/api/v1/ethstore/650" )
113
+ const valueCurrentApr = formatPercentage ( apr )
114
+ setCurrentApr ( valueCurrentApr )
115
+ } catch ( error ) {
116
+ setCurrentApr ( null )
101
117
}
102
118
} ) ( )
103
119
} , [ intl . locale ] )
104
120
105
- // TODO: Improve error handling
106
- if ( error ) return < StatErrorMessage />
107
-
108
121
return (
109
122
< Container >
110
123
< Cell >
111
- < Value > { totalEth } </ Value >
124
+ { totalEth === ZERO ? (
125
+ < Spinner />
126
+ ) : (
127
+ < Value title = { totalEth ? "" : NA_ERROR } > { totalEth || NA_ERROR } </ Value >
128
+ ) }
112
129
< Label >
113
130
< Translation id = "page-staking-stats-box-metric-1" />
114
131
</ Label >
115
132
</ Cell >
116
133
< Cell >
117
- < Value > { totalValidators } </ Value >
134
+ { totalValidators === ZERO ? (
135
+ < Spinner />
136
+ ) : (
137
+ < Value title = { totalValidators ? "" : NA_ERROR } >
138
+ { totalValidators || NA_ERROR }
139
+ </ Value >
140
+ ) }
118
141
< Label >
119
142
< Translation id = "page-staking-stats-box-metric-2" />
120
143
</ Label >
121
144
</ Cell >
122
145
< Cell >
123
- < Value > { currentApr } </ Value >
146
+ { currentApr === ZERO ? (
147
+ < Spinner />
148
+ ) : (
149
+ < Value title = { currentApr ? "" : NA_ERROR } >
150
+ { currentApr || NA_ERROR }
151
+ </ Value >
152
+ ) }
124
153
< Label >
125
154
< Translation id = "page-staking-stats-box-metric-3" />
126
155
</ Label >
@@ -129,4 +158,4 @@ const StatsBoxGrid: React.FC<IProps> = () => {
129
158
)
130
159
}
131
160
132
- export default StatsBoxGrid
161
+ export default StakingStatsBox
0 commit comments