52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
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<NavBlockProps> = ({
|
|
blockNumber,
|
|
latestBlockNumber,
|
|
urlBuilder,
|
|
}) => (
|
|
<div className="pl-2 self-center flex space-x-1">
|
|
<NavButton
|
|
blockNum={blockNumber - 1}
|
|
disabled={blockNumber === 0}
|
|
urlBuilder={urlBuilder}
|
|
>
|
|
<FontAwesomeIcon icon={faChevronLeft} />
|
|
</NavButton>
|
|
<NavButton
|
|
blockNum={blockNumber + 1}
|
|
disabled={
|
|
latestBlockNumber === undefined || blockNumber >= latestBlockNumber
|
|
}
|
|
urlBuilder={urlBuilder}
|
|
>
|
|
<FontAwesomeIcon icon={faChevronRight} />
|
|
</NavButton>
|
|
<NavButton
|
|
blockNum={latestBlockNumber!}
|
|
disabled={
|
|
latestBlockNumber === undefined || blockNumber >= latestBlockNumber
|
|
}
|
|
urlBuilder={urlBuilder}
|
|
>
|
|
<FontAwesomeIcon icon={faChevronRight} />
|
|
<FontAwesomeIcon icon={faChevronRight} />
|
|
</NavButton>
|
|
</div>
|
|
);
|
|
|
|
export default React.memo(NavBlock);
|