From 13980c7431479825cb3615f84c57104aa60cf279 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 3 Jul 2021 19:40:47 -0300 Subject: [PATCH 1/5] 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 = () => { 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); From 290d5a8b11da190e58df61b0c4fa33ac5fedc555 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 3 Jul 2021 22:33:34 -0300 Subject: [PATCH 2/5] Add block navigation buttons --- src/Block.tsx | 28 ++++++++++++++++++++++++---- src/components/NavButton.tsx | 31 +++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 src/components/NavButton.tsx diff --git a/src/Block.tsx b/src/Block.tsx index eaed7bf..44ae998 100644 --- a/src/Block.tsx +++ b/src/Block.tsx @@ -1,10 +1,16 @@ import React, { useEffect, useState, useMemo } from "react"; import { useParams, NavLink } from "react-router-dom"; import { ethers, BigNumber } from "ethers"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faChevronLeft, + faChevronRight, +} from "@fortawesome/free-solid-svg-icons"; import { provider } from "./ethersconfig"; import StandardFrame from "./StandardFrame"; import StandardSubtitle from "./StandardSubtitle"; import ContentFrame from "./ContentFrame"; +import NavButton from "./components/NavButton"; import Timestamp from "./components/Timestamp"; import GasValue from "./components/GasValue"; import BlockLink from "./components/BlockLink"; @@ -101,9 +107,23 @@ const Block: React.FC = () => { {block && ( - - {ethers.utils.commify(block.number)} - +
+ + {ethers.utils.commify(block.number)} + + + + + + + +
@@ -156,7 +176,7 @@ const Block: React.FC = () => { N/A - + diff --git a/src/components/NavButton.tsx b/src/components/NavButton.tsx new file mode 100644 index 0000000..a9c1a9d --- /dev/null +++ b/src/components/NavButton.tsx @@ -0,0 +1,31 @@ +import { NavLink } from "react-router-dom"; + +type NavButtonProps = { + blockNum: number; + disabled?: boolean; +}; + +const NavButton: React.FC = ({ + blockNum, + disabled, + children, +}) => { + if (disabled) { + return ( + + {children} + + ); + } + + return ( + + {children} + + ); +}; + +export default NavButton; From 9f146f710062ac0eb8e6eb6fbd7eb6ce5f986427 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 3 Jul 2021 22:42:06 -0300 Subject: [PATCH 3/5] Add block navigation buttons; extract latest block hook --- src/Block.tsx | 8 ++++++- src/Home.tsx | 28 +++------------------- src/useLatestBlock.ts | 55 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 26 deletions(-) create mode 100644 src/useLatestBlock.ts diff --git a/src/Block.tsx b/src/Block.tsx index 44ae998..ace4653 100644 --- a/src/Block.tsx +++ b/src/Block.tsx @@ -17,6 +17,7 @@ import BlockLink from "./components/BlockLink"; import AddressLink from "./components/AddressLink"; import TransactionValue from "./components/TransactionValue"; import HexValue from "./components/HexValue"; +import { useLatestBlockNumber } from "./useLatestBlock"; type BlockParams = { blockNumberOrHash: string; @@ -96,6 +97,8 @@ const Block: React.FC = () => { } }, [block]); + const latestBlockNumber = useLatestBlockNumber(); + return ( @@ -119,7 +122,10 @@ const Block: React.FC = () => { = latestBlockNumber + } > diff --git a/src/Home.tsx b/src/Home.tsx index 7b7a814..08f1dc8 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -1,9 +1,9 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { NavLink, useHistory } from "react-router-dom"; import { ethers } from "ethers"; import Logo from "./Logo"; import Timestamp from "./components/Timestamp"; -import { provider } from "./ethersconfig"; +import { useLatestBlock } from "./useLatestBlock"; const Home: React.FC = () => { const [search, setSearch] = useState(); @@ -24,29 +24,7 @@ const Home: React.FC = () => { history.push(`/search?q=${search}`); }; - const [latestBlock, setLatestBlock] = useState(); - useEffect(() => { - const readLatestBlock = async () => { - const blockNum = await provider.getBlockNumber(); - const _raw = await provider.send("erigon_getHeaderByNumber", [blockNum]); - const _block = provider.formatter.block(_raw); - setLatestBlock(_block); - }; - readLatestBlock(); - - const listener = async (blockNumber: number) => { - const _raw = await provider.send("erigon_getHeaderByNumber", [ - blockNumber, - ]); - const _block = provider.formatter.block(_raw); - setLatestBlock(_block); - }; - - provider.on("block", listener); - return () => { - provider.removeListener("block", listener); - }; - }, []); + const latestBlock = useLatestBlock(); document.title = "Home | Otterscan"; diff --git a/src/useLatestBlock.ts b/src/useLatestBlock.ts new file mode 100644 index 0000000..fba4011 --- /dev/null +++ b/src/useLatestBlock.ts @@ -0,0 +1,55 @@ +import { useState, useEffect } from "react"; +import { ethers } from "ethers"; +import { provider } from "./ethersconfig"; + +export const useLatestBlock = () => { + const [latestBlock, setLatestBlock] = useState(); + + useEffect(() => { + const readLatestBlock = async () => { + const blockNum = await provider.getBlockNumber(); + const _raw = await provider.send("erigon_getHeaderByNumber", [blockNum]); + const _block = provider.formatter.block(_raw); + setLatestBlock(_block); + }; + readLatestBlock(); + + const listener = async (blockNumber: number) => { + const _raw = await provider.send("erigon_getHeaderByNumber", [ + blockNumber, + ]); + const _block = provider.formatter.block(_raw); + setLatestBlock(_block); + }; + + provider.on("block", listener); + return () => { + provider.removeListener("block", listener); + }; + }, []); + + return latestBlock; +}; + +export const useLatestBlockNumber = () => { + const [latestBlock, setLatestBlock] = useState(); + + useEffect(() => { + const readLatestBlock = async () => { + const blockNum = await provider.getBlockNumber(); + setLatestBlock(blockNum); + }; + readLatestBlock(); + + const listener = async (blockNumber: number) => { + setLatestBlock(blockNumber); + }; + + provider.on("block", listener); + return () => { + provider.removeListener("block", listener); + }; + }, []); + + return latestBlock; +}; From 85fd2dddcb57e9f304722ff1b556ff61b5d1fb16 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 3 Jul 2021 22:48:38 -0300 Subject: [PATCH 4/5] Add fast-forward-to-lastest-block button --- src/Block.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Block.tsx b/src/Block.tsx index ace4653..bcffc27 100644 --- a/src/Block.tsx +++ b/src/Block.tsx @@ -129,6 +129,16 @@ const Block: React.FC = () => { > + = latestBlockNumber + } + > + + + From 21a086d395bbc87bf66ffb9040e1d1e236f9bdac Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 3 Jul 2021 23:02:04 -0300 Subject: [PATCH 5/5] Display erigon node url at homepage --- src/Home.tsx | 4 ++++ src/ethersconfig.ts | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Home.tsx b/src/Home.tsx index 08f1dc8..82c3cdb 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -4,6 +4,7 @@ import { ethers } from "ethers"; import Logo from "./Logo"; import Timestamp from "./components/Timestamp"; import { useLatestBlock } from "./useLatestBlock"; +import { ERIGON_NODE } from "./ethersconfig"; const Home: React.FC = () => { const [search, setSearch] = useState(); @@ -63,6 +64,9 @@ const Home: React.FC = () => { )} + + Using Erigon node at {ERIGON_NODE} + diff --git a/src/ethersconfig.ts b/src/ethersconfig.ts index e0a9fd5..6b24d6d 100644 --- a/src/ethersconfig.ts +++ b/src/ethersconfig.ts @@ -1,6 +1,8 @@ import { ethers } from "ethers"; +export const ERIGON_NODE = "http://127.0.0.1:8545"; + export const provider = new ethers.providers.JsonRpcProvider( - "http://127.0.0.1:8545", + ERIGON_NODE, "mainnet" );