otterscan/src/BlockTransactionHeader.tsx

import React, { useContext } from "react";
import { ethers } from "ethers";
import StandardSubtitle from "./StandardSubtitle";
import BlockLink from "./components/BlockLink";
import NavBlock from "./block/NavBlock";
import { RuntimeContext } from "./useRuntime";
import { useLatestBlockNumber } from "./useLatestBlock";
import { blockTxsURL } from "./url";

type BlockTransactionHeaderProps = {
  blockTag: ethers.providers.BlockTag;
};

const BlockTransactionHeader: React.FC<BlockTransactionHeaderProps> = ({
  blockTag,
}) => {
  const { provider } = useContext(RuntimeContext);
  const latestBlockNumber = useLatestBlockNumber(provider);

  return (
    <StandardSubtitle>
      <div className="flex space-x-1 items-baseline">
        <span>Transactions</span>
        <div className="flex space-x-1 text-sm text-gray-500">
          <span>For Block</span>
          <BlockLink blockTag={blockTag} />
          <NavBlock
            blockNumber={blockTag as number}
            latestBlockNumber={latestBlockNumber}
            urlBuilder={blockTxsURL}
          />
        </div>
      </div>
    </StandardSubtitle>
  );
};

export default React.memo(BlockTransactionHeader);