Highlight "Uncle" blocks

Fixes #1486

mocks/search/index.ts

@@ -47,6 +47,15 @@ export const block2: SearchResultBlock = {
   url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd2',
 };
 
+export const block3: SearchResultBlock = {
+  block_hash: '0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd3',
+  block_number: 8198536,
+  block_type: 'uncle',
+  type: 'block' as const,
+  timestamp: '2022-12-11T18:11:11Z',
+  url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd3',
+};
+
 export const address1: SearchResultAddressOrContract = {
   address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
   name: null,

types/api/search.ts

@@ -35,7 +35,7 @@ export interface SearchResultLabel {
 
 export interface SearchResultBlock {
   type: 'block';
-  block_type?: 'block' | 'reorg';
+  block_type?: 'block' | 'reorg' | 'uncle';
   block_number: number | string;
   block_hash: string;
   timestamp: string;

ui/block/BlockDetails.tsx

@@ -128,6 +128,17 @@ const BlockDetails = ({ query }: Props) => {
     return config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by';
   })();
 
+  const blockTypeLabel = (() => {
+    switch (data.type) {
+      case 'reorg':
+        return 'Reorg';
+      case 'uncle':
+        return 'Uncle';
+      default:
+        return 'Block';
+    }
+  })();
+
   return (
     <Grid
       columnGap={ 8 }
@@ -136,7 +147,7 @@ const BlockDetails = ({ query }: Props) => {
       overflow="hidden"
     >
       <DetailsInfoItem
-        title={ `${ data.type === 'reorg' ? 'Reorg' : 'Block' } height` }
+        title={ `${ blockTypeLabel } height` }
         hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
         isLoading={ isPlaceholderData }
       >

ui/blocks/BlocksListItem.tsx

@@ -43,7 +43,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <BlockEntity
             isLoading={ isLoading }
             number={ data.height }
-            hash={ data.type === 'reorg' ? data.hash : undefined }
+            hash={ data.type !== 'block' ? data.hash : undefined }
             noIcon
             fontWeight={ 600 }
           />

ui/blocks/BlocksTableItem.tsx

@@ -50,7 +50,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             <BlockEntity
               isLoading={ isLoading }
               number={ data.height }
-              hash={ data.type === 'reorg' ? data.hash : undefined }
+              hash={ data.type !== 'block' ? data.hash : undefined }
               noIcon
               fontSize="sm"
               lineHeight={ 5 }

ui/pages/Block.tsx

@@ -113,7 +113,18 @@ const BlockPageContent = () => {
     };
   }, [ appProps.referrer ]);
 
-  const title = blockQuery.data?.type === 'reorg' ? `Reorged block #${ blockQuery.data?.height }` : `Block #${ blockQuery.data?.height }`;
+  const title = (() => {
+    switch (blockQuery.data?.type) {
+      case 'reorg':
+        return `Reorged block #${ blockQuery.data?.height }`;
+
+      case 'uncle':
+        return `Uncle block #${ blockQuery.data?.height }`;
+
+      default:
+        return `Block #${ blockQuery.data?.height }`;
+    }
+  })();
   const titleSecondRow = (
     <>
       { !config.UI.views.block.hiddenFields?.miner && (

ui/pages/SearchResults.pw.tsx

@@ -91,6 +91,7 @@ test('search by block number +@mobile', async({ mount, page }) => {
       items: [
         searchMock.block1,
         searchMock.block2,
+        searchMock.block3,
       ],
     }),
   }));

ui/searchResults/SearchResultListItem.tsx

@@ -173,6 +173,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
               />
             </BlockEntity.Link>
             { data.block_type === 'reorg' && <Tag ml={ 2 }>Reorg</Tag> }
+            { data.block_type === 'uncle' && <Tag ml={ 2 }>Uncle</Tag> }
           </BlockEntity.Container>
         );
       }

ui/searchResults/SearchResultTableItem.tsx

@@ -263,6 +263,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
             <Td fontSize="sm" verticalAlign="middle">
               <Flex columnGap={ 2 } alignItems="center">
                 { data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
+                { data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
                 <Box overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
                   <HashStringShortenDynamic hash={ data.block_hash }/>
                 </Box>

ui/snippets/searchBar/SearchBar.pw.tsx

@@ -148,6 +148,7 @@ test('search by block number +@mobile', async({ mount, page }) => {
     body: JSON.stringify([
       searchMock.block1,
       searchMock.block2,
+      searchMock.block3,
     ]),
   }));
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx

@@ -47,6 +47,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
           { icon }
           { blockNumber }
           { data.block_type === 'reorg' && <Tag ml="auto">Reorg</Tag> }
+          { data.block_type === 'uncle' && <Tag ml="auto">Uncle</Tag> }
         </Flex>
         { hash }
         <Text variant="secondary">{ date }</Text>
@@ -62,6 +63,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
       </Flex>
       <Flex columnGap={ 3 } minW={ 0 } alignItems="center">
         { data.block_type === 'reorg' && <Tag flexShrink={ 0 }>Reorg</Tag> }
+        { data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
         { hash }
       </Flex>
       <Text variant="secondary" textAlign="end">{ date }</Text>