feat: initialize ActivityStats with stablecoins mcap

template remaining items

Author: wackerow

app/[locale]/enterprise/page.tsx

@@ -3,6 +3,7 @@ import { getTranslations } from "next-intl/server"
 
 import type { Lang } from "@/lib/types"
 
+import ActivityStats from "@/components/ActivityStats"
 import { HubHero } from "@/components/Hero"
 import Checkmark from "@/components/icons/checkmark.svg"
 import Adidas from "@/components/icons/enterprise/adidas.svg"
@@ -37,17 +38,20 @@ import Walmart from "@/components/icons/enterprise/walmart.svg"
 import WFP from "@/components/icons/enterprise/wfp.svg"
 import MainArticle from "@/components/MainArticle"
 import { ButtonLink } from "@/components/ui/buttons/Button"
-import { Skeleton } from "@/components/ui/skeleton"
 
 import { cn } from "@/lib/utils/cn"
+// import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { getMetadata } from "@/lib/utils/metadata"
 
+// import { BASE_TIME_UNIT } from "@/lib/constants"
 import CasesColumn from "./_components/CasesColumn"
 import FeatureCard from "./_components/FeatureCard"
 import { ENTERPRISE_MAILTO } from "./constants"
 import SwiperHangerLoading from "./SwiperHangerLoading"
 import type { Case, EcosystemPlayer, Feature } from "./types"
+import { parseActivity } from "./utils"
 
+import { fetchEthereumStablecoinsMcap } from "@/lib/api/fetchEthereumStablecoinsMcap"
 import EthGlyph from "@/public/images/assets/svgs/eth-diamond-rainbow.svg"
 import heroImage from "@/public/images/heroes/enterprise-hero-white.png"
 
@@ -61,10 +65,29 @@ const CasesSwiper = dynamic(() => import("./_components/CasesSwiper"), {
   loading: () => <SwiperHangerLoading />,
 })
 
+// TODO: Switch back to this for cache and mock-data dev fallback
+// const loadData = dataLoader(
+//   [["ethereumStablecoinsResponse", fetchEthereumStablecoinsMcap]],
+//   BASE_TIME_UNIT * 1000
+// )
+
 const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const { locale } = await params
+
   const t = await getTranslations({ locale, namespace: "page-enterprise" })
 
+  // const [ethereumStablecoinsResponse] = await loadData()
+  const ethereumStablecoinsResponse = await fetchEthereumStablecoinsMcap()
+
+  const metrics = await parseActivity(
+    {
+      // dailyTxCount,
+      stablecoinMarketCap: ethereumStablecoinsResponse,
+      // totalCapitalSecured,
+    },
+    locale
+  )
+
   const features: Feature[] = [
     {
       header: t("page-enterprise-features-1-header"),
@@ -234,11 +257,14 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
             },
           },
         ]}
-        className="[&_[data-label='breadcrumb']]:xl:text-body-light [&_[data-label='hero-content']]:xl:bg-accent-a [&_[data-label='hero-content']]:xl:text-background [&_a:hover]:bg-body [&_a:hover]:!text-background [&_a]:font-bold [&_a]:xl:bg-background [&_a]:xl:text-accent-a [&_img]:dark:invert"
+        className="[&_[data-label='breadcrumb']]:xl:text-body-light [&_[data-label='hero-content']]:xl:bg-accent-a [&_[data-label='hero-content']]:xl:text-background xl:[&_a:hover]:bg-accent-a-hover xl:[&_a:hover]:!text-background [&_a]:font-bold [&_a]:xl:bg-background [&_a]:xl:text-accent-a [&_img]:dark:invert"
       />
 
       <MainArticle className="space-y-12 px-4 md:space-y-20 md:px-10">
-        <section id="metrics" className="flex flex-col gap-6 md:flex-row">
+        <section
+          id="activity"
+          className="flex flex-col justify-between gap-6 md:flex-row"
+        >
           <div className="max-w-prose space-y-4">
             <h2>{t("page-enterprise-metrics-header")}</h2>
             <p>
@@ -250,11 +276,24 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
               economy.
             </p>
           </div>
-          <div className="TODO:METRICS flex max-w-[min(41rem,100%)] gap-6 md:ms-auto">
+
+          <ActivityStats
+            metrics={metrics}
+            locale={locale}
+            className={cn(
+              "w-fit max-w-xl shrink-0 gap-8 sm:max-md:grid-cols-2",
+              "[&_[data-label='big-number']]:border-none [&_[data-label='big-number']]:p-0",
+              "[&_[data-label='big-number']:nth-of-type(1)_[data-label='value']]:text-accent-a",
+              "[&_[data-label='big-number']:nth-of-type(2)_[data-label='value']]:text-accent-b",
+              "[&_[data-label='big-number']:nth-of-type(3)_[data-label='value']]:text-accent-c"
+            )}
+          />
+
+          {/* <div className="TODO:METRICS flex max-w-[min(41rem,100%)] gap-6 md:ms-auto">
             <Skeleton className="h-32 w-64 rounded-2xl" />
             <Skeleton className="h-32 w-64 rounded-2xl" />
             <Skeleton className="h-32 w-64 rounded-2xl" />
-          </div>
+          </div> */}
         </section>
 
         <section id="features">

app/[locale]/enterprise/utils.ts

@@ -0,0 +1,79 @@
+import { getTranslations } from "next-intl/server"
+
+import type {
+  AllEnterpriseActivityData,
+  Lang,
+  StatsBoxMetric,
+} from "@/lib/types"
+
+import { /* formatLargeNumber, */ formatLargeUSD } from "@/lib/utils/numbers"
+import { getLocaleForNumberFormat } from "@/lib/utils/translations"
+
+// Convert numerical value to formatted values
+export const parseActivity = async (
+  {
+    // dailyTxCount,
+    stablecoinMarketCap,
+    // totalCapitalSecured,
+  }: AllEnterpriseActivityData,
+  locale: Lang
+): Promise<StatsBoxMetric[]> => {
+  const t = await getTranslations("page-enterprise")
+
+  const localeForNumberFormat = getLocaleForNumberFormat(locale)
+
+  // const dailyTxCountFormatted =
+  //   "error" in dailyTxCount
+  //     ? { error: dailyTxCount.error }
+  //     : {
+  //         ...dailyTxCount,
+  //         value: formatLargeNumber(dailyTxCount.value, localeForNumberFormat),
+  //       }
+
+  const stablecoinMarketCapFormatted =
+    "error" in stablecoinMarketCap
+      ? { error: stablecoinMarketCap.error }
+      : {
+          ...stablecoinMarketCap,
+          value: formatLargeUSD(
+            stablecoinMarketCap.value,
+            localeForNumberFormat
+          ),
+        }
+
+  // const totalCapitalSecuredFormatted =
+  //   "error" in totalCapitalSecured
+  //     ? { error: totalCapitalSecured.error }
+  //     : {
+  //         ...totalCapitalSecured,
+  //         value: formatLargeUSD(
+  //           totalCapitalSecured.value,
+  //           localeForNumberFormat
+  //         ),
+  //       }
+
+  const metrics: StatsBoxMetric[] = [
+    // {
+    //   // TODO
+    //   label: t("page-enterprise-activity-daily-tx"),
+    //   apiProvider: "TBD",
+    //   apiUrl: "https://www.TBD.com",
+    //   state: dailyTxCountFormatted,
+    // },
+    {
+      label: t("page-enterprise-activity-stablecoin-mktcap"),
+      apiProvider: "CoinGecko",
+      apiUrl: "https://www.coingecko.com/en/categories/stablecoins",
+      state: stablecoinMarketCapFormatted,
+    },
+    // {
+    //   // TODO
+    //   label: t("page-enterprise-activity-total-secured"),
+    //   apiProvider: "TBD",
+    //   apiUrl: "https://www.TBD.com",
+    //   state: totalCapitalSecuredFormatted,
+    // },
+  ]
+
+  return metrics
+}

app/[locale]/page.tsx

@@ -5,13 +5,16 @@ import { getTranslations, setRequestLocale } from "next-intl/server"
 import { FaDiscord, FaGithub } from "react-icons/fa6"
 import { FaXTwitter } from "react-icons/fa6"
 
-import type { AllMetricData, CommunityBlog, ValuesPairing } from "@/lib/types"
+import type {
+  AllHomepageActivityData,
+  CommunityBlog,
+  ValuesPairing,
+} from "@/lib/types"
 import type { EventCardProps } from "@/lib/types"
 import type { Lang } from "@/lib/types"
 import { CodeExample } from "@/lib/interfaces"
 
 import ActivityStats from "@/components/ActivityStats"
-import { getActivity } from "@/components/ActivityStats/getActivity"
 import BannerNotification from "@/components/Banners/BannerNotification"
 import { ChevronNext } from "@/components/Chevron"
 import HomeHero from "@/components/Hero/HomeHero"
@@ -78,6 +81,7 @@ import {
 } from "@/lib/constants"
 
 import TenYearHomeBanner from "./10years/_components/TenYearHomeBanner"
+import { getActivity } from "./utils"
 
 import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
 import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
@@ -410,7 +414,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
     )
     .slice(0, 3) as EventCardProps[] // Show 3 events ending soonest
 
-  const metricResults: AllMetricData = {
+  const metricResults: AllHomepageActivityData = {
     ethPrice,
     totalEthStaked,
     totalValueLocked,

src/components/ActivityStats/getActivity.tsx renamed to app/[locale]/utils.ts

@@ -5,7 +5,7 @@
 
 import { getTranslations } from "next-intl/server"
 
-import type { AllMetricData, Lang, StatsBoxMetric } from "@/lib/types"
+import type { AllHomepageActivityData, Lang, StatsBoxMetric } from "@/lib/types"
 
 import { getLocaleForNumberFormat } from "@/lib/utils/translations"
 
@@ -44,7 +44,7 @@ export const getActivity = async (
     txCount,
     txCostsMedianUsd,
     ethPrice,
-  }: AllMetricData,
+  }: AllHomepageActivityData,
   locale: Lang
 ): Promise<StatsBoxMetric[]> => {
   const t = await getTranslations("page-index")

src/components/ActivityStats/index.tsx

@@ -1,20 +1,27 @@
 import type { StatsBoxMetric } from "@/lib/types"
 
+import { cn } from "@/lib/utils/cn"
+
 import BigNumber from "../BigNumber"
 
 type ActivityStatsProps = {
   metrics: StatsBoxMetric[]
   locale: string
+  className?: string
 }
-const ActivityStats = async ({ metrics, locale }: ActivityStatsProps) => {
+const ActivityStats = async ({
+  metrics,
+  locale,
+  className,
+}: ActivityStatsProps) => {
   const gridBorderClasses = [
     "border-b border-body-light xl:border-e xl:pe-8",
     "border-b border-body-light xl:ps-8",
     "border-b border-body-light xl:border-b-0 xl:border-e xl:pe-8",
     "xl:ps-8",
   ]
   return (
-    <div className="grid w-full grid-cols-1 xl:grid-cols-2">
+    <div className={cn("grid w-full grid-cols-1 xl:grid-cols-2", className)}>
       {metrics.map(({ label, apiProvider, apiUrl, state }, idx) => (
         <BigNumber
           locale={locale}

src/intl/en/page-enterprise.json

@@ -1,10 +1,12 @@
 {
   "page-enterprise-": "",
+  "page-enterprise-activity-daily-tx": "Daily transactions",
+  "page-enterprise-activity-stablecoin-mktcap": "Stablecoin market cap",
+  "page-enterprise-activity-total-secured": "Total capital secured",
   "page-enterprise-ecosystem-cta": "See use cases",
   "page-enterprise-ecosystem-description": "The question is not whether money will become programmable, but how quickly the transition will occur and which platforms will enable it.",
   "page-enterprise-ecosystem-header": "Embrace the innovation",
   "page-enterprise-features-1-content-1": "Ethereum is secured by thousands of independent validators worldwide, providing resilient, open-access infrastructure for digital assets and enterprise applications.",
-  "page-enterprise-features-1-content-2": "",
   "page-enterprise-features-1-header": "Proven Security and Decentralization",
   "page-enterprise-features-2-content-1": "Ethereum offers great flexibility and powerful scaling options known as Layer 2s.",
   "page-enterprise-features-2-content-2": "Its Proof-of-Stake consensus also cuts energy use by ~99.5%, meeting ESG goals without sacrificing performance.",

src/lib/api/fetchEthereumStablecoinsMcap.ts

@@ -0,0 +1,38 @@
+import { MetricReturnData } from "../types"
+
+export type LlamaStablecoinchainsResponseItem = {
+  gecko_id: string | null
+  totalCirculatingUSD: Record<string, number>
+  tokenSymbol: string | null
+  name: string
+}
+
+export async function fetchEthereumStablecoinsMcap(): Promise<MetricReturnData> {
+  const url = "https://stablecoins.llama.fi/stablecoinchains"
+
+  try {
+    const response = await fetch(url)
+    if (!response.ok) {
+      console.log(response.status, response.statusText)
+      throw new Error("Failed to fetch llama.fi stablecoin mcap data")
+    }
+    const data: LlamaStablecoinchainsResponseItem[] = await response.json()
+
+    const ethereumData = data.find(({ gecko_id }) => gecko_id === "ethereum")
+    if (!ethereumData) throw new Error("Ethereum stablecoin data not found")
+
+    const value = Object.values(ethereumData.totalCirculatingUSD).reduce(
+      (acc, value) => acc + value,
+      0
+    )
+
+    return { value }
+  } catch (error) {
+    // Will not currently break build; passes back error key
+    console.error(error)
+    return {
+      error:
+        "Something went wrong with requesting the Ethereum stablecoins data.",
+    }
+  }
+}

src/lib/types.ts

@@ -563,13 +563,26 @@ export type GrowThePieData = Record<GrowThePieMetricKey, MetricReturnData> & {
   activeAddresses: Record<string, number | undefined>
 }
 
-export type MetricName =
+export type HomepageActivityMetric =
   | "ethPrice" // Use with `totalEthStaked` to convert ETH to USD
   | "totalEthStaked"
   | "totalValueLocked"
   | GrowThePieMetricKey
 
-export type AllMetricData = Record<MetricName, MetricReturnData>
+export type AllHomepageActivityData = Record<
+  HomepageActivityMetric,
+  MetricReturnData
+>
+
+export type EnterpriseActivityMetric =
+  // | "dailyTxCount"
+  "stablecoinMarketCap"
+// | "totalCapitalSecured"
+
+export type AllEnterpriseActivityData = Record<
+  EnterpriseActivityMetric,
+  MetricReturnData
+>
 
 export type StatsBoxMetric = {
   label: string

src/lib/utils/numbers.ts

@@ -0,0 +1,27 @@
+export const formatLargeUSD = (value: number, locale: string): string => {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: "USD",
+    notation: "compact",
+    minimumSignificantDigits: 3,
+    maximumSignificantDigits: 4,
+  }).format(value)
+}
+
+export const formatSmallUSD = (value: number, locale: string): string => {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: "USD",
+    notation: "compact",
+    minimumSignificantDigits: 2,
+    maximumSignificantDigits: 2,
+  }).format(value)
+}
+
+export const formatLargeNumber = (value: number, locale: string): string => {
+  return new Intl.NumberFormat(locale, {
+    notation: "compact",
+    minimumSignificantDigits: 3,
+    maximumSignificantDigits: 4,
+  }).format(value)
+}