Alerts refactor

src/components/Web3Donation/Alerts.jsx

@@ -1,52 +1,62 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Alerts.module.scss'
 
+const alertMessages = (networkName, transactionHash) => ({
+  noAccount:
+    'Web3 detected, but no account. Are you logged into your MetaMask account?',
+  noCorrectNetwork: `Please connect to <strong>Main</strong> network. You are on <strong>${networkName}</strong> right now.`,
+  noWeb3:
+    'No Web3 detected. Install <a href="https://metamask.io">MetaMask</a>, <a href="https://brave.com">Brave</a>, or <a href="https://github.com/ethereum/mist">Mist</a>.',
+  success: `You are awesome, thanks!<br />
+      <a href="https://etherscan.io/tx/${transactionHash}">
+        See your transaction on etherscan.io.
+      </a>`
+})
+
 const Alerts = ({
-  accounts,
+  hasCorrectNetwork,
-  networkId,
+  hasAccount,
   networkName,
   error,
-  transactionHash
+  transactionHash,
+  web3Connected
 }) => {
-  const isCorrectNetwork = networkId === '1'
+  return !web3Connected ? (
-  const hasAccount = accounts.length !== 0
+    <small dangerouslySetInnerHTML={{ __html: alertMessages().noWeb3 }} />
+  ) : (
+    <Fragment>
+      <div className={styles.alert}>
+        {!hasAccount && <div>{alertMessages().noaccount}</div>}
+        {!hasCorrectNetwork && (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: alertMessages(networkName).noCorrectNetwork
+            }}
+          />
+        )}
+        {error && <div>{error.message}</div>}
+      </div>
 
-  if (error || hasAccount || isCorrectNetwork)
+      {transactionHash && (
-    <div className={styles.alert}>
+        <div
-      {!hasAccount && (
+          className={styles.success}
-        <div>
+          dangerouslySetInnerHTML={{
-          Web3 detected, but no account. Are you logged into your MetaMask
+            __html: alertMessages(transactionHash).success
-          account?
+          }}
-        </div>
+        />
       )}
-      {!isCorrectNetwork && (
+    </Fragment>
-        <div>
+  )
-          Please connect to <strong>Main</strong> network. You are on{' '}
-          <strong>{networkName}</strong> right now.
-        </div>
-      )}
-      {error && <div>{error.message}</div>}
-    </div>
-
-  if (transactionHash)
-    <div className={styles.success}>
-      You are awesome, thanks!
-      <br />
-      <a href={`https://etherscan.io/tx/${transactionHash}`}>
-        See your transaction on etherscan.io.
-      </a>
-    </div>
-
-  return null
 }
 
 Alerts.propTypes = {
-  accounts: PropTypes.array,
+  hasCorrectNetwork: PropTypes.bool,
-  networkId: PropTypes.string,
+  hasAccount: PropTypes.bool,
   networkName: PropTypes.string,
   error: PropTypes.object,
-  transactionHash: PropTypes.string
+  transactionHash: PropTypes.string,
+  web3Connected: PropTypes.bool
 }
 
 export default Alerts

src/components/Web3Donation/InputGroup.jsx

@@ -5,20 +5,20 @@ import styles from './InputGroup.module.scss'
 
 export default class InputGroup extends PureComponent {
   static propTypes = {
-    networkId: PropTypes.string,
+    hasCorrectNetwork: PropTypes.bool,
-    selectedAccount: PropTypes.string,
+    hasAccount: PropTypes.bool,
     amount: PropTypes.number,
     onAmountChange: PropTypes.func,
-    handleWeb3Button: PropTypes.func
+    handleButton: PropTypes.func
   }
 
   render() {
     const {
-      networkId,
+      hasCorrectNetwork,
-      selectedAccount,
+      hasAccount,
       amount,
       onAmountChange,
-      handleWeb3Button
+      handleButton
     } = this.props
 
     return (
@@ -26,7 +26,7 @@ export default class InputGroup extends PureComponent {
         <div className={styles.input}>
           <Input
             type="number"
-            disabled={!(networkId === '1') || !selectedAccount}
+            disabled={!hasCorrectNetwork || !hasAccount}
             value={amount}
             onChange={onAmountChange}
             min="0"
@@ -38,8 +38,8 @@ export default class InputGroup extends PureComponent {
         </div>
         <button
           className="btn btn-primary"
-          onClick={handleWeb3Button}
+          onClick={handleButton}
-          disabled={!(networkId === '1') || !selectedAccount}
+          disabled={!hasCorrectNetwork || !hasAccount}
         >
           Make it rain
         </button>

src/components/Web3Donation/index.jsx

@@ -4,6 +4,7 @@ import Web3 from 'web3'
 import InputGroup from './InputGroup'
 import Alerts from './Alerts'
 import styles from './index.module.scss'
+import { getNetworkName } from './utils'
 
 const ONE_SECOND = 1000
 const ONE_MINUTE = ONE_SECOND * 60
@@ -11,13 +12,11 @@ const ONE_MINUTE = ONE_SECOND * 60
 export default class Web3Donation extends PureComponent {
   state = {
     web3Connected: false,
-    networkError: null,
     networkId: null,
     networkName: null,
     accounts: [],
     selectedAccount: null,
     amount: 0.01,
-    receipt: null,
     transactionHash: null,
     loading: false,
     error: null
@@ -77,19 +76,7 @@ export default class Web3Donation extends PureComponent {
   resetAllTheThings() {
     clearInterval(this.interval)
     clearInterval(this.networkInterval)
-    this.setState({
+    this.setState({ web3Connected: false })
-      web3Connected: false,
-      networkError: null,
-      networkId: null,
-      networkName: null,
-      accounts: [],
-      selectedAccount: null,
-      amount: 0.01,
-      receipt: null,
-      transactionHash: null,
-      loading: false,
-      error: null
-    })
   }
 
   initAccountsPoll() {
@@ -111,35 +98,16 @@ export default class Web3Donation extends PureComponent {
       web3.eth &&
       //web3.eth.net.getId((err, netId) => {
       web3.version.getNetwork((err, netId) => {
-        if (err) this.setState({ networkError: err })
+        if (err) this.setState({ error: err })
 
         if (netId != this.state.networkId) {
-          let networkName
-
-          switch (netId) {
-            case '1':
-              networkName = 'Main'
-              break
-            case '2':
-              networkName = 'Morden'
-              break
-            case '3':
-              networkName = 'Ropsten'
-              break
-            case '4':
-              networkName = 'Rinkeby'
-              break
-            case '42':
-              networkName = 'Kovan'
-              break
-            default:
-              networkName = 'Private'
-          }
-
           this.setState({
-            networkError: null,
+            error: null,
-            networkId: netId,
+            networkId: netId
-            networkName: networkName
+          })
+
+          getNetworkName(netId).then(networkName => {
+            this.setState({ networkName: networkName })
           })
         }
       })
@@ -151,18 +119,17 @@ export default class Web3Donation extends PureComponent {
     web3 &&
       web3.eth &&
       web3.eth.getAccounts((err, accounts) => {
-        if (err) {
+        if (err) this.setState({ error: err })
-          this.setState({ accountsError: err })
-        }
 
         this.setState({
+          error: null,
           accounts,
           selectedAccount: accounts[0]
         })
       })
   }
 
-  handleWeb3Button = () => {
+  handleButton = () => {
     const { web3 } = this
 
     this.setState({ loading: true })
@@ -199,6 +166,9 @@ export default class Web3Donation extends PureComponent {
   }
 
   render() {
+    const hasCorrectNetwork = this.state.networkId === '1'
+    const hasAccount = this.state.accounts.length !== 0
+
     return (
       <div className={styles.web3}>
         <header>
@@ -206,35 +176,30 @@ export default class Web3Donation extends PureComponent {
           <p>Send Ether with MetaMask, Brave, or Mist.</p>
         </header>
 
-        {this.state.web3Connected ? (
+        {this.state.web3Connected && (
           <div className={styles.web3Row}>
             {this.state.loading ? (
               'Hang on...'
             ) : (
               <InputGroup
-                networkId={this.state.networkId}
+                hasCorrectNetwork={hasCorrectNetwork}
-                selectedAccount={this.state.selectedAccount}
+                hasAccount={hasAccount}
                 amount={this.state.amount}
                 onAmountChange={this.onAmountChange}
-                handleWeb3Button={this.handleWeb3Button}
+                handleButton={this.handleButton}
               />
             )}
-
-            <Alerts
-              accounts={this.state.accounts}
-              networkId={this.state.networkId}
-              networkName={this.state.networkName}
-              error={this.state.error}
-              transactionHash={this.state.transactionHash}
-            />
           </div>
-        ) : (
-          <small>
-            No Web3 detected. Install <a href="https://metamask.io">MetaMask</a>
-            , <a href="https://brave.com">Brave</a>, or{' '}
-            <a href="https://github.com/ethereum/mist">Mist</a>.
-          </small>
         )}
+
+        <Alerts
+          hasCorrectNetwork={hasCorrectNetwork}
+          hasAccount={hasAccount}
+          networkName={this.state.networkName}
+          error={this.state.error}
+          transactionHash={this.state.transactionHash}
+          web3Connected={this.state.web3Connected}
+        />
       </div>
     )
   }

src/components/Web3Donation/utils.js

@@ -0,0 +1,25 @@
+export const getNetworkName = async netId => {
+  let networkName
+
+  switch (netId) {
+    case '1':
+      networkName = 'Main'
+      break
+    case '2':
+      networkName = 'Morden'
+      break
+    case '3':
+      networkName = 'Ropsten'
+      break
+    case '4':
+      networkName = 'Rinkeby'
+      break
+    case '42':
+      networkName = 'Kovan'
+      break
+    default:
+      networkName = 'Private'
+  }
+
+  return networkName
+}