Merge pull request #1719 from gnosis/release/v2.17.0

Release v2.17.0

.gitignore

@@ -3,6 +3,7 @@
 .DS_Store
 yarn-error.log
 .env*
+.eslintcache
 /.idea
 dist
 electron-builder.yml
@@ -11,3 +12,4 @@ yalc.lock
 # testing
 /coverage/
 src/types/contracts/
+tsconfig.tsbuildinfo

.rescriptsrc

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

.travis.yml

@@ -1,6 +1,5 @@
 if: (branch = development) OR (branch = master) OR (type = pull_request) OR (tag IS present)
-sudo: required
-dist: bionic
+dist: focal
 language: node_js
 node_js:
   - '12'
@@ -43,14 +42,15 @@ 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;
 before_install:
   # Needed to deploy pull request and releases
   - sudo apt-get update
-  - sudo apt-get -y install python-pip python-dev libusb-1.0-0-dev libudev-dev
+  - sudo apt-get -y install python3-pip python3-dev libusb-1.0-0-dev libudev-dev
   - pip install awscli --upgrade --user
 script:
   - yarn lint:check

config/jest/Web3Mock.js

@@ -1,7 +1,7 @@
 import Web3 from 'web3'
 
 const window = global.window || {}
-window.web3 = window.web3 || {}
+window.web3 = {}
 window.web3.currentProvider = new Web3.providers.HttpProvider('http://localhost:8545')
 
 global.window = window

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "2.16.2",
+  "version": "2.17.0",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {
@@ -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",
@@ -49,7 +48,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged --allow-empty",
-      "pre-push": "tsc"
+      "pre-push": "tsc --noEmit --incremental"
     }
   },
   "lint-staged": {
@@ -150,9 +149,8 @@
     }
   },
   "resolutions": {
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "node-gyp": "^7.1.0"
+    "@babel/core": "^7.12.0",
+    "sass-loader": "^9.0.0"
   },
   "browserslist": {
     "production": [
@@ -167,22 +165,23 @@
     ]
   },
   "dependencies": {
-    "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
+    "@gnosis.pm/safe-apps-sdk": "1.0.0-beta.4",
+    "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@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/safe-react-components": "https://github.com/gnosis/safe-react-components.git#bf3a84486b7353bd25447ddff39c406f6fafecc6",
     "@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",
@@ -215,14 +214,13 @@
     "react-dom": "16.13.1",
     "react-final-form": "^6.5.2",
     "react-final-form-listeners": "^1.0.2",
-    "react-ga": "3.2.1",
+    "react-ga": "3.3.0",
     "react-hot-loader": "4.13.0",
     "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",
     "redux-actions": "^2.6.5",
     "redux-thunk": "^2.3.0",
@@ -235,34 +233,35 @@
     "web3-utils": "^1.2.11"
   },
   "devDependencies": {
+    "@rescripts/cli": "^0.0.15",
     "@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",
-    "@typechain/web3-v1": "^1.0.0",
+    "@testing-library/jest-dom": "5.11.6",
+    "@testing-library/react": "11.2.2",
+    "@typechain/web3-v1": "^2.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 +270,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/App/index.tsx

@@ -80,8 +80,8 @@ const App: React.FC = ({ children }) => {
   const granted = useSelector(grantedSelector)
   const sidebarItems = useSidebarItems()
 
-  useLoadSafe(safeAddress)
-  useSafeScheduledUpdates(safeAddress)
+  const safeLoaded = useLoadSafe(safeAddress)
+  useSafeScheduledUpdates(safeLoaded, safeAddress)
 
   const sendFunds = safeActionsState.sendFunds
   const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance) : ''

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

@@ -9,13 +9,13 @@ import { Link } from 'react-router-dom'
 import Provider from './Provider'
 
 import Spacer from 'src/components/Spacer'
-import openHoc from 'src/components/hoc/OpenHoc'
 import Col from 'src/components/layout/Col'
 import Img from 'src/components/layout/Img'
 import Row from 'src/components/layout/Row'
 import { border, headerHeight, md, screenSm, sm } from 'src/theme/variables'
+import { useStateHandler } from 'src/logic/hooks/useStateHandler'
 
-const logo = require('../assets/gnosis-safe-multisig-logo.svg')
+import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
 
 const styles = () => ({
   root: {
@@ -55,41 +55,45 @@ const styles = () => ({
   },
 })
 
-const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInfo, toggle }) => (
-  <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" />
-      </Link>
-    </Col>
-    <Spacer />
-    <Provider
-      info={providerInfo}
-      open={open}
-      toggle={toggle}
-      render={(providerRef) => (
-        <Popper
-          anchorEl={providerRef.current}
-          className={classes.popper}
-          open={open}
-          placement="bottom"
-          popperOptions={{ positionFixed: true }}
-        >
-          {({ TransitionProps }) => (
-            <Grow {...TransitionProps}>
-              <>
-                <ClickAwayListener mouseEvent="onClick" onClickAway={clickAway} touchEvent={false}>
-                  <List className={classes.root} component="div">
-                    {providerDetails}
-                  </List>
-                </ClickAwayListener>
-              </>
-            </Grow>
-          )}
-        </Popper>
-      )}
-    />
-  </Row>
-))
+const Layout = ({ classes, providerDetails, providerInfo }) => {
+  const { clickAway, open, toggle } = useStateHandler()
+
+  return (
+    <Row className={classes.summary}>
+      <Col className={classes.logo} middle="xs" start="xs">
+        <Link to="/">
+          <Img alt="Gnosis Team Safe" height={36} src={SafeLogo} testId="heading-gnosis-logo" />
+        </Link>
+      </Col>
+      <Spacer />
+      <Provider
+        info={providerInfo}
+        open={open}
+        toggle={toggle}
+        render={(providerRef) => (
+          <Popper
+            anchorEl={providerRef.current}
+            className={classes.popper}
+            open={open}
+            placement="bottom"
+            popperOptions={{ positionFixed: true }}
+          >
+            {({ TransitionProps }) => (
+              <Grow {...TransitionProps}>
+                <>
+                  <ClickAwayListener mouseEvent="onClick" onClickAway={clickAway} touchEvent={false}>
+                    <List className={classes.root} component="div">
+                      {providerDetails}
+                    </List>
+                  </ClickAwayListener>
+                </>
+              </Grow>
+            )}
+          </Popper>
+        )}
+      />
+    </Row>
+  )
+}
 
 export default withStyles(styles as any)(Layout)

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>