feat: add txCount metric

Author: wackerow

app/[locale]/enterprise/page.tsx

@@ -52,6 +52,7 @@ import type { Case, EcosystemPlayer, Feature } from "./types"
 import { parseActivity } from "./utils"
 
 import { fetchEthereumStablecoinsMcap } from "@/lib/api/fetchEthereumStablecoinsMcap"
+import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
 import EthGlyph from "@/public/images/assets/svgs/eth-diamond-rainbow.svg"
 import heroImage from "@/public/images/heroes/enterprise-hero-white.png"
 
@@ -67,7 +68,10 @@ const CasesSwiper = dynamic(() => import("./_components/CasesSwiper"), {
 
 // TODO: Switch back to this for cache and mock-data dev fallback
 // const loadData = dataLoader(
-//   [["ethereumStablecoinsResponse", fetchEthereumStablecoinsMcap]],
+//   [
+//     ["ethereumStablecoinsResponse", fetchEthereumStablecoinsMcap],
+//     ["growThePieData", fetchGrowThePie],
+//   ],
 //   BASE_TIME_UNIT * 1000
 // )
 
@@ -76,13 +80,14 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
 
   const t = await getTranslations({ locale, namespace: "page-enterprise" })
 
-  // const [ethereumStablecoinsResponse] = await loadData()
-  const ethereumStablecoinsResponse = await fetchEthereumStablecoinsMcap()
+  // const [{ txCount }, ethereumStablecoinsResponse] = await loadData()
+  const { txCount } = await fetchGrowThePie()
+  const stablecoinMarketCap = await fetchEthereumStablecoinsMcap()
 
   const metrics = await parseActivity(
     {
-      // dailyTxCount,
-      stablecoinMarketCap: ethereumStablecoinsResponse,
+      txCount,
+      stablecoinMarketCap,
       // totalCapitalSecured,
     },
     locale
@@ -161,9 +166,13 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
       ),
     },
     {
-      name: "TODO: New Item",
-      content:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      name: "Visa",
+      content: (
+        <>
+          Settled over <strong>$225 million</strong> in stablecoin transactions
+          using USDC across Ethereum and other blockchains.
+        </>
+      ),
     },
   ]
 
@@ -281,19 +290,14 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
             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",
               "[&_[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> */}
         </section>
 
         <section id="features">

app/[locale]/enterprise/utils.ts

@@ -6,13 +6,13 @@ import type {
   StatsBoxMetric,
 } from "@/lib/types"
 
-import { /* formatLargeNumber, */ formatLargeUSD } from "@/lib/utils/numbers"
+import { formatLargeNumber, formatLargeUSD } from "@/lib/utils/numbers"
 import { getLocaleForNumberFormat } from "@/lib/utils/translations"
 
 // Convert numerical value to formatted values
 export const parseActivity = async (
   {
-    // dailyTxCount,
+    txCount,
     stablecoinMarketCap,
     // totalCapitalSecured,
   }: AllEnterpriseActivityData,
@@ -22,13 +22,13 @@ export const parseActivity = async (
 
   const localeForNumberFormat = getLocaleForNumberFormat(locale)
 
-  // const dailyTxCountFormatted =
-  //   "error" in dailyTxCount
-  //     ? { error: dailyTxCount.error }
-  //     : {
-  //         ...dailyTxCount,
-  //         value: formatLargeNumber(dailyTxCount.value, localeForNumberFormat),
-  //       }
+  const txCountFormatted =
+    "error" in txCount
+      ? { error: txCount.error }
+      : {
+          ...txCount,
+          value: formatLargeNumber(txCount.value, localeForNumberFormat),
+        }
 
   const stablecoinMarketCapFormatted =
     "error" in stablecoinMarketCap
@@ -53,13 +53,12 @@ export const parseActivity = async (
   //       }
 
   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-tx-count"),
+      apiProvider: "growthepie",
+      apiUrl: "https://www.growthepie.xyz/fundamentals/transaction-count",
+      state: txCountFormatted,
+    },
     {
       label: t("page-enterprise-activity-stablecoin-mktcap"),
       apiProvider: "CoinGecko",

src/intl/en/page-enterprise.json

@@ -1,6 +1,6 @@
 {
   "page-enterprise-": "",
-  "page-enterprise-activity-daily-tx": "Daily transactions",
+  "page-enterprise-activity-tx-count": "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",

src/lib/types.ts

@@ -574,9 +574,7 @@ export type AllHomepageActivityData = Record<
   MetricReturnData
 >
 
-export type EnterpriseActivityMetric =
-  // | "dailyTxCount"
-  "stablecoinMarketCap"
+export type EnterpriseActivityMetric = "txCount" | "stablecoinMarketCap"
 // | "totalCapitalSecured"
 
 export type AllEnterpriseActivityData = Record<