diff --git a/src/Block.tsx b/src/Block.tsx index c1578a8..87da28d 100644 --- a/src/Block.tsx +++ b/src/Block.tsx @@ -1,15 +1,10 @@ import React, { useEffect, useState, useMemo, useContext } 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 StandardFrame from "./StandardFrame"; import StandardSubtitle from "./StandardSubtitle"; +import NavBlock from "./block/NavBlock"; import ContentFrame from "./ContentFrame"; -import NavButton from "./components/NavButton"; import Timestamp from "./components/Timestamp"; import GasValue from "./components/GasValue"; import BlockLink from "./components/BlockLink"; @@ -18,6 +13,7 @@ import TransactionValue from "./components/TransactionValue"; import HexValue from "./components/HexValue"; import { RuntimeContext } from "./useRuntime"; import { useLatestBlockNumber } from "./useLatestBlock"; +import { blockTxsURL } from "./url"; type BlockParams = { blockNumberOrHash: string; @@ -107,44 +103,25 @@ const Block: React.FC = () => { return ( - Block{" "} - - #{params.blockNumberOrHash} - +
+ Block + + #{params.blockNumberOrHash} + + {block && ( + + )} +
{block && ( -
- - {ethers.utils.commify(block.number)} - - - - - = latestBlockNumber - } - > - - - = latestBlockNumber - } - > - - - -
+ + {ethers.utils.commify(block.number)} + @@ -152,7 +129,7 @@ const Block: React.FC = () => { {block.transactions.length} transactions {" "} diff --git a/src/BlockTransactionHeader.tsx b/src/BlockTransactionHeader.tsx deleted file mode 100644 index 65a8288..0000000 --- a/src/BlockTransactionHeader.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { ethers } from "ethers"; -import StandardSubtitle from "./StandardSubtitle"; -import BlockLink from "./components/BlockLink"; - -type BlockTransactionHeaderProps = { - blockTag: ethers.providers.BlockTag; -}; - -const BlockTransactionHeader: React.FC = ({ - blockTag, -}) => ( - <> - Transactions -
- For Block -
- -); - -export default React.memo(BlockTransactionHeader); diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index b427415..30d39c0 100644 --- a/src/BlockTransactions.tsx +++ b/src/BlockTransactions.tsx @@ -3,8 +3,8 @@ import { useParams, useLocation } from "react-router"; import { ethers } from "ethers"; import queryString from "query-string"; import StandardFrame from "./StandardFrame"; -import BlockTransactionHeader from "./BlockTransactionHeader"; -import BlockTransactionResults from "./BlockTransactionResults"; +import BlockTransactionHeader from "./block/BlockTransactionHeader"; +import BlockTransactionResults from "./block/BlockTransactionResults"; import { InternalOperation, OperationType, diff --git a/src/Home.tsx b/src/Home.tsx index 7d74fcd..d4f3afa 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -5,6 +5,7 @@ import Logo from "./Logo"; import Timestamp from "./components/Timestamp"; import { RuntimeContext } from "./useRuntime"; import { useLatestBlock } from "./useLatestBlock"; +import { blockURL } from "./url"; const Home: React.FC = () => { const { provider } = useContext(RuntimeContext); @@ -56,7 +57,7 @@ const Home: React.FC = () => { {latestBlock && (
Latest block: {ethers.utils.commify(latestBlock.number)}
diff --git a/src/block/BlockTransactionHeader.tsx b/src/block/BlockTransactionHeader.tsx new file mode 100644 index 0000000..a15c463 --- /dev/null +++ b/src/block/BlockTransactionHeader.tsx @@ -0,0 +1,38 @@ +import React, { useContext } from "react"; +import { ethers } from "ethers"; +import StandardSubtitle from "../StandardSubtitle"; +import BlockLink from "../components/BlockLink"; +import NavBlock from "./NavBlock"; +import { RuntimeContext } from "../useRuntime"; +import { useLatestBlockNumber } from "../useLatestBlock"; +import { blockTxsURL } from "../url"; + +type BlockTransactionHeaderProps = { + blockTag: ethers.providers.BlockTag; +}; + +const BlockTransactionHeader: React.FC = ({ + blockTag, +}) => { + const { provider } = useContext(RuntimeContext); + const latestBlockNumber = useLatestBlockNumber(provider); + + return ( + +
+ Transactions +
+ For Block + + +
+
+ + ); +}; + +export default React.memo(BlockTransactionHeader); diff --git a/src/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx similarity index 76% rename from src/BlockTransactionResults.tsx rename to src/block/BlockTransactionResults.tsx index 74e2783..5937199 100644 --- a/src/BlockTransactionResults.tsx +++ b/src/block/BlockTransactionResults.tsx @@ -1,15 +1,15 @@ import React, { useContext } from "react"; -import ContentFrame from "./ContentFrame"; -import PageControl from "./search/PageControl"; -import ResultHeader from "./search/ResultHeader"; -import PendingResults from "./search/PendingResults"; -import TransactionItem from "./search/TransactionItem"; -import { useFeeToggler } from "./search/useFeeToggler"; -import { RuntimeContext } from "./useRuntime"; -import { SelectionContext, useSelection } from "./useSelection"; -import { useENSCache } from "./useReverseCache"; -import { ProcessedTransaction } from "./types"; -import { PAGE_SIZE } from "./params"; +import ContentFrame from "../ContentFrame"; +import PageControl from "../search/PageControl"; +import ResultHeader from "../search/ResultHeader"; +import PendingResults from "../search/PendingResults"; +import TransactionItem from "../search/TransactionItem"; +import { useFeeToggler } from "../search/useFeeToggler"; +import { RuntimeContext } from "../useRuntime"; +import { SelectionContext, useSelection } from "../useSelection"; +import { useENSCache } from "../useReverseCache"; +import { ProcessedTransaction } from "../types"; +import { PAGE_SIZE } from "../params"; type BlockTransactionResultsProps = { page?: ProcessedTransaction[]; diff --git a/src/block/NavBlock.tsx b/src/block/NavBlock.tsx new file mode 100644 index 0000000..32a1dee --- /dev/null +++ b/src/block/NavBlock.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import { ethers } from "ethers"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faChevronLeft, + faChevronRight, +} from "@fortawesome/free-solid-svg-icons"; +import NavButton from "./NavButton"; + +type NavBlockProps = { + blockNumber: number; + latestBlockNumber: number | undefined; + urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string; +}; + +const NavBlock: React.FC = ({ + blockNumber, + latestBlockNumber, + urlBuilder, +}) => ( +
+ + + + = latestBlockNumber + } + urlBuilder={urlBuilder} + > + + + = latestBlockNumber + } + urlBuilder={urlBuilder} + > + + + +
+); + +export default React.memo(NavBlock); diff --git a/src/components/NavButton.tsx b/src/block/NavButton.tsx similarity index 76% rename from src/components/NavButton.tsx rename to src/block/NavButton.tsx index a9c1a9d..edc85c4 100644 --- a/src/components/NavButton.tsx +++ b/src/block/NavButton.tsx @@ -1,13 +1,17 @@ +import { ethers } from "ethers"; import { NavLink } from "react-router-dom"; +import { blockURL } from "../url"; type NavButtonProps = { blockNum: number; disabled?: boolean; + urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string; }; const NavButton: React.FC = ({ blockNum, disabled, + urlBuilder, children, }) => { if (disabled) { @@ -21,7 +25,7 @@ const NavButton: React.FC = ({ return ( {children} diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx index f9a8866..155553f 100644 --- a/src/components/BlockLink.tsx +++ b/src/components/BlockLink.tsx @@ -1,6 +1,7 @@ import React from "react"; import { NavLink } from "react-router-dom"; import { ethers } from "ethers"; +import { blockURL } from "../url"; type BlockLinkProps = { blockTag: ethers.providers.BlockTag; @@ -18,7 +19,7 @@ const BlockLink: React.FC = ({ blockTag }) => { className={`text-link-blue hover:text-link-blue-hover ${ isNum ? "font-blocknum" : "font-hash" }`} - to={`/block/${blockTag}`} + to={blockURL(blockTag)} > {text} diff --git a/src/url.ts b/src/url.ts index 0586dbe..3807d69 100644 --- a/src/url.ts +++ b/src/url.ts @@ -1,3 +1,5 @@ +import { ethers } from "ethers"; + export const fourBytesURL = ( assetsURLPrefix: string, fourBytes: string @@ -7,3 +9,9 @@ export const tokenLogoURL = ( assetsURLPrefix: string, address: string ): string => `${assetsURLPrefix}/assets/${address}/logo.png`; + +export const blockURL = (blockNum: ethers.providers.BlockTag) => + `/block/${blockNum}`; + +export const blockTxsURL = (blockNum: ethers.providers.BlockTag) => + `/block/${blockNum}/txs`;