Skip to content

Commit d37eb5e

Browse files
authored
Merge pull request #8483 from ethereum/apr-endpoint
Update APR endpoint
2 parents 07be4cf + 32989eb commit d37eb5e

File tree

2 files changed

+57
-72
lines changed

2 files changed

+57
-72
lines changed

src/components/Staking/StakingStatsBox.tsx

Lines changed: 57 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1+
// Import libraries
12
import React, { useState, useEffect } from "react"
23
import styled from "@emotion/styled"
34
import { useIntl } from "react-intl"
4-
5+
import { Spinner } from "@chakra-ui/react"
6+
// Import components
57
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
109
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"
1116

17+
// Styled components
1218
const Container = styled.div`
1319
display: flex;
1420
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
@@ -49,14 +55,20 @@ const Label = styled.p`
4955
margin-top: 0.5rem;
5056
`
5157

58+
// Interfaces
5259
export interface IProps {}
5360

54-
const StatsBoxGrid: React.FC<IProps> = () => {
61+
// StatsBox component
62+
const StakingStatsBox: React.FC<IProps> = () => {
5563
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)
6072

6173
useEffect(() => {
6274
const localeForStatsBoxNumbers = getLocaleForNumberFormat(
@@ -80,47 +92,64 @@ const StatsBoxGrid: React.FC<IProps> = () => {
8092
} = await getData<{
8193
data: { totalvalidatorbalance: number; validatorscount: number }
8294
}>("https://mainnet.beaconcha.in/api/v1/epoch/latest")
83-
8495
const valueTotalEth = formatInteger(
8596
Number((totalvalidatorbalance * 1e-9).toFixed(0))
8697
)
8798
const valueTotalValidators = formatInteger(validatorscount)
88-
const currentAprDecimal = calculateStakingRewards(
89-
totalvalidatorbalance * 1e-9
90-
)
91-
const valueCurrentApr = formatPercentage(currentAprDecimal)
9299
setTotalEth(valueTotalEth)
93100
setTotalValidators(valueTotalValidators)
94-
setCurrentApr(`~${valueCurrentApr}`)
95-
setError(false)
96101
} 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)
101117
}
102118
})()
103119
}, [intl.locale])
104120

105-
// TODO: Improve error handling
106-
if (error) return <StatErrorMessage />
107-
108121
return (
109122
<Container>
110123
<Cell>
111-
<Value>{totalEth}</Value>
124+
{totalEth === ZERO ? (
125+
<Spinner />
126+
) : (
127+
<Value title={totalEth ? "" : NA_ERROR}>{totalEth || NA_ERROR}</Value>
128+
)}
112129
<Label>
113130
<Translation id="page-staking-stats-box-metric-1" />
114131
</Label>
115132
</Cell>
116133
<Cell>
117-
<Value>{totalValidators}</Value>
134+
{totalValidators === ZERO ? (
135+
<Spinner />
136+
) : (
137+
<Value title={totalValidators ? "" : NA_ERROR}>
138+
{totalValidators || NA_ERROR}
139+
</Value>
140+
)}
118141
<Label>
119142
<Translation id="page-staking-stats-box-metric-2" />
120143
</Label>
121144
</Cell>
122145
<Cell>
123-
<Value>{currentApr}</Value>
146+
{currentApr === ZERO ? (
147+
<Spinner />
148+
) : (
149+
<Value title={currentApr ? "" : NA_ERROR}>
150+
{currentApr || NA_ERROR}
151+
</Value>
152+
)}
124153
<Label>
125154
<Translation id="page-staking-stats-box-metric-3" />
126155
</Label>
@@ -129,4 +158,4 @@ const StatsBoxGrid: React.FC<IProps> = () => {
129158
)
130159
}
131160

132-
export default StatsBoxGrid
161+
export default StakingStatsBox

src/utils/calculateStakingRewards.ts

Lines changed: 0 additions & 44 deletions
This file was deleted.

0 commit comments

Comments
 (0)