Alerts refactor

2018-10-13 23:35:21 +02:00 · 2018-10-13 23:35:21 +02:00 · fc38c6b889
parent 0039f6b6e7
commit fc38c6b889
4 changed files with 107 additions and 107 deletions
--- a/src/components/Web3Donation/Alerts.jsx
+++ b/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,
-  networkId,
+  hasCorrectNetwork,
+  hasAccount,
  networkName,
  error,
-  transactionHash
+  transactionHash,
+  web3Connected
 }) => {
-  const isCorrectNetwork = networkId === '1'
-  const hasAccount = accounts.length !== 0
+  return !web3Connected ? (
+    <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)
-    <div className={styles.alert}>
-      {!hasAccount && (
-        <div>
-          Web3 detected, but no account. Are you logged into your MetaMask
-          account?
-        </div>
+      {transactionHash && (
+        <div
+          className={styles.success}
+          dangerouslySetInnerHTML={{
+            __html: alertMessages(transactionHash).success
+          }}
+        />
      )}
-      {!isCorrectNetwork && (
-        <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
+    </Fragment>
+  )
 }

 Alerts.propTypes = {
-  accounts: PropTypes.array,
-  networkId: PropTypes.string,
+  hasCorrectNetwork: PropTypes.bool,
+  hasAccount: PropTypes.bool,
  networkName: PropTypes.string,
  error: PropTypes.object,
-  transactionHash: PropTypes.string
+  transactionHash: PropTypes.string,
+  web3Connected: PropTypes.bool
 }

 export default Alerts
--- a/src/components/Web3Donation/InputGroup.jsx
+++ b/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,
-    selectedAccount: PropTypes.string,
+    hasCorrectNetwork: PropTypes.bool,
+    hasAccount: PropTypes.bool,
    amount: PropTypes.number,
    onAmountChange: PropTypes.func,
-    handleWeb3Button: PropTypes.func
+    handleButton: PropTypes.func
  }

  render() {
    const {
-      networkId,
-      selectedAccount,
+      hasCorrectNetwork,
+      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}
-          disabled={!(networkId === '1') || !selectedAccount}
+          onClick={handleButton}
+          disabled={!hasCorrectNetwork || !hasAccount}
        >
          Make it rain
        </button>
--- a/src/components/Web3Donation/index.jsx
+++ b/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({
-      web3Connected: false,
-      networkError: null,
-      networkId: null,
-      networkName: null,
-      accounts: [],
-      selectedAccount: null,
-      amount: 0.01,
-      receipt: null,
-      transactionHash: null,
-      loading: false,
-      error: null
-    })
+    this.setState({ web3Connected: false })
  }

  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,
-            networkId: netId,
-            networkName: networkName
+            error: null,
+            networkId: netId
+          })
+
+          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) {
-          this.setState({ accountsError: err })
-        }
+        if (err) this.setState({ error: 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}
-                selectedAccount={this.state.selectedAccount}
+                hasCorrectNetwork={hasCorrectNetwork}
+                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>
    )
  }
--- a/src/components/Web3Donation/utils.js
+++ b/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
+}