kadena-io · isaozler · Jul 21, 2025 · Jul 3, 2025 · Jul 21, 2025 · Jul 21, 2025
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -46,9 +46,6 @@ class MyDocument extends Document {
           <script src="/assets/envs.js"/>
 
           { /* FAVICON */ }
-          <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"/>
-          <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png"/>
-          <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon/favicon-48x48.png"/>
           <link rel="shortcut icon" href="/assets/favicon/favicon.ico"/>
           <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon-180x180.png"/>
           <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png"/>

diff --git a/public/assets/favicon/android-chrome-192x192.png b/public/assets/favicon/android-chrome-192x192.png
diff --git a/public/assets/favicon/apple-touch-icon-180x180.png b/public/assets/favicon/apple-touch-icon-180x180.png
diff --git a/public/assets/favicon/favicon.ico b/public/assets/favicon/favicon.ico
diff --git a/public/assets/favicon/logo-icon.png b/public/assets/favicon/logo-icon.png
diff --git a/public/static/kadena_evm_og_image.png b/public/static/kadena_evm_og_image.png
diff --git a/public/static/og_placeholder.png b/public/static/og_placeholder.png
diff --git a/toolkit/theme/globalCss.ts b/toolkit/theme/globalCss.ts
@@ -4,6 +4,7 @@ import addressEntity from './globals/address-entity';
 import entity from './globals/entity';
 import recaptcha from './globals/recaptcha';
 import scrollbar from './globals/scrollbar';
+import txEntity from './globals/tx-entity';
 
 const webkitAutofillOverrides = {
   WebkitTextFillColor: 'var(--chakra-colors-input-fg)',
@@ -54,6 +55,7 @@ const globalCss: SystemConfig['globalCss'] = {
   ...scrollbar,
   ...entity,
   ...addressEntity,
+  ...txEntity,
 };
 
 export default globalCss;
diff --git a/toolkit/theme/globals/tx-entity.ts b/toolkit/theme/globals/tx-entity.ts
@@ -0,0 +1,7 @@
+const styles = {
+  '.tx-entity-mono, .tx-entity-mono > a': {
+    flex: 1,
+  },
+};
+
+export default styles;
diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
@@ -114,7 +114,8 @@ const BlockDetails = ({ query }: Props) => {
   const txsNum = (() => {
     const blockTxsNum = (
       <Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'txs' } }) }>
-        { data.transactions_count } txn{ data.transactions_count === 1 ? '' : 's' }
+        <Text fontFamily="var(--kda-typography-family-monospace-font)">{ data.transactions_count }</Text>&nbsp;
+        <Text>txn{ data.transactions_count === 1 ? '' : 's' }</Text>
       </Link>
     );
 
@@ -156,7 +157,7 @@ const BlockDetails = ({ query }: Props) => {
         { blockTypeLabel } height
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton loading={ isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
           { data.height }
         </Skeleton>
         { data.height === 0 && <Text whiteSpace="pre"> - Genesis Block</Text> }
@@ -194,7 +195,7 @@ const BlockDetails = ({ query }: Props) => {
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             { data.arbitrum.batch_number ?
-              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number }/> :
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number } fontFamily="var(--kda-typography-family-monospace-font)"/> :
               <Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
           </DetailedInfo.ItemValue>
         </>
@@ -210,7 +211,7 @@ const BlockDetails = ({ query }: Props) => {
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue columnGap={ 3 }>
             { data.optimism.number ?
-              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.number }/> :
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.number } fontFamily="var(--kda-typography-family-monospace-font)"/> :
               <Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
             { data.optimism.batch_data_container && (
               <OptimisticL2TxnBatchDA
@@ -229,7 +230,7 @@ const BlockDetails = ({ query }: Props) => {
         Size
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton loading={ isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
           { data.size.toLocaleString() }
         </Skeleton>
       </DetailedInfo.ItemValue>
@@ -265,7 +266,7 @@ const BlockDetails = ({ query }: Props) => {
             Withdrawals
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
-            <Skeleton loading={ isPlaceholderData }>
+            <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
               <Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }) }>
                 { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
               </Link>
@@ -284,7 +285,7 @@ const BlockDetails = ({ query }: Props) => {
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             { data.zksync.batch_number ?
-              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number }/> :
+              <BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number } fontFamily="var(--kda-typography-family-monospace-font)"/> :
               <Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
           </DetailedInfo.ItemValue>
         </>
@@ -379,7 +380,7 @@ const BlockDetails = ({ query }: Props) => {
             Block reward
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue columnGap={ 1 }>
-            <Skeleton loading={ isPlaceholderData }>
+            <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
               { totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
             </Skeleton>
             { rewardBreakDown }
@@ -396,7 +397,7 @@ const BlockDetails = ({ query }: Props) => {
             >
               { type }
             </DetailedInfo.ItemLabel>
-            <DetailedInfo.ItemValue>
+            <DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
               { BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
             </DetailedInfo.ItemValue>
           </React.Fragment>
@@ -412,7 +413,7 @@ const BlockDetails = ({ query }: Props) => {
             View
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
-            <Skeleton loading={ isPlaceholderData }>
+            <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
               { data.zilliqa.view }
             </Skeleton>
           </DetailedInfo.ItemValue>
@@ -430,7 +431,7 @@ const BlockDetails = ({ query }: Props) => {
         Gas used
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton loading={ isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
           { BigNumber(data.gas_used || 0).toFormat() }
         </Skeleton>
         <BlockGasUsed
@@ -449,7 +450,7 @@ const BlockDetails = ({ query }: Props) => {
         Gas limit
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <Skeleton loading={ isPlaceholderData }>
+        <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
           { BigNumber(data.gas_limit).toFormat() }
         </Skeleton>
       </DetailedInfo.ItemValue>
@@ -463,7 +464,7 @@ const BlockDetails = ({ query }: Props) => {
             Minimum gas price
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
-            <Skeleton loading={ isPlaceholderData }>
+            <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
               { BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
             </Skeleton>
           </DetailedInfo.ItemValue>
@@ -483,8 +484,10 @@ const BlockDetails = ({ query }: Props) => {
               <Skeleton loading={ isPlaceholderData } h="20px" maxW="380px" w="100%"/>
             ) : (
               <>
-                <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
-                <Text color="text.secondary" whiteSpace="pre">
+                <Text fontFamily="var(--kda-typography-family-monospace-font)">
+                  { BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether }
+                </Text>
+                <Text color="text.secondary" whiteSpace="pre" fontFamily="var(--kda-typography-family-monospace-font)">
                   { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
                 </Text>
               </>
@@ -506,7 +509,7 @@ const BlockDetails = ({ query }: Props) => {
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
-            <Skeleton loading={ isPlaceholderData } ml={ 2 }>
+            <Skeleton loading={ isPlaceholderData } ml={ 2 } fontFamily="var(--kda-typography-family-monospace-font)">
               { burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
             </Skeleton>
             { !txFees.isEqualTo(ZERO) && (
@@ -515,6 +518,7 @@ const BlockDetails = ({ query }: Props) => {
                   ml={ 4 }
                   value={ burntFees.dividedBy(txFees).toNumber() }
                   isLoading={ isPlaceholderData }
+                  fontFamily="var(--kda-typography-family-monospace-font)"
                 />
               </Tooltip>
             ) }
@@ -531,7 +535,7 @@ const BlockDetails = ({ query }: Props) => {
             Priority fee / Tip
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
-            <Skeleton loading={ isPlaceholderData }>
+            <Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
               { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
             </Skeleton>
           </DetailedInfo.ItemValue>
@@ -687,7 +691,7 @@ const BlockDetails = ({ query }: Props) => {
             >
               Send count
             </DetailedInfo.ItemLabel>
-            <DetailedInfo.ItemValue>
+            <DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
               { data.arbitrum.send_count.toLocaleString() }
             </DetailedInfo.ItemValue>
 
@@ -697,7 +701,7 @@ const BlockDetails = ({ query }: Props) => {
             >
               Send root
             </DetailedInfo.ItemLabel>
-            <DetailedInfo.ItemValue>
+            <DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
               { data.arbitrum.send_root }
             </DetailedInfo.ItemValue>
 
@@ -707,7 +711,7 @@ const BlockDetails = ({ query }: Props) => {
             >
               Delayed messages
             </DetailedInfo.ItemLabel>
-            <DetailedInfo.ItemValue>
+            <DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
               { data.arbitrum.delayed_messages.toLocaleString() }
             </DetailedInfo.ItemValue>
           </>
@@ -720,7 +724,7 @@ const BlockDetails = ({ query }: Props) => {
             >
               Nonce
             </DetailedInfo.ItemLabel>
-            <DetailedInfo.ItemValue>
+            <DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
               { data.nonce }
             </DetailedInfo.ItemValue>
           </>

diff --git a/ui/shared/GasUsedToTargetRatio.tsx b/ui/shared/GasUsedToTargetRatio.tsx
@@ -1,3 +1,4 @@
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -12,7 +13,10 @@ const GasUsedToTargetRatio = ({ value, isLoading }: Props) => {
   return (
     <Tooltip content="% of Gas Target">
       <Skeleton color="text.secondary" loading={ isLoading }>
-        <span>{ (value > 0 ? '+' : '') + value.toLocaleString(undefined, { maximumFractionDigits: 2 }) }%</span>
+        <chakra.span
+          fontFamily="var(--kda-typography-family-monospace-font)">
+          { (value > 0 ? '+' : '') + value.toLocaleString(undefined, { maximumFractionDigits: 2 }) }%
+        </chakra.span>
       </Skeleton>
     </Tooltip>
   );

diff --git a/ui/shared/HashStringShortenDynamic.tsx b/ui/shared/HashStringShortenDynamic.tsx
@@ -51,7 +51,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', noTooltip, tailLen
 
     const parentWidth = getWidth(parent);
 
-    if (getWidth(shadowEl) > parentWidth) {
+    if (getWidth(shadowEl) > parentWidth - 40) {
       const tail = hash.slice(-tailLength);
       let leftI = HEAD_MIN_LENGTH;
       let rightI = hash.length - tailLength;
@@ -66,7 +66,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', noTooltip, tailLen
           rightI = medI;
         }
       }
-      setDisplayedString(hash.slice(0, rightI - 1) + '...' + tail);
+      setDisplayedString(hash.slice(0, rightI - (hash.length > (4 * 16) ? (16 / 2) : 1)) + '...' + tail);
     } else {
       setDisplayedString(hash);
     }

diff --git a/ui/shared/entities/tx/TxEntity.tsx b/ui/shared/entities/tx/TxEntity.tsx
@@ -67,7 +67,7 @@ const TxEntity = (props: EntityProps) => {
   const content = <Content { ...partsProps.content }/>;
 
   return (
-    <Container { ...partsProps.container }>
+    <Container { ...partsProps.container } className="tx-entity-mono">
       <Icon { ...partsProps.icon }/>
       { props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }
       <Copy { ...partsProps.copy }/>

diff --git a/ui/shared/logs/LogItem.tsx b/ui/shared/logs/LogItem.tsx
@@ -118,6 +118,7 @@ const LogItem = ({ address, index, topics, data, decoded, type, transaction_hash
           fontSize="sm"
           borderRadius="md"
           bgColor={ isLoading ? undefined : { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } }
+          fontFamily="var(--kda-typography-family-monospace-font)"
         >
           { data }
         </Skeleton>

diff --git a/ui/tx/details/TxDetailsOther.tsx b/ui/tx/details/TxDetailsOther.tsx
@@ -22,27 +22,57 @@ const TxDetailsOther = ({ nonce, type, position, queueIndex }: Props) => {
             typeof type === 'number' && (
               <Box key="type">
                 <Text as="span" fontWeight="500">Txn type: </Text>
-                <Text fontWeight="600" as="span">{ type }</Text>
-                { type === 2 && <Text fontWeight="400" as="span" ml={ 1 } color="text.secondary">(EIP-1559)</Text> }
-                { type === 3 && <Text fontWeight="400" as="span" ml={ 1 } color="text.secondary">(EIP-4844)</Text> }
-                { type === 4 && <Text fontWeight="400" as="span" ml={ 1 } color="text.secondary">(EIP-7702)</Text> }
+                <Text fontWeight="600" as="span" fontFamily="var(--kda-typography-family-monospace-font)">{ type }</Text>
+                { type === 2 && (
+                  <Text
+                    fontWeight="400"
+                    as="span"
+                    ml={ 1 }
+                    color="text.secondary"
+                    fontFamily="var(--kda-typography-family-monospace-font)"
+                  >
+                    (EIP-1559)
+                  </Text>
+                ) }
+                { type === 3 && (
+                  <Text
+                    fontWeight="400"
+                    as="span"
+                    ml={ 1 }
+                    color="text.secondary"
+                    fontFamily="var(--kda-typography-family-monospace-font)"
+                  >
+                    (EIP-4844)
+                  </Text>
+                ) }
+                { type === 4 && (
+                  <Text
+                    fontWeight="400"
+                    as="span"
+                    ml={ 1 }
+                    color="text.secondary"
+                    fontFamily="var(--kda-typography-family-monospace-font)"
+                  >
+                    (EIP-7702)
+                  </Text>
+                ) }
               </Box>
             ),
             queueIndex !== undefined ? (
               <Box key="queueIndex">
                 <Text as="span" fontWeight="500">Queue index: </Text>
-                <Text fontWeight="600" as="span">{ queueIndex }</Text>
+                <Text fontWeight="600" as="span" fontFamily="var(--kda-typography-family-monospace-font)">{ queueIndex }</Text>
               </Box>
             ) : (
               <Box key="nonce">
                 <Text as="span" fontWeight="500">Nonce: </Text>
-                <Text fontWeight="600" as="span">{ nonce }</Text>
+                <Text fontWeight="600" as="span" fontFamily="var(--kda-typography-family-monospace-font)">{ nonce }</Text>
               </Box>
             ),
             position !== null && position !== undefined && (
               <Box key="position">
                 <Text as="span" fontWeight="500">Position: </Text>
-                <Text fontWeight="600" as="span">{ position }</Text>
+                <Text fontWeight="600" as="span" fontFamily="var(--kda-typography-family-monospace-font)">{ position }</Text>
               </Box>
             ),
           ]

diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx
@@ -199,7 +199,7 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => {
         <TxStatus status={ data.status } errorText={ data.status === 'error' ? data.result : undefined } isLoading={ isLoading }/>
         { data.method && (
           <Badge colorPalette={ data.method === 'Multicall' ? 'teal' : 'gray' } loading={ isLoading } truncated ml={ 3 }>
-            { data.method }
+            <chakra.span fontFamily="var(--kda-typography-family-monospace-font)">{ data.method }</chakra.span>
           </Badge>
         ) }
         { data.arbitrum?.contains_message && (

diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
@@ -1,4 +1,4 @@
-import { VStack } from '@chakra-ui/react';
+import { VStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
@@ -72,7 +72,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
       <TableCell whiteSpace="nowrap">
         { tx.method && (
           <Badge colorPalette={ tx.method === 'Multicall' ? 'teal' : 'gray' } loading={ isLoading } truncated>
-            <span>{ tx.method }</span>
+            <chakra.span fontFamily="var(--kda-typography-family-monospace-font)">{ tx.method }</chakra.span>
           </Badge>
         ) }
       </TableCell>