Update to create-react-app v4

Closes #134

.eslintrc

@@ -30,6 +30,8 @@
   },
   "rules": {
     "no-invalid-this": 0,
-    "sort-imports": "error"
+    "sort-imports": "error",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error"]
   }
 }

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -16,8 +16,8 @@
     "@types/react-dom": "^16.9.9",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.1.6",
-    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.24.0",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
     "@web3-react/core": "^6.1.1",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.1.3",
@@ -26,9 +26,9 @@
     "@web3-react/walletlink-connector": "^6.1.6",
     "async-retry": "^1.3.1",
     "classnames": "^2.2.6",
-    "eslint": "^6.8.0",
+    "eslint": "^7.11.0",
     "eslint-config-keep": "git+https://github.com/keep-network/eslint-config-keep.git#0.3.0",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-prettier": "^3.1.2",
     "ethers": "^5.0.19",
@@ -46,7 +46,7 @@
     "react-i18next": "^11.7.3",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.4",
+    "react-scripts": "4.0.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-localstorage-simple": "^2.3.1",

src/components/AssetButton.tsx

@@ -11,11 +11,11 @@ interface Props {
   icon?: string
 }
 
-function AssetButton({ title, to, icon }: Props): ReactElement {
+function AssetButton({ title, to, icon = defaultIcon }: Props): ReactElement {
   return (
     <Link to={to}>
       <button className="asset">
-        <img src={icon ? icon : defaultIcon} alt="icon" />
+        <img src={icon} alt="icon" />
         <span>{title}</span>
       </button>
     </Link>

src/components/ConnectWallet.tsx

@@ -46,7 +46,7 @@ function ConnectWallet({ onClose }: Props): ReactElement {
             onClick={(): void => {
               activate(wallet.connector, undefined, true).catch((error) => {
                 if (error instanceof UnsupportedChainIdError) {
-                  activate(wallet.connector) // a little janky...can't use setError because the connector isn't set
+                  void activate(wallet.connector) // a little janky...can't use setError because the connector isn't set
                 } else {
                   // TODO: handle error
                 }

src/components/PoolInfoCard.tsx

@@ -28,7 +28,7 @@ function PoolInfoCard({ data }: Props): ReactElement {
       : null,
     reserve: data?.reserve
       ? commify(formatBNToString(data.reserve, 18, 2))
-      : null,
+      : "0",
     adminFee: swapFee && adminFee ? `${adminFee} of ${swapFee}` : null,
     volume: data?.volume,
     tokens:

src/components/ReviewDeposit.tsx

@@ -12,19 +12,22 @@ import { isHighPriceImpact } from "../utils/priceImpact"
 import { useSelector } from "react-redux"
 import { useTranslation } from "react-i18next"
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 interface Props {
   onClose: () => void
   onConfirm: () => void
   data: {
-    deposit: Array<{ [key: string]: any }>
-    rates: Array<{ [key: string]: any }>
+    deposit: Array<{ [key: string]: string }>
+    rates: Array<{
+      [key: string]: {
+        name: string
+        rate: string
+      }
+    }>
     shareOfPool: string
     lpToken: string
     priceImpact: BigNumber
   }
 }
-/* eslint-enable @typescript-eslint/no-explicit-any */
 
 function ReviewDeposit({ onClose, onConfirm, data }: Props): ReactElement {
   const { t } = useTranslation()

src/components/ReviewWithdraw.tsx

@@ -3,28 +3,23 @@ import "./ReviewWithdraw.scss"
 import React, { ReactElement, useState } from "react"
 
 import { AppState } from "../state/index"
-import { BigNumber } from "@ethersproject/bignumber"
 import Button from "./Button"
 import { GasPrices } from "../state/user"
 import HighPriceImpactConfirmation from "./HighPriceImpactConfirmation"
+import { ReviewWithdrawData } from "./WithdrawPage"
 import { formatGasToString } from "../utils/gas"
 import { formatSlippageToString } from "../utils/slippage"
 import { isHighPriceImpact } from "../utils/priceImpact"
 import { useSelector } from "react-redux"
 import { useTranslation } from "react-i18next"
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 interface Props {
   onClose: () => void
   onConfirm: () => void
-  data: {
-    withdraw: Array<{ [key: string]: any }>
-    rates: Array<{ [key: string]: any }>
-    priceImpact: BigNumber
-  }
+  data: ReviewWithdrawData
   gas: GasPrices
 }
-/* eslint-enable @typescript-eslint/no-explicit-any */
+
 function ReviewWithdraw({ onClose, onConfirm, data }: Props): ReactElement {
   const { t } = useTranslation()
   const {

src/components/ToastsContainer.tsx

@@ -4,6 +4,6 @@ import React, { ReactElement } from "react"
 
 export default function ToastsContainer({
   children,
-}: React.PropsWithChildren<{}>): ReactElement {
+}: React.PropsWithChildren<unknown>): ReactElement {
   return <div className={"toast-container"}>{children}</div>
 }

src/components/Web3ReactManager/index.tsx

@@ -23,7 +23,7 @@ export default function Web3ReactManager({
   // after eagerly trying injected, if the network connect ever isn't active or in an error state, activate it
   useEffect(() => {
     if (triedEager && !networkActive && !networkError && !active) {
-      activateNetwork(network)
+      void activateNetwork(network)
     }
   }, [triedEager, networkActive, networkError, activateNetwork, active])
 

src/components/Web3Status.tsx

@@ -4,6 +4,7 @@ import React, { ReactElement, useState } from "react"
 
 import ConnectWallet from "./ConnectWallet"
 import Modal from "./Modal"
+import profile from "../assets/icons/profile.svg"
 import { useTranslation } from "react-i18next"
 import { useWeb3React } from "@web3-react/core"
 
@@ -25,7 +26,7 @@ const Web3Status = (): ReactElement => {
             </span>
 
             {/* Link real profile image here */}
-            <img alt="profile" src={require("../assets/icons/profile.svg")} />
+            <img alt="profile" src={profile} />
           </div>
         ) : (
           <div className="noAccount">{t("connectWallet")}</div>

src/connectors/index.ts

@@ -19,6 +19,7 @@ export const network = new NetworkConnector({
   urls: { [NETWORK_CHAIN_ID]: NETWORK_URL },
 })
 
+// eslint-disable-next-line @typescript-eslint/unbound-method
 const { getProvider } = network
 
 let networkLibrary: Web3Provider | undefined

src/hooks/index.ts

@@ -20,7 +20,7 @@ export function useEagerConnect(): boolean {
   const [tried, setTried] = useState(false)
 
   useEffect(() => {
-    injected.isAuthorized().then((isAuthorized) => {
+    void injected.isAuthorized().then((isAuthorized) => {
       if (isAuthorized) {
         activate(injected, undefined, true).catch(() => {
           setTried(true)

src/hooks/useApproveAndDeposit.ts

@@ -4,6 +4,7 @@ import { useAllContracts, useSwapContract } from "./useContract"
 
 import { AppState } from "../state"
 import { BigNumber } from "@ethersproject/bignumber"
+import { Erc20 } from "../../types/ethers-contracts/Erc20"
 import { NumberInputState } from "../utils/numberInputState"
 import checkAndApproveTokenForTrade from "../utils/checkAndApproveTokenForTrade"
 import { getFormattedTimeString } from "../utils/dateTime"
@@ -57,7 +58,7 @@ export function useApproveAndDeposit(
         state.tokenFormState[token.symbol].valueSafe,
       )
       if (spendingValue.isZero()) return
-      const tokenContract = tokenContracts?.[token.symbol]
+      const tokenContract = tokenContracts?.[token.symbol] as Erc20
       if (tokenContract == null) return
       await checkAndApproveTokenForTrade(
         tokenContract,

src/hooks/useApproveAndSwap.ts

@@ -13,6 +13,7 @@ import { useAllContracts, useSwapContract } from "./useContract"
 
 import { AppState } from "../state"
 import { BigNumber } from "@ethersproject/bignumber"
+import { Erc20 } from "../../types/ethers-contracts/Erc20"
 import { NumberInputState } from "../utils/numberInputState"
 import checkAndApproveTokenForTrade from "../utils/checkAndApproveTokenForTrade"
 import { getFormattedTimeString } from "../utils/dateTime"
@@ -64,7 +65,7 @@ export function useApproveAndSwap(
       if (!swapContract) throw new Error("Swap contract is not loaded")
 
       // For each token being deposited, check the allowance and approve it if necessary
-      const tokenContract = tokenContracts?.[state.fromTokenSymbol]
+      const tokenContract = tokenContracts?.[state.fromTokenSymbol] as Erc20
       if (tokenContract == null) return
       const fromToken = TOKENS_MAP[state.fromTokenSymbol]
       await checkAndApproveTokenForTrade(

src/hooks/useContract.ts

@@ -84,7 +84,7 @@ export function useSwapContract(poolName: PoolName): Swap | null {
 export function useLPTokenContract(poolName: PoolName): LpToken | null {
   const swapContract = useSwapContract(poolName)
   const [lpTokenAddress, setLPTokenAddress] = useState("")
-  swapContract
+  void swapContract
     ?.swapStorage()
     .then(({ lpToken }: { lpToken: string }) => setLPTokenAddress(lpToken))
   return useContract(lpTokenAddress, LPTOKEN_ABI) as LpToken

src/hooks/useHistoricalPoolData.ts

@@ -70,21 +70,21 @@ export default function useHistoricalPoolData(
     historicalPoolData,
     setHistoricalPoolData,
   ] = useState<HistoricalPoolDataType | null>(null)
-  const [poolStats, setPoolStats] = useState()
+  const [poolStats, setPoolStats] = useState([])
   const deployedBlock = chainId ? DEPLOYED_BLOCK[chainId] : 0
-  const poolStatsURL = chainId ? POOL_STATS_URL[chainId] : null
+  const poolStatsURL = chainId ? POOL_STATS_URL[chainId] : ""
 
   useEffect(() => {
-    ;(async function (): Promise<void> {
+    void (async function (): Promise<void> {
       let res
       try {
         res = await fetch(`${poolStatsURL}?t=${+new Date()}`)
       } catch {
         return
       }
-      const data = await res.json()
-      if (data?.length) {
-        setPoolStats(data)
+      const data: unknown = await res.json()
+      if (Array.isArray(data)) {
+        setPoolStats(data as [])
       }
     })()
   }, [poolStatsURL])
@@ -197,7 +197,9 @@ export default function useHistoricalPoolData(
           const virtualPriceAtBlock = BigNumber.from(poolStatsDataPoint[1])
           const btcPriceAtBlock = BigNumber.from(poolStatsDataPoint[2])
           const parsedTxLog = tokenContracts.BLPT.interface.parseLog(txLog)
-          const depositBTC = parsedTxLog.args.value.mul(virtualPriceAtBlock)
+          const depositBTC = (parsedTxLog.args.value as BigNumber).mul(
+            virtualPriceAtBlock,
+          )
 
           totalDepositsBTC = totalDepositsBTC.add(depositBTC)
           totalDepositsUSD = totalDepositsUSD.add(
@@ -234,7 +236,9 @@ export default function useHistoricalPoolData(
           const virtualPriceAtBlock = BigNumber.from(poolStatsDataPoint[1])
           const btcPriceAtBlock = BigNumber.from(poolStatsDataPoint[2])
           const parsedTxLog = tokenContracts.BLPT.interface.parseLog(txLog)
-          const withdrawalBTC = parsedTxLog.args.value.mul(virtualPriceAtBlock)
+          const withdrawalBTC = (parsedTxLog.args.value as BigNumber).mul(
+            virtualPriceAtBlock,
+          )
 
           totalWithdrawalsBTC = totalWithdrawalsBTC.add(withdrawalBTC)
           totalWithdrawalsUSD = totalWithdrawalsUSD.add(
@@ -267,7 +271,7 @@ export default function useHistoricalPoolData(
         totalProfitBTC,
       })
     }
-    setData()
+    void setData()
   }, [
     poolName,
     swapContract,

src/hooks/usePoolData.ts

@@ -5,9 +5,11 @@ import { useEffect, useState } from "react"
 
 import ALLOWLIST_ABI from "../constants/abis/allowList.json"
 import { AddressZero } from "@ethersproject/constants"
+import { AllowList } from "../../types/ethers-contracts/AllowList"
 import { AppState } from "../state"
 import { BigNumber } from "@ethersproject/bignumber"
 import LPTOKEN_ABI from "../constants/abis/lpToken.json"
+import { LpToken } from "../../types/ethers-contracts/LpToken"
 import { parseUnits } from "@ethersproject/units"
 import { useActiveWeb3React } from "."
 import { useSelector } from "react-redux"
@@ -71,7 +73,8 @@ export default function usePoolData(
         swapContract == null ||
         tokenContracts == null ||
         tokenPricesUSD == null ||
-        library == null
+        library == null ||
+        account == null
       )
         return
 
@@ -93,13 +96,13 @@ export default function usePoolData(
         LPTOKEN_ABI,
         library,
         account ?? undefined,
-      )
+      ) as LpToken
       const allowlist = getContract(
         allowlistAddress,
         ALLOWLIST_ABI,
         library,
         account ?? undefined,
-      )
+      ) as AllowList
       const [
         userLpTokenBalance,
         userLpTokenMinted,
@@ -243,7 +246,7 @@ export default function usePoolData(
         : null
       setPoolData([poolData, userShareData])
     }
-    getSwapData()
+    void getSwapData()
   }, [
     lastDepositTime,
     lastWithdrawTime,

src/hooks/useTokenFormState.ts

@@ -10,7 +10,6 @@ import { Token } from "../constants"
 interface TokensStateType {
   [token: string]: NumberInputState
 }
-type UpdateTokenStateFnType = (tokenSymbol: string, value: string) => void
 type UpdateTokensStateType = (newState: {
   [token: string]: string | BigNumber
 }) => void