feat: add LatestGasPrice component (#470)

* feat: add LatestGasPrice component

* feat: Add Blob gas price to ExplorerDetails component

* feat: Update ExplorerDetails component to display Blob gas price with EtherUnitDisplay

* chore: update changeset

.changeset/modern-boxes-nail.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/api": minor
+---
+
+Added procedure to get the latest block

.changeset/quiet-ladybugs-accept.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added blob gas price to the ExplorerDetails component

apps/web/src/components/ExplorerDetails.tsx

@@ -6,7 +6,9 @@ import Skeleton from "react-loading-skeleton";
 
 import { api } from "~/api-client";
 import { env } from "~/env.mjs";
+import Gas from "~/icons/gas.svg";
 import { capitalize, formatNumber, formatTtl } from "~/utils";
+import { EtherUnitDisplay } from "./Displays/EtherUnitDisplay";
 
 type ExplorerDetailsItemProps = {
   name: string;
@@ -35,6 +37,8 @@ function ExplorerDetailsItem({
 export function ExplorerDetails() {
   const { data: syncStateData } = api.syncState.getState.useQuery();
   const { data: blobStoragesState } = api.blobStoragesState.getState.useQuery();
+  const { data: latestBlock } = api.block.getLatestBlock.useQuery();
+
   const explorerDetailsItems: ExplorerDetailsItemProps[] = [
     { name: "Network", value: capitalize(env.NEXT_PUBLIC_NETWORK_NAME) },
     {
@@ -43,6 +47,16 @@ export function ExplorerDetails() {
         ? formatNumber(syncStateData.lastUpperSyncedSlot ?? 0)
         : undefined,
     },
+    {
+      name: "Blob gas price",
+      icon: <Gas className="h-4 w-4" />,
+      value: latestBlock && (
+        <EtherUnitDisplay
+          amount={Number(latestBlock.blobGasPrice.toString())}
+          toUnit="Gwei"
+        />
+      ),
+    },
   ];
 
   if (blobStoragesState && blobStoragesState.swarmDataTTL) {

packages/api/src/routers/block/getGasPrice.ts

@@ -0,0 +1,7 @@
+import { prisma } from "@blobscan/db";
+
+import { publicProcedure } from "../../procedures";
+
+export const getLatestBlock = publicProcedure.query(async () => {
+  return await prisma.block.findLatest();
+});

packages/api/src/routers/block/index.ts

@@ -1,8 +1,10 @@
 import { t } from "../../trpc-client";
 import { getAll } from "./getAll";
 import { getByBlockId } from "./getByBlockId";
+import { getLatestBlock } from "./getGasPrice";
 
 export const blockRouter = t.router({
   getAll,
   getByBlockId,
+  getLatestBlock,
 });