component splitup

README.md

@@ -63,7 +63,7 @@ As a fallback, QR codes are generated with [react-qr-svg](https://github.com/no2
 
 If you want to know how this works, have a look at the respective components under
 
-- [`src/components/atoms/Web3Donation.jsx`](src/components/atoms/Web3Donation.jsx)
+- [`src/components/Web3Donation/index.jsx`](src/components/Web3Donation/index.jsx)
 - [`src/components/atoms/Qr.jsx`](src/components/atoms/Qr.jsx)
 
 ### 🕸 Related Posts

src/components/Web3Donation/Alerts.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Alerts.module.scss'
+
+const Alerts = ({
+  accounts,
+  networkId,
+  networkName,
+  error,
+  transactionHash
+}) => {
+  const isCorrectNetwork = networkId === '1'
+  const hasAccount = accounts.length !== 0
+
+  if (error || hasAccount || isCorrectNetwork)
+    <div className={styles.alert}>
+      {!hasAccount && (
+        <div>
+          Web3 detected, but no account. Are you logged into your MetaMask
+          account?
+        </div>
+      )}
+      {!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
+}
+
+Alerts.propTypes = {
+  accounts: PropTypes.array,
+  networkId: PropTypes.string,
+  networkName: PropTypes.string,
+  error: PropTypes.object,
+  transactionHash: PropTypes.string
+}
+
+export default Alerts

src/components/Web3Donation/Alerts.module.scss

@@ -0,0 +1,13 @@
+@import 'variables';
+@import 'mixins';
+
+.alert {
+    margin-top: $spacer / 2;
+    font-size: $font-size-small;
+    color: darken($alert-error, 60%);
+}
+
+.success {
+    composes: alert;
+    color: darken($alert-success, 60%);
+}

src/components/Web3Donation/InputGroup.jsx

@@ -0,0 +1,49 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Input from '../atoms/Input'
+import styles from './InputGroup.module.scss'
+
+export default class InputGroup extends PureComponent {
+  static propTypes = {
+    networkId: PropTypes.string,
+    selectedAccount: PropTypes.string,
+    amount: PropTypes.number,
+    onAmountChange: PropTypes.func,
+    handleWeb3Button: PropTypes.func
+  }
+
+  render() {
+    const {
+      networkId,
+      selectedAccount,
+      amount,
+      onAmountChange,
+      handleWeb3Button
+    } = this.props
+
+    return (
+      <div className={styles.inputGroup}>
+        <div className={styles.input}>
+          <Input
+            type="number"
+            disabled={!(networkId === '1') || !selectedAccount}
+            value={amount}
+            onChange={onAmountChange}
+            min="0"
+            step="0.01"
+          />
+          <div className={styles.currency}>
+            <span>ETH</span>
+          </div>
+        </div>
+        <button
+          className="btn btn-primary"
+          onClick={handleWeb3Button}
+          disabled={!(networkId === '1') || !selectedAccount}
+        >
+          Make it rain
+        </button>
+      </div>
+    )
+  }
+}

src/components/Web3Donation/InputGroup.module.scss

@@ -1,26 +1,6 @@
 @import 'variables';
 @import 'mixins';
 
-.web3 {
-    @include divider;
-
-    width: 100%;
-    text-align: center;
-    margin-top: $spacer / 2;
-    margin-bottom: $spacer;
-    padding-bottom: $spacer * 1.5;
-
-    small {
-        color: darken($alert-info, 60%);
-        margin-top: -($spacer / 2);
-        display: block;
-    }
-}
-
-.web3Row {
-    min-height: 58px;
-}
-
 .inputGroup {
     max-width: 17rem;
     margin: auto;
@@ -92,14 +72,3 @@
     display: flex;
     align-items: center;
 }
-
-.alert {
-    margin-top: $spacer / 2;
-    font-size: $font-size-small;
-    color: darken($alert-error, 60%);
-}
-
-.success {
-    composes: alert;
-    color: darken($alert-success, 60%);
-}

src/components/Web3Donation/index.jsx

@@ -1,98 +1,13 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Web3 from 'web3'
-import Input from '../atoms/Input'
+import InputGroup from './InputGroup'
-import styles from './Web3Donation.module.scss'
+import Alerts from './Alerts'
+import styles from './index.module.scss'
 
 const ONE_SECOND = 1000
 const ONE_MINUTE = ONE_SECOND * 60
 
-const InputGroup = ({
-  networkId,
-  selectedAccount,
-  amount,
-  onAmountChange,
-  handleWeb3Button
-}) => (
-  <div className={styles.inputGroup}>
-    <div className={styles.input}>
-      <Input
-        type="number"
-        disabled={!(networkId === '1') || !selectedAccount}
-        value={amount}
-        onChange={onAmountChange}
-        min="0"
-        step="0.01"
-      />
-      <div className={styles.currency}>
-        <span>ETH</span>
-      </div>
-    </div>
-    <button
-      className="btn btn-primary"
-      onClick={handleWeb3Button}
-      disabled={!(networkId === '1') || !selectedAccount}
-    >
-      Make it rain
-    </button>
-  </div>
-)
-
-InputGroup.propTypes = {
-  networkId: PropTypes.string,
-  selectedAccount: PropTypes.string,
-  amount: PropTypes.number,
-  onAmountChange: PropTypes.func,
-  handleWeb3Button: PropTypes.func
-}
-
-const Alerts = ({
-  accounts,
-  networkId,
-  networkName,
-  error,
-  transactionHash
-}) => {
-  const isCorrectNetwork = networkId === '1'
-  const hasAccount = accounts.length !== 0
-
-  if (error || hasAccount || isCorrectNetwork)
-    <div className={styles.alert}>
-      {!hasAccount && (
-        <div>
-          Web3 detected, but no account. Are you logged into your MetaMask
-          account?
-        </div>
-      )}
-      {!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
-}
-
-Alerts.propTypes = {
-  accounts: PropTypes.array,
-  networkId: PropTypes.string,
-  networkName: PropTypes.string,
-  error: PropTypes.object,
-  transactionHash: PropTypes.string
-}
-
 export default class Web3Donation extends PureComponent {
   state = {
     web3Connected: false,

src/components/Web3Donation/index.module.scss

@@ -0,0 +1,22 @@
+@import 'variables';
+@import 'mixins';
+
+.web3 {
+    @include divider;
+
+    width: 100%;
+    text-align: center;
+    margin-top: $spacer / 2;
+    margin-bottom: $spacer;
+    padding-bottom: $spacer * 1.5;
+
+    small {
+        color: darken($alert-info, 60%);
+        margin-top: -($spacer / 2);
+        display: block;
+    }
+}
+
+.web3Row {
+    min-height: 58px;
+}

src/components/atoms/Modal.module.scss

@@ -52,6 +52,7 @@
     right: ($spacer/4);
     color: $brand-grey-light;
     font-weight: 500;
+    outline: 0;
 
     &:hover,
     &:focus {

src/components/molecules/ModalThanks.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import { StaticQuery, graphql } from 'gatsby'
 
-import Web3Donation from '../atoms/Web3Donation'
+import Web3Donation from '../Web3Donation'
 import Qr from '../atoms/Qr'
 import Modal from '../atoms/Modal'
 import styles from './ModalThanks.module.scss'