Merge pull request #79 from kremalicious/feature/web3-loader

nicer web3 loading experience

package.json

@@ -80,7 +80,7 @@
     "@babel/node": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.7.0",
+    "eslint": "^5.8.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-graphql": "^2.1.1",
@@ -94,7 +94,7 @@
     "prettier": "^1.14.3",
     "prettier-eslint-cli": "^4.7.1",
     "prettier-stylelint": "^0.4.2",
-    "stylelint": "^9.6.0",
+    "stylelint": "^9.7.0",
     "stylelint-config-css-modules": "^1.3.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-scss": "^3.3.2"

src/components/Post/PostMeta.module.scss

@@ -4,7 +4,7 @@
 /////////////////////////////////////
 
 .entryMeta {
-    font-size: $font-size-base;
+    font-size: $font-size-small;
     margin-top: $spacer * 2;
     color: $brand-grey-light;
 }

src/components/Web3Donation/Alerts.jsx

@@ -1,66 +1,59 @@
-import React, { Fragment, PureComponent } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Alerts.module.scss'
 
-const Message = ({ message, ...props }) => (
-  <div dangerouslySetInnerHTML={{ __html: message }} {...props} />
-)
+export 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>.',
+  transaction: `<a href="https://etherscan.io/tx/${transactionHash}" target="_blank">See your transaction on etherscan.io.</a>`,
+  waitingForUser: 'Waiting for your confirmation',
+  waitingConfirmation: 'Waiting for network confirmation, hang on',
+  success: 'Confirmed. You are awesome, thanks!'
+})
 
 export default class Alerts extends PureComponent {
   static propTypes = {
-    hasCorrectNetwork: PropTypes.bool.isRequired,
-    hasAccount: PropTypes.bool.isRequired,
-    networkName: PropTypes.string,
-    error: PropTypes.object,
-    transactionHash: PropTypes.string,
-    confirmationNumber: PropTypes.number,
-    receipt: PropTypes.object,
-    web3Connected: PropTypes.bool.isRequired
+    message: PropTypes.object,
+    transactionHash: PropTypes.string
   }
 
-  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>.',
-    transaction: `<a href="https://etherscan.io/tx/${transactionHash}" target="_blank">See your transaction on etherscan.io.</a>`
-  })
+  constructMessage = () => {
+    const { transactionHash, message } = this.props
+
+    let messageOutput
+
+    if (transactionHash) {
+      messageOutput =
+        message.text +
+        '<br />' +
+        alertMessages(null, transactionHash).transaction
+    } else {
+      messageOutput = message.text
+    }
+
+    return messageOutput
+  }
+
+  classes() {
+    const { status } = this.props.message
+
+    if (status === 'success') {
+      return styles.success
+    } else if (status === 'error') {
+      return styles.error
+    }
+    return styles.alert
+  }
 
   render() {
-    const {
-      hasCorrectNetwork,
-      hasAccount,
-      networkName,
-      error,
-      transactionHash,
-      web3Connected
-    } = this.props
-
     return (
-      <div className={styles.alert}>
-        {!web3Connected ? (
-          <Message message={this.alertMessages().noWeb3} />
-        ) : (
-          <Fragment>
-            {!hasAccount && (
-              <Message message={this.alertMessages().noAccount} />
-            )}
-            {!hasCorrectNetwork && (
-              <Message
-                message={this.alertMessages(networkName).noCorrectNetwork}
-              />
-            )}
-            {error && <Message message={error.message} />}
-
-            {transactionHash && (
-              <Message
-                message={this.alertMessages(null, transactionHash).transaction}
-              />
-            )}
-          </Fragment>
-        )}
-      </div>
+      <div
+        className={this.classes()}
+        dangerouslySetInnerHTML={{ __html: this.constructMessage() }}
+      />
     )
   }
 }

src/components/Web3Donation/Alerts.module.scss

@@ -2,12 +2,44 @@
 @import 'mixins';
 
 .alert {
-    margin-top: $spacer / 2;
     font-size: $font-size-small;
+    display: inline-block;
+
+    &:empty {
+        display: none;
+    }
+
+    &::after {
+        overflow: hidden;
+        display: inline-block;
+        vertical-align: bottom;
+        animation: ellipsis steps(4, end) 1s infinite;
+        content: '\2026'; // ascii code for the ellipsis character
+        width: 0;
+        position: absolute;
+    }
+}
+
+.error {
+    composes: alert;
     color: darken($alert-error, 60%);
+
+    &::after {
+        display: none;
+    }
 }
 
 .success {
     composes: alert;
     color: darken($alert-success, 60%);
+
+    &::after {
+        display: none;
+    }
+}
+
+@keyframes ellipsis {
+    to {
+        width: .75rem;
+    }
 }

src/components/Web3Donation/InputGroup.jsx

@@ -7,21 +7,17 @@ import styles from './InputGroup.module.scss'
 
 export default class InputGroup extends PureComponent {
   static propTypes = {
-    hasCorrectNetwork: PropTypes.bool.isRequired,
-    hasAccount: PropTypes.bool.isRequired,
     amount: PropTypes.string.isRequired,
     onAmountChange: PropTypes.func.isRequired,
-    handleButton: PropTypes.func.isRequired,
+    sendTransaction: PropTypes.func.isRequired,
     selectedAccount: PropTypes.string
   }
 
   render() {
     const {
-      hasCorrectNetwork,
-      hasAccount,
       amount,
       onAmountChange,
-      handleButton,
+      sendTransaction,
       selectedAccount
     } = this.props
 
@@ -30,7 +26,6 @@ export default class InputGroup extends PureComponent {
         <div className={styles.input}>
           <Input
             type="number"
-            disabled={!hasCorrectNetwork || !hasAccount}
             value={amount}
             onChange={onAmountChange}
             min="0"
@@ -40,20 +35,13 @@ export default class InputGroup extends PureComponent {
             <span>ETH</span>
           </div>
         </div>
-        <button
-          className="btn btn-primary"
-          onClick={handleButton}
-          disabled={!hasCorrectNetwork || !hasAccount}
-        >
+        <button className="btn btn-primary" onClick={sendTransaction}>
           Make it rain
         </button>
-        {hasCorrectNetwork &&
-          hasAccount && (
-            <div className={styles.infoline}>
-              <Conversion amount={amount} />
-              {selectedAccount && <Account account={selectedAccount} />}
-            </div>
-          )}
+        <div className={styles.infoline}>
+          <Conversion amount={amount} />
+          {selectedAccount && <Account account={selectedAccount} />}
+        </div>
       </div>
     )
   }

src/components/Web3Donation/InputGroup.module.scss

@@ -5,6 +5,7 @@
     max-width: 18rem;
     margin: auto;
     position: relative;
+    animation: fadeIn .8s ease-out backwards;
 
     @media (min-width: $screen-sm) {
         display: flex;
@@ -79,4 +80,19 @@
     align-items: center;
     justify-content: center;
     margin-top: $spacer / 4;
+    animation: fadeIn .5s .8s ease-out backwards;
+}
+
+.message {
+    composes: message from './index.module.scss';
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: .01;
+    }
+
+    to {
+        opacity: 1;
+    }
 }

src/components/Web3Donation/index.jsx

@@ -1,27 +1,25 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Web3 from 'web3'
 import InputGroup from './InputGroup'
-import Alerts from './Alerts'
+import Alerts, { alertMessages } from './Alerts'
 import styles from './index.module.scss'
-import { getNetworkName, Logger } from './utils'
+import { getWeb3, getAccounts, getNetwork } from './utils'
 
 const ONE_SECOND = 1000
 const ONE_MINUTE = ONE_SECOND * 60
+const correctNetwork = 1
 
 export default class Web3Donation extends PureComponent {
   state = {
-    web3Connected: false,
-    networkId: null,
+    netId: null,
     networkName: null,
     accounts: [],
     selectedAccount: null,
     amount: '0.01',
     transactionHash: null,
     receipt: null,
-    loading: false,
-    error: null,
-    message: 'Hang on...'
+    message: null,
+    inTransaction: false
   }
 
   static propTypes = {
@@ -40,39 +38,26 @@ export default class Web3Donation extends PureComponent {
     this.resetAllTheThings()
   }
 
-  async initWeb3() {
-    // Modern dapp browsers...
-    if (window.ethereum) {
-      this.web3 = new Web3(window.ethereum)
+  initWeb3 = async () => {
+    this.setState({ message: { text: 'Checking' } })
 
-      try {
-        // Request account access
-        await window.ethereum.enable()
-        this.setState({ web3Connected: true })
+    try {
+      this.web3 = await getWeb3()
 
-        this.initAllTheTings()
-      } catch (error) {
-        // User denied account access...
-        Logger.error(error)
-        this.setState({ error })
-      }
-    }
-    // Legacy dapp browsers...
-    else if (window.web3) {
-      this.web3 = new Web3(window.web3.currentProvider)
-      this.setState({ web3Connected: true })
-
-      this.initAllTheTings()
-    }
-    // Non-dapp browsers...
-    else {
-      this.setState({ web3Connected: false })
+      this.web3
+        ? this.initAllTheTings()
+        : this.setState({
+            message: { status: 'error', text: alertMessages().noWeb3 }
+          })
+    } catch (error) {
+      this.setState({ message: { status: 'error', text: error } })
     }
   }
 
-  initAllTheTings() {
+  async initAllTheTings() {
     this.fetchAccounts()
     this.fetchNetwork()
+
     this.initAccountsPoll()
     this.initNetworkPoll()
   }
@@ -80,7 +65,6 @@ export default class Web3Donation extends PureComponent {
   resetAllTheThings() {
     clearInterval(this.interval)
     clearInterval(this.networkInterval)
-    this.setState({ web3Connected: false })
   }
 
   initAccountsPoll() {
@@ -95,46 +79,46 @@ export default class Web3Donation extends PureComponent {
     }
   }
 
-  fetchNetwork = () => {
+  fetchNetwork = async () => {
     const { web3 } = this
+    const { netId, networkName } = await getNetwork(web3)
 
-    web3 &&
-      web3.eth &&
-      web3.eth.net.getId((err, netId) => {
-        if (err) this.setState({ error: err })
-
-        if (netId !== this.state.networkId) {
-          this.setState({
-            error: null,
-            networkId: netId
-          })
-
-          getNetworkName(netId).then(networkName => {
-            this.setState({ networkName })
-          })
+    if (netId === correctNetwork) {
+      this.setState({ netId, networkName })
+    } else {
+      this.setState({
+        message: {
+          status: 'error',
+          text: alertMessages(networkName).noCorrectNetwork
         }
       })
+    }
   }
 
-  fetchAccounts = () => {
+  fetchAccounts = async () => {
     const { web3 } = this
+    const accounts = await getAccounts(web3)
 
-    web3 &&
-      web3.eth &&
-      web3.eth.getAccounts((err, accounts) => {
-        if (err) this.setState({ error: err })
-
-        this.setState({
-          error: null,
-          accounts,
-          selectedAccount: accounts[0].toLowerCase()
-        })
+    if (accounts[0]) {
+      this.setState({
+        accounts,
+        selectedAccount: accounts[0].toLowerCase()
       })
+    } else {
+      this.setState({
+        message: { status: 'error', text: alertMessages().noAccount }
+      })
+    }
   }
 
-  sendTransaction() {
+  sendTransaction = () => {
     const { web3 } = this
 
+    this.setState({
+      inTransaction: true,
+      message: { text: alertMessages().waitingForUser }
+    })
+
     web3.eth
       .sendTransaction({
         from: this.state.selectedAccount,
@@ -144,46 +128,32 @@ export default class Web3Donation extends PureComponent {
       .once('transactionHash', transactionHash => {
         this.setState({
           transactionHash,
-          message: 'Waiting for network confirmation, hang on...'
+          message: { text: alertMessages().waitingConfirmation }
         })
       })
-      .on('error', error => this.setState({ error, loading: false }))
+      .on('error', error =>
+        this.setState({ message: { status: 'error', text: error } })
+      )
       .then(() => {
-        this.setState({ message: 'Confirmed. You are awesome, thanks!' })
+        this.setState({
+          message: { status: 'success', text: alertMessages().success }
+        })
       })
   }
 
-  handleButton = () => {
-    this.setState({
-      loading: true,
-      message: 'Waiting for your confirmation...'
-    })
-
-    this.sendTransaction()
-  }
-
   onAmountChange = ({ target }) => {
     this.setState({ amount: target.value })
   }
 
   render() {
     const {
-      networkId,
-      accounts,
       selectedAccount,
-      web3Connected,
-      loading,
       amount,
-      networkName,
-      error,
       transactionHash,
-      confirmationNumber,
-      message
+      message,
+      inTransaction
     } = this.state
 
-    const hasCorrectNetwork = networkId === 1
-    const hasAccount = accounts.length !== 0
-
     return (
       <div className={styles.web3}>
         <header>
@@ -191,32 +161,22 @@ export default class Web3Donation extends PureComponent {
           <p>Send Ether with MetaMask, Brave, or Mist.</p>
         </header>
 
-        {web3Connected && (
-          <div className={styles.web3Row}>
-            {loading ? (
-              message
-            ) : (
-              <InputGroup
-                hasCorrectNetwork={hasCorrectNetwork}
-                hasAccount={hasAccount}
-                selectedAccount={selectedAccount}
-                amount={amount}
-                onAmountChange={this.onAmountChange}
-                handleButton={this.handleButton}
-              />
-            )}
-          </div>
-        )}
-
-        <Alerts
-          hasCorrectNetwork={hasCorrectNetwork}
-          hasAccount={hasAccount}
-          networkName={networkName}
-          error={error}
-          transactionHash={transactionHash}
-          web3Connected={web3Connected}
-          confirmationNumber={confirmationNumber}
-        />
+        <div className={styles.web3Row}>
+          {selectedAccount &&
+          this.state.netId === correctNetwork &&
+          !inTransaction ? (
+            <InputGroup
+              selectedAccount={selectedAccount}
+              amount={amount}
+              onAmountChange={this.onAmountChange}
+              sendTransaction={this.sendTransaction}
+            />
+          ) : (
+            message && (
+              <Alerts message={message} transactionHash={transactionHash} />
+            )
+          )}
+        </div>
       </div>
     )
   }

src/components/Web3Donation/index.module.scss

@@ -18,8 +18,44 @@
 }
 
 .web3Row {
-    min-height: 58px;
+    min-height: 77px;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.message {
+    font-size: $font-size-small;
+    position: relative;
+
+    &::after {
+        overflow: hidden;
+        display: inline-block;
+        vertical-align: bottom;
+        animation: ellipsis steps(4, end) 1s infinite;
+        content: '\2026'; // ascii code for the ellipsis character
+        width: 0;
+        position: absolute;
+        left: 100%;
+        bottom: 0;
+    }
+}
+
+.success {
+    composes: message;
+    color: green;
+
+    &::after {
+        display: none;
+    }
+}
+
+@keyframes ellipsis {
+    to {
+        width: .75rem;
+    }
 }

src/components/Web3Donation/utils.js

@@ -1,4 +1,49 @@
-export const getNetworkName = async netId => {
+import Web3 from 'web3'
+
+export const getWeb3 = async () => {
+  let web3
+
+  // Modern dapp browsers...
+  if (window.ethereum) {
+    web3 = new Web3(window.ethereum)
+
+    try {
+      // Request account access
+      await window.ethereum.enable()
+
+      return web3
+    } catch (error) {
+      // User denied account access...
+      Logger.error(error)
+      return error
+    }
+  }
+  // Legacy dapp browsers...
+  else if (window.web3) {
+    web3 = new Web3(window.web3.currentProvider)
+
+    return web3
+  }
+  // Non-dapp browsers...
+  else {
+    return
+  }
+}
+
+export const getAccounts = async web3 => {
+  const ethAccounts = await web3.eth.getAccounts()
+
+  return ethAccounts
+}
+
+export const getNetwork = async web3 => {
+  const netId = await web3.eth.net.getId()
+  const networkName = getNetworkName(netId)
+
+  return { netId, networkName }
+}
+
+export const getNetworkName = netId => {
   let networkName
 
   switch (netId) {
@@ -29,9 +74,7 @@ export const getFiat = async amount => {
 
   try {
     const response = await fetch(url)
-    if (!response.ok) {
-      throw Error(response.statusText)
-    }
+    if (!response.ok) Logger.error(response.statusText)
     const data = await response.json()
     const { price_usd, price_eur } = data[0]
     const dollar = (amount * price_usd).toFixed(2)

src/components/atoms/Coinhive.jsx

@@ -33,9 +33,8 @@ export default class CoinHiveClient extends PureComponent {
 
     return new Promise(resolve => {
       loadScript(config.script, error => {
-        if (error) {
-          return
-        }
+        if (error) return
+
         resolve(
           window.CoinHive.Anonymous(config.siteKey, {
             throttle: config.throttle,

src/components/atoms/Modal.module.scss

@@ -8,7 +8,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 10;
+    z-index: 9;
     background: rgba($body-background-color, .9);
     // backdrop-filter: blur(5px);
     animation: fadein .3s;

src/components/atoms/Qr.jsx

@@ -1,11 +1,17 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { QRCode } from 'react-qr-svg'
 import Clipboard from 'react-clipboard.js'
 import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
 
+import styles from './Qr.module.scss'
+
+const onCopySuccess = e => {
+  e.trigger.classList.add(styles.copied)
+}
+
 const Qr = ({ address, title }) => (
-  <Fragment>
+  <>
     {title && <h4>{title}</h4>}
     <QRCode
       bgColor="transparent"
@@ -13,14 +19,21 @@ const Qr = ({ address, title }) => (
       level="Q"
       style={{ width: 120 }}
       value={address}
+      className={styles.qr}
     />
-    <pre>
+
+    <pre className={styles.code}>
       <code>{address}</code>
-      <Clipboard data-clipboard-text={address} button-title="Copy to clipboard">
+      <Clipboard
+        data-clipboard-text={address}
+        button-title="Copy to clipboard"
+        onSuccess={e => onCopySuccess(e)}
+        className={styles.button}
+      >
         <IconClipboard />
       </Clipboard>
     </pre>
-  </Fragment>
+  </>
 )
 
 Qr.propTypes = {

src/components/atoms/Qr.module.scss

@@ -0,0 +1,54 @@
+@import 'variables';
+
+.qr {
+    margin-bottom: $spacer / 2;
+}
+
+.code {
+    margin: 0;
+    position: relative;
+    padding: 0;
+    padding-right: 2rem;
+
+    code {
+        padding: $spacer / 2;
+        font-size: .65rem;
+        text-align: center;
+    }
+}
+
+.button {
+    margin: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border: 0;
+    box-shadow: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    background: rgba($brand-grey, .3);
+    padding: $spacer / 3;
+
+    svg {
+        width: 1rem;
+        height: 1rem;
+        fill: $brand-grey-light;
+        transition: .15s ease-out;
+    }
+
+    &:hover {
+        svg {
+            fill: $brand-grey-dimmed;
+        }
+    }
+}
+
+.copied {
+    background: green;
+
+    // stylelint-disable-next-line no-descending-specificity
+    svg {
+        fill: $brand-grey-dimmed;
+    }
+}

src/components/molecules/ModalThanks.jsx

@@ -37,7 +37,7 @@ class ModalThanks extends PureComponent {
                 <Web3Donation address={author.ether} />
 
                 <header>
-                  <h4>Other wallets</h4>
+                  <h4>Any other wallets</h4>
                   <p>Send Bitcoin or Ether from any wallet.</p>
                 </header>
 

src/components/molecules/ModalThanks.module.scss

@@ -39,48 +39,4 @@
         width: 48%;
         margin-top: 0;
     }
-
-    > svg {
-        margin-bottom: $spacer / 2;
-    }
-
-    pre {
-        margin: 0;
-        position: relative;
-        padding: 0;
-        padding-right: 2rem;
-
-        code {
-            padding: $spacer / 2;
-            font-size: .65rem;
-            text-align: center;
-        }
-    }
-
-    button {
-        margin: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        border: 0;
-        box-shadow: none;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        background: rgba($brand-grey, .3);
-        padding: $spacer / 3;
-
-        svg {
-            width: 1rem;
-            height: 1rem;
-            fill: $brand-grey;
-            transition: .15s ease-out;
-        }
-
-        &:hover {
-            svg {
-                fill: $brand-grey-dimmed;
-            }
-        }
-    }
 }