From 4bc78848b57d2c2cfe6053a34ec2bc3e85cacfcf Mon Sep 17 00:00:00 2001
From: Luis Herasme <luis.alberto.herasme.cuevas@gmail.com>
Date: Fri, 2 Aug 2024 10:34:29 -0400
Subject: [PATCH] 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               |  5 +++++
 .changeset/quiet-ladybugs-accept.md           |  5 +++++
 apps/web/src/components/ExplorerDetails.tsx   | 14 ++++++++++++++
 apps/web/src/icons/gas.svg                    |  6 ++++++
 packages/api/src/routers/block/getGasPrice.ts |  7 +++++++
 packages/api/src/routers/block/index.ts       |  2 ++
 6 files changed, 39 insertions(+)
 create mode 100644 .changeset/modern-boxes-nail.md
 create mode 100644 .changeset/quiet-ladybugs-accept.md
 create mode 100644 apps/web/src/icons/gas.svg
 create mode 100644 packages/api/src/routers/block/getGasPrice.ts

diff --git a/.changeset/modern-boxes-nail.md b/.changeset/modern-boxes-nail.md
new file mode 100644
index 000000000..a644cc35f
--- /dev/null
+++ b/.changeset/modern-boxes-nail.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/api": minor
+---
+
+Added procedure to get the latest block
diff --git a/.changeset/quiet-ladybugs-accept.md b/.changeset/quiet-ladybugs-accept.md
new file mode 100644
index 000000000..b96d2f833
--- /dev/null
+++ b/.changeset/quiet-ladybugs-accept.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added blob gas price to the ExplorerDetails component
diff --git a/apps/web/src/components/ExplorerDetails.tsx b/apps/web/src/components/ExplorerDetails.tsx
index dd0b205e4..71f671064 100644
--- a/apps/web/src/components/ExplorerDetails.tsx
+++ b/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) {
diff --git a/apps/web/src/icons/gas.svg b/apps/web/src/icons/gas.svg
new file mode 100644
index 000000000..50fc34094
--- /dev/null
+++ b/apps/web/src/icons/gas.svg
@@ -0,0 +1,6 @@
+<svg fill="currentColor" viewBox="0 0 512 512">
+  <path d="m494.313 99.375-64-32c-15.844-7.93-35.047-1.469-42.938 14.313-7.906 15.813-1.5 35.031 14.313 42.938L448 147.773V368c0 8.82-7.172 16-16 16s-16-7.18-16-16V240c0-52.938-43.063-96-96-96V64c0-35.289-28.703-64-64-64H96C60.703 0 32 28.711 32 64v354.742L9.375 441.375C3.375 447.375 0 455.516 0 464v16c0 17.672 14.328 32 32 32h288c17.672 0 32-14.328 32-32v-16a32 32 0 0 0-9.375-22.625L320 418.742V208c17.641 0 32 14.352 32 32v128c0 44.109 35.891 80 80 80s80-35.891 80-80V128a32 32 0 0 0-17.687-28.625M272 223.997h-85.164l-27.977-69.942c-3.281-8.203-12.672-12.172-20.797-8.914-8.203 3.289-12.203 12.594-8.922 20.805l23.221 58.052H80v-160c0-8.837 7.163-16 16-16h160c8.837 0 16 7.163 16 16z"/>
+  <circle cx="176" cy="95.997" r="16"/>
+  <circle cx="240" cy="111.997" r="16"/>
+  <circle cx="112" cy="111.997" r="16"/>
+</svg>
diff --git a/packages/api/src/routers/block/getGasPrice.ts b/packages/api/src/routers/block/getGasPrice.ts
new file mode 100644
index 000000000..c2ccaefb1
--- /dev/null
+++ b/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();
+});
diff --git a/packages/api/src/routers/block/index.ts b/packages/api/src/routers/block/index.ts
index 2397f8a02..7c32e2cd7 100644
--- a/packages/api/src/routers/block/index.ts
+++ b/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,
 });