copy, success feedback for faucet action

src/components/molecules/AccountStatus/Faucet.tsx

@@ -2,23 +2,32 @@ import React, { PureComponent } from 'react'
 import Button from '../../atoms/Button'
 import { User } from '../../../context/User'
 
+interface FaucetProps {
+    togglePopover: any
+}
+
 interface FaucetState {
     isLoading: boolean
+    success?: string
     error?: string
 }
 
-export default class Faucet extends PureComponent<{}, FaucetState> {
+export default class Faucet extends PureComponent<FaucetProps, FaucetState> {
     public state = {
         isLoading: false,
+        success: undefined,
         error: undefined
     }
 
     private getTokens = async (requestFromFaucet: any) => {
+        // prevent popup from closing on click
+        this.props.togglePopover()
+
         this.setState({ isLoading: true })
 
         try {
             await requestFromFaucet()
-            this.setState({ isLoading: false })
+            this.setState({ isLoading: false, success: 'Tokens added!' })
         } catch (error) {
             this.setState({ isLoading: false, error })
         }
@@ -32,6 +41,8 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
                         'Getting tokens...'
                     ) : this.state.error ? (
                         this.state.error
+                    ) : this.state.success ? (
+                        this.state.success
                     ) : (
                         <Button
                             link
@@ -39,7 +50,7 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
                                 this.getTokens(states.requestFromFaucet)
                             }
                         >
-                            Make it rain
+                            Request Ether & Ocean
                         </Button>
                     )
                 }

src/components/molecules/AccountStatus/Popover.tsx

@@ -9,6 +9,23 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => (
         onMouseOver={togglePopover}
         onMouseOut={togglePopover}
     >
+        <div className={styles.popoverInfoline}>
+            <span className={styles.balance} title="Fake data">
+                <strong>30</strong> ETH
+            </span>
+            {/* <span className={styles.balance} title={(eth / 1e18).toFixed(10)}>
+                    <strong>{(eth / 1e18).toFixed(3).slice(0, -1)}</strong> ETH
+                </span> */}
+            <span className={styles.balance}>
+                {/* <strong>{ocn}</strong> OCEAN */}
+                <strong>2474290</strong> OCEAN
+            </span>
+        </div>
+
+        <div className={styles.popoverInfoline}>
+            <Faucet togglePopover={togglePopover} />
+        </div>
+
         <div className={styles.popoverInfoline}>
             <User.Consumer>
                 {states =>
@@ -22,28 +39,14 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => (
                 }
             </User.Consumer>
         </div>
+
         <div className={styles.popoverInfoline}>
-            Network: <strong>&nbsp; Fake Network Name</strong>
+            Fake Network Name
-            {/* Network:
+            {/*
             <User.Consumer>
-                {states => states.network && <strong>{states.network}</strong>}
+                {states => states.network && states.network}
             </User.Consumer> */}
         </div>
-        <div className={styles.popoverInfoline}>
-            <span className={styles.balance} title="Fake data">
-                <strong>30</strong> ETH
-            </span>
-            {/* <span className={styles.balance} title={(eth / 1e18).toFixed(10)}>
-                    <strong>{(eth / 1e18).toFixed(3).slice(0, -1)}</strong> ETH
-                </span> */}
-            <span className={styles.balance}>
-                {/* <strong>{ocn}</strong> OCEAN */}
-                <strong>2474290</strong> OCEAN
-            </span>
-        </div>
-        <div className={styles.popoverInfoline}>
-            <Faucet />
-        </div>
     </div>
 )