Merge pull request blockscout#2047 from blockscout/arbitrum-update

arbitrum updates

configs/envs/.env.arbitrum

@@ -1,5 +1,5 @@
-# Set of ENVs for Optimism (dev only)
-# https://optimism.blockscout.com/
+# Set of ENVs for Arbitrum (dev only)
+# https://arbitrum.blockscout.com/
 
 # app configuration
 NEXT_PUBLIC_APP_PROTOCOL=http

mocks/arbitrum/txnBatches.ts

@@ -2,7 +2,7 @@ import type { ArbitrumL2TxnBatchesItem, ArbitrumL2TxnBatchesResponse } from 'typ
 
 export const finalized: ArbitrumL2TxnBatchesItem = {
   number: 12345,
-  block_count: 12345,
+  blocks_count: 12345,
   transactions_count: 10000,
   commitment_transaction: {
     block_number: 12345,
@@ -14,7 +14,7 @@ export const finalized: ArbitrumL2TxnBatchesItem = {
 
 export const unfinalized: ArbitrumL2TxnBatchesItem = {
   number: 12344,
-  block_count: 10000,
+  blocks_count: 10000,
   transactions_count: 103020,
   commitment_transaction: {
     block_number: 12340,

stubs/arbitrumL2.ts

@@ -15,7 +15,7 @@ export const ARBITRUM_MESSAGES_ITEM: ArbitrumL2MessagesItem = {
 
 export const ARBITRUM_L2_TXN_BATCHES_ITEM: ArbitrumL2TxnBatchesItem = {
   number: 12345,
-  block_count: 12345,
+  blocks_count: 12345,
   transactions_count: 10000,
   commitment_transaction: {
     block_number: 12345,

types/api/arbitrumL2.ts

@@ -34,7 +34,7 @@ type ArbitrumL2BatchCommitmentTx = {
 }
 
 export type ArbitrumL2TxnBatchesItem = {
-  block_count: number;
+  blocks_count: number;
   commitment_transaction: ArbitrumL2BatchCommitmentTx;
   number: number;
   transactions_count: number;

ui/block/BlockDetails.tsx

@@ -24,6 +24,7 @@ import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
+import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -188,6 +189,20 @@ const BlockDetails = ({ query }: Props) => {
         />
       </DetailsInfoItem.Value>
 
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+        <>
+          <DetailsInfoItem.Label
+            hint="The most recent L1 block height as of this L2 block"
+            isLoading={ isPlaceholderData }
+          >
+            L1 block height
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <BlockEntityL1 isLoading={ isPlaceholderData } number={ data.arbitrum.l1_block_height }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && !config.UI.views.block.hiddenFields?.batch && (
         <>
           <DetailsInfoItem.Label
@@ -667,6 +682,40 @@ const BlockDetails = ({ query }: Props) => {
             </>
           ) }
 
+          { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+            <>
+              <DetailsInfoItem.Label
+                hint="The cumulative number of L2 to L1 transactions as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Send count
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.send_count.toLocaleString() }
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
+                hint="The root of the Merkle accumulator representing all L2 to L1 transactions as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Send root
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.send_root }
+              </DetailsInfoItem.Value>
+
+              <DetailsInfoItem.Label
+                hint="The number of delayed L1 to L2 messages read as of this block"
+                isLoading={ isPlaceholderData }
+              >
+                Delayed messages
+              </DetailsInfoItem.Label>
+              <DetailsInfoItem.Value>
+                { data.arbitrum.delayed_messages.toLocaleString() }
+              </DetailsInfoItem.Value>
+            </>
+          ) }
+
           { !config.UI.views.block.hiddenFields?.nonce && (
             <>
               <DetailsInfoItem.Label

ui/shared/statusTag/ArbitrumL2MessageStatus.tsx

@@ -12,18 +12,36 @@ export interface Props {
 
 const ArbitrumL2MessageStatus = ({ status, isLoading }: Props) => {
   let type: StatusTagType;
+  let text: string;
 
   switch (status) {
-    case 'relayed':
-    case 'confirmed':
+    case 'relayed': {
       type = 'ok';
+      text = 'Relayed';
       break;
+    }
+    case 'confirmed': {
+      type = 'ok';
+      text = 'Ready for relay';
+      break;
+    }
+    case 'sent': {
+      type = 'pending';
+      text = 'Waiting';
+      break;
+    }
+    case 'initiated': {
+      type = 'pending';
+      text = 'Pending';
+      break;
+    }
     default:
       type = 'pending';
+      text = status;
       break;
   }
 
-  return <StatusTag type={ type } text={ status } isLoading={ isLoading }/>;
+  return <StatusTag type={ type } text={ text } isLoading={ isLoading }/>;
 };
 
 export default ArbitrumL2MessageStatus;

ui/tx/details/TxInfo.tsx

@@ -570,6 +570,42 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
         </>
       ) }
 
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Fee paid to the poster for L1 resources"
+            isLoading={ isLoading }
+          >
+            Poster fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.arbitrum.poster_fee }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint="Fee paid to the network for L2 resources"
+            isLoading={ isLoading }
+          >
+            Network fee
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <CurrencyValue
+              value={ data.arbitrum.network_fee }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       <TxDetailsGasPrice gasPrice={ data.gas_price } isLoading={ isLoading }/>
 
       <TxDetailsFeePerGas txFee={ data.fee.value } gasUsed={ data.gas_used } isLoading={ isLoading }/>
@@ -587,6 +623,42 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
         <Utilization ml={ 4 } value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
       </DetailsInfoItem.Value>
 
+      { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.gas_used && (
+        <>
+          <DetailsInfoItem.Label
+            hint="L2 gas set aside for L1 data charges"
+            isLoading={ isLoading }
+          >
+            Gas used for L1
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l1 || 0).toFormat() }</Skeleton>
+            <TextSeparator/>
+            <Utilization
+              ml={ 4 }
+              value={ BigNumber(data.arbitrum.gas_used_for_l1 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+
+          <DetailsInfoItem.Label
+            hint="L2 gas spent on L2 resources"
+            isLoading={ isLoading }
+          >
+            Gas used for L2
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l2 || 0).toFormat() }</Skeleton>
+            <TextSeparator/>
+            <Utilization
+              ml={ 4 }
+              value={ BigNumber(data.arbitrum.gas_used_for_l2 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
+              isLoading={ isLoading }
+            />
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       { !config.UI.views.tx.hiddenFields?.gas_fees &&
             (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
         <>

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx

@@ -103,7 +103,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
       <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
-            { data.transactions_count } transaction{ data.transactions_count === 1 ? '' : 's' }
+            { data.transactions_count.toLocaleString() } transaction{ data.transactions_count === 1 ? '' : 's' }
           </LinkInternal>
         </Skeleton>
       </DetailsInfoItem.Value>
@@ -117,7 +117,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
       <DetailsInfoItem.Value>
         <Skeleton isLoaded={ !isPlaceholderData }>
           <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
-            { blocksCount } block{ blocksCount === 1 ? '' : 's' }
+            { blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
           </LinkInternal>
         </Skeleton>
       </DetailsInfoItem.Value>

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx

@@ -54,11 +54,11 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      { item.block_count && (
+      { item.blocks_count && (
         <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block txn count</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Block count</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.block_count }</Skeleton>
+            <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count.toLocaleString() }</Skeleton>
           </ListItemMobileGrid.Value>
         </>
       ) }
@@ -87,7 +87,7 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
           fontWeight={ 600 }
         >
           <Skeleton isLoaded={ !isLoading } minW="40px">
-            { item.transactions_count }
+            { item.transactions_count.toLocaleString() }
           </Skeleton>
         </LinkInternal>
       </ListItemMobileGrid.Value>

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx

@@ -21,7 +21,7 @@ const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
           <Th>Batch #</Th>
           <Th>L1 status</Th>
           <Th>L1 block</Th>
-          <Th>L2 block txn count</Th>
+          <Th>Block count</Th>
           <Th>L1 transaction</Th>
           <Th>Age</Th>
           <Th>Txn count</Th>

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx

@@ -48,7 +48,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
         />
       </Td>
       <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.block_count || 'N/A' }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count ? item.blocks_count.toLocaleString() : 'N/A' }</Skeleton>
       </Td>
       <Td pr={ 12 } verticalAlign="middle">
         <TxEntityL1
@@ -70,7 +70,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           isLoading={ isLoading }
         >
           <Skeleton isLoaded={ !isLoading } minW="40px">
-            { item.transactions_count }
+            { item.transactions_count.toLocaleString() }
           </Skeleton>
         </LinkInternal>
       </Td>