BUG PM-712: User is registered after rejecting Metamask pop up (#447)

* Close the modal when it receives mainnet address, remove connectionTried, only rely on gnosisInitialized and gnosisROInitialized PM-712

* Fix tests PM-712

package.json

@@ -109,7 +109,7 @@
     "bootstrap-sass": "^3.3.7",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
     "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.0",
     "eslint": "^5.0.1",
     "eslint-config-airbnb": "^17.0.0",
     "eslint-loader": "^2.0.0",

src/components/ModalContent/RegisterWallet/index.js

@@ -42,22 +42,22 @@ const RegisterMainnetAddress = ({
       <button className={cx('closeButton')} onClick={closeModal} />
       <div className={cx('registerContainer')}>
         <h4 className={cx('heading')}>
-Register wallet address
+          Register wallet address
         </h4>
         <p className={cx('annotation')}>
           Please register your wallet address, where we can send you
           {' '}
           {collateralTokenSymbol}
           {' '}
-tokens, and subsequently
+          tokens, and subsequently
           your
           {' '}
           {rewardTokenSymbol}
           {' '}
-reward. Read our terms of service for more information
+          reward. Read our terms of service for more information
         </p>
         <p className={cx('walletAnnotation')}>
-Your current Metamask address is:
+          Your current Metamask address is:
         </p>
         <div className={cx('walletAddressContainer')}>
           <img src={WalletIcon} className={cx('walletIcon')} alt="" />
@@ -69,11 +69,11 @@ Your current Metamask address is:
           You need Rinkeby ETH to register your wallet address.
           {' '}
           <br />
-Rinkeby ETH balance:
+          Rinkeby ETH balance:
           {' '}
           <DecimalValue value={currentBalance} className={cx('walletBalance')} />
           {' '}
--
+          -
           {' '}
           <a className={cx('faucetLink')} href="https://faucet.rinkeby.io/" target="_blank" rel="noopener noreferrer">
             Request Rinkeby Ether
@@ -108,16 +108,23 @@ RegisterMainnetAddress.propTypes = {
   collateralToken: PropTypes.shape({
     symbol: PropTypes.string,
   }).isRequired,
+  mainnetAddress: PropTypes.string,
 }
 
 RegisterMainnetAddress.defaultProps = {
   gasPrice: Decimal(0),
   registrationGasCost: 0,
+  mainnetAddress: undefined,
 }
 
 export default lifecycle({
   componentDidMount() {
     this.props.requestRegistrationGasCost()
     this.props.requestGasPrice()
   },
+  componentDidUpdate() {
+    if (this.props.mainnetAddress) {
+      this.props.closeModal()
+    }
+  },
 })(RegisterMainnetAddress)

src/containers/App/index.js

@@ -12,7 +12,7 @@ import Footer from 'components/Footer'
 import { providerPropType } from 'utils/shapes'
 import HeaderContainer from 'containers/HeaderContainer'
 import TransactionFloaterContainer from 'containers/TransactionFloaterContainer'
-import { triedToConnect } from 'store/selectors/blockchain'
+import { isConnectedToBlockchain } from 'store/selectors/blockchain'
 import { getActiveProvider, isConnectedToCorrectNetwork } from 'integrations/store/selectors'
 import 'normalize.css'
 
@@ -22,12 +22,17 @@ import transitionStyles from './transitions.mod.scss'
 const cx = cn.bind(style)
 
 const App = (props) => {
-  if (!props.blockchainConnection) {
+  const {
+    provider, blockchainConnection, children, location,
+  } = props
+  if (!blockchainConnection) {
     return (
       <div className={cx('appContainer')}>
         <div className={cx('loader-container')}>
           <IndefiniteSpinner width={100} height={100} />
-          <h1>Connecting</h1>
+          <h1>
+            Connecting to the blockchain
+          </h1>
         </div>
       </div>
     )
@@ -44,10 +49,10 @@ const App = (props) => {
   return (
     <div className={cx('appContainer')}>
       <HeaderContainer version={process.env.VERSION} />
-      {props.provider && props.provider.account && <TransactionFloaterContainer />}
+      {provider && provider.account && <TransactionFloaterContainer />}
       <TransitionGroup>
-        <CSSTransition key={props.location.pathname.split('/')[1]} classNames={transitionClassNames} timeout={timeout}>
-          {props.children}
+        <CSSTransition key={location.pathname.split('/')[1]} classNames={transitionClassNames} timeout={timeout}>
+          {children}
         </CSSTransition>
       </TransitionGroup>
       <Footer />
@@ -76,10 +81,15 @@ App.defaultProps = {
 
 const mapStateToProps = state => ({
   provider: getActiveProvider(state),
-  blockchainConnection: triedToConnect(state),
+  blockchainConnection: isConnectedToBlockchain(state),
   isConnectedToCorrectNetwork: isConnectedToCorrectNetwork(state),
 })
 
-export default withRouter(connect(mapStateToProps, {
-  connectBlockchain,
-})(App))
+export default withRouter(
+  connect(
+    mapStateToProps,
+    {
+      connectBlockchain,
+    },
+  )(App),
+)

src/containers/BackdropProvider/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import cn from 'classnames/bind'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
-import { triedToConnect } from 'store/selectors/blockchain'
+import { isConnectedToBlockchain } from 'store/selectors/blockchain'
 import { closeModal } from 'store/actions/modal'
 import * as modals from 'containers/Modals'
 import style from './backdrop.mod.scss'
@@ -65,7 +65,7 @@ BackdropProvider.propTypes = {
 
 const mapStateToProps = state => ({
   modal: state.modal,
-  blockchainConnection: triedToConnect(state),
+  blockchainConnection: isConnectedToBlockchain(state),
 })
 
 const mapDispatchToProps = dispatch => ({

src/containers/Modals/ModalRegisterWallet/index.js

@@ -1,11 +1,10 @@
 import { connect } from 'react-redux'
-import { formValueSelector } from 'redux-form'
 import RegisterWallet from 'components/ModalContent/RegisterWallet'
 
 import { updateMainnetAddress } from 'store/actions/account'
 import { requestGasPrice } from 'store/actions/blockchain'
 import { getCollateralToken } from 'store/selectors/blockchain'
-import { getCurrentAccount, getCurrentBalance } from 'integrations/store/selectors'
+import { getCurrentAccount, getCurrentBalance, getRegisteredMainnetAddress } from 'integrations/store/selectors'
 import { setLegalDocumentsAccepted } from 'integrations/store/actions'
 import { getGasPrice } from 'routes/MarketDetails/store/selectors'
 import { requestRegistrationGasCost } from './actions'
@@ -17,6 +16,7 @@ const mapStateToProps = state => ({
   registrationGasCost: getRegistrationGasCost(state),
   gasPrice: getGasPrice(state),
   collateralToken: getCollateralToken(state),
+  mainnetAddress: getRegisteredMainnetAddress(state),
 })
 
 const mapDispatchToProps = {