diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
index 05069648f8..de15d34871 100644
--- a/ui/block/BlockDetails.tsx
+++ b/ui/block/BlockDetails.tsx
@@ -1,4 +1,14 @@
-import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton, useColorMode } from '@chakra-ui/react';
+import {
+  Grid,
+  GridItem,
+  Text,
+  Link,
+  Box,
+  Tooltip,
+  useColorModeValue,
+  Skeleton,
+  useColorMode,
+} from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
@@ -46,7 +56,8 @@ const rollupFeature = config.features.rollup;
 
 const BlockDetails = ({ query }: Props) => {
   const { colorMode } = useColorMode();
-  const wvmIconPath = colorMode === 'light' ? 'networks/arweave-light' : 'networks/arweave-dark';
+  const wvmIconPath =
+    colorMode === 'light' ? 'networks/arweave-dark' : 'networks/arweave-light';
   const [ isExpanded, setIsExpanded ] = React.useState(false);
   const router = useRouter();
   const heightOrHash = getQueryParamString(router.query.height_or_hash);
@@ -55,16 +66,10 @@ const BlockDetails = ({ query }: Props) => {
 
   const { data, isPlaceholderData } = query;
 
-  const { data: arweaveId } = useArweaveId({
+  const { data: arweaveId, isLoading } = useArweaveId({
     block: data?.height,
   });
 
-  const truncateArweaveId = (address: string) => {
-    const start = address.slice(0, 30);
-    const end = address.slice(-4);
-    return `${ start }...${ end }`;
-  };
-
   const handleCutClick = React.useCallback(() => {
     setIsExpanded((flag) => !flag);
     scroller.scrollTo('BlockDetails__cutLink', {
@@ -73,16 +78,25 @@ const BlockDetails = ({ query }: Props) => {
     });
   }, []);
 
-  const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
-    if (!data) {
-      return;
-    }
-
-    const increment = direction === 'next' ? +1 : -1;
-    const nextId = String(data.height + increment);
+  const handlePrevNextClick = React.useCallback(
+    (direction: 'prev' | 'next') => {
+      if (!data) {
+        return;
+      }
 
-    router.push({ pathname: '/block/[height_or_hash]', query: { height_or_hash: nextId } }, undefined);
-  }, [ data, router ]);
+      const increment = direction === 'next' ? +1 : -1;
+      const nextId = String(data.height + increment);
+
+      router.push(
+        {
+          pathname: '/block/[height_or_hash]',
+          query: { height_or_hash: nextId },
+        },
+        undefined,
+      );
+    },
+    [ data, router ],
+  );
 
   if (!data) {
     return null;
@@ -93,7 +107,12 @@ const BlockDetails = ({ query }: Props) => {
   const validatorTitle = getNetworkValidatorTitle();
 
   const rewardBreakDown = (() => {
-    if (rollupFeature.isEnabled || totalReward.isEqualTo(ZERO) || txFees.isEqualTo(ZERO) || burntFees.isEqualTo(ZERO)) {
+    if (
+      rollupFeature.isEnabled ||
+      totalReward.isEqualTo(ZERO) ||
+      txFees.isEqualTo(ZERO) ||
+      burntFees.isEqualTo(ZERO)
+    ) {
       return null;
     }
 
@@ -131,24 +150,37 @@ const BlockDetails = ({ query }: Props) => {
       return 'Sequenced by';
     }
 
-    return config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by';
+    return config.chain.verificationType === 'validation' ?
+      'Validated by' :
+      'Mined by';
   })();
 
   const txsNum = (() => {
     const blockTxsNum = (
-      <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'txs' } }) }>
+      <LinkInternal
+        href={ route({
+          pathname: '/block/[height_or_hash]',
+          query: { height_or_hash: heightOrHash, tab: 'txs' },
+        }) }
+      >
         { data.tx_count } txn{ data.tx_count === 1 ? '' : 's' }
       </LinkInternal>
     );
 
-    const blockBlobTxsNum = (config.features.dataAvailability.isEnabled && data.blob_tx_count) ? (
-      <>
-        <span> including </span>
-        <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'blob_txs' } }) }>
-          { data.blob_tx_count } blob txn{ data.blob_tx_count === 1 ? '' : 's' }
-        </LinkInternal>
-      </>
-    ) : null;
+    const blockBlobTxsNum =
+      config.features.dataAvailability.isEnabled && data.blob_tx_count ? (
+        <>
+          <span> including </span>
+          <LinkInternal
+            href={ route({
+              pathname: '/block/[height_or_hash]',
+              query: { height_or_hash: heightOrHash, tab: 'blob_txs' },
+            }) }
+          >
+            { data.blob_tx_count } blob txn{ data.blob_tx_count === 1 ? '' : 's' }
+          </LinkInternal>
+        </>
+      ) : null;
 
     return (
       <>
@@ -174,7 +206,10 @@ const BlockDetails = ({ query }: Props) => {
     <Grid
       columnGap={ 8 }
       rowGap={{ base: 3, lg: 3 }}
-      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
+      templateColumns={{
+        base: 'minmax(0, 1fr)',
+        lg: 'minmax(min-content, 200px) minmax(0, 1fr)',
+      }}
       overflow="hidden"
     >
       <DetailsInfoItem.Label
@@ -184,9 +219,7 @@ const BlockDetails = ({ query }: Props) => {
         { blockTypeLabel } height
       </DetailsInfoItem.Label>
       <DetailsInfoItem.Value>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          { data.height }
-        </Skeleton>
+        <Skeleton isLoaded={ !isPlaceholderData }>{ data.height }</Skeleton>
         { data.height === 0 && <Text whiteSpace="pre"> - Genesis Block</Text> }
         <PrevNext
           ml={ 6 }
@@ -217,7 +250,10 @@ const BlockDetails = ({ query }: Props) => {
         Timestamp
       </DetailsInfoItem.Label>
       <DetailsInfoItem.Value>
-        <DetailsTimestamp timestamp={ data.timestamp } isLoading={ isPlaceholderData }/>
+        <DetailsTimestamp
+          timestamp={ data.timestamp }
+          isLoading={ isPlaceholderData }
+        />
       </DetailsInfoItem.Value>
 
       <DetailsInfoItem.Label
@@ -227,54 +263,74 @@ const BlockDetails = ({ query }: Props) => {
         Transactions
       </DetailsInfoItem.Label>
       <DetailsInfoItem.Value>
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          { txsNum }
-        </Skeleton>
+        <Skeleton isLoaded={ !isPlaceholderData }>{ txsNum }</Skeleton>
       </DetailsInfoItem.Value>
 
-      { config.features.beaconChain.isEnabled && Boolean(data.withdrawals_count) && (
+      { config.features.beaconChain.isEnabled &&
+        Boolean(data.withdrawals_count) && (
         <>
           <DetailsInfoItem.Label
             hint="The number of beacon withdrawals in the block"
             isLoading={ isPlaceholderData }
           >
-            Withdrawals
+              Withdrawals
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
             <Skeleton isLoaded={ !isPlaceholderData }>
-              <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }>
-                { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
+              <LinkInternal
+                href={ route({
+                  pathname: '/block/[height_or_hash]',
+                  query: { height_or_hash: heightOrHash, tab: 'withdrawals' },
+                }) }
+              >
+                { data.withdrawals_count } withdrawal
+                { data.withdrawals_count === 1 ? '' : 's' }
               </LinkInternal>
             </Skeleton>
           </DetailsInfoItem.Value>
         </>
       ) }
 
-      { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.batch && (
+      { rollupFeature.isEnabled &&
+        rollupFeature.type === 'zkSync' &&
+        data.zksync &&
+        !config.UI.views.block.hiddenFields?.batch && (
         <>
           <DetailsInfoItem.Label
             hint="Batch number"
             isLoading={ isPlaceholderData }
           >
-            Batch
+              Batch
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            { data.zksync.batch_number ?
-              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number }/> :
-              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
+            { data.zksync.batch_number ? (
+              <BatchEntityL2
+                isLoading={ isPlaceholderData }
+                number={ data.zksync.batch_number }
+              />
+            ) : (
+              <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton>
+            ) }
           </DetailsInfoItem.Value>
         </>
       ) }
-      { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.L1_status && (
+      { rollupFeature.isEnabled &&
+        rollupFeature.type === 'zkSync' &&
+        data.zksync &&
+        !config.UI.views.block.hiddenFields?.L1_status && (
         <>
           <DetailsInfoItem.Label
             hint="Status is the short interpretation of the batch lifecycle"
             isLoading={ isPlaceholderData }
           >
-            Status
+              Status
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/>
+            <VerificationSteps
+              steps={ ZKSYNC_L2_TX_BATCH_STATUSES }
+              currentStep={ data.zksync.status }
+              isLoading={ isPlaceholderData }
+            />
           </DetailsInfoItem.Value>
         </>
       ) }
@@ -288,10 +344,7 @@ const BlockDetails = ({ query }: Props) => {
             { verificationTitle }
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            <AddressEntity
-              address={ data.miner }
-              isLoading={ isPlaceholderData }
-            />
+            <AddressEntity address={ data.miner } isLoading={ isPlaceholderData }/>
           </DetailsInfoItem.Value>
         </>
       ) }
@@ -581,11 +634,15 @@ const BlockDetails = ({ query }: Props) => {
       ) }
 
       { data.rewards
-        ?.filter(({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward')
+        ?.filter(
+          ({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward',
+        )
         .map(({ type, reward }) => (
           <React.Fragment key={ type }>
             <DetailsInfoItem.Label
-              hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees` }
+              hint={ `Amount of distributed reward. ${ capitalize(
+                validatorTitle,
+              ) }s receive a static block reward + Tx fees + uncle fees` }
             >
               { type }
             </DetailsInfoItem.Label>
@@ -593,37 +650,45 @@ const BlockDetails = ({ query }: Props) => {
               { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
             </DetailsInfoItem.Value>
           </React.Fragment>
-        ))
-      }
+        )) }
 
       { /* ARWEAVE TXID */ }
-      { arweaveId && (
-        <>
-          <DetailsInfoItem.Label
-            hint="The Arweave TXID of the WeaveVM block&apos;s data"
-            isLoading={ isPlaceholderData }
-          >
-            Block&apos;s permanent archive
-          </DetailsInfoItem.Label>
-          <DetailsInfoItem.Value
-            display="flex"
-            flexWrap="nowrap"
-            alignSelf="flex-start"
-            gap={ 2 }
-          >
-            <IconSvg name={ wvmIconPath } display="block" height="4" width="4" marginRight="4px" borderRadius="full"/>
-            <Link
-              isExternal
-              href={ `https://viewblock.io/arweave/tx/${ arweaveId }` }
-              rel="noopener noreferrer"
-              color="#1AFFB1"
+      <Skeleton isLoaded={ !isLoading }>
+        { arweaveId && (
+          <>
+            <DetailsInfoItem.Label
+              hint="The Arweave TXID of the WeaveVM block's data"
+              isLoading={ isLoading }
             >
-              <EntityBase.Content text={ truncateArweaveId(arweaveId) as string }/>
-            </Link>
-            <CopyToClipboard text={ arweaveId }/>
-          </DetailsInfoItem.Value>
-        </>
-      ) }
+              Block archive proof
+            </DetailsInfoItem.Label>
+            <DetailsInfoItem.Value
+              display="flex"
+              flexWrap="nowrap"
+              alignSelf="flex-start"
+              gap={ 2 }
+            >
+              <IconSvg
+                name={ wvmIconPath }
+                display="block"
+                height="4"
+                width="4"
+                marginRight="4px"
+                borderRadius="full"
+              />
+              <Link
+                isExternal
+                href={ `https://arweave.net/${ arweaveId }` }
+                rel="noopener noreferrer"
+                color="#1AFFB1"
+              >
+                <EntityBase.Content text={ arweaveId }/>
+              </Link>
+              <CopyToClipboard text={ arweaveId }/>
+            </DetailsInfoItem.Value>
+          </>
+        ) }
+      </Skeleton>
 
       <DetailsInfoItemDivider/>
 
@@ -640,13 +705,18 @@ const BlockDetails = ({ query }: Props) => {
         <Utilization
           ml={ 4 }
           colorScheme="gray"
-          value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
+          value={ BigNumber(data.gas_used || 0)
+            .dividedBy(BigNumber(data.gas_limit))
+            .toNumber() }
           isLoading={ isPlaceholderData }
         />
         { data.gas_target_percentage && (
           <>
             <TextSeparator color={ separatorColor } mx={ 1 }/>
-            <GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isPlaceholderData }/>
+            <GasUsedToTargetRatio
+              value={ data.gas_target_percentage }
+              isLoading={ isPlaceholderData }
+            />
           </>
         ) }
       </DetailsInfoItem.Value>
@@ -669,11 +739,12 @@ const BlockDetails = ({ query }: Props) => {
             hint="The minimum gas price a transaction should have in order to be included in this block"
             isLoading={ isPlaceholderData }
           >
-        Minimum gas price
+            Minimum gas price
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
             <Skeleton isLoaded={ !isPlaceholderData }>
-              { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
+              { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() }{ ' ' }
+              { currencyUnits.gwei }
             </Skeleton>
           </DetailsInfoItem.Value>
         </>
@@ -689,12 +760,24 @@ const BlockDetails = ({ query }: Props) => {
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
             { isPlaceholderData ? (
-              <Skeleton isLoaded={ !isPlaceholderData } h="20px" maxW="380px" w="100%"/>
+              <Skeleton
+                isLoaded={ !isPlaceholderData }
+                h="20px"
+                maxW="380px"
+                w="100%"
+              />
             ) : (
               <>
-                <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
+                <Text>
+                  { BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() }{ ' ' }
+                  { currencyUnits.ether }{ ' ' }
+                </Text>
                 <Text variant="secondary" whiteSpace="pre">
-                  { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
+                  { space }(
+                  { BigNumber(data.base_fee_per_gas)
+                    .dividedBy(WEI_IN_GWEI)
+                    .toFixed() }{ ' ' }
+                  { currencyUnits.gwei })
                 </Text>
               </>
             ) }
@@ -702,19 +785,25 @@ const BlockDetails = ({ query }: Props) => {
         </>
       ) }
 
-      { !config.UI.views.block.hiddenFields?.burnt_fees && !burntFees.isEqualTo(ZERO) && (
+      { !config.UI.views.block.hiddenFields?.burnt_fees &&
+        !burntFees.isEqualTo(ZERO) && (
         <>
           <DetailsInfoItem.Label
-            hint={
-              `Amount of ${ config.chain.currency.symbol || 'native token' } burned from transactions included in the block. 
-              Equals Block Base Fee per Gas * Gas Used`
-            }
+            hint={ `Amount of ${
+              config.chain.currency.symbol || 'native token'
+            } burned from transactions included in the block. 
+              Equals Block Base Fee per Gas * Gas Used` }
             isLoading={ isPlaceholderData }
           >
-            Burnt fees
+              Burnt fees
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
-            <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
+            <IconSvg
+              name="flame"
+              boxSize={ 5 }
+              color="gray.500"
+              isLoading={ isPlaceholderData }
+            />
             <Skeleton isLoaded={ !isPlaceholderData } ml={ 2 }>
               { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
             </Skeleton>
@@ -743,7 +832,8 @@ const BlockDetails = ({ query }: Props) => {
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
             <Skeleton isLoaded={ !isPlaceholderData }>
-              { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+              { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() }{ ' ' }
+              { currencyUnits.ether }
             </Skeleton>
           </DetailsInfoItem.Value>
         </>
@@ -768,26 +858,32 @@ const BlockDetails = ({ query }: Props) => {
       { /* ADDITIONAL INFO */ }
       { isExpanded && !isPlaceholderData && (
         <>
-          <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
-
-          { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync &&
-            <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isPlaceholderData }/> }
+          <GridItem
+            colSpan={{ base: undefined, lg: 2 }}
+            mt={{ base: 1, lg: 4 }}
+          />
+
+          { rollupFeature.isEnabled &&
+            rollupFeature.type === 'zkSync' &&
+            data.zksync && (
+            <ZkSyncL2TxnBatchHashesInfo
+              data={ data.zksync }
+              isLoading={ isPlaceholderData }
+            />
+          ) }
 
           { !isPlaceholderData && <BlockDetailsBlobInfo data={ data }/> }
 
           { data.bitcoin_merged_mining_header && (
             <>
-              <DetailsInfoItem.Label
-                hint="Merged-mining field: Bitcoin header"
-              >
+              <DetailsInfoItem.Label hint="Merged-mining field: Bitcoin header">
                 Bitcoin merged mining header
               </DetailsInfoItem.Label>
-              <DetailsInfoItem.Value
-                flexWrap="nowrap"
-                alignSelf="flex-start"
-              >
+              <DetailsInfoItem.Value flexWrap="nowrap" alignSelf="flex-start">
                 <Box whiteSpace="nowrap" overflow="hidden">
-                  <HashStringShortenDynamic hash={ data.bitcoin_merged_mining_header }/>
+                  <HashStringShortenDynamic
+                    hash={ data.bitcoin_merged_mining_header }
+                  />
                 </Box>
                 <CopyToClipboard text={ data.bitcoin_merged_mining_header }/>
               </DetailsInfoItem.Value>
@@ -796,9 +892,7 @@ const BlockDetails = ({ query }: Props) => {
 
           { data.bitcoin_merged_mining_coinbase_transaction && (
             <>
-              <DetailsInfoItem.Label
-                hint="Merged-mining field: Coinbase transaction"
-              >
+              <DetailsInfoItem.Label hint="Merged-mining field: Coinbase transaction">
                 Bitcoin merged mining coinbase transaction
               </DetailsInfoItem.Label>
               <DetailsInfoItem.Value>
@@ -814,9 +908,7 @@ const BlockDetails = ({ query }: Props) => {
 
           { data.bitcoin_merged_mining_merkle_proof && (
             <>
-              <DetailsInfoItem.Label
-                hint="Merged-mining field: Merkle proof"
-              >
+              <DetailsInfoItem.Label hint="Merged-mining field: Merkle proof">
                 Bitcoin merged mining Merkle proof
               </DetailsInfoItem.Label>
               <DetailsInfoItem.Value>
@@ -832,17 +924,14 @@ const BlockDetails = ({ query }: Props) => {
 
           { data.hash_for_merged_mining && (
             <>
-              <DetailsInfoItem.Label
-                hint="Merged-mining field: Rootstock block header hash"
-              >
+              <DetailsInfoItem.Label hint="Merged-mining field: Rootstock block header hash">
                 Hash for merged mining
               </DetailsInfoItem.Label>
-              <DetailsInfoItem.Value
-                flexWrap="nowrap"
-                alignSelf="flex-start"
-              >
+              <DetailsInfoItem.Value flexWrap="nowrap" alignSelf="flex-start">
                 <Box whiteSpace="nowrap" overflow="hidden">
-                  <HashStringShortenDynamic hash={ data.hash_for_merged_mining }/>
+                  <HashStringShortenDynamic
+                    hash={ data.hash_for_merged_mining }
+                  />
                 </Box>
                 <CopyToClipboard text={ data.hash_for_merged_mining }/>
               </DetailsInfoItem.Value>
@@ -855,31 +944,31 @@ const BlockDetails = ({ query }: Props) => {
             Difficulty
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value overflow="hidden">
-            <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
+            <HashStringShortenDynamic
+              hash={ BigNumber(data.difficulty).toFormat() }
+            />
           </DetailsInfoItem.Value>
 
           { data.total_difficulty && (
             <>
-              <DetailsInfoItem.Label
-                hint="Total difficulty of the chain until this block"
-              >
+              <DetailsInfoItem.Label hint="Total difficulty of the chain until this block">
                 Total difficulty
               </DetailsInfoItem.Label>
               <DetailsInfoItem.Value overflow="hidden">
-                <HashStringShortenDynamic hash={ BigNumber(data.total_difficulty).toFormat() }/>
+                <HashStringShortenDynamic
+                  hash={ BigNumber(data.total_difficulty).toFormat() }
+                />
               </DetailsInfoItem.Value>
             </>
           ) }
 
           <DetailsInfoItemDivider/>
 
-          <DetailsInfoItem.Label
-            hint="The SHA256 hash of the block"
-          >
+          <DetailsInfoItem.Label hint="The SHA256 hash of the block">
             Hash
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value flexWrap="nowrap">
-            <Box overflow="hidden" >
+            <Box overflow="hidden">
               <HashStringShortenDynamic hash={ data.hash }/>
             </Box>
             <CopyToClipboard text={ data.hash }/>
@@ -887,20 +976,19 @@ const BlockDetails = ({ query }: Props) => {
 
           { data.height > 0 && (
             <>
-              <DetailsInfoItem.Label
-                hint="The hash of the block from which this block was generated"
-              >
+              <DetailsInfoItem.Label hint="The hash of the block from which this block was generated">
                 Parent hash
               </DetailsInfoItem.Label>
               <DetailsInfoItem.Value flexWrap="nowrap">
                 <LinkInternal
-                  href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height - 1) } }) }
+                  href={ route({
+                    pathname: '/block/[height_or_hash]',
+                    query: { height_or_hash: String(data.height - 1) },
+                  }) }
                   overflow="hidden"
                   whiteSpace="nowrap"
                 >
-                  <HashStringShortenDynamic
-                    hash={ data.parent_hash }
-                  />
+                  <HashStringShortenDynamic hash={ data.parent_hash }/>
                 </LinkInternal>
                 <CopyToClipboard text={ data.parent_hash }/>
               </DetailsInfoItem.Value>
@@ -909,14 +997,10 @@ const BlockDetails = ({ query }: Props) => {
 
           { !config.UI.views.block.hiddenFields?.nonce && (
             <>
-              <DetailsInfoItem.Label
-                hint="Block nonce is a value used during mining to demonstrate proof of work for a block"
-              >
+              <DetailsInfoItem.Label hint="Block nonce is a value used during mining to demonstrate proof of work for a block">
                 Nonce
               </DetailsInfoItem.Label>
-              <DetailsInfoItem.Value>
-                { data.nonce }
-              </DetailsInfoItem.Value>
+              <DetailsInfoItem.Value>{ data.nonce }</DetailsInfoItem.Value>
             </>
           ) }
         </>
diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx
index 6096f44f69..f6ae1dc475 100644
--- a/ui/tx/details/TxInfo.tsx
+++ b/ui/tx/details/TxInfo.tsx
@@ -78,12 +78,6 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
     block: data?.block,
   });
 
-  const truncateArweaveId = (address: string) => {
-    const start = address.slice(0, 30);
-    const end = address.slice(-4);
-    return `${ start }...${ end }`;
-  };
-
   const handleCutClick = React.useCallback(() => {
     setIsExpanded((flag) => !flag);
     scroller.scrollTo('TxInfo__cutLink', {
@@ -418,25 +412,25 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             hint="The Arweave TXID of the WeaveVM block"
             isLoading={ isLoading }
           >
-            Arweave storage proof
+            Block archive proof
           </DetailsInfoItem.Label>
           <DetailsInfoItem.Value>
             <IconSvg
               name={ wvmIconPath }
               display="block"
-              height="4"
-              width="4"
+              height="8"
+              width="8"
               borderRadius="full"
               marginRight="4px"
             />
             <Link
               isExternal
-              href={ `https://viewblock.io/arweave/tx/${ arweaveId }` }
+              href={ `https://arweave.net/${ arweaveId }` }
               rel="noopener noreferrer"
               color="#1AFFB1"
             >
               <EntityBase.Content
-                text={ truncateArweaveId(arweaveId) as string }
+                text={ arweaveId }
               />
             </Link>