arbitrum tx and block updates

configs/envs/.env.arbitrum

-# 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

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/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) && (
         <>