perf: import @ethersproject directly to enforce modularization (#2424)

* perf: import @ethersproject directly for modularization

* chore: update @davatar/react@1.6.0

* fix: lockfile

.eslintrc.json

@@ -44,6 +44,10 @@
           {
             "name": "styled-components",
             "message": "Please import from styled-components/macro."
+          },
+          {
+            "name": "ethers",
+            "message": "Please import from @ethersproject."
           }
         ],
         "patterns": ["!styled-components/macro"]

package.json

@@ -4,7 +4,7 @@
   "homepage": ".",
   "private": true,
   "devDependencies": {
-    "@davatar/react": "1.1.0",
+    "@davatar/react": "1.6.0",
     "@ethersproject/experimental": "^5.4.0",
     "@gnosis.pm/safe-apps-web3-react": "^0.6.0",
     "@graphql-codegen/cli": "1.21.5",

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/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/hooks/Tokens.ts

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

src/hooks/useCurrentBlockTimestamp.ts

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

src/hooks/useENSAddress.ts

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

src/hooks/useENSContentHash.ts

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

src/hooks/useENSName.ts

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

src/hooks/useERC20Permit.ts

@@ -1,7 +1,7 @@
+import { splitSignature } from '@ethersproject/bytes'
 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/usePositionTokenURI.ts

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

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/pages/CreateProposal/index.tsx

@@ -1,10 +1,10 @@
-import { getAddress } from '@ethersproject/address'
+import { defaultAbiCoder } from '@ethersproject/abi'
+import { getAddress, isAddress } from '@ethersproject/address'
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { ButtonError } from 'components/Button'
 import { BlueCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { utils } from 'ethers'
 import { useActiveWeb3React } from 'hooks/web3'
 import JSBI from 'jsbi'
 import { Wrapper } from 'pages/Pool/styleds'
@@ -162,7 +162,7 @@ export default function CreateProposal() {
     () =>
       Boolean(
         !proposalAction ||
-          !utils.isAddress(toAddressValue) ||
+          !isAddress(toAddressValue) ||
           !currencyValue?.isToken ||
           amountValue === '' ||
           titleValue === '' ||
@@ -214,7 +214,7 @@ ${bodyValue}
 
     createProposalData.calldatas = []
     for (let i = 0; i < createProposalData.signatures.length; i++) {
-      createProposalData.calldatas[i] = utils.defaultAbiCoder.encode(types[i], values[i])
+      createProposalData.calldatas[i] = defaultAbiCoder.encode(types[i], values[i])
     }
 
     const hash = await createProposalCallback(createProposalData ?? undefined)?.catch(() => {

src/pages/Vote/VotePage.tsx

@@ -1,6 +1,6 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { t, Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { BigNumber } from 'ethers'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import JSBI from 'jsbi'
 import { DateTime } from 'luxon'

src/state/governance/hooks.ts

@@ -1,18 +1,13 @@
+import { defaultAbiCoder, Interface } from '@ethersproject/abi'
+import { isAddress } from '@ethersproject/address'
+import { Contract } from '@ethersproject/contracts'
 import { TransactionResponse } from '@ethersproject/providers'
+import { toUtf8String, Utf8ErrorFuncs, Utf8ErrorReason } from '@ethersproject/strings'
+import { formatUnits } from '@ethersproject/units'
 import { t } from '@lingui/macro'
 import { abi as GOV_ABI } from '@uniswap/governance/build/GovernorAlpha.json'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { UNISWAP_GRANTS_PROPOSAL_DESCRIPTION } from 'constants/proposals/uniswap_grants_proposal_description'
-import { Contract } from 'ethers'
-import {
-  defaultAbiCoder,
-  formatUnits,
-  Interface,
-  isAddress,
-  toUtf8String,
-  Utf8ErrorFuncs,
-  Utf8ErrorReason,
-} from 'ethers/lib/utils'
 import {
   useGovernanceBravoContract,
   useGovernanceV0Contract,

src/utils/addNetwork.ts

@@ -1,6 +1,7 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { hexStripZeros } from '@ethersproject/bytes'
 import { Web3Provider } from '@ethersproject/providers'
 import { L1ChainInfo, L2ChainInfo, SupportedChainId } from 'constants/chains'
-import { BigNumber, utils } from 'ethers'
 
 interface AddNetworkArguments {
   library: Web3Provider
@@ -14,7 +15,7 @@ export async function addNetwork({ library, chainId, info }: AddNetworkArguments
   if (!library?.provider?.request) {
     return
   }
-  const formattedChainId = utils.hexStripZeros(BigNumber.from(chainId).toHexString())
+  const formattedChainId = hexStripZeros(BigNumber.from(chainId).toHexString())
   try {
     await library?.provider.request({
       method: 'wallet_addEthereumChain',

src/utils/computeUniCirculation.test.ts

@@ -1,5 +1,5 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { BigNumber } from 'ethers'
 import JSBI from 'jsbi'
 
 import { ZERO_ADDRESS } from '../constants/misc'

src/utils/computeUniCirculation.ts

@@ -1,5 +1,5 @@
+import { BigNumber } from '@ethersproject/bignumber'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { BigNumber } from 'ethers'
 import JSBI from 'jsbi'
 
 import { STAKING_GENESIS } from '../state/stake/hooks'

src/utils/resolveENSContentHash.ts

@@ -1,6 +1,6 @@
 import { Provider } from '@ethersproject/abstract-provider'
 import { Contract } from '@ethersproject/contracts'
-import { namehash } from 'ethers/lib/utils'
+import { namehash } from '@ethersproject/hash'
 
 const REGISTRAR_ABI = [
   {

src/utils/switchToNetwork.ts

@@ -1,6 +1,7 @@
+import { BigNumber } from '@ethersproject/bignumber'
+import { hexStripZeros } from '@ethersproject/bytes'
 import { Web3Provider } from '@ethersproject/providers'
 import { CHAIN_INFO, SupportedChainId } from 'constants/chains'
-import { BigNumber, utils } from 'ethers'
 
 import { addNetwork } from './addNetwork'
 
@@ -18,7 +19,7 @@ export async function switchToNetwork({ library, chainId }: SwitchNetworkArgumen
   if (!chainId && library?.getNetwork) {
     ;({ chainId } = await library.getNetwork())
   }
-  const formattedChainId = utils.hexStripZeros(BigNumber.from(chainId).toHexString())
+  const formattedChainId = hexStripZeros(BigNumber.from(chainId).toHexString())
   try {
     await library?.provider.request({
       method: 'wallet_switchEthereumChain',

yarn.lock

@@ -1384,14 +1384,16 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@davatar/react@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@davatar/react/-/react-1.1.0.tgz#8fdeee6ebecd8da3e7c7d1de0df5db60919517c6"
-  integrity sha512-TYgLp3xDl5+jPRK9HO7viegl9o98MKquJK0HRP3iUycePEMag/z5nSQKiwtQaUh+dJZtuPkq2FjkHdIyw8qAPQ==
+"@davatar/react@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@davatar/react/-/react-1.6.0.tgz#5bcff32ae4cf79398e86bc58a1596301f72c8e9f"
+  integrity sha512-C0AM4NWkE6lNAtc2ItD4yApnumj8WzpViIpr58ofDqv7dSBf9CPiZY42OrwZkIGN+UC+k2tNtUEmbneF2L2LaA==
   dependencies:
+    "@ethersproject/providers" "^5.4.5"
+    "@types/react-blockies" "^1.4.1"
     color "^3.2.1"
-    ethers "^5.4.6"
     mersenne-twister "^1.1.0"
+    react-blockies "^1.4.1"
 
 "@emotion/cache@^10.0.27":
   version "10.0.29"
@@ -1724,7 +1726,7 @@
   dependencies:
     "@ethersproject/logger" "^5.4.0"
 
-"@ethersproject/providers@5.4.5":
+"@ethersproject/providers@5.4.5", "@ethersproject/providers@^5.4.5":
   version "5.4.5"
   resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.4.5.tgz#eb2ea2a743a8115f79604a8157233a3a2c832928"
   integrity sha512-1GkrvkiAw3Fj28cwi1Sqm8ED1RtERtpdXmRfwIBGmqBSN5MoeRUHuwHPppMtbPayPgpFcvD7/Gdc9doO5fGYgw==
@@ -3754,6 +3756,13 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
+"@types/react-blockies@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@types/react-blockies/-/react-blockies-1.4.1.tgz#d5f6fff8ece3e90f2e7708f8f3156c87333312df"
+  integrity sha512-aDX0g0hwzdodkGLSDNUQr6gXxwclGjnhS8jhsR8uQhAfe/7i3GZD/NDcSlQ2SiQiLhfRxX3NlY+nvBwf5Y0tTg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@>=16.9.0", "@types/react-dom@^17.0.1":
   version "17.0.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
@@ -15398,7 +15407,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -15642,6 +15651,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-blockies@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-blockies/-/react-blockies-1.4.1.tgz#d4f0faf95ac197213a297a370a4d7f77ea3d0b08"
+  integrity sha512-4N015X5oPNnD3xQPsiqolOFzPZSSWyc5mJhJUZShUCHtiGUxVN+1qsWTcglkHMNySux9hUofaispqcw9QkWP5Q==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-clientside-effect@^1.2.2:
   version "1.2.5"
   resolved "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz"
@@ -18355,9 +18371,9 @@ typical@^2.6.0, typical@^2.6.1:
   resolved "https://registry.yarnpkg.com/typical/-/typical-2.6.1.tgz#5c080e5d661cbbe38259d2e70a3c7253e873881d"
   integrity sha1-XAgOXWYcu+OCWdLnCjxyU+hziB0=
 
-ua-parser-js@^0.7.28:
+ua-parser-js@^0.7.18, ua-parser-js@^0.7.28:
   version "0.7.28"
-  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
   integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
 
 uint8arrays@^2.1.3: