Merge pull request #15483 from ethereum/master

Master

Author: corwintines

app/[locale]/layer-2/_components/layer-2.tsx

@@ -124,10 +124,12 @@ const Layer2Hub = ({
               <div className="max-w-[224px]">
                 <p className="text-5xl">
                   $
-                  {growThePieData.dailyTxCosts["ethereum"].toLocaleString(
-                    locale as Lang,
-                    { minimumFractionDigits: 2, maximumFractionDigits: 2 }
-                  )}
+                  {(
+                    growThePieData.dailyTxCosts["ethereum"] || 0
+                  ).toLocaleString(locale as Lang, {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                  })}
                 </p>
                 <p className="text-body-medium">
                   {t("page-layer-2-blockchain-transaction-cost")}

app/[locale]/layer-2/page.tsx

@@ -20,6 +20,7 @@ import { BASE_TIME_UNIT } from "@/lib/constants"
 
 import Layer2Page from "./_components/layer-2"
 
+import { routing } from "@/i18n/routing"
 import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
 import { fetchL2beat } from "@/lib/api/fetchL2beat"
 
@@ -79,6 +80,14 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   )
 }
 
+export async function generateStaticParams() {
+  return routing.locales.map((locale) => ({
+    locale,
+  }))
+}
+
+export const dynamicParams = false
+
 export async function generateMetadata({
   params,
 }: {

src/components/Layer2NetworksTable/NetworksSubComponent.tsx

@@ -1,5 +1,7 @@
 import { MdInfoOutline } from "react-icons/md"
 
+import { ExtendedRollup } from "@/lib/types"
+
 import NetworkUsageChart from "@/components/Layer2NetworksTable/NetworkUsageChart"
 import Tooltip from "@/components/Tooltip"
 
@@ -21,7 +23,11 @@ const formatNumber = (num: number): string => {
   return num.toString()
 }
 
-const NetworkSubComponent = ({ network }) => {
+type NetworkSubComponentProps = {
+  network: ExtendedRollup
+}
+
+const NetworkSubComponent = ({ network }: NetworkSubComponentProps) => {
   const { t } = useTranslation("page-layer-2-networks")
 
   return (
@@ -60,6 +66,7 @@ const NetworkSubComponent = ({ network }) => {
                 </p>
                 <p>
                   {(() => {
+                    if (!network.launchDate) return "-"
                     const launch = new Date(network.launchDate)
                     const today = new Date()
                     const yearDiff = today.getFullYear() - launch.getFullYear()
@@ -141,7 +148,11 @@ const NetworkSubComponent = ({ network }) => {
                   </Tooltip>
                 </p>
               </div>
-              <p>{formatNumber(network.activeAddresses)}</p>
+              <p>
+                {network.activeAddresses
+                  ? formatNumber(network.activeAddresses)
+                  : "-"}
+              </p>
             </div>
             <div className="flex-1">
               <div>

src/components/Layer2NetworksTable/hooks/useNetworkColumns.tsx

@@ -49,6 +49,7 @@ export const useNetworkColumns: ColumnDef<ExtendedRollup>[] = [
     },
     cell: ({ table, row }) => {
       const meta = table.options.meta as TableMeta
+
       return (
         <TableCell
           className={cn(
@@ -78,11 +79,20 @@ export const useNetworkColumns: ColumnDef<ExtendedRollup>[] = [
                   <Translation id="page-layer-2-networks:page-layer-2-networks-avg-transaction-fee" />
                 </p>
                 <p>
-                  $
-                  {row.original.txCosts.toLocaleString(meta.locale as Lang, {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 3,
-                  })}
+                  {row.original.txCosts ? (
+                    <>
+                      $
+                      {(row.original.txCosts || 0).toLocaleString(
+                        meta.locale as Lang,
+                        {
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 3,
+                        }
+                      )}
+                    </>
+                  ) : (
+                    <p>-</p>
+                  )}
                 </p>
               </div>
               <div>
@@ -160,11 +170,17 @@ export const useNetworkColumns: ColumnDef<ExtendedRollup>[] = [
             row.original.canExpand === false && "border-b-4"
           )}
         >
-          $
-          {row.original.txCosts.toLocaleString(meta.locale as Lang, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 3,
-          })}
+          {row.original.txCosts ? (
+            <p>
+              $
+              {row.original.txCosts.toLocaleString(meta.locale as Lang, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 3,
+              })}
+            </p>
+          ) : (
+            <p>-</p>
+          )}
         </TableCell>
       )
     },

src/lib/api/fetchGrowThePie.ts

@@ -11,33 +11,47 @@ type DataItem = {
 
 const TXCOSTS_MEDIAN_USD = "txcosts_median_usd"
 const TXCOUNT = "txcount"
+const ACTIVE_ADDRESSES = "aa_last7d"
 
 export const fetchGrowThePie = async (): Promise<GrowThePieData> => {
   const url = "https://api.growthepie.xyz/v1/fundamentals.json"
 
-  const response = await fetch(url)
+  const response = await fetch(url, { cache: "no-store" })
   if (!response.ok) {
     console.log(response.status, response.statusText)
     throw new Error("Failed to fetch growthepie data")
   }
   const data: DataItem[] = await response.json()
 
-  const mostRecentDate = data.reduce((latest, item) => {
+  // Get the date 7 days ago
+  const sevenDaysAgo = new Date()
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
+
+  // Filter data to only include the last 7 days and the metrics we need
+  const filteredData = data.filter((item) => {
+    const itemDate = new Date(item.date)
+    return (
+      itemDate >= sevenDaysAgo &&
+      [TXCOSTS_MEDIAN_USD, TXCOUNT, ACTIVE_ADDRESSES].includes(item.metric_key)
+    )
+  })
+
+  const mostRecentDate = filteredData.reduce((latest, item) => {
     const itemDate = new Date(item.date)
     return itemDate > new Date(latest) ? item.date : latest
-  }, data[0].date)
+  }, filteredData[0].date)
 
-  const activeAddresses = data
+  const activeAddresses = filteredData
     .filter((item) => item.date === mostRecentDate)
-    .filter((item) => item.metric_key === "aa_last7d")
+    .filter((item) => item.metric_key === ACTIVE_ADDRESSES)
     .reduce((acc, item) => {
       return {
         ...acc,
         [item.origin_key]: item.value,
       }
     }, {})
 
-  const mostRecentData = data.filter(
+  const mostRecentData = filteredData.filter(
     (item) =>
       item.date === mostRecentDate &&
       [TXCOSTS_MEDIAN_USD, TXCOUNT].includes(item.metric_key)

src/lib/types.ts

@@ -559,8 +559,8 @@ export type StatsBoxState = ValueOrError<string>
 export type GrowThePieMetricKey = "txCount" | "txCostsMedianUsd"
 
 export type GrowThePieData = Record<GrowThePieMetricKey, MetricReturnData> & {
-  dailyTxCosts: Record<string, number>
-  activeAddresses: Record<string, number>
+  dailyTxCosts: Record<string, number | undefined>
+  activeAddresses: Record<string, number | undefined>
 }
 
 export type MetricName =
@@ -642,9 +642,19 @@ export type NonEVMChainName = "Starknet"
 
 export type ExtendedRollup = Rollup & {
   networkMaturity: MaturityLevel
-  txCosts: number
+  txCosts: number | undefined
   tvl: number
   walletsSupported: string[]
+  activeAddresses: number | undefined
+  launchDate: string | null
+  walletsSupportedCount: number
+  blockspaceData: {
+    nft: number
+    defi: number
+    social: number
+    token_transfers: number
+    unlabeled: number
+  } | null
 }
 
 // Wallets