Bump dependencies (#1529)

* Upgrade Typescript to v4.0.3

* Upgrade dependencies with minor changes

* Cleanup yarn.lock file

* Upgrade types dependencies

* Fix inconsistency with @typescript/eslint caused by react-scripts

* Fix eslint issues

Co-authored-by: nicolas <nicosampler@users.noreply.github.com>

package.json

@@ -148,6 +148,8 @@
     }
   },
   "resolutions": {
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "node-gyp": "^5.1.0"
   },
   "browserslist": {
@@ -172,7 +174,7 @@
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.56",
     "@openzeppelin/contracts": "3.1.0",
-    "@truffle/contract": "4.2.25",
+    "@truffle/contract": "4.2.26",
     "async-sema": "^3.1.0",
     "axios": "0.20.0",
     "bignumber.js": "9.0.1",
@@ -205,12 +207,12 @@
     "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
     "polished": "3.6.7",
     "qrcode.react": "1.0.0",
-    "query-string": "6.13.5",
+    "query-string": "6.13.6",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-final-form": "^6.5.1",
+    "react-final-form": "^6.5.2",
     "react-final-form-listeners": "^1.0.2",
-    "react-ga": "3.1.2",
+    "react-ga": "3.2.0",
     "react-hot-loader": "4.13.0",
     "react-qr-reader": "^2.2.1",
     "react-redux": "7.2.1",
@@ -235,20 +237,20 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "10.4.9",
     "@typechain/web3-v1": "^1.0.0",
     "@types/history": "4.6.2",
-    "@types/jest": "^26.0.14",
+    "@types/jest": "^26.0.15",
     "@types/lodash.memoize": "^4.1.6",
-    "@types/node": "^14.11.8",
-    "@types/react": "^16.9.52",
-    "@types/react-dom": "^16.9.6",
+    "@types/node": "^14.14.5",
+    "@types/react": "^16.9.54",
+    "@types/react-dom": "^16.9.9",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.4",
-    "@typescript-eslint/eslint-plugin": "3.9.1",
-    "@typescript-eslint/parser": "3.9.1",
+    "@typescript-eslint/eslint-plugin": "4.6.0",
+    "@typescript-eslint/parser": "4.6.0",
     "autoprefixer": "9.8.6",
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
@@ -257,21 +259,21 @@
     "electron-builder": "22.8.1",
     "electron-notarize": "1.0.0",
     "eslint": "6.8.0",
-    "eslint-config-prettier": "6.12.0",
+    "eslint-config-prettier": "6.14.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-sort-destructure-keys": "1.3.5",
     "ethereumjs-abi": "0.6.8",
     "husky": "^4.3.0",
-    "lint-staged": "^10.4.0",
+    "lint-staged": "^10.4.2",
     "node-sass": "^4.14.1",
     "prettier": "2.1.2",
     "react-app-rewired": "^2.1.6",
     "react-docgen-typescript-loader": "^3.7.2",
     "typechain": "^2.0.0",
-    "typescript": "3.9.7",
+    "typescript": "4.0.5",
     "wait-on": "5.2.0"
   }
 }

src/components/Collapse/index.tsx

@@ -16,14 +16,14 @@ const Header = styled.div`
   align-items: center;
 `
 
-interface Collapse {
+interface CollapseProps {
   title: React.ReactElement | string
   description?: React.ReactElement | string
   collapseClassName?: string
   headerWrapperClassName?: string
 }
 
-const Collapse: React.FC<Collapse> = ({
+const Collapse: React.FC<CollapseProps> = ({
   children,
   description = null,
   title,

src/logic/safe/store/actions/transactions/fetchTransactions/fetchTransactions.ts

@@ -13,6 +13,8 @@ const getServiceUrl = (txType: string, safeAddress: string): string => {
   }[txType](safeAddress)
 }
 
+// TODO: Remove this magic
+/* eslint-disable */
 async function fetchTransactions(
   txType: TransactionTypes.INCOMING,
   safeAddress: string,
@@ -28,6 +30,7 @@ async function fetchTransactions(
   safeAddress: string,
   eTag: string | null,
 ): Promise<{ eTag: string | null; results: TxServiceModel[] | IncomingTxServiceModel[] }> {
+  /* eslint-enable */
   try {
     const url = getServiceUrl(txType, safeAddress)
     const response = await axios.get(url, eTag ? { headers: { 'If-None-Match': eTag } } : undefined)

src/routes/open/container/Open.tsx

@@ -172,7 +172,7 @@ const Open = (): React.ReactElement => {
   }
 
   const onRetry = async () => {
-    const values = await loadFromStorage<{ txHash: string }>(SAFE_PENDING_CREATION_STORAGE_KEY)
+    const values = await loadFromStorage<{ txHash?: string }>(SAFE_PENDING_CREATION_STORAGE_KEY)
     delete values?.txHash
     await saveToStorage(SAFE_PENDING_CREATION_STORAGE_KEY, values)
     setSafeCreationPendingInfo(values)

src/routes/safe/components/Balances/Tokens/screens/TokenList/index.tsx

@@ -62,7 +62,6 @@ export const TokenList = (props: Props): React.ReactElement => {
 
   const onCancelSearch = () => {
     setFilter('')
-    this.setState(() => ({ filter: '' }))
   }
 
   const onChangeSearchBar = (value: string) => {

src/routes/safe/components/Settings/Advanced/RemoveModuleModal.tsx

@@ -39,12 +39,12 @@ const openIconStyle = {
   color: secondary,
 }
 
-interface RemoveModuleModal {
+interface RemoveModuleModalProps {
   onClose: () => void
   selectedModule: ModulePair
 }
 
-const RemoveModuleModal = ({ onClose, selectedModule }: RemoveModuleModal): React.ReactElement => {
+const RemoveModuleModal = ({ onClose, selectedModule }: RemoveModuleModalProps): React.ReactElement => {
   const classes = useStyles()
 
   const safeAddress = useSelector(safeParamAddressFromStateSelector)