enable StakingStatsBox data fetching

client-side, no api key required

Author: wackerow

src/components/Staking/StakingStatsBox.tsx

@@ -108,56 +108,65 @@ const StakingStatsBox = () => {
   const [totalValidators, setTotalValidators] = useState<string | null>(ZERO)
   const [currentApr, setCurrentApr] = useState<string | null>(ZERO)
 
-  // TODO! Fix data fetching
-  // useEffect(() => {
-  //   const localeForStatsBoxNumbers = getLocaleForNumberFormat(locale! as Lang)
-
-  //   // Helper functions
-  //   const formatInteger = (amount: number): string =>
-  //     new Intl.NumberFormat(localeForStatsBoxNumbers).format(amount)
-
-  //   const formatPercentage = (amount: number): string =>
-  //     new Intl.NumberFormat(localeForStatsBoxNumbers, {
-  //       style: "percent",
-  //       minimumSignificantDigits: 2,
-  //       maximumSignificantDigits: 2,
-  //     }).format(amount)
-
-  //   // API calls, data formatting, and state setting
-  //   const base = "https://beaconcha.in"
-  //   const { href: ethstore } = new URL("api/v1/ethstore/latest", base)
-  //   const { href: epoch } = new URL("api/v1/epoch/latest", base)
-  //   // Get total ETH staked and current APR from ethstore endpoint
-  //   ;(async () => {
-  //     try {
-  //       const ethStoreResponse = await getData<EthStoreResponse>(ethstore)
-  //       const {
-  //         data: { apr, effective_balances_sum_wei },
-  //       } = ethStoreResponse
-  //       const totalEffectiveBalance: number = effective_balances_sum_wei * 1e-18
-  //       const valueTotalEth = formatInteger(Math.floor(totalEffectiveBalance))
-  //       const valueCurrentApr = formatPercentage(apr)
-  //       setTotalEth(valueTotalEth)
-  //       setCurrentApr(valueCurrentApr)
-  //     } catch (error) {
-  //       setTotalEth(null)
-  //       setCurrentApr(null)
-  //     }
-  //   })()
-  //   // Get total active validators from latest epoch endpoint
-  //   ;(async () => {
-  //     try {
-  //       const epochResponse = await getData<EpochResponse>(epoch)
-  //       const {
-  //         data: { validatorscount },
-  //       } = epochResponse
-  //       const valueTotalValidators = formatInteger(validatorscount)
-  //       setTotalValidators(valueTotalValidators)
-  //     } catch (error) {
-  //       setTotalValidators(null)
-  //     }
-  //   })()
-  // }, [locale])
+  // TODO: Confirm data fetch approach/frequency
+  useEffect(() => {
+    const localeForStatsBoxNumbers = getLocaleForNumberFormat(locale! as Lang)
+
+    // Helper functions
+    const formatInteger = (amount: number): string =>
+      new Intl.NumberFormat(localeForStatsBoxNumbers).format(amount)
+
+    const formatPercentage = (amount: number): string =>
+      new Intl.NumberFormat(localeForStatsBoxNumbers, {
+        style: "percent",
+        minimumSignificantDigits: 2,
+        maximumSignificantDigits: 2,
+      }).format(amount)
+
+    // API calls, data formatting, and state setting
+    const base = "https://beaconcha.in"
+    const { href: ethstore } = new URL("api/v1/ethstore/latest", base)
+    const { href: epoch } = new URL("api/v1/epoch/latest", base)
+    // Get total ETH staked and current APR from ethstore endpoint
+    ;(async () => {
+      try {
+        const ethStoreResponse = await fetch(ethstore)
+        if (!ethStoreResponse.ok)
+          throw new Error(
+            "Network response from Beaconcha.in ETHSTORE was not ok"
+          )
+        const ethStoreResponseJson: EthStoreResponse =
+          await ethStoreResponse.json()
+        const {
+          data: { apr, effective_balances_sum_wei },
+        } = ethStoreResponseJson
+        const totalEffectiveBalance: number = effective_balances_sum_wei * 1e-18
+        const valueTotalEth = formatInteger(Math.floor(totalEffectiveBalance))
+        const valueCurrentApr = formatPercentage(apr)
+        setTotalEth(valueTotalEth)
+        setCurrentApr(valueCurrentApr)
+      } catch (error) {
+        setTotalEth(null)
+        setCurrentApr(null)
+      }
+    })()
+    // Get total active validators from latest epoch endpoint
+    ;(async () => {
+      try {
+        const epochResponse = await fetch(epoch)
+        if (!epochResponse.ok)
+          throw new Error("Network response from Beaconcha.in EPOCH was not ok")
+        const epochResponseJson: EpochResponse = await epochResponse.json()
+        const {
+          data: { validatorscount },
+        } = epochResponseJson
+        const valueTotalValidators = formatInteger(validatorscount)
+        setTotalValidators(valueTotalValidators)
+      } catch (error) {
+        setTotalValidators(null)
+      }
+    })()
+  }, [locale])
 
   return (
     <Flex direction={{ base: "column", md: "row" }}>