refactor: BigNumber pass locale to next-intl/server

add data-labels for selection

Author: wackerow

app/[locale]/page.tsx

@@ -537,7 +537,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
               <p className="mt-8 text-xl font-bold">
                 {t("page-index-activity-description")}
               </p>
-              <ActivityStats metrics={metrics} />
+              <ActivityStats metrics={metrics} locale={locale} />
 
               <div className="mt-12 flex justify-center">
                 <ButtonLink

src/components/ActivityStats/index.tsx

@@ -4,8 +4,9 @@ import BigNumber from "../BigNumber"
 
 type ActivityStatsProps = {
   metrics: StatsBoxMetric[]
+  locale: string
 }
-const ActivityStats = async ({ metrics }: ActivityStatsProps) => {
+const ActivityStats = async ({ metrics, locale }: ActivityStatsProps) => {
   const gridBorderClasses = [
     "border-b border-body-light xl:border-e xl:pe-8",
     "border-b border-body-light xl:ps-8",
@@ -16,6 +17,7 @@ const ActivityStats = async ({ metrics }: ActivityStatsProps) => {
     <div className="grid w-full grid-cols-1 xl:grid-cols-2">
       {metrics.map(({ label, apiProvider, apiUrl, state }, idx) => (
         <BigNumber
+          locale={locale}
           className={gridBorderClasses[idx]}
           key={label}
           value={"value" in state ? state.value : undefined}

src/components/BigNumber/index.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react"
-import { useLocale } from "next-intl"
+import { getTranslations } from "next-intl/server"
 import { MdInfoOutline } from "react-icons/md"
 
 import { cn } from "@/lib/utils/cn"
@@ -8,9 +8,8 @@ import { isValidDate } from "@/lib/utils/date"
 import Tooltip from "../Tooltip"
 import Link from "../ui/Link"
 
-import { useTranslation } from "@/hooks/useTranslation"
-
 type BigNumberProps = {
+  locale: string
   children: ReactNode
   value?: ReactNode
   sourceName?: string
@@ -19,16 +18,16 @@ type BigNumberProps = {
   className?: string
 }
 
-const BigNumber = ({
+const BigNumber = async ({
+  locale,
   children,
   value,
   sourceName,
   sourceUrl,
   lastUpdated,
   className,
 }: BigNumberProps) => {
-  const { t } = useTranslation("common")
-  const locale = useLocale()
+  const t = await getTranslations({ locale, namespace: "common" })
   const lastUpdatedDisplay =
     lastUpdated && isValidDate(lastUpdated)
       ? new Intl.DateTimeFormat(locale, {
@@ -37,14 +36,17 @@ const BigNumber = ({
       : ""
   return (
     <div
+      data-label="big-number"
       className={cn(
         "flex flex-1 shrink-0 flex-col self-stretch py-8",
         className
       )}
     >
       {value ? (
         <>
-          <div className="text-4xl font-bold sm:text-5xl">{value}</div>
+          <div data-label="value" className="text-4xl font-bold sm:text-5xl">
+            {value}
+          </div>
           <div className="text-sm">
             {children}
             {sourceName && sourceUrl && (

src/components/Resources/useResources.tsx

@@ -96,7 +96,11 @@ export const useResources = ({ txCostsMedianUsd }): DashboardSection[] => {
     {
       title: t("page-resources-network-layer2-title"),
       metric: (
-        <BigNumber className="items-center" value={medianTxCost.value}>
+        <BigNumber
+          className="items-center"
+          value={medianTxCost.value}
+          locale={locale}
+        >
           Median transaction cost on Ethereum networks
         </BigNumber>
       ),