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 = () => {
N/A
- {block.hash}
+
- {block.sha3Uncles}
+
- {block.stateRoot}
+
{block.nonce}
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 = ({ 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) => (
+
+ {s}
+
+ ))}
+ >
+ );
+};
+
+export default React.memo(HexValue);