Merge branch 'feature/ui-tweaks' into develop
This commit is contained in:
commit
2b48163840
|
@ -1,15 +1,23 @@
|
|||
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";
|
||||
import AddressLink from "./components/AddressLink";
|
||||
import TransactionValue from "./components/TransactionValue";
|
||||
import HexValue from "./components/HexValue";
|
||||
import { useLatestBlockNumber } from "./useLatestBlock";
|
||||
|
||||
type BlockParams = {
|
||||
blockNumberOrHash: string;
|
||||
|
@ -89,6 +97,8 @@ const Block: React.FC = () => {
|
|||
}
|
||||
}, [block]);
|
||||
|
||||
const latestBlockNumber = useLatestBlockNumber();
|
||||
|
||||
return (
|
||||
<StandardFrame>
|
||||
<StandardSubtitle>
|
||||
|
@ -100,9 +110,36 @@ const Block: React.FC = () => {
|
|||
{block && (
|
||||
<ContentFrame>
|
||||
<InfoRow title="Block Height">
|
||||
<span className="font-bold">
|
||||
{ethers.utils.commify(block.number)}
|
||||
</span>
|
||||
<div className="flex space-x-1 items-baseline">
|
||||
<span className="font-bold mr-1">
|
||||
{ethers.utils.commify(block.number)}
|
||||
</span>
|
||||
<NavButton
|
||||
blockNum={block.number - 1}
|
||||
disabled={block.number === 0}
|
||||
>
|
||||
<FontAwesomeIcon icon={faChevronLeft} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
blockNum={block.number + 1}
|
||||
disabled={
|
||||
latestBlockNumber === undefined ||
|
||||
block.number >= latestBlockNumber
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon icon={faChevronRight} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
blockNum={latestBlockNumber!}
|
||||
disabled={
|
||||
latestBlockNumber === undefined ||
|
||||
block.number >= latestBlockNumber
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon icon={faChevronRight} />
|
||||
<FontAwesomeIcon icon={faChevronRight} />
|
||||
</NavButton>
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Timestamp">
|
||||
<Timestamp value={block.timestamp} />
|
||||
|
@ -155,16 +192,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>
|
||||
|
|
32
src/Home.tsx
32
src/Home.tsx
|
@ -1,9 +1,10 @@
|
|||
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";
|
||||
import { ERIGON_NODE } from "./ethersconfig";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const [search, setSearch] = useState<string>();
|
||||
|
@ -24,29 +25,7 @@ const Home: React.FC = () => {
|
|||
history.push(`/search?q=${search}`);
|
||||
};
|
||||
|
||||
const [latestBlock, setLatestBlock] = useState<ethers.providers.Block>();
|
||||
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";
|
||||
|
||||
|
@ -85,6 +64,9 @@ const Home: React.FC = () => {
|
|||
<Timestamp value={latestBlock.timestamp} />
|
||||
</NavLink>
|
||||
)}
|
||||
<span className="mx-auto mt-5 text-xs text-gray-500">
|
||||
Using Erigon node at {ERIGON_NODE}
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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);
|
|
@ -0,0 +1,31 @@
|
|||
import { NavLink } from "react-router-dom";
|
||||
|
||||
type NavButtonProps = {
|
||||
blockNum: number;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const NavButton: React.FC<NavButtonProps> = ({
|
||||
blockNum,
|
||||
disabled,
|
||||
children,
|
||||
}) => {
|
||||
if (disabled) {
|
||||
return (
|
||||
<span className="bg-link-blue bg-opacity-10 text-gray-400 rounded px-2 py-1 text-xs">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
|
||||
to={`/block/${blockNum}`}
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavButton;
|
|
@ -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"
|
||||
);
|
||||
|
|
|
@ -0,0 +1,55 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { ethers } from "ethers";
|
||||
import { provider } from "./ethersconfig";
|
||||
|
||||
export const useLatestBlock = () => {
|
||||
const [latestBlock, setLatestBlock] = useState<ethers.providers.Block>();
|
||||
|
||||
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<number>();
|
||||
|
||||
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;
|
||||
};
|
Loading…
Reference in New Issue