tweaks

src/components/Web3Donation/Alerts.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, PureComponent } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Alerts.module.scss'
 
@@ -42,7 +42,7 @@ export default class Alerts extends PureComponent {
         {!web3Connected ? (
           <Message message={this.alertMessages().noWeb3} />
         ) : (
-          <Fragment>
+          <>
             {!hasAccount && (
               <Message message={this.alertMessages().noAccount} />
             )}
@@ -58,7 +58,7 @@ export default class Alerts extends PureComponent {
                 message={this.alertMessages(null, transactionHash).transaction}
               />
             )}
-          </Fragment>
+          </>
         )}
       </div>
     )

src/components/Web3Donation/InputGroup.jsx

@@ -7,36 +7,30 @@ import styles from './InputGroup.module.scss'
 
 export default class InputGroup extends PureComponent {
   static propTypes = {
-    hasCorrectNetwork: PropTypes.bool.isRequired,
+    isCorrectNetwork: PropTypes.bool.isRequired,
     hasAccount: PropTypes.bool.isRequired,
     amount: PropTypes.string.isRequired,
     onAmountChange: PropTypes.func.isRequired,
     handleButton: PropTypes.func.isRequired,
-    selectedAccount: PropTypes.string,
-    inTransaction: PropTypes.bool,
-    message: PropTypes.string
+    selectedAccount: PropTypes.string
   }
 
   render() {
     const {
-      hasCorrectNetwork,
+      isCorrectNetwork,
       hasAccount,
       amount,
       onAmountChange,
       handleButton,
-      selectedAccount,
-      inTransaction,
-      message
+      selectedAccount
     } = this.props
 
-    return inTransaction ? (
-      <div className={styles.message}>{message}</div>
-    ) : (
+    return (
       <div className={styles.inputGroup}>
         <div className={styles.input}>
           <Input
             type="number"
-            disabled={!hasCorrectNetwork || !hasAccount}
+            disabled={!isCorrectNetwork || !hasAccount}
             value={amount}
             onChange={onAmountChange}
             min="0"
@@ -49,11 +43,11 @@ export default class InputGroup extends PureComponent {
         <button
           className="btn btn-primary"
           onClick={handleButton}
-          disabled={!hasCorrectNetwork || !hasAccount}
+          disabled={!isCorrectNetwork || !hasAccount}
         >
           Make it rain
         </button>
-        {hasCorrectNetwork &&
+        {isCorrectNetwork &&
           hasAccount && (
             <div className={styles.infoline}>
               <Conversion amount={amount} />

src/components/Web3Donation/InputGroup.module.scss

@@ -5,7 +5,7 @@
     max-width: 18rem;
     margin: auto;
     position: relative;
-    animation: fadeIn .5s ease-out backwards;
+    animation: fadeIn .8s ease-out backwards;
 
     @media (min-width: $screen-sm) {
         display: flex;
@@ -84,7 +84,7 @@
 }
 
 .message {
-    font-size: $font-size-small;
+    composes: message from './index.module.scss';
 }
 
 @keyframes fadeIn {

src/components/Web3Donation/index.jsx

@@ -22,7 +22,8 @@ export default class Web3Donation extends PureComponent {
     receipt: null,
     inTransaction: false,
     error: null,
-    message: 'Hang on...'
+    message: 'Hang on',
+    success: false
   }
 
   static propTypes = {
@@ -126,19 +127,22 @@ export default class Web3Donation extends PureComponent {
       .once('transactionHash', transactionHash => {
         this.setState({
           transactionHash,
-          message: 'Waiting for network confirmation, hang on...'
+          message: 'Waiting for network confirmation, hang on'
         })
       })
       .on('error', error => this.setState({ error, inTransaction: false }))
       .then(() => {
-        this.setState({ message: 'Confirmed. You are awesome, thanks!' })
+        this.setState({
+          message: 'Confirmed. You are awesome, thanks!',
+          success: true
+        })
       })
   }
 
   handleButton = () => {
     this.setState({
       inTransaction: true,
-      message: 'Waiting for your confirmation...'
+      message: 'Waiting for your confirmation'
     })
 
     this.sendTransaction()
@@ -161,7 +165,8 @@ export default class Web3Donation extends PureComponent {
       error,
       transactionHash,
       confirmationNumber,
-      message
+      message,
+      success
     } = this.state
 
     const hasAccount = accounts.length !== 0
@@ -175,17 +180,20 @@ export default class Web3Donation extends PureComponent {
 
         <div className={styles.web3Row}>
           {loading ? (
-            <div className={styles.message}>Checking...</div>
+            <div className={styles.message}>Checking</div>
+          ) : inTransaction ? (
+            <div className={success ? styles.success : styles.message}>
+              {message}
+            </div>
           ) : (
             web3Connected && (
               <InputGroup
-                hasCorrectNetwork={isCorrectNetwork}
+                isCorrectNetwork={isCorrectNetwork}
                 hasAccount={hasAccount}
                 selectedAccount={selectedAccount}
                 amount={amount}
                 onAmountChange={this.onAmountChange}
                 handleButton={this.handleButton}
-                inTransaction={inTransaction}
                 message={message}
               />
             )

src/components/Web3Donation/index.module.scss

@@ -30,4 +30,32 @@
 
 .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

@@ -74,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.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;
-            }
-        }
-    }
 }