From 86948a5340731c61a8c23c3f15e2baf0f31aa652 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 28 Oct 2018 11:16:57 +0100 Subject: [PATCH] tweaks --- src/components/Web3Donation/Alerts.jsx | 6 +-- src/components/Web3Donation/InputGroup.jsx | 22 +++----- .../Web3Donation/InputGroup.module.scss | 4 +- src/components/Web3Donation/index.jsx | 24 ++++++--- src/components/Web3Donation/index.module.scss | 28 ++++++++++ src/components/Web3Donation/utils.js | 4 +- src/components/atoms/Coinhive.jsx | 5 +- src/components/atoms/Modal.module.scss | 2 +- src/components/atoms/Qr.jsx | 23 ++++++-- src/components/atoms/Qr.module.scss | 54 +++++++++++++++++++ .../molecules/ModalThanks.module.scss | 44 --------------- 11 files changed, 133 insertions(+), 83 deletions(-) create mode 100644 src/components/atoms/Qr.module.scss diff --git a/src/components/Web3Donation/Alerts.jsx b/src/components/Web3Donation/Alerts.jsx index da216a57..3151150a 100644 --- a/src/components/Web3Donation/Alerts.jsx +++ b/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 ? ( ) : ( - + <> {!hasAccount && ( )} @@ -58,7 +58,7 @@ export default class Alerts extends PureComponent { message={this.alertMessages(null, transactionHash).transaction} /> )} - + )} ) diff --git a/src/components/Web3Donation/InputGroup.jsx b/src/components/Web3Donation/InputGroup.jsx index a2c8e38e..f5476a0a 100644 --- a/src/components/Web3Donation/InputGroup.jsx +++ b/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 ? ( -
{message}
- ) : ( + return (
Make it rain - {hasCorrectNetwork && + {isCorrectNetwork && hasAccount && (
diff --git a/src/components/Web3Donation/InputGroup.module.scss b/src/components/Web3Donation/InputGroup.module.scss index 0dc15dca..06e07cf1 100644 --- a/src/components/Web3Donation/InputGroup.module.scss +++ b/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 { diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.jsx index ce7c3cb1..96c4057f 100644 --- a/src/components/Web3Donation/index.jsx +++ b/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 {
{loading ? ( -
Checking...
+
Checking
+ ) : inTransaction ? ( +
+ {message} +
) : ( web3Connected && ( ) diff --git a/src/components/Web3Donation/index.module.scss b/src/components/Web3Donation/index.module.scss index f20ea05a..93743afb 100644 --- a/src/components/Web3Donation/index.module.scss +++ b/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; + } } diff --git a/src/components/Web3Donation/utils.js b/src/components/Web3Donation/utils.js index 8d430f42..0752d4ff 100644 --- a/src/components/Web3Donation/utils.js +++ b/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) diff --git a/src/components/atoms/Coinhive.jsx b/src/components/atoms/Coinhive.jsx index 1fd7af8f..1f98b6a9 100644 --- a/src/components/atoms/Coinhive.jsx +++ b/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, diff --git a/src/components/atoms/Modal.module.scss b/src/components/atoms/Modal.module.scss index 28ae690b..38535960 100644 --- a/src/components/atoms/Modal.module.scss +++ b/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; diff --git a/src/components/atoms/Qr.jsx b/src/components/atoms/Qr.jsx index 6f3b0202..d65e9f3c 100644 --- a/src/components/atoms/Qr.jsx +++ b/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 }) => ( - + <> {title &&

{title}

} ( level="Q" style={{ width: 120 }} value={address} + className={styles.qr} /> - 
+
+    
       {address}
-      
+       onCopySuccess(e)}
+        className={styles.button}
+      >
         
       
     

-  
+  
 )
 
 Qr.propTypes = {
diff --git a/src/components/atoms/Qr.module.scss b/src/components/atoms/Qr.module.scss
new file mode 100644
index 00000000..880b4977
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/components/molecules/ModalThanks.module.scss b/src/components/molecules/ModalThanks.module.scss
index 0c10f1e1..6b59682c 100644
--- a/src/components/molecules/ModalThanks.module.scss
+++ b/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;
-            }
-        }
-    }
 }