feat: show blobs from DB in interface

ephema · Apr 21, 2024 · 1d90346 · 1d90346
1 parent 5a98a39
commit 1d90346
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 56 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -2,13 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import {
-  formatEther,
-  formatGwei,
-  isAddress,
-  parseEther,
-  parseGwei,
-} from "viem";
+import { formatEther, isAddress, parseEther } from "viem";
 import {
   useAccount,
   useConnect,
@@ -25,6 +19,7 @@ import Header from "@/components/Header";
 import NewBlobDialog, { newBlobFormSchema } from "@/components/NewBlobDialog";
 import UserInfo from "@/components/UserInfo";
 import { useUserBalance } from "@/data/useUserBalance";
+import { useLatestBlobs } from "@/data/useLatestBlobs";
 
 const blobs = [
   {
@@ -68,12 +63,18 @@ const Home = () => {
   const { chains, switchChainAsync } = useSwitchChain();
 
   const { data: userBalance, error } = useUserBalance({ address });
+  const { data: blobs, error: blobsError } = useLatestBlobs();
+  const { fusedBlobs = [], partialBlobs = [] } = blobs ?? {};
 
   useEffect(() => {
     if (error) {
       console.log(error);
     }
-  }, [error]);
+
+    if (blobsError) {
+      console.log(blobsError);
+    }
+  }, [error, blobsError]);
 
   const onSubmitAddFunds = async (
     values: z.infer<typeof addFundsFormSchema>,
@@ -129,7 +130,7 @@ const Home = () => {
           onConnectWalletClick={() => connect({ connector: connectors?.[0] })}
         />
 
-        <BlobData blobs={blobs} />
+        <BlobData fusedBlobs={fusedBlobs} partialBlobs={partialBlobs} />
       </div>
 
       <NewBlobDialog

diff --git a/frontend/src/components/BlobData.tsx b/frontend/src/components/BlobData.tsx
@@ -4,18 +4,19 @@ import { PartialBlob } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
 interface BlobDataProps {
-  blobs: PartialBlob[];
+  partialBlobs: PartialBlob[];
+  fusedBlobs: PartialBlob[];
 }
 
-const BlobData: React.FC<BlobDataProps> = ({ blobs }) => {
+const BlobData: React.FC<BlobDataProps> = ({ partialBlobs, fusedBlobs }) => {
   return (
     <div
       className={cn(
         "flex max-w-full flex-col gap-8 lg:mt-8 lg:flex-row lg:gap-16",
       )}
     >
-      <UnfusedBlobList blobs={blobs} />
-      <FusedBlobList blobs={blobs} />
+      <UnfusedBlobList blobs={partialBlobs} />
+      <FusedBlobList blobs={fusedBlobs} />
     </div>
   );
 };

diff --git a/frontend/src/components/FusedBlobList.tsx b/frontend/src/components/FusedBlobList.tsx
@@ -8,11 +8,6 @@ import { PartialBlob as PartialBlobType } from "@/lib/types";
 
 import { PartialBlob } from "./PartialBlob";
 
-const tx = [
-  "0x222d39Ec6bb596229938210a0D57E5C17f479495",
-  "0x222d39Ec6bb596229938210a0D57E5C17f479495",
-  "0x222d39Ec6bb596229938210a0D57E5C17f479495",
-];
 const FusedBlobList: React.FC<{ blobs: PartialBlobType[] }> = ({ blobs }) => (
   <div className="flex-grow md:w-[650px]">
     <h1 className="text-1xl mb-4 font-bold">Fused Blobs</h1>
@@ -21,26 +16,25 @@ const FusedBlobList: React.FC<{ blobs: PartialBlobType[] }> = ({ blobs }) => (
       collapsible
       className="max-w-[650px] overflow-hidden rounded-sm"
     >
-      {tx.map((address, index) => (
+      {blobs.map(({ id, txHash, partialBlobs }) => (
         <AccordionItem
-          value={`item-${index}`}
+          value={`item-${id}`}
           className="border-slate-600"
-          key={index}
+          key={id}
         >
           <AccordionTrigger className="bg-slate-700/50 px-4 backdrop-blur-md">
-            <div className="max-w-64 overflow-hidden overflow-ellipsis">
-              {" "}
-              {address}
+            <div className="max-w-80 overflow-hidden overflow-ellipsis">
+              {txHash ?? "Pending..."}
             </div>
           </AccordionTrigger>
           <AccordionContent className="flex justify-center bg-slate-700/20 p-4">
             <div className="flex flex-wrap justify-center gap-2 py-4 pl-4">
-              {blobs.slice(0, 3).map((blob, index) => (
+              {partialBlobs.map((blob, index) => (
                 <PartialBlob
                   key={index}
                   fromAddress={blob.fromAddress}
                   size={blob.size}
-                  bid={blob.bid}
+                  bidInGwei={blob.bidInGwei}
                 />
               ))}
             </div>

diff --git a/frontend/src/components/PartialBlob.tsx b/frontend/src/components/PartialBlob.tsx
@@ -5,7 +5,7 @@ import { Badge } from "./ui/badge";
 export const PartialBlob: React.FC<PartialBlobType> = ({
   fromAddress,
   size,
-  bid,
+  bidInGwei,
 }) => (
   <div className="mx-2 flex flex-col gap-2 rounded-sm border border-blue-950 bg-blue-950/60 px-12 py-4 text-blue-100 shadow-sm backdrop-blur-md transition-colors hover:bg-blue-900/40">
     <div className="max-w-48 overflow-hidden overflow-ellipsis text-foreground">
@@ -16,7 +16,7 @@ export const PartialBlob: React.FC<PartialBlobType> = ({
         {size} bytes
       </Badge>
       <Badge variant="outline" className="border-blue-900">
-        {bid} gwei
+        {bidInGwei.toString()} gwei
       </Badge>
     </div>
   </div>

diff --git a/frontend/src/components/UnfusedBlobList.tsx b/frontend/src/components/UnfusedBlobList.tsx
@@ -11,7 +11,7 @@ const UnfusedBlobList: React.FC<{ blobs: PartialBlobType[] }> = ({ blobs }) => (
           key={index}
           fromAddress={blob.fromAddress}
           size={blob.size}
-          bid={blob.bid}
+          bidInGwei={blob.bidInGwei}
         />
       ))}
     </div>

diff --git a/frontend/src/data/api.ts b/frontend/src/data/api.ts
@@ -27,26 +27,28 @@ export const getUser = ({ address }: { address: Hex }) => {
 const partialBlobSchema = z.object({
   id: z.number(),
   size: z.number(),
-  bidInGwei: z.number(),
-  costInGwei: z.number().nullable(),
+  bidInGwei: z.coerce.bigint(),
+  costInGwei: z.coerce.bigint().nullable(),
   fromAddress: z.string(),
   fusedBlobId: z.number().nullable(),
 });
 
 const fusedBlobSchema = z.object({
   id: z.number(),
-  txHash: z.string(),
-  totalCostInGwei: z.number().nullable(),
-  fusedBlobs: z.array(partialBlobSchema),
+  txHash: z.string().nullable(),
+  totalCostInGwei: z.coerce.bigint().nullable(),
+  partialBlobs: z.array(partialBlobSchema),
 });
 
 const latestBlobSchema = z.object({
-  unfusedBlobs: z.array(partialBlobSchema),
+  partialBlobs: z.array(partialBlobSchema),
   fusedBlobs: z.array(fusedBlobSchema),
 });
 
 export const getLatestBlobs = async () => {
-  return api.get("/blobs").then((res) => latestBlobSchema.parse(res.data.data));
+  return api.get("/blobs").then((res) => {
+    return latestBlobSchema.parse(res.data.data);
+  });
 };
 
 export const submitBlob = (data: PartialBlobSubmission) => {

diff --git a/frontend/src/data/useLatestBlobs.ts b/frontend/src/data/useLatestBlobs.ts
@@ -7,6 +7,6 @@ export const useLatestBlobs = () => {
     queryKey: ["blobs"],
     queryFn: () => getLatestBlobs(),
     placeholderData: keepPreviousData,
-    refetchInterval: 5000,
+    refetchInterval: 10000,
   });
 };
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
@@ -1,5 +1,5 @@
 export interface PartialBlob {
   fromAddress: string;
   size: number;
-  bid: number;
+  bidInGwei: number;
 }
diff --git a/src/api/blobs/blobRouter.ts b/src/api/blobs/blobRouter.ts
@@ -31,7 +31,9 @@ export const blobRouter: Router = (() => {
 
   router.get("/", async (_req: Request, res: Response) => {
     const [partialBlobs, fusedBlobs] = await Promise.all([
-      partialBlobRepository.findAllAsync({ withDataAndSignature: false }),
+      partialBlobRepository.findAllUnfusedAsync({
+        withDataAndSignature: false,
+      }),
       fusedBlobRepository.findAllAsync({ withDataAndSignature: false }),
     ]);
 

diff --git a/src/api/blobs/fusedBlob/fusedBlobRepository.ts b/src/api/blobs/fusedBlob/fusedBlobRepository.ts
@@ -2,6 +2,7 @@ import { type Hex } from "viem";
 
 import { type PartialBlob } from "@/api/blobs/partialBlob/partialBlobModel";
 import { prisma } from "@/api/prisma/client";
+import { getLengthWithExtraBytes } from "@/blob-fuser";
 
 import { convertPartialBlobInDBToPartialBlob } from "../partialBlob/convertPartialBlobInDBToPartialBlob";
 import { type FusedBlob } from "./fusedBlobModel";
@@ -17,15 +18,19 @@ export const fusedBlobRepository = {
     return fusedBlobsInDB.map((fusedBlob) => ({
       ...fusedBlob,
       partialBlobs: fusedBlob.partialBlobs.map((partialBlob) => {
-        if (!withDataAndSignature) {
-          return {
-            ...partialBlob,
-            data: null,
-            signature: null,
-          };
+        const convertedPartialBlob =
+          convertPartialBlobInDBToPartialBlob(partialBlob);
+
+        if (withDataAndSignature) {
+          return convertedPartialBlob;
         }
 
-        return convertPartialBlobInDBToPartialBlob(partialBlob);
+        return {
+          ...convertedPartialBlob,
+          data: null,
+          signature: null,
+          size: getLengthWithExtraBytes(convertedPartialBlob.data),
+        };
       }),
     }));
   },

diff --git a/src/api/blobs/partialBlob/partialBlobRepository.ts b/src/api/blobs/partialBlob/partialBlobRepository.ts
@@ -1,6 +1,7 @@
 import { Hex } from "viem";
 
 import { prisma } from "@/api/prisma/client";
+import { getLengthWithExtraBytes } from "@/blob-fuser";
 
 import {
   convertHexToBuffer,
@@ -38,10 +39,20 @@ export const partialBlobRepository = {
 
     return convertPartialBlobInDBToPartialBlob(partialBlobInDB);
   },
-  findAllAsync: async ({ withDataAndSignature = true } = {}): Promise<
+  findAllAsync: async (): Promise<
     PartialBlobWithNullableDataAndSignature[]
   > => {
     const partialBlobsInDB = await prisma.partialBlob.findMany();
+    return partialBlobsInDB.map(convertPartialBlobInDBToPartialBlob);
+  },
+
+  findAllUnfusedAsync: async ({ withDataAndSignature = true } = {}): Promise<
+    PartialBlob[]
+  > => {
+    const partialBlobsInDB = await prisma.partialBlob.findMany({
+      where: { fusedBlobId: null },
+    });
+
     const partialBlobs = partialBlobsInDB.map(
       convertPartialBlobInDBToPartialBlob,
     );
@@ -54,16 +65,10 @@ export const partialBlobRepository = {
       ...partialBlob,
       data: null,
       signature: null,
+      size: getLengthWithExtraBytes(partialBlob.data),
     }));
   },
 
-  findAllUnfusedAsync: async (): Promise<PartialBlob[]> => {
-    const partialBlobsInDB = await prisma.partialBlob.findMany({
-      where: { fusedBlobId: null },
-    });
-    return partialBlobsInDB.map(convertPartialBlobInDBToPartialBlob);
-  },
-
   findByIdAsync: async (id: number): Promise<PartialBlob | null> => {
     const partialBlobInDB = await prisma.partialBlob.findUnique({
       where: { id },

diff --git a/src/blob-fuser/index.ts b/src/blob-fuser/index.ts
@@ -60,9 +60,20 @@ export const unfuseFusedBlob = (fusedBlob: Hex) => {
   return partialBlobs;
 };
 
-export const getDataLengthInHex = (data: Hex) => {
+export const getLengthWithExtraBytes = (data: Hex) => {
+  return (
+    SIGNATURE_LENGTH_IN_BYTES +
+    BLOB_DATA_SIZE_LENGTH_IN_BYTES +
+    getDataLength(data)
+  );
+};
+
+export const getDataLength = (data: Hex) => {
   const bytes = toBytes(data);
-  const dataLength = bytes.length;
+  return bytes.length;
+};
+export const getDataLengthInHex = (data: Hex) => {
+  const dataLength = getDataLength(data);
   return pad(toHex(dataLength), {
     size: BLOB_DATA_SIZE_LENGTH_IN_BYTES,
   });