prototype 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",

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.module.scss

@@ -5,6 +5,10 @@
     margin-top: $spacer / 2;
     font-size: $font-size-small;
     color: darken($alert-error, 60%);
+
+    &:empty {
+        display: none;
+    }
 }
 
 .success {

src/components/Web3Donation/InputGroup.jsx

@@ -12,7 +12,9 @@ export default class InputGroup extends PureComponent {
     amount: PropTypes.string.isRequired,
     onAmountChange: PropTypes.func.isRequired,
     handleButton: PropTypes.func.isRequired,
-    selectedAccount: PropTypes.string
+    selectedAccount: PropTypes.string,
+    inTransaction: PropTypes.bool,
+    message: PropTypes.string
   }
 
   render() {
@@ -22,10 +24,14 @@ export default class InputGroup extends PureComponent {
       amount,
       onAmountChange,
       handleButton,
-      selectedAccount
+      selectedAccount,
+      inTransaction,
+      message
     } = this.props
 
-    return (
+    return inTransaction ? (
+      <div className={styles.message}>{message}</div>
+    ) : (
       <div className={styles.inputGroup}>
         <div className={styles.input}>
           <Input

src/components/Web3Donation/InputGroup.module.scss

@@ -5,6 +5,7 @@
     max-width: 18rem;
     margin: auto;
     position: relative;
+    animation: fadeIn .5s 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 {
+    font-size: $font-size-small;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: .01;
+    }
+
+    to {
+        opacity: 1;
+    }
 }

src/components/Web3Donation/index.jsx

@@ -13,12 +13,14 @@ export default class Web3Donation extends PureComponent {
     web3Connected: false,
     netId: null,
     networkName: null,
+    isCorrectNetwork: false,
+    loading: true,
     accounts: [],
     selectedAccount: null,
     amount: '0.01',
     transactionHash: null,
     receipt: null,
-    loading: false,
+    inTransaction: false,
     error: null,
     message: 'Hang on...'
   }
@@ -39,21 +41,24 @@ export default class Web3Donation extends PureComponent {
     this.resetAllTheThings()
   }
 
-  async initWeb3() {
+  initWeb3 = async () => {
     try {
       this.web3 = await getWeb3()
 
       this.setState({ web3Connected: this.web3 ? true : false })
-      this.web3 && this.initAllTheTings()
+      this.web3 ? this.initAllTheTings() : this.setState({ loading: false })
     } catch (error) {
       this.setState({ error })
       this.setState({ web3Connected: false })
     }
   }
 
-  initAllTheTings() {
-    this.fetchAccounts()
-    this.fetchNetwork()
+  async initAllTheTings() {
+    await this.fetchAccounts()
+    await this.fetchNetwork()
+
+    this.setState({ loading: false })
+
     this.initAccountsPoll()
     this.initNetworkPoll()
   }
@@ -85,7 +90,8 @@ export default class Web3Donation extends PureComponent {
       this.setState({
         error: null,
         netId,
-        networkName
+        networkName,
+        isCorrectNetwork: netId === 1
       })
     } catch (error) {
       this.setState({ error })
@@ -123,7 +129,7 @@ export default class Web3Donation extends PureComponent {
           message: 'Waiting for network confirmation, hang on...'
         })
       })
-      .on('error', error => this.setState({ error, loading: false }))
+      .on('error', error => this.setState({ error, inTransaction: false }))
       .then(() => {
         this.setState({ message: 'Confirmed. You are awesome, thanks!' })
       })
@@ -131,7 +137,7 @@ export default class Web3Donation extends PureComponent {
 
   handleButton = () => {
     this.setState({
-      loading: true,
+      inTransaction: true,
       message: 'Waiting for your confirmation...'
     })
 
@@ -144,10 +150,11 @@ export default class Web3Donation extends PureComponent {
 
   render() {
     const {
-      netId,
+      isCorrectNetwork,
       accounts,
       selectedAccount,
       web3Connected,
+      inTransaction,
       loading,
       amount,
       networkName,
@@ -157,7 +164,6 @@ export default class Web3Donation extends PureComponent {
       message
     } = this.state
 
-    const hasCorrectNetwork = netId === 1
     const hasAccount = accounts.length !== 0
 
     return (
@@ -167,32 +173,36 @@ export default class Web3Donation extends PureComponent {
           <p>Send Ether with MetaMask, Brave, or Mist.</p>
         </header>
 
-        {web3Connected && (
-          <div className={styles.web3Row}>
-            {loading ? (
-              message
-            ) : (
+        <div className={styles.web3Row}>
+          {loading ? (
+            <div className={styles.message}>Checking...</div>
+          ) : (
+            web3Connected && (
               <InputGroup
-                hasCorrectNetwork={hasCorrectNetwork}
+                hasCorrectNetwork={isCorrectNetwork}
                 hasAccount={hasAccount}
                 selectedAccount={selectedAccount}
                 amount={amount}
                 onAmountChange={this.onAmountChange}
                 handleButton={this.handleButton}
+                inTransaction={inTransaction}
+                message={message}
               />
-            )}
-          </div>
-        )}
+            )
+          )}
+        </div>
 
-        <Alerts
-          hasCorrectNetwork={hasCorrectNetwork}
-          hasAccount={hasAccount}
-          networkName={networkName}
-          error={error}
-          transactionHash={transactionHash}
-          web3Connected={web3Connected}
-          confirmationNumber={confirmationNumber}
-        />
+        {!loading && (
+          <Alerts
+            hasCorrectNetwork={isCorrectNetwork}
+            hasAccount={hasAccount}
+            networkName={networkName}
+            error={error}
+            transactionHash={transactionHash}
+            web3Connected={web3Connected}
+            confirmationNumber={confirmationNumber}
+          />
+        )}
       </div>
     )
   }

src/components/Web3Donation/index.module.scss

@@ -18,8 +18,16 @@
 }
 
 .web3Row {
-    min-height: 58px;
+    min-height: 77px;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.message {
+    font-size: $font-size-small;
 }