From 46c229169bee2518a952362d11ab51758a91130b Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sun, 8 Aug 2021 19:49:45 -0300 Subject: [PATCH] Use more specific import to allow ethers tree shaking --- src/AddressTransactions.tsx | 6 ++--- src/Block.tsx | 20 ++++++--------- src/BlockTransactions.tsx | 4 +-- src/Home.tsx | 4 +-- src/PriceBox.tsx | 15 ++++------- src/Search.tsx | 7 ++--- src/block/BlockTransactionHeader.tsx | 4 +-- src/block/NavBlock.tsx | 4 +-- src/block/NavButton.tsx | 4 +-- src/components/BlockLink.tsx | 7 ++--- src/components/FormattedBalance.tsx | 7 +++-- src/components/GasValue.tsx | 5 ++-- src/components/InternalSelfDestruct.tsx | 4 +-- src/components/InternalTransfer.tsx | 4 +-- src/components/TransactionValue.tsx | 2 +- src/components/ValueHighlighter.tsx | 2 +- src/components/formatter.ts | 7 +++-- src/nodeFunctions.ts | 9 ++++--- src/search/search.ts | 25 ++++++++---------- src/special/london/BlockRow.tsx | 14 +++++----- src/special/london/Blocks.tsx | 5 ++-- src/special/london/Countdown.tsx | 13 +++++----- src/special/london/chart.ts | 6 ++--- src/transaction/Details.tsx | 4 +-- src/types.ts | 5 ++-- src/url.ts | 8 +++--- src/useErigonHooks.ts | 34 ++++++++++++------------- src/useLatestBlock.ts | 11 ++++---- src/useProvider.ts | 14 +++++----- src/useReverseCache.ts | 4 +-- src/useRuntime.ts | 4 +-- 31 files changed, 124 insertions(+), 138 deletions(-) diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx index 4727f7c..e79253e 100644 --- a/src/AddressTransactions.tsx +++ b/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( diff --git a/src/Block.tsx b/src/Block.tsx index 735cf03..875d2f4 100644 --- a/src/Block.tsx +++ b/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 && ( - - {ethers.utils.commify(block.number)} - + {commify(block.number)} @@ -109,9 +109,7 @@ const Block: React.FC = () => { - - {ethers.utils.commify(block.size)} bytes - + {commify(block.size)} bytes {block.baseFeePerGas && ( @@ -156,11 +154,9 @@ const Block: React.FC = () => { {block.extraData}) N/A - - {ethers.utils.commify(block.difficulty)} - + {commify(block.difficulty)} - {ethers.utils.commify(block.totalDifficulty.toString())} + {commify(block.totalDifficulty.toString())} diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx index 4835fd3..5a7209f 100644 --- a/src/BlockTransactions.tsx +++ b/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] ); diff --git a/src/Home.tsx b/src/Home.tsx index 9a7bce0..31ecb9a 100644 --- a/src/Home.tsx +++ b/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)} > -
Latest block: {ethers.utils.commify(latestBlock.number)}
+
Latest block: {commify(latestBlock.number)}
)} diff --git a/src/PriceBox.tsx b/src/PriceBox.tsx index e69e323..ad73d06 100644 --- a/src/PriceBox.tsx +++ b/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( - "fast-gas-gwei.data.eth", - AggregatorV3Interface, - provider - ), + new Contract("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( - ethers.utils.formatUnits(price, 2) - ); + const formattedPrice = commify(formatUnits(price, 2)); const timestamp = new Date(latestPriceData.updatedAt * 1000); return [formattedPrice, timestamp]; diff --git a/src/Search.tsx b/src/Search.tsx index 7b5adc3..78dc724 100644 --- a/src/Search.tsx +++ b/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 <>; } diff --git a/src/block/BlockTransactionHeader.tsx b/src/block/BlockTransactionHeader.tsx index a15c463..724cee8 100644 --- a/src/block/BlockTransactionHeader.tsx +++ b/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 = ({ diff --git a/src/block/NavBlock.tsx b/src/block/NavBlock.tsx index b5e0db1..081ec80 100644 --- a/src/block/NavBlock.tsx +++ b/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 = ({ diff --git a/src/block/NavButton.tsx b/src/block/NavButton.tsx index edc85c4..dcdc9a4 100644 --- a/src/block/NavButton.tsx +++ b/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 = ({ diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx index 155553f..fc639a7 100644 --- a/src/components/BlockLink.tsx +++ b/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 = ({ blockTag }) => { const isNum = typeof blockTag === "number"; let text = blockTag; if (isNum) { - text = ethers.utils.commify(blockTag); + text = commify(blockTag); } return ( diff --git a/src/components/FormattedBalance.tsx b/src/components/FormattedBalance.tsx index 1b6e1b3..6f83163 100644 --- a/src/components/FormattedBalance.tsx +++ b/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 = ({ value, decimals = 18, }) => { - const formatted = ethers.utils.commify( - ethers.utils.formatUnits(value, decimals) - ); + const formatted = commify(formatUnits(value, decimals)); const stripZeroDec = formatted.endsWith(".0") ? formatted.slice(0, formatted.length - 2) : formatted; diff --git a/src/components/GasValue.tsx b/src/components/GasValue.tsx index 2b76a05..1a87b0c 100644 --- a/src/components/GasValue.tsx +++ b/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 = ({ value }) => { - return <>{ethers.utils.commify(ethers.utils.formatUnits(value, 0))}; + return <>{commify(formatUnits(value, 0))}; }; export default React.memo(GasValue); diff --git a/src/components/InternalSelfDestruct.tsx b/src/components/InternalSelfDestruct.tsx index b5ed5a1..384ef14 100644 --- a/src/components/InternalSelfDestruct.tsx +++ b/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 = ({ TRANSFER - {ethers.utils.formatEther(internalOp.value)} Ether + {formatEther(internalOp.value)} Ether
To diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx index fb63c7c..b126d6f 100644 --- a/src/components/InternalTransfer.tsx +++ b/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 = ({ TRANSFER - {ethers.utils.formatEther(internalOp.value)} Ether + {formatEther(internalOp.value)} Ether
From diff --git a/src/components/TransactionValue.tsx b/src/components/TransactionValue.tsx index 9b9403c..f403b4a 100644 --- a/src/components/TransactionValue.tsx +++ b/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 = { diff --git a/src/components/ValueHighlighter.tsx b/src/components/ValueHighlighter.tsx index ce26b0e..c15b514 100644 --- a/src/components/ValueHighlighter.tsx +++ b/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<{ diff --git a/src/components/formatter.ts b/src/components/formatter.ts index 3a5a344..c3face8 100644 --- a/src/components/formatter.ts +++ b/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( - ethers.utils.formatUnits(value, decimals) - ); + const formatted = commify(formatUnits(value, decimals)); return formatted.endsWith(".0") ? formatted.slice(0, formatted.length - 2) : formatted; diff --git a/src/nodeFunctions.ts b/src/nodeFunctions.ts index 29bd5d5..5a6f140 100644 --- a/src/nodeFunctions.ts +++ b/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), - to: ethers.utils.getAddress(t.to), + from: getAddress(t.from), + to: getAddress(t.to), value: t.value, }); } diff --git a/src/search/search.ts b/src/search/search.ts index e2d96c7..26af5e2 100644 --- a/src/search/search.ts +++ b/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 = ( - provider: ethers.providers.JsonRpcProvider, - _rawRes: any - ) => { - const _res: ethers.providers.TransactionResponse[] = _rawRes.txs.map( - (t: any) => provider.formatter.transactionResponse(t) + private static rawToProcessed = (provider: JsonRpcProvider, _rawRes: any) => { + const _res: 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 { @@ -72,7 +69,7 @@ export class SearchController { } private static async readForwardPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, address: string, baseBlock: number ): Promise { @@ -85,7 +82,7 @@ export class SearchController { } static async firstPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, address: string ): Promise { 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 { 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 { // Already on this page @@ -169,7 +166,7 @@ export class SearchController { } async nextPage( - provider: ethers.providers.JsonRpcProvider, + provider: JsonRpcProvider, hash: string ): Promise { // Already on this page diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx index f8da89c..8915417 100644 --- a/src/special/london/BlockRow.tsx +++ b/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 = ({ now, block, baseFeeDelta }) => { : "" }`} > - {ethers.utils.commify(block.gasUsed.toString())} + {commify(block.gasUsed.toString())}
- {ethers.utils.commify(gasTarget.toString())} + {commify(gasTarget.toString())}
@@ -52,13 +53,10 @@ const BlockRow: React.FC = ({ now, block, baseFeeDelta }) => {
- {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether + {commify(formatEther(totalReward))} Ether
- {ethers.utils.commify( - ethers.utils.formatEther(block.gasUsed.mul(block.baseFeePerGas!)) - )}{" "} - Ether + {commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} Ether
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index 56268cf..64fcba8 100644 --- a/src/special/london/Blocks.tsx +++ b/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; }; diff --git a/src/special/london/Countdown.tsx b/src/special/london/Countdown.tsx index 718aa22..1c83773 100644 --- a/src/special/london/Countdown.tsx +++ b/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; - currentBlock: ethers.providers.Block; + provider: JsonRpcProvider; + currentBlock: Block; targetBlock: number; }; @@ -31,12 +32,12 @@ const Countdown: React.FC = ({

London Network Upgrade

- {ethers.utils.commify(targetBlock - currentBlock.number)} + {commify(targetBlock - currentBlock.number)}

Blocks remaining

-
Current block: {ethers.utils.commify(currentBlock.number)}
-
Target block: {ethers.utils.commify(targetBlock)}
+
Current block: {commify(currentBlock.number)}
+
Target block: {commify(targetBlock)}

{targetTimestamp && (
diff --git a/src/special/london/chart.ts b/src/special/london/chart.ts index 4ce3de1..8c57fdf 100644 --- a/src/special/london/chart.ts +++ b/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)); }, }, }, diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx index 4aaf000..6a1f4d6 100644 --- a/src/transaction/Details.tsx +++ b/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 = ({ )} - {ethers.utils.formatEther(txData.value)} Ether + {formatEther(txData.value)} Ether `${assetsURLPrefix}/assets/${address}/logo.png`; -export const blockURL = (blockNum: ethers.providers.BlockTag) => - `/block/${blockNum}`; +export const blockURL = (blockNum: BlockTag) => `/block/${blockNum}`; -export const blockTxsURL = (blockNum: ethers.providers.BlockTag) => - `/block/${blockNum}/txs`; +export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`; diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts index 0c9c7c5..4067f4c 100644 --- a/src/useErigonHooks.ts +++ b/src/useErigonHooks.ts @@ -1,6 +1,10 @@ import { useState, useEffect } from "react"; -import { ethers, BigNumber } from "ethers"; -import { BlockWithTransactions } from "@ethersproject/abstract-provider"; +import { Block, 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; - 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(); @@ -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(); @@ -198,12 +202,8 @@ export const useTxData = ( } tokenTransfers.push({ token: l.address, - from: ethers.utils.getAddress( - ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[1]), 12) - ), - to: ethers.utils.getAddress( - ethers.utils.hexDataSlice(ethers.utils.arrayify(l.topics[2]), 12) - ), + from: getAddress(hexDataSlice(arrayify(l.topics[1]), 12)), + to: getAddress(hexDataSlice(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(); diff --git a/src/useLatestBlock.ts b/src/useLatestBlock.ts index 5ed444b..a38a4ef 100644 --- a/src/useLatestBlock.ts +++ b/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) => { - const [latestBlock, setLatestBlock] = useState(); +export const useLatestBlock = (provider?: JsonRpcProvider) => { + const [latestBlock, setLatestBlock] = useState(); useEffect(() => { if (!provider) { @@ -34,9 +35,7 @@ export const useLatestBlock = (provider?: ethers.providers.JsonRpcProvider) => { return latestBlock; }; -export const useLatestBlockNumber = ( - provider?: ethers.providers.JsonRpcProvider -) => { +export const useLatestBlockNumber = (provider?: JsonRpcProvider) => { const [latestBlock, setLatestBlock] = useState(); useEffect(() => { diff --git a/src/useProvider.ts b/src/useProvider.ts index 183f51f..7f89f36 100644 --- a/src/useProvider.ts +++ b/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.CONNECTING ); @@ -21,9 +21,7 @@ export const useProvider = ( } } - const [provider, setProvider] = useState< - ethers.providers.JsonRpcProvider | undefined - >(); + const [provider, setProvider] = useState(); 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 diff --git a/src/useReverseCache.ts b/src/useReverseCache.ts index 4188904..86c6472 100644 --- a/src/useReverseCache.ts +++ b/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(); diff --git a/src/useRuntime.ts b/src/useRuntime.ts index 77fef72..4573e84 100644 --- a/src/useRuntime.ts +++ b/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 => {