custom block fields for Rootstock (#1072)

mocks/blocks/block.ts

+/* eslint-disable max-len */
 import type { Block, BlocksResponse } from 'types/api/block';
 
 export const base: Block = {
@@ -122,6 +123,15 @@ export const base2: Block = {
   ],
 };
 
+export const rootstock: Block = {
+  ...base,
+  bitcoin_merged_mining_coinbase_transaction: '0x0000000000000080a1219cea298d65d545b56abafe7c5421edfaf084cf9e374bb23ea985ebd86b206088ac0000000000000000266a24aa21a9edb2ac3022ad2a5327449f029b6aa3d2e55605061b5d8171b30abf5b330d1959c900000000000000002a6a52534b424c4f434b3a481d071e57c6c47cb8eb716295a7079b15859962abf35e32f107b21f003f0bb900000000',
+  bitcoin_merged_mining_header: '0x000000204a7e42cadf8b5b0a094755c5a13298e596d61f361c6d31171a00000000000000970e51977cd6f82bab9ed62e678c8d8ca664af9d5c3b5cea39d5d4337c7abedae334c9649fc63e1982a84aaa',
+  bitcoin_merged_mining_merkle_proof: '0x09f386e5e6feb20706a1b5d0817eae96f0ebb0d713eeefe6d5625afc6fd87fcdfe8cc9118bb49e32db87f8e928dcb13dd327b526ced76fb9de0115a5dca8d2a9657c929360ad07418fc7e1a3120da27e0002470d0c98c9b8b5b2835e64e379421d2469204533307bf0c5a087d93fd1dfb3aaea3ee83099928860f6cca891cf59d73c4e3c6053ea4b385dce39067e87c28805ddd89c4ff10500401bec7c248f749ad6f0933e6ad270e447d01711aca1cc26d7989ee59e1431fd2fd5d058edca6d',
+  hash_for_merged_mining: '0x481d071e57c6c47cb8eb716295a7079b15859962abf35e32f107b21f003f0bb9',
+  minimum_gas_price: '59240000',
+};
+
 export const baseListResponse: BlocksResponse = {
   items: [
     base,

types/api/block.ts

@@ -30,6 +30,12 @@ export interface Block {
   tx_fees: string | null;
   uncles_hashes: Array<string>;
   withdrawals_count?: number;
+  // ROOTSTOCK FIELDS
+  bitcoin_merged_mining_coinbase_transaction?: string | null;
+  bitcoin_merged_mining_header?: string | null;
+  bitcoin_merged_mining_merkle_proof?: string | null;
+  hash_for_merged_mining?: string | null;
+  minimum_gas_price?: string | null;
 }
 
 export interface BlocksResponse {

ui/block/BlockDetails.pw.tsx

@@ -51,3 +51,21 @@ test('genesis block', async({ mount, page }) => {
 
   await expect(component).toHaveScreenshot();
 });
+
+test('rootstock custom fields', async({ mount, page }) => {
+  const query = {
+    data: blockMock.rootstock,
+    isLoading: false,
+  } as UseQueryResult<Block, ResourceError>;
+
+  const component = await mount(
+    <TestApp>
+      <BlockDetails query={ query }/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot();
+});

ui/block/BlockDetails.tsx

@@ -28,6 +28,7 @@ import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
 import PrevNext from 'ui/shared/PrevNext';
+import RawDataSnippet from 'ui/shared/RawDataSnippet';
 import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
@@ -127,7 +128,12 @@ const BlockDetails = ({ query }: Props) => {
   })();
 
   return (
-    <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden">
+    <Grid
+      columnGap={ 8 }
+      rowGap={{ base: 3, lg: 3 }}
+      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      overflow="hidden"
+    >
       <DetailsInfoItem
         title={ `${ data.type === 'reorg' ? 'Reorg' : 'Block' } height` }
         hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
@@ -266,6 +272,17 @@ const BlockDetails = ({ query }: Props) => {
           { BigNumber(data.gas_limit).toFormat() }
         </Skeleton>
       </DetailsInfoItem>
+      { data.minimum_gas_price && (
+        <DetailsInfoItem
+          title="Minimum gas price"
+          hint="Minimum gas price"
+          isLoading={ isPlaceholderData }
+        >
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            { BigNumber(data.minimum_gas_price).toFormat() }
+          </Skeleton>
+        </DetailsInfoItem>
+      ) }
       { data.base_fee_per_gas && (
         <DetailsInfoItem
           title="Base fee per gas"
@@ -350,6 +367,59 @@ const BlockDetails = ({ query }: Props) => {
         <>
           <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
+          { data.bitcoin_merged_mining_header && (
+            <DetailsInfoItem
+              title="Bitcoin merged mining header"
+              hint="Bitcoin merged mining header"
+              flexWrap="nowrap"
+              alignSelf="flex-start"
+            >
+              <Box whiteSpace="nowrap" overflow="hidden">
+                <HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/>
+              </Box>
+              <CopyToClipboard text={ data.bitcoin_merged_mining_header }/>
+            </DetailsInfoItem>
+          ) }
+          { data.bitcoin_merged_mining_coinbase_transaction && (
+            <DetailsInfoItem
+              title="Bitcoin merged mining coinbase transaction"
+              hint="Bitcoin merged mining coinbase transaction"
+            >
+              <RawDataSnippet
+                data={ data.bitcoin_merged_mining_coinbase_transaction }
+                isLoading={ isPlaceholderData }
+                showCopy={ false }
+                textareaMaxHeight="100px"
+              />
+            </DetailsInfoItem>
+          ) }
+          { data.bitcoin_merged_mining_merkle_proof && (
+            <DetailsInfoItem
+              title="Bitcoin merged mining Merkle proof"
+              hint="Bitcoin merged mining Merkle proof"
+            >
+              <RawDataSnippet
+                data={ data.bitcoin_merged_mining_merkle_proof }
+                isLoading={ isPlaceholderData }
+                showCopy={ false }
+                textareaMaxHeight="100px"
+              />
+            </DetailsInfoItem>
+          ) }
+          { data.hash_for_merged_mining && (
+            <DetailsInfoItem
+              title="Hash for merged mining"
+              hint="Hash for merged mining"
+              flexWrap="nowrap"
+              alignSelf="flex-start"
+            >
+              <Box whiteSpace="nowrap" overflow="hidden">
+                <HashStringShortenDynamic hash={ data.hash_for_merged_mining }/>
+              </Box>
+              <CopyToClipboard text={ data.hash_for_merged_mining }/>
+            </DetailsInfoItem>
+          ) }
+
           <DetailsInfoItem
             title="Difficulty"
             hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` }

ui/shared/DetailsInfoItem.tsx

@@ -15,7 +15,7 @@ interface Props extends Omit<HTMLChakraProps<'div'>, 'title'> {
 const DetailsInfoItem = ({ title, hint, note, children, id, isLoading, ...styles }: Props) => {
   return (
     <>
-      <GridItem py={{ base: 1, lg: 2 }} id={ id } lineHeight={ 5 } { ...styles } whiteSpace="nowrap" _notFirst={{ mt: { base: 3, lg: 0 } }}>
+      <GridItem py={{ base: 1, lg: 2 }} id={ id } lineHeight={ 5 } { ...styles } _notFirst={{ mt: { base: 3, lg: 0 } }}>
         <Flex columnGap={ 2 } alignItems="flex-start">
           <Hint label={ hint } isLoading={ isLoading }/>
           <Skeleton isLoaded={ !isLoading }>

ui/shared/HashStringShortenDynamic.tsx

@@ -93,7 +93,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled,
 
   if (isTruncated) {
     return (
-      <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>{ content }</Tooltip>
+      <Tooltip label={ hash } isDisabled={ isTooltipDisabled } maxW={{ base: '100vw', lg: '400px' }}>{ content }</Tooltip>
     );
   }