First attempt at improve hash readability

src/Block.tsx

@@ -10,6 +10,7 @@ import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
 import AddressLink from "./components/AddressLink";
 import TransactionValue from "./components/TransactionValue";
+import HexValue from "./components/HexValue";
 
 type BlockParams = {
   blockNumberOrHash: string;
@@ -155,16 +156,16 @@ const Block: React.FC = () => {
           </InfoRow>
           <InfoRow title="Ether Price">N/A</InfoRow>
           <InfoRow title="Hash">
-            <span className="font-hash">{block.hash}</span>
+          <HexValue value={block.hash} />
           </InfoRow>
           <InfoRow title="Parent Hash">
             <BlockLink blockTag={block.parentHash} />
           </InfoRow>
           <InfoRow title="Sha3Uncles">
-            <span className="font-hash">{block.sha3Uncles}</span>
+            <HexValue value={block.sha3Uncles} />
           </InfoRow>
           <InfoRow title="StateRoot">
-            <span className="font-hash">{block.stateRoot}</span>
+            <HexValue value={block.stateRoot} />
           </InfoRow>
           <InfoRow title="Nonce">
             <span className="font-data">{block.nonce}</span>

src/components/HexValue.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+type HexValueProps = {
+  value: string;
+};
+
+const HexValue: React.FC<HexValueProps> = ({ value }) => {
+  const shards: string[] = [value.slice(0, 10)];
+  for (let i = 10; i < value.length; i += 8) {
+    shards.push(value.slice(i, i + 8));
+  }
+
+  return (
+    <>
+      {shards.map((s, i) => (
+        <span
+          className={`font-hash ${
+            i % 2 === 0 ? "text-black" : "text-gray-400"
+          }`}
+        >
+          {s}
+        </span>
+      ))}
+    </>
+  );
+};
+
+export default React.memo(HexValue);