migrate to material ui v4, deps bump, show notification before sending the tx

package.json

@@ -66,8 +66,8 @@
   },
   "dependencies": {
     "@gnosis.pm/util-contracts": "2.0.1",
-    "@material-ui/core": "^3.9.3",
-    "@material-ui/icons": "^3.0.1",
+    "@material-ui/core": "4.0.0",
+    "@material-ui/icons": "4.0.0",
     "@welldone-software/why-did-you-render": "^3.0.9",
     "axios": "^0.18.0",
     "bignumber.js": "^8.1.1",
@@ -81,9 +81,9 @@
     "qrcode.react": "^0.9.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-final-form": "5.1.0",
+    "react-final-form": "6.0.0",
     "react-final-form-listeners": "^1.0.2",
-    "react-hot-loader": "4.8.7",
+    "react-hot-loader": "4.8.8",
     "react-infinite-scroll-component": "^4.5.2",
     "react-redux": "7.0.3",
     "react-router-dom": "^4.3.1",
@@ -96,7 +96,7 @@
   },
   "devDependencies": {
     "@babel/cli": "7.4.4",
-    "@babel/core": "7.4.4",
+    "@babel/core": "7.4.5",
     "@babel/plugin-proposal-class-properties": "7.4.4",
     "@babel/plugin-proposal-decorators": "7.4.4",
     "@babel/plugin-proposal-do-expressions": "^7.0.0",
@@ -116,7 +116,7 @@
     "@babel/plugin-transform-member-expression-literals": "^7.2.0",
     "@babel/plugin-transform-property-literals": "^7.2.0",
     "@babel/polyfill": "7.4.4",
-    "@babel/preset-env": "7.4.4",
+    "@babel/preset-env": "7.4.5",
     "@babel/preset-flow": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
     "@sambego/storybook-state": "^1.0.7",
@@ -137,9 +137,9 @@
     "detect-port": "^1.2.2",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-flowtype": "3.9.0",
-    "eslint-plugin-import": "2.17.2",
-    "eslint-plugin-jest": "22.5.1",
+    "eslint-plugin-flowtype": "3.9.1",
+    "eslint-plugin-import": "2.17.3",
+    "eslint-plugin-jest": "22.6.4",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "7.13.0",
     "ethereumjs-abi": "^0.6.7",
@@ -161,11 +161,11 @@
     "storybook-host": "^5.0.3",
     "storybook-router": "^0.3.3",
     "style-loader": "^0.23.1",
-    "truffle": "5.0.18",
-    "truffle-contract": "4.0.16",
-    "truffle-solidity-loader": "0.1.17",
+    "truffle": "5.0.19",
+    "truffle-contract": "4.0.17",
+    "truffle-solidity-loader": "0.1.18",
     "uglifyjs-webpack-plugin": "2.1.3",
-    "webpack": "4.32.0",
+    "webpack": "4.32.2",
     "webpack-bundle-analyzer": "3.3.2",
     "webpack-cli": "3.3.2",
     "webpack-dev-server": "3.4.1",

src/components/Header/component/Provider.jsx

@@ -55,16 +55,13 @@ class Provider extends React.Component<Props> {
       <React.Fragment>
         <div ref={this.myRef} className={classes.root}>
           <Col end="sm" middle="xs" className={classes.provider} onClick={toggle}>
-            { info }
-            <IconButton
-              disableRipple
-              className={classes.expand}
-            >
-              { open ? <ExpandLess /> : <ExpandMore />}
+            {info}
+            <IconButton disableRipple className={classes.expand}>
+              {open ? <ExpandLess /> : <ExpandMore />}
             </IconButton>
           </Col>
         </div>
-        { children(this.myRef) }
+        {children(this.myRef)}
       </React.Fragment>
     )
   }

src/components/forms/GnoForm/index.jsx

@@ -15,7 +15,7 @@ type Props = {
   padding?: number,
   validation?: (values: Object) => Object | Promise<Object>,
   initialValues?: Object,
-  formMutators: Object,
+  formMutators?: Object,
 }
 
 const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({

src/components/layout/Link/index.jsx

@@ -1,6 +1,6 @@
 // @flow
+import * as React from 'react'
 import classNames from 'classnames/bind'
-import React from 'react'
 import { Link } from 'react-router-dom'
 import { capitalize } from '~/utils/css'
 import styles from './index.scss'
@@ -13,20 +13,35 @@ type Props = {
   children: React$Node,
   color?: 'regular' | 'white',
   className?: string,
+  innerRef: React.ElementRef<any>,
 }
 
 const GnosisLink = ({
-  to, children, color, className, padding, ...props
+  to, children, color, className, padding, innerRef, ...props
 }: Props) => {
   const internal = /^\/(?!\/)/.test(to)
   const classes = cx(styles.link, color || 'regular', padding ? capitalize(padding, 'padding') : undefined, className)
   const LinkElement = internal ? Link : 'a'
+  const refs = {}
+  if (internal) {
+    // To avoid warning about React not recognizing the prop innerRef on native element (a) if the link is external
+    refs.innerRef = innerRef
+  }
 
   return (
-    <LinkElement className={classes} href={internal ? null : to} to={internal ? to : null} {...props}>
+    <LinkElement
+      className={classes}
+      href={internal ? null : to}
+      to={internal ? to : null}
+      {...refs}
+      {...props}
+    >
       {children}
     </LinkElement>
   )
 }
 
-export default GnosisLink
+// https://material-ui.com/guides/composition/#caveat-with-refs
+const LinkWithRef = React.forwardRef<Props, typeof GnosisLink>((props, ref) => <GnosisLink {...props} innerRef={ref} />)
+
+export default LinkWithRef

src/routes/opening/component/index.jsx

@@ -43,10 +43,7 @@ const styles = {
 }
 
 const Opening = ({
-  classes,
-  name = 'Safe creation process',
-  tx,
-  network,
+  classes, name = 'Safe creation process', tx, network,
 }: Props) => (
   <Page align="center">
     <Paragraph className={classes.page} color="secondary" size="xxl" weight="bolder" align="center">
@@ -68,13 +65,25 @@ const Opening = ({
     </Block>
     <Block margin="md">
       <Paragraph size="md" align="center" weight="light" noMargin>
-        This process should take a couple of minutes. <br />
+        This process should take a couple of minutes.
+        {' '}
+        <br />
       </Paragraph>
-      { tx &&
+      {tx && (
         <Paragraph className={classes.follow} size="md" align="center" weight="light" noMargin>
-          Follow progress on <a href={openTxInEtherScan(tx, network)} target="_blank" rel="noopener noreferrer" className={classes.etherscan}>Etherscan.io<OpenInNew className={classes.icon} /></a>
+          Follow progress on
+          {' '}
+          <a
+            href={openTxInEtherScan(tx, network)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classes.etherscan}
+          >
+            Etherscan.io
+            <OpenInNew className={classes.icon} />
+          </a>
         </Paragraph>
-      }
+      )}
     </Block>
   </Page>
 )

src/routes/safe/store/actions/createTransaction.js

@@ -28,7 +28,8 @@ const createTransaction = (
   const threshold = await safeInstance.getThreshold()
   const nonce = await safeInstance.nonce()
   const txRecipient = isSendingETH ? to : token.address
-  let valueInWei = web3.utils.toWei(valueInEth, 'ether')
+  const valueInWei = web3.utils.toWei(valueInEth, 'ether')
+  let txAmount = valueInWei
   const isExecution = threshold.toNumber() === 1
 
   let txData = EMPTY_DATA
@@ -37,16 +38,17 @@ const createTransaction = (
     const sendToken = await StandardToken.at(token.address)
 
     txData = sendToken.contract.methods.transfer(to, valueInWei).encodeABI()
-    // valueInWei should be 0 if we send tokens
+    // txAmount should be 0 if we send tokens
     // the real value is encoded in txData and will be used by the contract
-    // if valueInWei > 0 it would send ETH from the safe
-    valueInWei = 0
+    // if txAmount > 0 it would send ETH from the safe
+    txAmount = 0
   }
 
   let txHash
   if (isExecution) {
-    txHash = await executeTransaction(safeInstance, txRecipient, valueInWei, txData, CALL, nonce, from)
     openSnackbar('Transaction has been submitted', 'success')
+    txHash = await executeTransaction(safeInstance, txRecipient, txAmount, txData, CALL, nonce, from)
+    openSnackbar('Transaction has been confirmed', 'success')
   } else {
     // txHash = await approveTransaction(safeAddress, to, valueInWei, txData, CALL, nonce)
   }