chore: import from ethers (#3094)

* chore: rm lodash

* chore: improve styled-components lint

* chore: import from ethers

* fix: use provider JsonRpcProvider

.eslintrc.json

@@ -59,28 +59,24 @@
       {
         "paths": [
           {
-            "name": "lodash",
-            "message": "Please import from 'lodash/module' directly to support tree-shaking."
-          },
-          {
-            "name": "ethers",
-            "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
+            "name": "@lingui/macro",
+            "importNames": ["t"],
+            "message": "Please use <Trans> instead of t."
           },
           {
             "name": "styled-components",
             "message": "Please import from styled-components/macro."
-          },
-          {
-            "name": "@lingui/macro",
-            "importNames": ["t"],
-            "message": "Please use <Trans> instead of t."
           }
         ],
         "patterns": [
           {
             "group": ["**/dist"],
             "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
           },
+          {
+            "group": ["@ethersproject"],
+            "message": "Please import from 'ethers' to support bundling."
+          },
           {
             "group": ["!styled-components/macro"]
           }

cypress/support/commands.js

@@ -4,9 +4,9 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
+// eslint-disable-next-line no-restricted-imports
 import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
-import { JsonRpcProvider } from '@ethersproject/providers'
-import { Wallet } from '@ethersproject/wallet'
+import { providers, Wallet } from 'ethers'
 
 // todo: figure out how env vars actually work in CI
 // const TEST_PRIVATE_KEY = Cypress.env('INTEGRATION_TEST_PRIVATE_KEY')
@@ -81,7 +81,7 @@ Cypress.Commands.overwrite('visit', (original, url, options) => {
     onBeforeLoad(win) {
       options && options.onBeforeLoad && options.onBeforeLoad(win)
       win.localStorage.clear()
-      const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
+      const provider = new providers.JsonRpcProvider('https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
       const signer = new Wallet(TEST_PRIVATE_KEY, provider)
       win.ethereum = new CustomizedBridge(signer, provider)
     },

package.json

@@ -83,7 +83,6 @@
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "ethers": "^5.4.6",
     "firebase": "^9.1.3",
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
@@ -135,7 +134,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=./custom-test-env.js",
-    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
+    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
     "assets:generate": "yarn assets:svg:generate && yarn assets:font:generate",
     "assets:svg:generate": "svgr -d src/lib/assets/svg --ext tsx --typescript src/lib/assets/svg && rm src/lib/assets/svg/index.tsx",
     "assets:font:generate": "sass src/lib/assets/fonts/index.scss src/lib/assets/fonts/index.css --no-source-map -I node_modules",
@@ -157,10 +156,6 @@
   },
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@ethersproject/contracts": "5.4.1",
-    "@ethersproject/hash": "5.4.0",
-    "@ethersproject/address": "5.4.0",
-    "@ethersproject/constants": "5.4.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
     "@lingui/core": "^3.9.0",
@@ -172,9 +167,9 @@
     "@uniswap/token-lists": "^1.0.0-beta.27",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
+    "ethers": "^5.4.6",
     "immer": "^9.0.6",
     "jotai": "^1.3.7",
-    "lodash": "^4.17.21",
     "make-plural": "^7.0.0",
     "multicodec": "^3.0.1",
     "multihashes": "^4.0.2",

src/components/claim/AddressClaimModal.tsx

@@ -1,6 +1,6 @@
-import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { isAddress } from 'ethers/lib/utils'
 import { useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'

src/components/claim/ClaimModal.tsx

@@ -1,6 +1,6 @@
-import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { isAddress } from 'ethers/lib/utils'
 import JSBI from 'jsbi'
 import { useEffect, useState } from 'react'
 import { Text } from 'rebass'

src/components/earn/ClaimRewardModal.tsx

@@ -1,5 +1,5 @@
-import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
+import type { providers } from 'ethers'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -47,7 +47,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
       setAttempting(true)
       await stakingContract
         .getReward({ gasLimit: 350000 })
-        .then((response: TransactionResponse) => {
+        .then((response: providers.TransactionResponse) => {
           addTransaction(response, {
             type: TransactionType.CLAIM,
             recipient: account,

src/components/earn/StakingModal.tsx

@@ -1,7 +1,7 @@
-import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
+import type { providers } from 'ethers'
 import { useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -105,7 +105,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
             signatureData.s,
             { gasLimit: 350000 }
           )
-          .then((response: TransactionResponse) => {
+          .then((response: providers.TransactionResponse) => {
             addTransaction(response, {
               type: TransactionType.DEPOSIT_LIQUIDITY_STAKING,
               token0Address: stakingInfo.tokens[0].address,

src/components/earn/UnstakingModal.tsx

@@ -1,5 +1,5 @@
-import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
+import type { providers } from 'ethers'
 import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
@@ -48,7 +48,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
       setAttempting(true)
       await stakingContract
         .exit({ gasLimit: 300000 })
-        .then((response: TransactionResponse) => {
+        .then((response: providers.TransactionResponse) => {
           addTransaction(response, {
             type: TransactionType.WITHDRAW_LIQUIDITY_STAKING,
             token0Address: stakingInfo.tokens[0].address,

src/components/vote/DelegateModal.tsx

@@ -1,5 +1,5 @@
-import { isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
+import { isAddress } from 'ethers/lib/utils'
 import { ReactNode, useState } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'

src/connectors/index.ts

@@ -1,9 +1,9 @@
-import { Web3Provider } from '@ethersproject/providers'
 import { SafeAppConnector } from '@gnosis.pm/safe-apps-web3-react'
 import { InjectedConnector } from '@web3-react/injected-connector'
 import { PortisConnector } from '@web3-react/portis-connector'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { WalletLinkConnector } from '@web3-react/walletlink-connector'
+import type { providers } from 'ethers'
 
 import UNISWAP_LOGO_URL from '../assets/svg/logo.svg'
 import { ALL_SUPPORTED_CHAIN_IDS, INFURA_NETWORK_URLS, SupportedChainId } from '../constants/chains'
@@ -19,8 +19,8 @@ export const network = new NetworkConnector({
   defaultChainId: 1,
 })
 
-let networkLibrary: Web3Provider | undefined
-export function getNetworkLibrary(): Web3Provider {
+let networkLibrary: providers.Web3Provider | undefined
+export function getNetworkLibrary(): providers.Web3Provider {
   return (networkLibrary = networkLibrary ?? getLibrary(network.provider))
 }
 

src/hooks/Tokens.ts

@@ -1,7 +1,6 @@
-import { arrayify } from '@ethersproject/bytes'
-import { parseBytes32String } from '@ethersproject/strings'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
+import { arrayify, parseBytes32String } from 'ethers/lib/utils'
 import { useMemo } from 'react'
 
 import { createTokenFilterFunction } from '../components/SearchModal/filtering'

src/hooks/useActiveWeb3React.ts

@@ -1,13 +1,13 @@
-import { Web3Provider } from '@ethersproject/providers'
 import { useWeb3React } from '@web3-react/core'
+import { providers } from 'ethers'
 import { default as useWidgetsWeb3React } from 'lib/hooks/useActiveWeb3React'
 
 import { NetworkContextName } from '../constants/misc'
 
 export default function useActiveWeb3React() {
   const widgetsContext = useWidgetsWeb3React()
-  const interfaceContext = useWeb3React<Web3Provider>()
-  const interfaceNetworkContext = useWeb3React<Web3Provider>(
+  const interfaceContext = useWeb3React<providers.Web3Provider>()
+  const interfaceNetworkContext = useWeb3React<providers.Web3Provider>(
     process.env.REACT_APP_IS_WIDGET ? undefined : NetworkContextName
   )
 

src/hooks/useApproveCallback.ts

@@ -1,9 +1,9 @@
-import { MaxUint256 } from '@ethersproject/constants'
-import { TransactionResponse } from '@ethersproject/providers'
 import { Protocol, Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { Pair, Route as V2Route, Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Pool, Route as V3Route, Trade as V3Trade } from '@uniswap/v3-sdk'
+import type { providers } from 'ethers'
+import { constants } from 'ethers'
 import { useCallback, useMemo } from 'react'
 import { getTxOptimizedSwapRouter, SwapRouterVersion } from 'utils/getTxOptimizedSwapRouter'
 
@@ -111,17 +111,17 @@ export function useApproveCallback(
     }
 
     let useExact = false
-    const estimatedGas = await tokenContract.estimateGas.approve(spender, MaxUint256).catch(() => {
+    const estimatedGas = await tokenContract.estimateGas.approve(spender, constants.MaxUint256).catch(() => {
       // general fallback for tokens who restrict approval amounts
       useExact = true
       return tokenContract.estimateGas.approve(spender, amountToApprove.quotient.toString())
     })
 
     return tokenContract
-      .approve(spender, useExact ? amountToApprove.quotient.toString() : MaxUint256, {
+      .approve(spender, useExact ? amountToApprove.quotient.toString() : constants.MaxUint256, {
         gasLimit: calculateGasMargin(estimatedGas),
       })
-      .then((response: TransactionResponse) => {
+      .then((response: providers.TransactionResponse) => {
         addTransaction(response, { type: TransactionType.APPROVAL, tokenAddress: token.address, spender })
       })
       .catch((error: Error) => {

src/hooks/useContract.ts

@@ -1,4 +1,3 @@
-import { Contract } from '@ethersproject/contracts'
 import { abi as GOVERNANCE_ABI } from '@uniswap/governance/build/GovernorAlpha.json'
 import { abi as UNI_ABI } from '@uniswap/governance/build/Uni.json'
 import { abi as STAKING_REWARDS_ABI } from '@uniswap/liquidity-staker/build/StakingRewards.json'
@@ -32,6 +31,7 @@ import {
   V2_ROUTER_ADDRESS,
   V3_MIGRATOR_ADDRESSES,
 } from 'constants/addresses'
+import { Contract } from 'ethers'
 import { useMemo } from 'react'
 import { NonfungiblePositionManager, Quoter, UniswapInterfaceMulticall } from 'types/v3'
 import { V3Migrator } from 'types/v3/V3Migrator'

src/hooks/useCurrentBlockTimestamp.ts

@@ -1,4 +1,4 @@
-import { BigNumber } from '@ethersproject/bignumber'
+import { BigNumber } from 'ethers'
 
 import { useSingleCallResult } from '../state/multicall/hooks'
 import { useInterfaceMulticall } from './useContract'

src/hooks/useENSAvatar.ts

@@ -1,6 +1,5 @@
-import { BigNumber } from '@ethersproject/bignumber'
-import { hexZeroPad } from '@ethersproject/bytes'
-import { namehash } from '@ethersproject/hash'
+import { BigNumber } from 'ethers'
+import { hexZeroPad, namehash } from 'ethers/lib/utils'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { useEffect, useMemo, useState } from 'react'
 import { safeNamehash } from 'utils/safeNamehash'

src/hooks/useENSName.ts

@@ -1,4 +1,4 @@
-import { namehash } from '@ethersproject/hash'
+import { namehash } from 'ethers/lib/utils'
 import { useMemo } from 'react'
 
 import { useSingleCallResult } from '../state/multicall/hooks'

src/hooks/useERC20Permit.ts

@@ -1,8 +1,8 @@
-import { splitSignature } from '@ethersproject/bytes'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
+import { splitSignature } from 'ethers/lib/utils'
 import JSBI from 'jsbi'
 import { useMemo, useState } from 'react'
 

src/hooks/useMonitoringEventCallback.ts

@@ -1,12 +1,12 @@
-import { TransactionResponse } from '@ethersproject/providers'
+import { providers } from 'ethers'
 import { initializeApp } from 'firebase/app'
 import { getDatabase, push, ref } from 'firebase/database'
 import { useCallback } from 'react'
 import { TransactionInfo, TransactionType } from 'state/transactions/actions'
 
 import { useActiveWeb3React } from './web3'
 
-type PartialTransactionResponse = Pick<TransactionResponse, 'hash' | 'v' | 'r' | 's'>
+type PartialTransactionResponse = Pick<providers.TransactionResponse, 'hash' | 'v' | 'r' | 's'>
 
 const SUPPORTED_TRANSACTION_TYPES = [
   TransactionType.ADD_LIQUIDITY_V2_POOL,
@@ -61,7 +61,7 @@ export function useTransactionMonitoringEventCallback() {
   const log = useMonitoringEventCallback()
 
   return useCallback(
-    (info: TransactionInfo, transactionResponse: TransactionResponse) => {
+    (info: TransactionInfo, transactionResponse: providers.TransactionResponse) => {
       if (SUPPORTED_TRANSACTION_TYPES.includes(info.type)) {
         log(TransactionType[info.type], {
           transactionResponse: (({ hash, v, r, s }: PartialTransactionResponse) => ({ hash, v, r, s }))(

src/hooks/usePools.ts

@@ -1,8 +1,8 @@
-import { Interface } from '@ethersproject/abi'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { abi as IUniswapV3PoolStateABI } from '@uniswap/v3-core/artifacts/contracts/interfaces/pool/IUniswapV3PoolState.sol/IUniswapV3PoolState.json'
 import { computePoolAddress } from '@uniswap/v3-sdk'
 import { FeeAmount, Pool } from '@uniswap/v3-sdk'
+import { Interface } from 'ethers/lib/utils'
 import { useMemo } from 'react'
 
 import { V3_CORE_FACTORY_ADDRESSES } from '../constants/addresses'

src/hooks/usePositionTokenURI.ts

@@ -1,4 +1,4 @@
-import { BigNumber } from '@ethersproject/bignumber'
+import { BigNumber } from 'ethers'
 import JSBI from 'jsbi'
 import { useMemo } from 'react'
 

src/hooks/useSwapCallback.tsx

@@ -1,10 +1,10 @@
-import { BigNumber } from '@ethersproject/bignumber'
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { SwapRouter, Trade } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Router as V2SwapRouter, Trade as V2Trade } from '@uniswap/v2-sdk'
 import { SwapRouter as V3SwapRouter, Trade as V3Trade } from '@uniswap/v3-sdk'
+import { BigNumber } from 'ethers'
 import { ReactNode, useMemo } from 'react'
 
 import { SWAP_ROUTER_ADDRESSES, V3_ROUTER_ADDRESS } from '../constants/addresses'

src/hooks/useTotalSupply.ts

@@ -1,5 +1,5 @@
-import { BigNumber } from '@ethersproject/bignumber'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { BigNumber } from 'ethers'
 
 import { useSingleCallResult } from '../state/multicall/hooks'
 import { useTokenContract } from './useContract'

src/hooks/useTransactionDeadline.ts

@@ -1,6 +1,6 @@
-import { BigNumber } from '@ethersproject/bignumber'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { L2_DEADLINE_FROM_NOW } from 'constants/misc'
+import { BigNumber } from 'ethers'
 import { useMemo } from 'react'
 import { useAppSelector } from 'state/hooks'
 

src/hooks/useV2Pairs.ts

@@ -1,7 +1,7 @@
-import { Interface } from '@ethersproject/abi'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 import { computePairAddress, Pair } from '@uniswap/v2-sdk'
+import { Interface } from 'ethers/lib/utils'
 import { useMemo } from 'react'
 
 import { V2_FACTORY_ADDRESSES } from '../constants/addresses'

src/hooks/useV3PositionFees.ts

@@ -1,6 +1,6 @@
-import { BigNumber } from '@ethersproject/bignumber'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { Pool } from '@uniswap/v3-sdk'
+import { BigNumber } from 'ethers'
 import { useEffect, useState } from 'react'
 import { useBlockNumber } from 'state/application/hooks'
 import { useSingleCallResult } from 'state/multicall/hooks'

src/hooks/useV3Positions.ts

@@ -1,4 +1,4 @@
-import { BigNumber } from '@ethersproject/bignumber'
+import { BigNumber } from 'ethers'
 import { useMemo } from 'react'
 import { CallStateResult, useSingleCallResult, useSingleContractMultipleData } from 'state/multicall/hooks'
 import { PositionDetails } from 'types/position'