handle blobs with no data

mocks/blobs/blobs.ts

@@ -20,7 +20,17 @@ export const base2: Blob = {
   ],
 };
 
+export const withoutData: Blob = {
+  blob_data: null,
+  hash: '0x0197fdb17195c176b23160f335daabd4b6a231aaaadd73ec567877c66a3affd3',
+  kzg_commitment: null,
+  kzg_proof: null,
+  transaction_hashes: [
+    { block_consensus: true, transaction_hash: '0x22d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193' },
+  ],
+};
+
 export const txBlobs: TxBlobs = {
-  items: [ base1, base2 ],
+  items: [ base1, base2, withoutData ],
   next_page_params: null,
 };

types/api/blobs.ts

 export interface TxBlob {
   hash: string;
-  blob_data: string;
-  kzg_commitment: string;
-  kzg_proof: string;
+  blob_data: string | null;
+  kzg_commitment: string | null;
+  kzg_proof: string | null;
 }
 
 export type TxBlobs = {

ui/blob/BlobInfo.tsx

-import { Grid, Skeleton } from '@chakra-ui/react';
+import { Alert, Grid, GridItem, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Blob } from 'types/api/blobs';
@@ -17,14 +17,20 @@ interface Props {
 }
 
 const BlobInfo = ({ data, isLoading }: Props) => {
-  const size = data.blob_data.replace('0x', '').length / 2;
-
   return (
     <Grid
       columnGap={ 8 }
       rowGap={ 3 }
       templateColumns={{ base: 'minmax(0, 1fr)', lg: '216px minmax(728px, auto)' }}
     >
+      { !data.blob_data && (
+        <GridItem colSpan={{ base: undefined, lg: 2 }} mb={ 3 }>
+          <Skeleton isLoaded={ !isLoading }>
+            <Alert status="warning">This blob is not yet indexed</Alert>
+          </Skeleton>
+        </GridItem>
+      ) }
+      { data.kzg_proof && (
         <DetailsInfoItem
           title="Proof"
           hint="Zero knowledge proof. Allows for quick verification of commitment"
@@ -35,6 +41,8 @@ const BlobInfo = ({ data, isLoading }: Props) => {
             <CopyToClipboard text={ data.kzg_proof } isLoading={ isLoading }/>
           </Skeleton>
         </DetailsInfoItem>
+      ) }
+      { data.kzg_commitment && (
         <DetailsInfoItem
           title="Commitment"
           hint="Commitment to the data in the blob"
@@ -45,17 +53,20 @@ const BlobInfo = ({ data, isLoading }: Props) => {
             <CopyToClipboard text={ data.kzg_commitment } isLoading={ isLoading }/>
           </Skeleton>
         </DetailsInfoItem>
+      ) }
+      { data.blob_data && (
         <DetailsInfoItem
           title="Size, bytes"
           hint="Blob size in bytes"
           isLoading={ isLoading }
         >
           <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="pre-wrap" wordBreak="break-all">
-          { size.toLocaleString() }
+            { (data.blob_data.replace('0x', '').length / 2).toLocaleString() }
           </Skeleton>
         </DetailsInfoItem>
+      ) }
 
-      <DetailsInfoItemDivider/>
+      { data.blob_data && <DetailsInfoItemDivider/> }
 
       { data.transaction_hashes[0] && (
         <DetailsInfoItem
@@ -68,9 +79,12 @@ const BlobInfo = ({ data, isLoading }: Props) => {
       ) }
       <DetailsSponsoredItem isLoading={ isLoading }/>
 
+      { data.blob_data && (
+        <>
           <DetailsInfoItemDivider/>
-
           <BlobData data={ data.blob_data } hash={ data.hash } isLoading={ isLoading }/>
+        </>
+      ) }
     </Grid>
   );
 };

ui/pages/Blob.pw.tsx

@@ -47,3 +47,22 @@ test('base view +@mobile +@dark-mode', async({ mount, page }) => {
     maskColor: configs.maskColor,
   });
 });
+
+test('without data', async({ mount, page }) => {
+  await page.route(BLOB_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(blobsMock.withoutData),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Blob/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(configs.adsBannerSelector) ],
+    maskColor: configs.maskColor,
+  });
+});

ui/tx/blobs/TxBlobListItem.tsx

@@ -13,7 +13,7 @@ interface Props {
 }
 
 const TxBlobListItem = ({ data, isLoading }: Props) => {
-  const size = data.blob_data.replace('0x', '').length / 2;
+  const size = data.blob_data ? data.blob_data.replace('0x', '').length / 2 : '-';
 
   return (
     <ListItemMobileGrid.Container>
@@ -24,7 +24,7 @@ const TxBlobListItem = ({ data, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Data type</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <BlobDataType isLoading={ isLoading } data={ data.blob_data }/>
+        { data.blob_data ? <BlobDataType isLoading={ isLoading } data={ data.blob_data }/> : '-' }
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Size, bytes</ListItemMobileGrid.Label>

ui/tx/blobs/TxBlobsTableItem.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const TxBlobsTableItem = ({ data, isLoading }: Props) => {
-  const size = data.blob_data.replace('0x', '').length / 2;
+  const size = data.blob_data ? data.blob_data.replace('0x', '').length / 2 : '-';
 
   return (
     <Tr alignItems="top">
@@ -20,7 +20,7 @@ const TxBlobsTableItem = ({ data, isLoading }: Props) => {
         <BlobEntity hash={ data.hash } noIcon isLoading={ isLoading }/>
       </Td>
       <Td verticalAlign="middle">
-        <BlobDataType isLoading={ isLoading } data={ data.blob_data }/>
+        { data.blob_data ? <BlobDataType isLoading={ isLoading } data={ data.blob_data }/> : '-' }
       </Td>
       <Td verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } display="inline-block">