feat(pages/resources): add pectra countdown and blobscan api

app/[locale]/resources/_components/resources.tsx

@@ -26,13 +26,24 @@ import { useTranslation } from "@/hooks/useTranslation"
 import heroImg from "@/public/images/heroes/guides-hub-hero.jpg"
 interface ResourcesPageProps {
   txCostsMedianUsd: MetricReturnData
+  totalBlobs: string
+  avgBlobFee: number
 }
 
 const EVENT_CATEGORY = "dashboard"
 
-const ResourcesPage = ({ txCostsMedianUsd }: ResourcesPageProps) => {
+const ResourcesPage = ({
+  txCostsMedianUsd,
+  totalBlobs,
+  avgBlobFee,
+}: ResourcesPageProps) => {
   const { t } = useTranslation("page-resources")
-  const resourceSections = useResources({ txCostsMedianUsd })
+
+  const resourceSections = useResources({
+    txCostsMedianUsd,
+    totalBlobs,
+    avgBlobFee,
+  })
   const activeSection = useActiveHash(
     resourceSections.map(({ key }) => key),
     "0% 0% -70% 0%"
@@ -114,22 +125,22 @@ const ResourcesPage = ({ txCostsMedianUsd }: ResourcesPageProps) => {
                   {boxes.map(({ title, metric, items, className }) => (
                     <div
                       className={cn(
-                        "overflow-hidden rounded-2xl border shadow-lg",
+                        "grid grid-rows-[min-content] overflow-hidden rounded-2xl border shadow-lg",
                         className
                       )}
                       key={title}
                     >
                       <div className="border-b bg-[#ffffff] px-6 py-4 font-bold dark:bg-[#171717]">
                         {title}
                       </div>
-                      <div className="h-full bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
+                      <Stack className="gap-2 bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
                         {metric && metric}
                         <ResourcesContainer>
                           {items.map((item) => (
                             <ResourceItem item={item} key={item.title} />
                           ))}
                         </ResourcesContainer>
-                      </div>
+                      </Stack>
                     </div>
                   ))}
                 </div>

app/[locale]/resources/page.tsx

@@ -17,13 +17,17 @@ import { BASE_TIME_UNIT } from "@/lib/constants"
 
 import ResourcesPage from "./_components/resources"
 
+import { fetchBlobscanStats } from "@/lib/api/fetchBlobscanStats"
 import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
 
 // In seconds
 const REVALIDATE_TIME = BASE_TIME_UNIT * 1
 
 const loadData = dataLoader(
-  [["growThePieData", fetchGrowThePie]],
+  [
+    ["growThePieData", fetchGrowThePie],
+    ["blobscanOverallStats", fetchBlobscanStats],
+  ],
   REVALIDATE_TIME * 1000
 )
 
@@ -38,12 +42,24 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const messages = pick(allMessages, requiredNamespaces)
 
   // Load data
-  const [growThePieData] = await loadData()
+  const [growThePieData, blobscanOverallStats] = await loadData()
+
   const { txCostsMedianUsd } = growThePieData
 
+  const { totalBlobs, avgBlobFee } = blobscanOverallStats
+
+  const formattedTotalBlobs = new Intl.NumberFormat(undefined, {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(totalBlobs)
+
   return (
     <I18nProvider locale={locale} messages={messages}>
-      <ResourcesPage txCostsMedianUsd={txCostsMedianUsd} />
+      <ResourcesPage
+        txCostsMedianUsd={txCostsMedianUsd}
+        totalBlobs={formattedTotalBlobs}
+        avgBlobFee={avgBlobFee}
+      />
     </I18nProvider>
   )
 }

src/components/Resources/useResources.tsx

@@ -16,6 +16,7 @@ import RadialChart from "../RadialChart"
 
 import type { DashboardBox, DashboardSection } from "./types"
 
+import { useEthPrice } from "@/hooks/useEthPrice"
 import { useTranslation } from "@/hooks/useTranslation"
 import IconBeaconchain from "@/public/images/resources/beaconcha-in.png"
 import IconBlobsGuru from "@/public/images/resources/blobsguru.png"
@@ -58,11 +59,22 @@ const formatSmallUSD = (value: number, locale: string): string =>
     maximumSignificantDigits: 2,
   }).format(value)
 
-export const useResources = ({ txCostsMedianUsd }): DashboardSection[] => {
+export const useResources = ({
+  txCostsMedianUsd,
+  totalBlobs,
+  avgBlobFee,
+}): DashboardSection[] => {
   const { t } = useTranslation("page-resources")
   const locale = useLocale()
   const localeForNumberFormat = getLocaleForNumberFormat(locale! as Lang)
 
+  const ethPrice = useEthPrice()
+  const avgBlobFeeUsd = formatSmallUSD(
+    // Converting value from gwei to USD
+    avgBlobFee * 1e-9 * ethPrice,
+    localeForNumberFormat
+  ).replace(/[A-Za-z]$/, "")
+
   const medianTxCost =
     "error" in txCostsMedianUsd
       ? { error: txCostsMedianUsd.error }
@@ -343,7 +355,14 @@ export const useResources = ({ txCostsMedianUsd }): DashboardSection[] => {
   const scalingBoxes: DashboardBox[] = [
     {
       title: t("page-resources-roadmap-title"),
-      // TODO: Add metric
+      metric: (
+        <div className="grid place-items-center py-5">
+          <div className="text-sm">Next upgrade</div>
+          <div className="text-5xl font-bold">Pectra</div>
+          {/* TODO: Convert date to a countdown */}
+          <div className="text-xl font-bold text-body-medium">07 May 2025</div>
+        </div>
+      ),
       items: [
         {
           title: "Ethereum Roadmap",
@@ -355,7 +374,22 @@ export const useResources = ({ txCostsMedianUsd }): DashboardSection[] => {
     },
     {
       title: t("page-resources-blobs-title"),
-      // TODO: Add metric
+      metric: (
+        <div className="flex [&>*]:grid [&>*]:flex-1 [&>*]:place-items-center">
+          <div>
+            <div className="text-[42px] font-bold leading-2xs">
+              {totalBlobs}
+            </div>
+            <div className="text-sm text-body-medium">Total blobs</div>
+          </div>
+          <div>
+            <div className="text-[42px] font-bold leading-2xs">
+              {avgBlobFeeUsd}
+            </div>
+            <div className="text-sm text-body-medium">Average Blob Fee</div>
+          </div>
+        </div>
+      ),
       items: [
         {
           title: "Blob Scan",

src/lib/api/fetchBlobscanStats.ts

@@ -0,0 +1,57 @@
+type BlobscanOverallStats = {
+  avgBlobAsCalldataFee: number
+  avgBlobFee: number
+  avgBlobGasPrice: number
+  avgMaxBlobGasFee: number
+  totalBlobGasUsed: string
+  totalBlobAsCalldataGasUsed: string
+  totalBlobFee: string
+  totalBlobAsCalldataFee: string
+  totalBlobs: number
+  totalBlobSize: string
+  totalBlocks: number
+  totalTransactions: number
+  totalUniqueBlobs: number
+  totalUniqueReceivers: number
+  totalUniqueSenders: number
+  updatedAt: string
+}
+
+type BlobscanOverallStatsErr = {
+  message: string
+  code: string
+  issues: [message: string]
+}
+
+/**
+ * Fetch the overall stats from Blobscan
+ *
+ * @see https://api.blobscan.com/#/stats/stats-getOverallStats
+ *
+ */
+export const fetchBlobscanStats = async () => {
+  const data = await fetch("https://api.blobscan.com/stats/overall").then(
+    (res) => responseHandler(res)
+  )
+
+  return data
+}
+
+type BlobscanResponse =
+  | (Omit<Response, "json"> & {
+      json: () => BlobscanOverallStats | PromiseLike<BlobscanOverallStats>
+    })
+  | (Omit<Response, "json"> & {
+      json: () => BlobscanOverallStatsErr | PromiseLike<BlobscanOverallStatsErr>
+    })
+
+const responseHandler = async (response: Response) => {
+  const res = await (response as BlobscanResponse).json()
+
+  if ("message" in res) {
+    throw Error(`Code ${res.code}: Failed to fetch Blobscan Overall Stats`, {
+      cause: res.message,
+    })
+  }
+  return res
+}