Arbitrum: handle case with partial data in latest deposits on main page

lib/api/resources.ts

@@ -42,12 +42,12 @@ import type { AddressesResponse, AddressesMetadataSearchResult, AddressesMetadat
 import type { AddressMetadataInfo, PublicTagTypesResponse } from 'types/api/addressMetadata';
 import type {
   ArbitrumL2MessagesResponse,
-  ArbitrumL2MessagesItem,
   ArbitrumL2TxnBatch,
   ArbitrumL2TxnBatchesResponse,
   ArbitrumL2BatchTxs,
   ArbitrumL2BatchBlocks,
   ArbitrumL2TxnBatchesItem,
+  ArbitrumLatestDepositsResponse,
 } from 'types/api/arbitrumL2';
 import type { TxBlobs, Blob } from 'types/api/blobs';
 import type {
@@ -1028,7 +1028,7 @@ Q extends 'homepage_blocks' ? Array<Block> :
 Q extends 'homepage_txs' ? Array<Transaction> :
 Q extends 'homepage_txs_watchlist' ? Array<Transaction> :
 Q extends 'homepage_optimistic_deposits' ? Array<OptimisticL2DepositsItem> :
-Q extends 'homepage_arbitrum_deposits' ? { items: Array<ArbitrumL2MessagesItem> } :
+Q extends 'homepage_arbitrum_deposits' ? ArbitrumLatestDepositsResponse :
 Q extends 'homepage_zkevm_l2_batches' ? { items: Array<ZkEvmL2TxnBatchesItem> } :
 Q extends 'homepage_arbitrum_l2_batches' ? { items: Array<ArbitrumL2TxnBatchesItem>} :
 Q extends 'homepage_indexing_status' ? IndexingStatus :

mocks/arbitrum/deposits.ts

@@ -1,4 +1,4 @@
-import type { ArbitrumL2MessagesResponse } from 'types/api/arbitrumL2';
+import type { ArbitrumL2MessagesResponse, ArbitrumLatestDepositsResponse } from 'types/api/arbitrumL2';
 
 export const baseResponse: ArbitrumL2MessagesResponse = {
   items: [
@@ -27,3 +27,20 @@ export const baseResponse: ArbitrumL2MessagesResponse = {
     direction: 'to-rollup',
   },
 };
+
+export const latestDepositsResponse: ArbitrumLatestDepositsResponse = {
+  items: [
+    {
+      completion_transaction_hash: '0x3ccdf87449d3de6a9dcd3eddb7bc9ecdf1770d4631f03cdf12a098911618d138',
+      origination_transaction_block_number: 123400,
+      origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      origination_timestamp: '2023-06-01T14:46:48.000000Z',
+    },
+    {
+      completion_transaction_hash: '0xd16d918b2f95a5cdf66824f6291b6d5eb80b6f4acab3f9fb82ee0ec4109646a0',
+      origination_timestamp: null,
+      origination_transaction_block_number: null,
+      origination_transaction_hash: null,
+    },
+  ],
+};

types/api/arbitrumL2.ts

@@ -1,12 +1,23 @@
 import type { Block } from './block';
 import type { Transaction } from './transaction';
 
+export interface ArbitrumLatestDepositsItem {
+  completion_transaction_hash: string;
+  origination_timestamp: string | null;
+  origination_transaction_block_number: number | null;
+  origination_transaction_hash: string | null;
+}
+
+export interface ArbitrumLatestDepositsResponse {
+  items: Array<ArbitrumLatestDepositsItem>;
+}
+
 export type ArbitrumL2MessagesItem = {
   completion_transaction_hash: string | null;
   id: number;
   origination_address: string;
   origination_timestamp: string | null;
-  origination_transaction_block_number: number;
+  origination_transaction_block_number: number | null;
   origination_transaction_hash: string;
   status: 'initiated' | 'sent' | 'confirmed' | 'relayed';
 }

ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import * as depositMock from 'mocks/arbitrum/deposits';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
+import { test, expect } from 'playwright/lib';
+
+import LatestArbitrumDeposits from './LatestArbitrumDeposits';
+
+test('default view +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.arbitrumRollup);
+  mockApiResponse('homepage_arbitrum_deposits', depositMock.latestDepositsResponse);
+  const component = await render(<LatestArbitrumDeposits/>);
+  await expect(component).toHaveScreenshot();
+});

ui/home/latestDeposits/LatestDeposits.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Flex,
   Grid,
+  GridItem,
   Skeleton,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -17,9 +18,9 @@ import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type DepositsItem = {
-  l1BlockNumber: number;
-  l1TxHash: string;
-  l2TxHash: string | null;
+  l1BlockNumber: number | null;
+  l1TxHash: string | null;
+  l2TxHash: string;
   timestamp: string | null;
 }
 
@@ -38,47 +39,67 @@ type ItemProps = {
 const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
   const isMobile = useIsMobile();
 
-  const l1BlockLink = (
+  const l1BlockLink = item.l1BlockNumber ? (
     <BlockEntityL1
       number={ item.l1BlockNumber }
       isLoading={ isLoading }
       fontSize="sm"
       lineHeight={ 5 }
       fontWeight={ 700 }
     />
+  ) : (
+    <BlockEntityL1
+      number="TBD"
+      isLoading={ isLoading }
+      fontSize="sm"
+      lineHeight={ 5 }
+      fontWeight={ 700 }
+      noLink
+    />
   );
 
-  const l1TxLink = (
+  const l1TxLink = item.l1TxHash ? (
     <TxEntityL1
       isLoading={ isLoading }
       hash={ item.l1TxHash }
       fontSize="sm"
       lineHeight={ 5 }
       truncation={ isMobile ? 'constant_long' : 'dynamic' }
     />
+  ) : (
+    <TxEntityL1
+      isLoading={ isLoading }
+      hash="To be determined"
+      fontSize="sm"
+      lineHeight={ 5 }
+      truncation="none"
+      noLink
+    />
   );
 
-  const l2TxLink = item.l2TxHash ? (
+  const l2TxLink = (
     <TxEntity
       isLoading={ isLoading }
       hash={ item.l2TxHash }
       fontSize="sm"
       lineHeight={ 5 }
       truncation={ isMobile ? 'constant_long' : 'dynamic' }
     />
-  ) : null;
+  );
 
   const content = (() => {
     if (isMobile) {
       return (
         <>
           <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
             { l1BlockLink }
-            <TimeAgoWithTooltip
-              timestamp={ item.timestamp }
-              isLoading={ isLoading }
-              color="text_secondary"
-            />
+            { item.timestamp ? (
+              <TimeAgoWithTooltip
+                timestamp={ item.timestamp }
+                isLoading={ isLoading }
+                color="text_secondary"
+              />
+            ) : <GridItem/> }
           </Flex>
           <Grid gridTemplateColumns="56px auto">
             <Skeleton isLoaded={ !isLoading } my="5px" w="fit-content">
@@ -101,14 +122,16 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
           L1 txn
         </Skeleton>
         { l1TxLink }
-        <TimeAgoWithTooltip
-          timestamp={ item.timestamp }
-          isLoading={ isLoading }
-          color="text_secondary"
-          w="fit-content"
-          h="fit-content"
-          my="2px"
-        />
+        { item.timestamp ? (
+          <TimeAgoWithTooltip
+            timestamp={ item.timestamp }
+            isLoading={ isLoading }
+            color="text_secondary"
+            w="fit-content"
+            h="fit-content"
+            my="2px"
+          />
+        ) : <GridItem/> }
         <Skeleton isLoaded={ !isLoading } w="fit-content" h="fit-content" my="2px">
           L2 txn
         </Skeleton>

ui/messages/ArbitrumL2MessagesListItem.tsx

@@ -33,13 +33,15 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <BlockEntityL1
-              number={ item.origination_transaction_block_number }
-              isLoading={ isLoading }
-              fontSize="sm"
-              lineHeight={ 5 }
-              fontWeight={ 600 }
-            />
+            { item.origination_transaction_block_number ? (
+              <BlockEntityL1
+                number={ item.origination_transaction_block_number }
+                isLoading={ isLoading }
+                fontSize="sm"
+                lineHeight={ 5 }
+                fontWeight={ 600 }
+              />
+            ) : <chakra.span>N/A</chakra.span> }
           </ListItemMobileGrid.Value>
         </>
       ) }
@@ -84,14 +86,18 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
         ) }
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
-          timestamp={ item.origination_timestamp }
-          isLoading={ isLoading }
-          display="inline-block"
-        />
-      </ListItemMobileGrid.Value>
+      { item.origination_timestamp && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Value>
+            <TimeAgoWithTooltip
+              timestamp={ item.origination_timestamp }
+              isLoading={ isLoading }
+              display="inline-block"
+            />
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>

ui/messages/ArbitrumL2MessagesTableItem.tsx

@@ -29,14 +29,16 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
     <Tr>
       { direction === 'to-rollup' && (
         <Td verticalAlign="middle">
-          <BlockEntityL1
-            number={ item.origination_transaction_block_number }
-            isLoading={ isLoading }
-            fontSize="sm"
-            lineHeight={ 5 }
-            fontWeight={ 600 }
-            noIcon
-          />
+          { item.origination_transaction_block_number ? (
+            <BlockEntityL1
+              number={ item.origination_transaction_block_number }
+              isLoading={ isLoading }
+              fontSize="sm"
+              lineHeight={ 5 }
+              fontWeight={ 600 }
+              noIcon
+            />
+          ) : <chakra.span color="text_secondary">N/A</chakra.span> }
         </Td>
       ) }
       { direction === 'from-rollup' && (

ui/shared/entities/block/BlockEntity.tsx

@@ -50,7 +50,7 @@ const Content = chakra((props: ContentProps) => {
 const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  number: number;
+  number: number | string;
   hash?: string;
 }