fix no account message, alerts refactor

src/components/Web3Donation/Alerts.jsx

@@ -1,62 +1,68 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Alerts.module.scss'
 
-const alertMessages = (networkName, transactionHash) => ({
+const Message = ({ message, ...props }) => (
-  noAccount:
+  <div dangerouslySetInnerHTML={{ __html: message }} {...props} />
-    '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 = ({
+export default class Alerts extends PureComponent {
-  hasCorrectNetwork,
+  static propTypes = {
-  hasAccount,
+    hasCorrectNetwork: PropTypes.bool,
-  networkName,
+    hasAccount: PropTypes.bool,
-  error,
+    networkName: PropTypes.string,
-  transactionHash,
+    error: PropTypes.object,
-  web3Connected
+    transactionHash: PropTypes.string,
-}) => {
+    web3Connected: PropTypes.bool
-  return !web3Connected ? (
+  }
-    <small dangerouslySetInnerHTML={{ __html: alertMessages().noWeb3 }} />
+
-  ) : (
+  alertMessages = (networkName, transactionHash) => ({
-    <Fragment>
+    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>`
+  })
+
+  render() {
+    const {
+      hasCorrectNetwork,
+      hasAccount,
+      networkName,
+      error,
+      transactionHash,
+      web3Connected
+    } = this.props
+
+    return (
       <div className={styles.alert}>
-        {!hasAccount && <div>{alertMessages().noaccount}</div>}
+        {!web3Connected ? (
-        {!hasCorrectNetwork && (
+          <Message message={this.alertMessages().noWeb3} />
-          <div
+        ) : (
-            dangerouslySetInnerHTML={{
+          <Fragment>
-              __html: alertMessages(networkName).noCorrectNetwork
+            {!hasAccount && (
-            }}
+              <Message message={this.alertMessages().noAccount} />
-          />
+            )}
+            {!hasCorrectNetwork && (
+              <Message
+                message={this.alertMessages(networkName).noCorrectNetwork}
+              />
+            )}
+            {error && <Message message={error.message} />}
+
+            {transactionHash && (
+              <Message
+                className={styles.success}
+                message={this.alertMessages(transactionHash).success}
+              />
+            )}
+          </Fragment>
         )}
-        {error && <div>{error.message}</div>}
       </div>
-
+    )
-      {transactionHash && (
+  }
-        <div
-          className={styles.success}
-          dangerouslySetInnerHTML={{
-            __html: alertMessages(transactionHash).success
-          }}
-        />
-      )}
-    </Fragment>
-  )
 }
-
-Alerts.propTypes = {
-  hasCorrectNetwork: PropTypes.bool,
-  hasAccount: PropTypes.bool,
-  networkName: PropTypes.string,
-  error: PropTypes.object,
-  transactionHash: PropTypes.string,
-  web3Connected: PropTypes.bool
-}
-
-export default Alerts