Merge pull request #15448 from ethereum/hotfix-layer-2

hotfix layer 2

Author: pettinarip

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")}

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/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