Upgrade dependencies (#1691)

* Upgrade dependencies without breaking changes

* Upgrade react-scripts to v4

* Use import instead of require in icons

* Update styles dependencies

* Remove react-app-rewired as is deprecated and not needed anymore

* Update prettier and testing-library/react dependencies

* Upgrade @ledger for desktop app

* Fix types in fetchSafeTokens test

* Use rescripts to remove ESLint plugin from react-scripts webpack

* Disable travis cache

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

.gitignore

@@ -3,6 +3,7 @@
 .DS_Store
 yarn-error.log
 .env*
+.eslintcache
 /.idea
 dist
 electron-builder.yml

.rescriptsrc

@@ -0,0 +1 @@
+module.exports = [require.resolve('./scripts/rescripts/webpack.js')]

.travis.yml

@@ -43,7 +43,8 @@ matrix:
         - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_EWC}
       if: (branch = master AND NOT type = pull_request) OR tag IS present
 cache:
-  yarn: true
+  npm: false
+  yarn: false
 before_script:
   - if [[ -n "$TRAVIS_TAG" ]]; then export REACT_APP_ENV='production'; fi;
   - if [ $TRAVIS_PULL_REQUEST != "false" ]; then export PUBLIC_URL="/${REACT_APP_NETWORK}/app"; fi;

config-overrides.js

@@ -1,14 +0,0 @@
-const webpack = require('webpack')
-
-module.exports = function override(config) {
-  if (!config.plugins) {
-    config.plugins = []
-  }
-  config.plugins.push(
-    new webpack.ContextReplacementPlugin(/@truffle\/(contract|interface-adapter)/, (data) => {
-      delete data.dependencies[0].critical
-      return data
-    }),
-  )
-  return config
-}

package.json

@@ -16,13 +16,12 @@
     "email": "safe@gnosis.io"
   },
   "main": "public/electron.js",
-  "postinstall": "patch-package electron-builder install-app-deps",
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "build-desktop": "cross-env REACT_APP_BUILD_FOR_DESKTOP=true REACT_APP_ENV=production yarn build-mainnet",
     "build-mainnet": "cross-env REACT_APP_NETWORK=mainnet yarn build",
-    "build": "cross-env REACT_APP_APP_VERSION=$npm_package_version react-app-rewired --max-old-space-size=8192 build",
-    "eject": "react-app-rewired eject",
+    "build": "cross-env REACT_APP_APP_VERSION=$npm_package_version rescripts --max-old-space-size=8192 build",
+    "eject": "rescripts eject",
     "electron-build": "electron-builder --mac --windows --linux",
     "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
     "format:staged": "lint-staged",
@@ -38,8 +37,8 @@
     "prettier": "prettier './src/**/*.{js,jsx,ts,tsx}'",
     "release": "electron-builder --mac --linux --windows -p always",
     "start-mainnet": "REACT_APP_NETWORK=mainnet yarn start",
-    "start": "react-app-rewired start",
-    "test": "react-app-rewired test --env=jsdom",
+    "start": "rescripts start",
+    "test": "rescripts test --env=jsdom",
     "test:coverage": "yarn test --coverage --watchAll=false",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "storybook": "start-storybook -p 9009 -s public",
@@ -150,9 +149,7 @@
     }
   },
   "resolutions": {
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "node-gyp": "^7.1.0"
+    "sass-loader": "^9.0.0"
   },
   "browserslist": {
     "production": [
@@ -171,18 +168,18 @@
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
     "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#ff29c3c",
     "@gnosis.pm/util-contracts": "2.0.6",
-    "@ledgerhq/hw-transport-node-hid-singleton": "5.30.0",
-    "@material-ui/core": "4.11.0",
+    "@ledgerhq/hw-transport-node-hid-singleton": "5.34.0",
+    "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.56",
     "@openzeppelin/contracts": "3.1.0",
-    "@sentry/react": "^5.27.0",
-    "@sentry/tracing": "^5.27.0",
+    "@sentry/react": "^5.28.0",
+    "@sentry/tracing": "^5.28.0",
     "@truffle/contract": "4.2.30",
     "async-sema": "^3.1.0",
     "axios": "0.21.0",
     "bignumber.js": "9.0.1",
-    "bnc-onboard": "1.14.0",
+    "bnc-onboard": "^1.16.1",
     "classnames": "^2.2.6",
     "concurrently": "^5.3.0",
     "connected-react-router": "6.8.0",
@@ -220,7 +217,7 @@
     "react-qr-reader": "^2.2.1",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.1",
     "react-window": "^1.8.6",
     "recompose": "^0.30.0",
     "redux": "4.0.5",
@@ -235,34 +232,35 @@
     "web3-utils": "^1.2.11"
   },
   "devDependencies": {
+    "@rescripts/cli": "^0.0.14",
     "@sentry/cli": "^1.59.0",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-create-react-app": "^3.1.5",
     "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "5.11.5",
-    "@testing-library/react": "10.4.9",
+    "@testing-library/jest-dom": "5.11.6",
+    "@testing-library/react": "11.2.2",
     "@typechain/web3-v1": "^1.0.0",
     "@types/history": "4.6.2",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^26.0.16",
     "@types/lodash.memoize": "^4.1.6",
-    "@types/node": "^14.14.6",
+    "@types/node": "^14.14.10",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.4",
-    "@typescript-eslint/eslint-plugin": "4.6.1",
-    "@typescript-eslint/parser": "4.6.1",
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/parser": "^4.6.0",
     "autoprefixer": "9.8.6",
-    "cross-env": "^7.0.2",
+    "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "dotenv-expand": "^5.1.0",
-    "electron": "^9.3.3",
+    "electron": "^9.3.5",
     "electron-builder": "22.9.1",
     "electron-notarize": "1.0.0",
-    "eslint": "6.8.0",
+    "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.14.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.3.1",
@@ -271,12 +269,11 @@
     "eslint-plugin-sort-destructure-keys": "^1.3.5",
     "ethereumjs-abi": "0.6.8",
     "husky": "^4.3.0",
-    "lint-staged": "^10.5.1",
-    "node-sass": "^4.14.1",
+    "lint-staged": "^10.5.2",
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.1.2",
-    "react-app-rewired": "^2.1.6",
+    "prettier": "^2.2.0",
+    "sass": "^1.29.0",
     "typechain": "^4.0.0",
     "typescript": "4.0.5",
     "wait-on": "5.2.0"

scripts/rescripts/webpack.js

@@ -0,0 +1,6 @@
+const { removeWebpackPlugin } = require('@rescripts/utilities')
+
+module.exports = config => {
+  const webpackWithoutEsLint = removeWebpackPlugin('ESLintWebpackPlugin', config)
+  return webpackWithoutEsLint
+}

src/components/AppLayout/Header/components/KeyRing.tsx

@@ -1,13 +1,13 @@
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import Dot from '@material-ui/icons/FiberManualRecord'
-import * as React from 'react'
+import React, { ReactElement } from 'react'
 
 import Block from 'src/components/layout/Block'
 import Img from 'src/components/layout/Img'
 import { border, fancy, screenSm, warning } from 'src/theme/variables'
 
-const key = require('../assets/key.svg')
-const triangle = require('../assets/triangle.svg')
+import KeyIcon from '../assets/key.svg'
+import TriangleIcon from '../assets/triangle.svg'
 
 const styles = createStyles({
   root: {
@@ -71,12 +71,12 @@ export const KeyRing = ({
   hideDot = false,
   keySize,
   mode,
-}: Props): React.ReactElement => {
+}: Props): ReactElement => {
   const classes = useStyles(styles)
   const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
   const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight, mode)
   const isWarning = mode === 'warning'
-  const img = isWarning ? triangle : key
+  const img = isWarning ? TriangleIcon : KeyIcon
 
   return (
     <>

src/components/AppLayout/Header/components/Layout.tsx

@@ -15,7 +15,7 @@ import Img from 'src/components/layout/Img'
 import Row from 'src/components/layout/Row'
 import { border, headerHeight, md, screenSm, sm } from 'src/theme/variables'
 
-const logo = require('../assets/gnosis-safe-multisig-logo.svg')
+import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
 
 const styles = () => ({
   root: {
@@ -59,7 +59,7 @@ const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInf
   <Row className={classes.summary}>
     <Col className={classes.logo} middle="xs" start="xs">
       <Link to="/">
-        <Img alt="Gnosis Team Safe" height={36} src={logo} testId="heading-gnosis-logo" />
+        <Img alt="Gnosis Team Safe" height={36} src={SafeLogo} testId="heading-gnosis-logo" />
       </Link>
     </Col>
     <Spacer />

src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx

@@ -19,7 +19,7 @@ import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
 import { CircleDot } from '../CircleDot'
 import { createStyles } from '@material-ui/core'
 
-const walletIcon = require('../../assets/wallet.svg')
+import WalletIcon from '../../assets/wallet.svg'
 
 const styles = createStyles({
   container: {
@@ -150,7 +150,7 @@ export const UserDetails = ({
           Wallet
         </Paragraph>
         <Spacer />
-        <Img alt="Wallet icon" className={classes.logo} height={14} src={walletIcon} />
+        <Img alt="Wallet icon" className={classes.logo} height={14} src={WalletIcon} />
         <Paragraph align="right" className={classes.labels} noMargin weight="bolder">
           {upperFirst(provider)}
         </Paragraph>

src/logic/currencyValues/__tests__/fetchSafeTokens.test.ts

@@ -1,7 +1,10 @@
 import axios from 'axios'
 
 import { getSafeServiceBaseUrl } from 'src/config'
-import { fetchTokenCurrenciesBalances } from 'src/logic/currencyValues/api/fetchTokenCurrenciesBalances'
+import {
+  fetchTokenCurrenciesBalances,
+  BalanceEndpoint,
+} from 'src/logic/currencyValues/api/fetchTokenCurrenciesBalances'
 import { aNewStore } from 'src/store'
 
 jest.mock('axios')
@@ -20,8 +23,7 @@ describe('fetchTokenCurrenciesBalances', () => {
     // given
     const expectedResult = [
       {
-        tokenAddress: null,
-        token: null,
+        tokenAddress: '',
         balance: '849890000000000000',
         fiatBalance: '337.2449',
         fiatConversion: '396.81',
@@ -30,6 +32,8 @@ describe('fetchTokenCurrenciesBalances', () => {
       {
         tokenAddress: '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa',
         token: {
+          address: '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa',
+          balance: '24698677800000000000',
           name: 'Dai',
           symbol: 'DAI',
           decimals: 18,
@@ -41,10 +45,11 @@ describe('fetchTokenCurrenciesBalances', () => {
         fiatCode: 'USD',
       },
     ]
+
     const apiUrl = getSafeServiceBaseUrl(safeAddress)
 
     // @ts-ignore
-    axios.get.mockImplementationOnce(() => Promise.resolve(expectedResult))
+    axios.get.mockImplementationOnce(() => Promise.resolve({ data: expectedResult }))
 
     // when
     const result = await fetchTokenCurrenciesBalances(safeAddress, excludeSpamTokens)

src/logic/currencyValues/api/fetchCurrenciesRates.ts

@@ -14,9 +14,9 @@ const fetchCurrenciesRates = async (
   let rate = 0
   if (sameString(targetCurrencyValue, AVAILABLE_CURRENCIES.NETWORK)) {
     try {
-      const result = await fetchTokenCurrenciesBalances(safeAddress)
-      if (result?.data?.length) {
-        rate = new BigNumber(1).div(result.data[0].fiatConversion).toNumber()
+      const tokenCurrenciesBalances = await fetchTokenCurrenciesBalances(safeAddress)
+      if (tokenCurrenciesBalances?.length) {
+        rate = new BigNumber(1).div(tokenCurrenciesBalances[0].fiatConversion).toNumber()
       }
     } catch (error) {
       console.error(`Fetching ${AVAILABLE_CURRENCIES.NETWORK} data from the relayer errored`, error)

src/logic/currencyValues/api/fetchTokenCurrenciesBalances.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosResponse } from 'axios'
+import axios from 'axios'
 
 import { getSafeServiceBaseUrl } from 'src/config'
 import { TokenProps } from 'src/logic/tokens/store/model/token'
@@ -15,8 +15,8 @@ export type BalanceEndpoint = {
 export const fetchTokenCurrenciesBalances = (
   safeAddress: string,
   excludeSpamTokens = true,
-): Promise<AxiosResponse<BalanceEndpoint[]>> => {
+): Promise<BalanceEndpoint[]> => {
   const url = `${getSafeServiceBaseUrl(safeAddress)}/balances/usd/?exclude_spam=${excludeSpamTokens}`
 
-  return axios.get(url)
+  return axios.get(url).then(({ data }) => data)
 }

src/logic/tokens/store/actions/fetchSafeTokens.ts

@@ -77,14 +77,14 @@ const fetchSafeTokens = (safeAddress: string) => async (
       return
     }
 
-    const result = await backOff(() => fetchTokenCurrenciesBalances(safeAddress))
+    const tokenCurrenciesBalances = await backOff(() => fetchTokenCurrenciesBalances(safeAddress))
     const currentEthBalance = safeEthBalanceSelector(state)
     const safeBalances = safeBalancesSelector(state)
     const alreadyActiveTokens = safeActiveTokensSelector(state)
     const blacklistedTokens = safeBlacklistedTokensSelector(state)
     const currencyValues = currencyValuesSelector(state)
 
-    const { balances, currencyList, ethBalance, tokens } = result.data.reduce<ExtractedData>(
+    const { balances, currencyList, ethBalance, tokens } = tokenCurrenciesBalances.reduce<ExtractedData>(
       extractDataFromResult(currentTokens),
       {
         balances: Map(),

src/routes/opening/index.tsx

@@ -16,10 +16,10 @@ import { background, connected } from 'src/theme/variables'
 import { providerNameSelector } from 'src/logic/wallets/store/selectors'
 import { useSelector } from 'react-redux'
 
-const loaderDotsSvg = require('./assets/loader-dots.svg')
-const successSvg = require('./assets/success.svg')
-const vaultErrorSvg = require('./assets/vault-error.svg')
-const vaultSvg = require('./assets/vault.svg')
+import LoaderDotsSvg from './assets/loader-dots.svg'
+import SuccessSvg from './assets/success.svg'
+import VaultErrorSvg from './assets/vault-error.svg'
+import VaultSvg from './assets/vault.svg'
 
 const Wrapper = styled.div`
   display: grid;
@@ -140,14 +140,14 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, submitte
 
   const getImage = () => {
     if (error) {
-      return vaultErrorSvg
+      return VaultErrorSvg
     }
 
     if (stepIndex <= 4) {
-      return vaultSvg
+      return VaultSvg
     }
 
-    return successSvg
+    return SuccessSvg
   }
 
   useEffect(() => {
@@ -323,7 +323,7 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, submitte
           <CardTitle>{steps[stepIndex].description || steps[stepIndex].label}</CardTitle>
         </BodyDescription>
 
-        <BodyLoader>{!error && stepIndex <= 4 && <Img alt="Loader dots" src={loaderDotsSvg} />}</BodyLoader>
+        <BodyLoader>{!error && stepIndex <= 4 && <Img alt="Loader dots" src={LoaderDotsSvg} />}</BodyLoader>
 
         <BodyInstruction>
           <FullParagraph color="primary" inverseColors={confirmationStep} noMargin size="md">

src/routes/safe/components/CurrencyDropdown/index.tsx

@@ -34,7 +34,7 @@ const CurrencyDropdown = (): React.ReactElement | null => {
 
   const currenciesList = Object.values(AVAILABLE_CURRENCIES)
   const tokenImage = nativeCoin.logoUri
-  const classes = useDropdownStyles()
+  const classes = useDropdownStyles({})
   const currenciesListFiltered = currenciesList.filter((currency) =>
     currency.toLowerCase().includes(searchParams.toLowerCase()),
   )

src/routes/welcome/components/Layout.tsx

@@ -1,5 +1,5 @@
 import OpenInNew from '@material-ui/icons/OpenInNew'
-import * as React from 'react'
+import React from 'react'
 
 import styles from './Layout.module.scss'
 
@@ -12,8 +12,8 @@ import Link from 'src/components/layout/Link'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
 import { marginButtonImg, secondary } from 'src/theme/variables'
 
-const plus = require('../assets/new.svg')
-const safe = require('../assets/safe.svg')
+import PlusIcon from '../assets/new.svg'
+import SafeIcon from '../assets/safe.svg'
 
 const openIconStyle = {
   height: '13px',
@@ -37,7 +37,7 @@ export const CreateSafe = ({ provider, size }: any) => (
     variant="contained"
     testId="create-new-safe-btn"
   >
-    <Img alt="Safe" height={14} src={plus} />
+    <Img alt="Safe" height={14} src={PlusIcon} />
     <div style={buttonStyle}>Create new Safe</div>
   </Button>
 )
@@ -53,7 +53,7 @@ export const LoadSafe = ({ provider, size }) => (
     variant="outlined"
     testId="load-existing-safe-btn"
   >
-    <Img alt="Safe" height={14} src={safe} />
+    <Img alt="Safe" height={14} src={SafeIcon} />
     <div style={buttonStyle}>Load existing Safe</div>
   </Button>
 )

tsconfig.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,11 +20,18 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "paths": {
-    "src/*": ["./*"]
+    "src/*": [
+      "./*"
+    ]
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }