fix no account message, alerts refactor

src/components/Web3Donation/Alerts.jsx

@@ -1,8 +1,22 @@
-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 }) => (
+  <div dangerouslySetInnerHTML={{ __html: message }} {...props} />
+)
+
+export default class Alerts extends PureComponent {
+  static propTypes = {
+    hasCorrectNetwork: PropTypes.bool,
+    hasAccount: PropTypes.bool,
+    networkName: PropTypes.string,
+    error: PropTypes.object,
+    transactionHash: PropTypes.string,
+    web3Connected: PropTypes.bool
+  }
+
+  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.`,
@@ -12,51 +26,43 @@ const alertMessages = (networkName, transactionHash) => ({
         <a href="https://etherscan.io/tx/${transactionHash}">
           See your transaction on etherscan.io.
         </a>`
-})
+  })
 
-const Alerts = ({
+  render() {
+    const {
       hasCorrectNetwork,
       hasAccount,
       networkName,
       error,
       transactionHash,
       web3Connected
-}) => {
-  return !web3Connected ? (
-    <small dangerouslySetInnerHTML={{ __html: alertMessages().noWeb3 }} />
+    } = this.props
+
+    return (
+      <div className={styles.alert}>
+        {!web3Connected ? (
+          <Message message={this.alertMessages().noWeb3} />
         ) : (
           <Fragment>
-      <div className={styles.alert}>
-        {!hasAccount && <div>{alertMessages().noaccount}</div>}
+            {!hasAccount && (
+              <Message message={this.alertMessages().noAccount} />
+            )}
             {!hasCorrectNetwork && (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: alertMessages(networkName).noCorrectNetwork
-            }}
+              <Message
+                message={this.alertMessages(networkName).noCorrectNetwork}
               />
             )}
-        {error && <div>{error.message}</div>}
-      </div>
+            {error && <Message message={error.message} />}
 
             {transactionHash && (
-        <div
+              <Message
                 className={styles.success}
-          dangerouslySetInnerHTML={{
-            __html: alertMessages(transactionHash).success
-          }}
+                message={this.alertMessages(transactionHash).success}
               />
             )}
           </Fragment>
+        )}
+      </div>
     )
+  }
 }
-
-Alerts.propTypes = {
-  hasCorrectNetwork: PropTypes.bool,
-  hasAccount: PropTypes.bool,
-  networkName: PropTypes.string,
-  error: PropTypes.object,
-  transactionHash: PropTypes.string,
-  web3Connected: PropTypes.bool
-}
-
-export default Alerts