Use more specific import to allow ethers tree shaking

src/AddressTransactions.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useContext } from "react";
 import { useParams, useLocation, useHistory } from "react-router-dom";
-import { ethers } from "ethers";
+import { getAddress, isAddress } from "@ethersproject/address";
 import queryString from "query-string";
 import Blockies from "react-blockies";
 import StandardFrame from "./StandardFrame";
@@ -43,12 +43,12 @@ const AddressTransactions: React.FC = () => {
 
   // If it looks like it is an ENS name, try to resolve it
   useEffect(() => {
-    if (ethers.utils.isAddress(params.addressOrName)) {
+    if (isAddress(params.addressOrName)) {
       setENS(false);
       setError(false);
 
       // Normalize to checksummed address
-      const _checksummedAddress = ethers.utils.getAddress(params.addressOrName);
+      const _checksummedAddress = getAddress(params.addressOrName);
       if (_checksummedAddress !== params.addressOrName) {
         // Request came with a non-checksummed address; fix the URL
         history.replace(

src/Block.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useContext } from "react";
 import { useParams, NavLink } from "react-router-dom";
-import { BigNumber, ethers } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
+import { commify } from "@ethersproject/units";
+import { toUtf8String } from "@ethersproject/strings";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
 import StandardFrame from "./StandardFrame";
@@ -38,7 +40,7 @@ const Block: React.FC = () => {
 
   const extraStr = useMemo(() => {
     try {
-      return block && ethers.utils.toUtf8String(block.extraData);
+      return block && toUtf8String(block.extraData);
     } catch (err) {
       console.error("Error while converting block extra data to string");
       console.error(err);
@@ -71,9 +73,7 @@ const Block: React.FC = () => {
       {block && (
         <ContentFrame>
           <InfoRow title="Block Height">
-            <span className="font-bold">
+            <span className="font-bold">{commify(block.number)}</span>
-              {ethers.utils.commify(block.number)}
-            </span>
           </InfoRow>
           <InfoRow title="Timestamp">
             <Timestamp value={block.timestamp} />
@@ -109,9 +109,7 @@ const Block: React.FC = () => {
           <InfoRow title="Uncles Reward">
             <TransactionValue value={block.unclesReward} />
           </InfoRow>
-          <InfoRow title="Size">
+          <InfoRow title="Size">{commify(block.size)} bytes</InfoRow>
-            {ethers.utils.commify(block.size)} bytes
-          </InfoRow>
           {block.baseFeePerGas && (
             <InfoRow title="Base Fee">
               <span>
@@ -156,11 +154,9 @@ const Block: React.FC = () => {
             <span className="font-data">{block.extraData}</span>)
           </InfoRow>
           <InfoRow title="Ether Price">N/A</InfoRow>
-          <InfoRow title="Difficult">
+          <InfoRow title="Difficult">{commify(block.difficulty)}</InfoRow>
-            {ethers.utils.commify(block.difficulty)}
-          </InfoRow>
           <InfoRow title="Total Difficult">
-            {ethers.utils.commify(block.totalDifficulty.toString())}
+            {commify(block.totalDifficulty.toString())}
           </InfoRow>
           <InfoRow title="Hash">
             <HexValue value={block.hash} />

src/BlockTransactions.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useContext } from "react";
 import { useParams, useLocation } from "react-router";
-import { ethers } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
 import queryString from "query-string";
 import StandardFrame from "./StandardFrame";
 import BlockTransactionHeader from "./block/BlockTransactionHeader";
@@ -30,7 +30,7 @@ const BlockTransactions: React.FC = () => {
   }
 
   const blockNumber = useMemo(
-    () => ethers.BigNumber.from(params.blockNumber),
+    () => BigNumber.from(params.blockNumber),
     [params.blockNumber]
   );
 

src/Home.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext } from "react";
 import { NavLink, useHistory } from "react-router-dom";
-import { ethers } from "ethers";
+import { commify } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
 import Logo from "./Logo";
@@ -74,7 +74,7 @@ const Home: React.FC = () => {
             className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
             to={blockURL(latestBlock.number)}
           >
-            <div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
+            <div>Latest block: {commify(latestBlock.number)}</div>
             <Timestamp value={latestBlock.timestamp} />
           </NavLink>
         )}

src/PriceBox.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, useContext } from "react";
-import { ethers } from "ethers";
+import { Contract } from "@ethersproject/contracts";
+import { commify, formatUnits } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGasPump } from "@fortawesome/free-solid-svg-icons/faGasPump";
 import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json";
@@ -19,17 +20,13 @@ const PriceBox: React.FC = () => {
   const ethFeed = useMemo(
     () =>
       provider &&
-      new ethers.Contract("eth-usd.data.eth", AggregatorV3Interface, provider),
+      new Contract("eth-usd.data.eth", AggregatorV3Interface, provider),
     [provider]
   );
   const gasFeed = useMemo(
     () =>
       provider &&
-      new ethers.Contract(
+      new Contract("fast-gas-gwei.data.eth", AggregatorV3Interface, provider),
-        "fast-gas-gwei.data.eth",
-        AggregatorV3Interface,
-        provider
-      ),
     [provider]
   );
 
@@ -57,9 +54,7 @@ const PriceBox: React.FC = () => {
     }
 
     const price = latestPriceData.answer.div(10 ** (ETH_FEED_DECIMALS - 2));
-    const formattedPrice = ethers.utils.commify(
+    const formattedPrice = commify(formatUnits(price, 2));
-      ethers.utils.formatUnits(price, 2)
-    );
 
     const timestamp = new Date(latestPriceData.updatedAt * 1000);
     return [formattedPrice, timestamp];

src/Search.tsx

@@ -1,5 +1,6 @@
 import { useLocation, useHistory } from "react-router-dom";
-import { ethers } from "ethers";
+import { isAddress } from "@ethersproject/address";
+import { isHexString } from "@ethersproject/bytes";
 import queryString from "query-string";
 
 type SearchParams = {
@@ -12,11 +13,11 @@ const Search: React.FC = () => {
 
   const qs = queryString.parse(location.search);
   const q = (qs.q ?? "").toString();
-  if (ethers.utils.isAddress(q)) {
+  if (isAddress(q)) {
     history.replace(`/address/${q}`);
     return <></>;
   }
-  if (ethers.utils.isHexString(q, 32)) {
+  if (isHexString(q, 32)) {
     history.replace(`/tx/${q}`);
     return <></>;
   }

src/block/BlockTransactionHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { ethers } from "ethers";
+import { BlockTag } from "@ethersproject/abstract-provider";
 import StandardSubtitle from "../StandardSubtitle";
 import BlockLink from "../components/BlockLink";
 import NavBlock from "./NavBlock";
@@ -8,7 +8,7 @@ import { useLatestBlockNumber } from "../useLatestBlock";
 import { blockTxsURL } from "../url";
 
 type BlockTransactionHeaderProps = {
-  blockTag: ethers.providers.BlockTag;
+  blockTag: BlockTag;
 };
 
 const BlockTransactionHeader: React.FC<BlockTransactionHeaderProps> = ({

src/block/NavBlock.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ethers } from "ethers";
+import { BlockTag } from "@ethersproject/abstract-provider";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
@@ -8,7 +8,7 @@ import NavButton from "./NavButton";
 type NavBlockProps = {
   blockNumber: number;
   latestBlockNumber: number | undefined;
-  urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
+  urlBuilder?: (blockNumber: BlockTag) => string;
 };
 
 const NavBlock: React.FC<NavBlockProps> = ({

src/block/NavButton.tsx

@@ -1,11 +1,11 @@
-import { ethers } from "ethers";
 import { NavLink } from "react-router-dom";
+import { BlockTag } from "@ethersproject/abstract-provider";
 import { blockURL } from "../url";
 
 type NavButtonProps = {
   blockNum: number;
   disabled?: boolean;
-  urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
+  urlBuilder?: (blockNumber: BlockTag) => string;
 };
 
 const NavButton: React.FC<NavButtonProps> = ({

src/components/BlockLink.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { ethers } from "ethers";
+import { BlockTag } from "@ethersproject/abstract-provider";
+import { commify } from "@ethersproject/units";
 import { blockURL } from "../url";
 
 type BlockLinkProps = {
-  blockTag: ethers.providers.BlockTag;
+  blockTag: BlockTag;
 };
 
 const BlockLink: React.FC<BlockLinkProps> = ({ blockTag }) => {
   const isNum = typeof blockTag === "number";
   let text = blockTag;
   if (isNum) {
-    text = ethers.utils.commify(blockTag);
+    text = commify(blockTag);
   }
 
   return (

src/components/FormattedBalance.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { ethers, BigNumber } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
+import { commify, formatUnits } from "@ethersproject/units";
 
 type FormatterBalanceProps = {
   value: BigNumber;
@@ -10,9 +11,7 @@ const FormattedBalance: React.FC<FormatterBalanceProps> = ({
   value,
   decimals = 18,
 }) => {
-  const formatted = ethers.utils.commify(
+  const formatted = commify(formatUnits(value, decimals));
-    ethers.utils.formatUnits(value, decimals)
-  );
   const stripZeroDec = formatted.endsWith(".0")
     ? formatted.slice(0, formatted.length - 2)
     : formatted;

src/components/GasValue.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { BigNumber, ethers } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
+import { commify, formatUnits } from "@ethersproject/units";
 
 type GasValueProps = {
   value: BigNumber;
 };
 
 const GasValue: React.FC<GasValueProps> = ({ value }) => {
-  return <>{ethers.utils.commify(ethers.utils.formatUnits(value, 0))}</>;
+  return <>{commify(formatUnits(value, 0))}</>;
 };
 
 export default React.memo(GasValue);

src/components/InternalSelfDestruct.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { ethers } from "ethers";
+import { formatEther } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
@@ -48,7 +48,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
           <span className="text-gray-500">
             <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
           </span>
-          <span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
+          <span>{formatEther(internalOp.value)} Ether</span>
           <div className="flex items-baseline">
             <span className="text-gray-500">To</span>
             <AddressHighlighter address={internalOp.to}>

src/components/InternalTransfer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ethers } from "ethers";
+import { formatEther } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
 import AddressHighlighter from "./AddressHighlighter";
@@ -24,7 +24,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
       <span className="text-gray-500">
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
-      <span>{ethers.utils.formatEther(internalOp.value)} Ether</span>
+      <span>{formatEther(internalOp.value)} Ether</span>
       <div className="flex items-baseline">
         <span className="text-gray-500">From</span>
         <AddressHighlighter address={internalOp.from}>

src/components/TransactionValue.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BigNumber } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
 import { formatValue } from "./formatter";
 
 type TransactionValueProps = {

src/components/ValueHighlighter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BigNumber } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
 import { useSelectionContext } from "../useSelection";
 
 type ValueHighlighterProps = React.PropsWithChildren<{

src/components/formatter.ts

@@ -1,9 +1,8 @@
-import { ethers, BigNumber } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
+import { commify, formatUnits } from "@ethersproject/units";
 
 export const formatValue = (value: BigNumber, decimals: number): string => {
-  const formatted = ethers.utils.commify(
+  const formatted = commify(formatUnits(value, decimals));
-    ethers.utils.formatUnits(value, decimals)
-  );
   return formatted.endsWith(".0")
     ? formatted.slice(0, formatted.length - 2)
     : formatted;

src/nodeFunctions.ts

@@ -1,8 +1,9 @@
-import { ethers } from "ethers";
+import { JsonRpcProvider } from "@ethersproject/providers";
+import { getAddress } from "@ethersproject/address";
 import { InternalOperation } from "./types";
 
 export const getInternalOperations = async (
-  provider: ethers.providers.JsonRpcProvider,
+  provider: JsonRpcProvider,
   txHash: string
 ) => {
   const rawTransfers = await provider.send("ots_getInternalOperations", [
@@ -13,8 +14,8 @@ export const getInternalOperations = async (
   for (const t of rawTransfers) {
     _transfers.push({
       type: t.type,
-      from: ethers.utils.getAddress(t.from),
+      from: getAddress(t.from),
-      to: ethers.utils.getAddress(t.to),
+      to: getAddress(t.to),
       value: t.value,
     });
   }

src/search/search.ts

@@ -1,4 +1,4 @@
-import { ethers } from "ethers";
+import { JsonRpcProvider, TransactionResponse } from "@ethersproject/providers";
 import { PAGE_SIZE } from "../params";
 import { ProcessedTransaction, TransactionChunk } from "../types";
 
@@ -26,12 +26,9 @@ export class SearchController {
     }
   }
 
-  private static rawToProcessed = (
+  private static rawToProcessed = (provider: JsonRpcProvider, _rawRes: any) => {
-    provider: ethers.providers.JsonRpcProvider,
+    const _res: TransactionResponse[] = _rawRes.txs.map((t: any) =>
-    _rawRes: any
+      provider.formatter.transactionResponse(t)
-  ) => {
-    const _res: ethers.providers.TransactionResponse[] = _rawRes.txs.map(
-      (t: any) => provider.formatter.transactionResponse(t)
     );
 
     return {
@@ -59,7 +56,7 @@ export class SearchController {
   };
 
   private static async readBackPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     address: string,
     baseBlock: number
   ): Promise<TransactionChunk> {
@@ -72,7 +69,7 @@ export class SearchController {
   }
 
   private static async readForwardPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     address: string,
     baseBlock: number
   ): Promise<TransactionChunk> {
@@ -85,7 +82,7 @@ export class SearchController {
   }
 
   static async firstPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     address: string
   ): Promise<SearchController> {
     const newTxs = await SearchController.readBackPage(provider, address, 0);
@@ -99,7 +96,7 @@ export class SearchController {
   }
 
   static async middlePage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     address: string,
     hash: string,
     next: boolean
@@ -122,7 +119,7 @@ export class SearchController {
   }
 
   static async lastPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     address: string
   ): Promise<SearchController> {
     const newTxs = await SearchController.readForwardPage(provider, address, 0);
@@ -140,7 +137,7 @@ export class SearchController {
   }
 
   async prevPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     hash: string
   ): Promise<SearchController> {
     // Already on this page
@@ -169,7 +166,7 @@ export class SearchController {
   }
 
   async nextPage(
-    provider: ethers.providers.JsonRpcProvider,
+    provider: JsonRpcProvider,
     hash: string
   ): Promise<SearchController> {
     // Already on this page

src/special/london/BlockRow.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { ethers, FixedNumber } from "ethers";
+import { FixedNumber } from "@ethersproject/bignumber";
+import { commify, formatEther } from "@ethersproject/units";
 import BlockLink from "../../components/BlockLink";
 import TimestampAge from "../../components/TimestampAge";
 import { ExtendedBlock } from "../../useErigonHooks";
@@ -34,10 +35,10 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
             : ""
         }`}
       >
-        {ethers.utils.commify(block.gasUsed.toString())}
+        {commify(block.gasUsed.toString())}
       </div>
       <div className="text-right text-gray-400">
-        {ethers.utils.commify(gasTarget.toString())}
+        {commify(gasTarget.toString())}
       </div>
       <div className="text-right">
         <div className="relative">
@@ -52,13 +53,10 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
         </div>
       </div>
       <div className="text-right col-span-2">
-        {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
+        {commify(formatEther(totalReward))} Ether
       </div>
       <div className="text-right col-span-2 line-through text-orange-500">
-        {ethers.utils.commify(
+        {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} Ether
-          ethers.utils.formatEther(block.gasUsed.mul(block.baseFeePerGas!))
-        )}{" "}
-        Ether
       </div>
       <div className="text-right text-gray-400">
         <TimestampAge now={now / 1000} timestamp={block.timestamp} />

src/special/london/Blocks.tsx

@@ -5,7 +5,8 @@ import React, {
   useMemo,
   useCallback,
 } from "react";
-import { ethers, FixedNumber } from "ethers";
+import { Block } from "@ethersproject/abstract-provider";
+import { FixedNumber } from "@ethersproject/bignumber";
 import { Line } from "react-chartjs-2";
 import { Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -29,7 +30,7 @@ const MAX_BLOCK_HISTORY = 20;
 const PREV_BLOCK_COUNT = 15;
 
 type BlocksProps = {
-  latestBlock: ethers.providers.Block;
+  latestBlock: Block;
   targetBlockNumber: number;
 };
 

src/special/london/Countdown.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { ethers } from "ethers";
+import { JsonRpcProvider, Block } from "@ethersproject/providers";
+import { commify } from "@ethersproject/units";
 
 type CountdownProps = {
-  provider: ethers.providers.JsonRpcProvider;
+  provider: JsonRpcProvider;
-  currentBlock: ethers.providers.Block;
+  currentBlock: Block;
   targetBlock: number;
 };
 
@@ -31,12 +32,12 @@ const Countdown: React.FC<CountdownProps> = ({
       <div className="m-auto text-center">
         <h1 className="text-6xl mb-10">London Network Upgrade</h1>
         <h2 className="text-5xl">
-          {ethers.utils.commify(targetBlock - currentBlock.number)}
+          {commify(targetBlock - currentBlock.number)}
         </h2>
         <h6 className="text-sm mb-10">Blocks remaining</h6>
         <h2 className="inline-flex space-x-10 text-base mb-10">
-          <div>Current block: {ethers.utils.commify(currentBlock.number)}</div>
+          <div>Current block: {commify(currentBlock.number)}</div>
-          <div>Target block: {ethers.utils.commify(targetBlock)}</div>
+          <div>Target block: {commify(targetBlock)}</div>
         </h2>
         {targetTimestamp && (
           <div className="text-lg">

src/special/london/chart.ts

@@ -1,4 +1,4 @@
-import { ethers } from "ethers";
+import { commify } from "@ethersproject/units";
 import { ChartData, ChartOptions } from "chart.js";
 import { ExtendedBlock } from "../../useErigonHooks";
 
@@ -14,7 +14,7 @@ export const burntFeesChartOptions: ChartOptions = {
       ticks: {
         callback: function (v) {
           // @ts-ignore
-          return ethers.utils.commify(this.getLabelForValue(v));
+          return commify(this.getLabelForValue(v));
         },
       },
     },
@@ -84,7 +84,7 @@ export const gasChartOptions: ChartOptions = {
       ticks: {
         callback: function (v) {
           // @ts-ignore
-          return ethers.utils.commify(this.getLabelForValue(v));
+          return commify(this.getLabelForValue(v));
         },
       },
     },

src/transaction/Details.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ethers } from "ethers";
+import { formatEther } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@@ -159,7 +159,7 @@ const Details: React.FC<DetailsProps> = ({
       )}
       <InfoRow title="Value">
         <span className="rounded bg-gray-100 px-2 py-1 text-xs">
-          {ethers.utils.formatEther(txData.value)} Ether
+          {formatEther(txData.value)} Ether
         </span>
       </InfoRow>
       <InfoRow

src/types.ts

@@ -1,4 +1,5 @@
-import { ethers, BigNumber } from "ethers";
+import { BigNumber } from "@ethersproject/bignumber";
+import { Log } from "@ethersproject/providers";
 
 export enum ConnectionStatus {
   CONNECTING,
@@ -60,7 +61,7 @@ export type TransactionData = {
   gasLimit: BigNumber;
   nonce: number;
   data: string;
-  logs: ethers.providers.Log[];
+  logs: Log[];
 };
 
 // The VOID...

src/url.ts

@@ -1,4 +1,4 @@
-import { ethers } from "ethers";
+import { BlockTag } from "@ethersproject/abstract-provider";
 
 export const fourBytesURL = (
   assetsURLPrefix: string,
@@ -10,8 +10,6 @@ export const tokenLogoURL = (
   address: string
 ): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
 
-export const blockURL = (blockNum: ethers.providers.BlockTag) =>
+export const blockURL = (blockNum: BlockTag) => `/block/${blockNum}`;
-  `/block/${blockNum}`;
 
-export const blockTxsURL = (blockNum: ethers.providers.BlockTag) =>
+export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`;
-  `/block/${blockNum}/txs`;

src/useErigonHooks.ts

@@ -1,6 +1,10 @@
 import { useState, useEffect } from "react";
-import { ethers, BigNumber } from "ethers";
+import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
-import { BlockWithTransactions } from "@ethersproject/abstract-provider";
+import { JsonRpcProvider } from "@ethersproject/providers";
+import { getAddress } from "@ethersproject/address";
+import { Contract } from "@ethersproject/contracts";
+import { BigNumber } from "@ethersproject/bignumber";
+import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
 import { getInternalOperations } from "./nodeFunctions";
 import {
   TokenMetas,
@@ -15,7 +19,7 @@ import erc20 from "./erc20.json";
 const TRANSFER_TOPIC =
   "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
 
-export interface ExtendedBlock extends ethers.providers.Block {
+export interface ExtendedBlock extends Block {
   blockReward: BigNumber;
   unclesReward: BigNumber;
   feeReward: BigNumber;
@@ -27,11 +31,11 @@ export interface ExtendedBlock extends ethers.providers.Block {
 }
 
 export const readBlock = async (
-  provider: ethers.providers.JsonRpcProvider,
+  provider: JsonRpcProvider,
   blockNumberOrHash: string
 ) => {
   let blockPromise: Promise<any>;
-  if (ethers.utils.isHexString(blockNumberOrHash, 32)) {
+  if (isHexString(blockNumberOrHash, 32)) {
     // TODO: fix
     blockPromise = provider.send("eth_getBlockByHash", [
       blockNumberOrHash,
@@ -65,7 +69,7 @@ export const readBlock = async (
 };
 
 export const useBlockTransactions = (
-  provider: ethers.providers.JsonRpcProvider | undefined,
+  provider: JsonRpcProvider | undefined,
   blockNumber: number,
   pageNumber: number,
   pageSize: number
@@ -129,7 +133,7 @@ export const useBlockTransactions = (
               (op) =>
                 op.type === OperationType.TRANSFER &&
                 res.miner !== undefined &&
-                res.miner === ethers.utils.getAddress(op.to)
+                res.miner === getAddress(op.to)
             ) !== -1
           );
         })
@@ -149,7 +153,7 @@ export const useBlockTransactions = (
 };
 
 export const useBlockData = (
-  provider: ethers.providers.JsonRpcProvider | undefined,
+  provider: JsonRpcProvider | undefined,
   blockNumberOrHash: string
 ) => {
   const [block, setBlock] = useState<ExtendedBlock>();
@@ -169,7 +173,7 @@ export const useBlockData = (
 };
 
 export const useTxData = (
-  provider: ethers.providers.JsonRpcProvider | undefined,
+  provider: JsonRpcProvider | undefined,
   txhash: string
 ): TransactionData | undefined => {
   const [txData, setTxData] = useState<TransactionData>();
@@ -198,12 +202,8 @@ export const useTxData = (
         }
         tokenTransfers.push({
           token: l.address,
-          from: ethers.utils.getAddress(
+          from: getAddress(hexDataSlice(arrayify(l.topics[1]), 12)),
-            ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[1]), 12)
+          to: getAddress(hexDataSlice(arrayify(l.topics[2]), 12)),
-          ),
-          to: ethers.utils.getAddress(
-            ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[2]), 12)
-          ),
           value: BigNumber.from(l.data),
         });
       }
@@ -214,7 +214,7 @@ export const useTxData = (
         if (tokenMetas[t.token]) {
           continue;
         }
-        const erc20Contract = new ethers.Contract(t.token, erc20, provider);
+        const erc20Contract = new Contract(t.token, erc20, provider);
         const [name, symbol, decimals] = await Promise.all([
           erc20Contract.name(),
           erc20Contract.symbol(),
@@ -262,7 +262,7 @@ export const useTxData = (
 };
 
 export const useInternalOperations = (
-  provider: ethers.providers.JsonRpcProvider | undefined,
+  provider: JsonRpcProvider | undefined,
   txData: TransactionData | undefined
 ): InternalOperation[] | undefined => {
   const [intTransfers, setIntTransfers] = useState<InternalOperation[]>();

src/useLatestBlock.ts

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
-import { ethers } from "ethers";
+import { Block } from "@ethersproject/abstract-provider";
+import { JsonRpcProvider } from "@ethersproject/providers";
 
-export const useLatestBlock = (provider?: ethers.providers.JsonRpcProvider) => {
+export const useLatestBlock = (provider?: JsonRpcProvider) => {
-  const [latestBlock, setLatestBlock] = useState<ethers.providers.Block>();
+  const [latestBlock, setLatestBlock] = useState<Block>();
 
   useEffect(() => {
     if (!provider) {
@@ -34,9 +35,7 @@ export const useLatestBlock = (provider?: ethers.providers.JsonRpcProvider) => {
   return latestBlock;
 };
 
-export const useLatestBlockNumber = (
+export const useLatestBlockNumber = (provider?: JsonRpcProvider) => {
-  provider?: ethers.providers.JsonRpcProvider
-) => {
   const [latestBlock, setLatestBlock] = useState<number>();
 
   useEffect(() => {

src/useProvider.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ethers } from "ethers";
+import { JsonRpcProvider, WebSocketProvider } from "@ethersproject/providers";
 import { ConnectionStatus } from "./types";
 import { MIN_API_LEVEL } from "./params";
 
@@ -7,7 +7,7 @@ export const DEFAULT_ERIGON_URL = "http://127.0.0.1:8545";
 
 export const useProvider = (
   erigonURL?: string
-): [ConnectionStatus, ethers.providers.JsonRpcProvider | undefined] => {
+): [ConnectionStatus, JsonRpcProvider | undefined] => {
   const [connStatus, setConnStatus] = useState<ConnectionStatus>(
     ConnectionStatus.CONNECTING
   );
@@ -21,9 +21,7 @@ export const useProvider = (
     }
   }
 
-  const [provider, setProvider] = useState<
+  const [provider, setProvider] = useState<JsonRpcProvider | undefined>();
-    ethers.providers.JsonRpcProvider | undefined
-  >();
   useEffect(() => {
     if (erigonURL === undefined) {
       setConnStatus(ConnectionStatus.NOT_ETH_NODE);
@@ -33,11 +31,11 @@ export const useProvider = (
     setConnStatus(ConnectionStatus.CONNECTING);
 
     const tryToConnect = async () => {
-      let provider: ethers.providers.JsonRpcProvider;
+      let provider: JsonRpcProvider;
       if (erigonURL?.startsWith("ws://") || erigonURL?.startsWith("wss://")) {
-        provider = new ethers.providers.WebSocketProvider(erigonURL);
+        provider = new WebSocketProvider(erigonURL);
       } else {
-        provider = new ethers.providers.JsonRpcProvider(erigonURL);
+        provider = new JsonRpcProvider(erigonURL);
       }
 
       // Check if it is at least a regular ETH node

src/useReverseCache.ts

@@ -1,9 +1,9 @@
 import { useState, useEffect } from "react";
-import { ethers } from "ethers";
+import { JsonRpcProvider } from "@ethersproject/providers";
 import { ENSReverseCache, ProcessedTransaction } from "./types";
 
 export const useENSCache = (
-  provider?: ethers.providers.JsonRpcProvider,
+  provider?: JsonRpcProvider,
   page?: ProcessedTransaction[]
 ) => {
   const [reverseCache, setReverseCache] = useState<ENSReverseCache>();

src/useRuntime.ts

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ethers } from "ethers";
+import { JsonRpcProvider } from "@ethersproject/providers";
 import { OtterscanConfig, useConfig } from "./useConfig";
 import { useProvider } from "./useProvider";
 import { ConnectionStatus } from "./types";
@@ -7,7 +7,7 @@ import { ConnectionStatus } from "./types";
 export type OtterscanRuntime = {
   config?: OtterscanConfig;
   connStatus: ConnectionStatus;
-  provider?: ethers.providers.JsonRpcProvider;
+  provider?: JsonRpcProvider;
 };
 
 export const useRuntime = (): OtterscanRuntime => {