From 13980c7431479825cb3615f84c57104aa60cf279 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 3 Jul 2021 19:40:47 -0300
Subject: [PATCH] First attempt at improve hash readability

---
 src/Block.tsx               |  7 ++++---
 src/components/HexValue.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/components/HexValue.tsx

diff --git a/src/Block.tsx b/src/Block.tsx
index 058ac39..eaed7bf 100644
--- a/src/Block.tsx
+++ b/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>
diff --git a/src/components/HexValue.tsx b/src/components/HexValue.tsx
new file mode 100644
index 0000000..3b62fcf
--- /dev/null
+++ b/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);