feat: implement stats box with data fetching

Author: wackerow

src/pages/what-is-ethereum.tsx

@@ -1,7 +1,8 @@
-import { GetStaticProps } from "next"
+import { GetStaticProps, InferGetStaticPropsType } from "next"
 import { useRouter } from "next/router"
 import { SSRConfig, useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
+import { MdInfoOutline } from "react-icons/md"
 import {
   Box,
   type BoxProps,
@@ -10,19 +11,21 @@ import {
   type FlexProps,
   Heading,
   type HeadingProps,
+  Icon,
   ListItem,
   UnorderedList,
 } from "@chakra-ui/react"
 
-// import { GATSBY_FUNCTIONS_PATH } from "@/lib/constants" // TODO!
-// import useFetchStat, {
-//   defaultFormatter,
-//   IFetchStat,
-// } from "../hooks/useFetchStat" // TODO!
-import type { ChildOnlyProp, Lang } from "@/lib/types"
+import type { ChildOnlyProp, Lang, MetricReturnData } from "@/lib/types"
 
 import AdoptionChart from "@/components/AdoptionChart"
-import { Banner, BannerImage } from "@/components/BannerGrid"
+import {
+  Banner,
+  BannerBody,
+  BannerGrid,
+  BannerGridCell,
+  BannerImage,
+} from "@/components/BannerGrid"
 import Button from "@/components/Buttons/Button"
 import ButtonLink from "@/components/Buttons/ButtonLink"
 import Callout from "@/components/Callout"
@@ -36,16 +39,20 @@ import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Slider, { EmblaSlide } from "@/components/Slider"
+import StatErrorMessage from "@/components/StatErrorMessage"
 import Tabs from "@/components/Tabs"
+import Tooltip from "@/components/Tooltip"
 import Translation from "@/components/Translation"
 
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { runOnlyOnce } from "@/lib/utils/runOnlyOnce"
 import {
   getLocaleForNumberFormat,
   getRequiredNamespacesForPage,
 } from "@/lib/utils/translations"
 
+import { fetchTxCount } from "@/lib/api/fetchTxCount"
 import developers from "@/public/developers-eth-blocks.png"
 import community from "@/public/enterprise.png"
 import diffEthAndBtc from "@/public/eth.png"
@@ -163,18 +170,6 @@ const ButtonRow = (props: ChildOnlyProp) => (
   <Flex align="center" mt={4} mb={6} wrap="wrap" gap={4} {...props} />
 )
 
-// const Stat: React.FC<{ stat: IFetchStat }> = ({ stat }) => {
-//   const isLoading = !stat.value
-
-//   return stat.hasError ? (
-//     <StatErrorMessage fontSize="1rem" />
-//   ) : isLoading ? (
-//     <StatLoadingMessage fontSize="1rem" />
-//   ) : (
-//     <>{stat.formattedValue}</>
-//   )
-// }
-
 const NoWrapText = (props: ChildOnlyProp) => (
   <Text as="span" whiteSpace="nowrap" {...props} />
 )
@@ -183,9 +178,17 @@ const Image400 = ({ src }: Pick<ImageProps, "src">) => (
   <Image src={src} alt="" width={400} />
 )
 
+const cachedFetchTxCount = runOnlyOnce(fetchTxCount)
+
+type Props = SSRConfig & {
+  data: MetricReturnData
+}
+
 export const getStaticProps = (async (context) => {
   const { locale } = context
 
+  const data = await cachedFetchTxCount()
+
   // load i18n required namespaces for the given page
   const requiredNamespaces = getRequiredNamespacesForPage("/what-is-ethereum")
   const lastDeployDate = getLastDeployDate()
@@ -194,32 +197,27 @@ export const getStaticProps = (async (context) => {
     props: {
       ...(await serverSideTranslations(locale!, requiredNamespaces)),
       lastDeployDate,
+      data,
     },
   }
-}) satisfies GetStaticProps<SSRConfig>
+}) satisfies GetStaticProps<Props>
 
-const WhatIsEthereumPage = () => {
+const WhatIsEthereumPage = ({
+  data,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { t } = useTranslation(["page-what-is-ethereum", "learn-quizzes"])
 
   const { locale } = useRouter()
+  const localeForNumberFormat = getLocaleForNumberFormat(locale! as Lang)
+
+  const formatNumber = (value: number) =>
+    new Intl.NumberFormat(localeForNumberFormat, {
+      notation: "compact",
+      minimumSignificantDigits: 3,
+      maximumSignificantDigits: 4,
+    }).format(value)
 
-  const localeForStatsBoxNumbers = getLocaleForNumberFormat(locale! as Lang)
-
-  // TODO! Fetch txCount from etherscan API
-  // const txCount = useFetchStat<
-  //   Array<{ unixTimeStamp: string; transactionCount: number }>
-  // >(
-  //   `${GATSBY_FUNCTIONS_PATH}/txs`,
-  //   (response) => {
-  //     return response
-  //       .map(({ unixTimeStamp, transactionCount }) => ({
-  //         timestamp: parseInt(unixTimeStamp) * 1000, // unix milliseconds
-  //         value: transactionCount,
-  //       }))
-  //       .sort((a, b) => a.timestamp - b.timestamp)
-  //   },
-  //   (value) => defaultFormatter(value, localeForStatsBoxNumbers)
-  // )
+  const txStat = "error" in data ? "" : formatNumber(data.value)
 
   const cards = [
     {
@@ -451,11 +449,8 @@ const WhatIsEthereumPage = () => {
 
         <Section>
           <Banner>
-            {/* TODO: Update stats box */}
-            {/* <BannerBody>
-              <H2>
-                {t("page-what-is-ethereum-ethereum-in-numbers-title")}
-              </H2>
+            <BannerBody>
+              <H2>{t("page-what-is-ethereum-ethereum-in-numbers-title")}</H2>
               <BannerGrid>
                 <BannerGridCell>
                   <StatPrimary>4k+</StatPrimary>
@@ -554,8 +549,9 @@ const WhatIsEthereumPage = () => {
                 </BannerGridCell>
                 <BannerGridCell>
                   <StatPrimary>
-                    <Stat stat={txCount} />
+                    {txStat || <StatErrorMessage fontSize="1rem" />}
                   </StatPrimary>
+                  {/* TODO: Extract strings for translation */}
                   <StatDescription>
                     Number of transactions{" "}
                     <NoWrapText>
@@ -574,7 +570,7 @@ const WhatIsEthereumPage = () => {
                   </StatDescription>
                 </BannerGridCell>
               </BannerGrid>
-            </BannerBody> */}
+            </BannerBody>
             <BannerImage>
               <Image400 src={stats} />
             </BannerImage>