refactor: use getLocale from next/server

avoid prop drilling locale

Author: wackerow

app/[locale]/enterprise/page.tsx

@@ -104,16 +104,13 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
   const ethPrice = await fetchEthPrice()
   const totalEthStaked = await fetchTotalEthStaked()
 
-  const metrics = await parseActivity(
-    {
-      txCount,
-      stablecoinMarketCap,
-      ethPrice,
-      totalEthStaked,
-      // totalCapitalSecured,
-    },
-    locale
-  )
+  const metrics = await parseActivity({
+    txCount,
+    stablecoinMarketCap,
+    ethPrice,
+    totalEthStaked,
+    // totalCapitalSecured,
+  })
 
   const features: Feature[] = [
     {
@@ -304,7 +301,6 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
 
           <ActivityStats
             metrics={metrics}
-            locale={locale}
             className={cn(
               metrics.length < 2 && "hidden", // Minimum before displaying
               "w-fit max-w-xl shrink-0 gap-8 sm:max-md:grid-cols-2",

app/[locale]/enterprise/utils.ts

@@ -1,4 +1,4 @@
-import { getTranslations } from "next-intl/server"
+import { getLocale, getTranslations } from "next-intl/server"
 
 import type {
   AllEnterpriseActivityData,
@@ -10,16 +10,14 @@ import { formatLargeNumber, formatLargeUSD } from "@/lib/utils/numbers"
 import { getLocaleForNumberFormat } from "@/lib/utils/translations"
 
 // Convert numerical value to formatted values
-export const parseActivity = async (
-  {
-    txCount,
-    stablecoinMarketCap,
-    ethPrice,
-    totalEthStaked,
-    // totalCapitalSecured,
-  }: AllEnterpriseActivityData,
-  locale: Lang
-): Promise<StatsBoxMetric[]> => {
+export const parseActivity = async ({
+  txCount,
+  stablecoinMarketCap,
+  ethPrice,
+  totalEthStaked,
+  // totalCapitalSecured,
+}: AllEnterpriseActivityData): Promise<StatsBoxMetric[]> => {
+  const locale = (await getLocale()) as Lang
   const t = await getTranslations("page-enterprise")
 
   const localeForNumberFormat = getLocaleForNumberFormat(locale)

app/[locale]/page.tsx

@@ -541,7 +541,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} locale={locale} />
+              <ActivityStats metrics={metrics} />
 
               <div className="mt-12 flex justify-center">
                 <ButtonLink

src/components/ActivityStats/index.tsx

@@ -1,3 +1,5 @@
+import { getLocale } from "next-intl/server"
+
 import type { StatsBoxMetric } from "@/lib/types"
 
 import { cn } from "@/lib/utils/cn"
@@ -6,14 +8,10 @@ import BigNumber from "../BigNumber"
 
 type ActivityStatsProps = {
   metrics: StatsBoxMetric[]
-  locale: string
   className?: string
 }
-const ActivityStats = async ({
-  metrics,
-  locale,
-  className,
-}: ActivityStatsProps) => {
+const ActivityStats = async ({ metrics, className }: ActivityStatsProps) => {
+  const locale = await getLocale()
   const gridBorderClasses = [
     "border-b border-body-light xl:border-e xl:pe-8",
     "border-b border-body-light xl:ps-8",