component splitup, prepare loading state for faucet action

src/components/Header.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
-import AccountStatus from './molecules/AccountStatus'
+import AccountStatus from './molecules/AccountStatus/'
 import styles from './Header.module.scss'
 
 import menu from '../data/menu.json'

src/components/Web3message.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import Button from '../components/atoms/Button'
-import AccountStatus from './molecules/AccountStatus'
+import AccountStatus from './molecules/AccountStatus/'
 import styles from './Web3message.module.scss'
 import { User } from '../context/User'
 

src/components/molecules/AccountStatus.tsx

@@ -1,95 +0,0 @@
-import React, { PureComponent } from 'react'
-import cx from 'classnames'
-import Button from '../atoms/Button'
-import { User } from '../../context/User'
-import Popover from 'react-popover'
-import styles from './AccountStatus.module.scss'
-
-const AccountPopover = () => (
-    <div className={styles.popover}>
-        <div className={styles.accountName}>
-            <User.Consumer>
-                {states =>
-                    states.account ? (
-                        <span className={styles.address} title={states.account}>
-                            {states.account}
-                        </span>
-                    ) : (
-                        <em>No account selected</em>
-                    )
-                }
-            </User.Consumer>
-        </div>
-        <div className={styles.popoverInfoline}>
-            Network: &nbsp;<strong>{''}</strong>
-        </div>
-        <div className={styles.popoverInfoline}>
-            <User.Consumer>
-                {states => (
-                    <Button link onClick={() => states.requestFromFaucet()}>
-                        Make it rain
-                    </Button>
-                )}
-            </User.Consumer>
-        </div>
-    </div>
-)
-
-interface AccountStatusProps {
-    className?: string
-}
-
-interface AccountStatusState {
-    popoverIsOpen: boolean
-}
-
-export default class AccountStatus extends PureComponent<
-    AccountStatusProps,
-    AccountStatusState
-> {
-    public state = {
-        popoverIsOpen: false
-    }
-
-    private togglePopover(toState: boolean) {
-        const popoverIsOpen =
-            typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
-        this.setState({ popoverIsOpen })
-    }
-
-    public AccountIndicator = () => (
-        <div
-            className={cx(styles.status, this.props.className)}
-            onClick={() => this.togglePopover(true)}
-            onMouseOver={() => this.togglePopover(true)}
-        >
-            <User.Consumer>
-                {states =>
-                    !states.isWeb3 ? (
-                        <span className={styles.statusIndicator} />
-                    ) : !states.isLogged ? (
-                        <span className={styles.statusIndicatorCloseEnough} />
-                    ) : states.isLogged ? (
-                        <span className={styles.statusIndicatorActive} />
-                    ) : null
-                }
-            </User.Consumer>
-        </div>
-    )
-
-    public render() {
-        const popoverProps = {
-            isOpen: this.state.popoverIsOpen,
-            enterExitTransitionDurationMs: 300,
-            tipSize: 0.01,
-            onOuterAction: () => this.togglePopover(false),
-            body: <AccountPopover />
-        }
-
-        return (
-            <Popover {...popoverProps}>
-                <this.AccountIndicator />
-            </Popover>
-        )
-    }
-}

src/components/molecules/AccountStatus/Faucet.tsx

@@ -0,0 +1,49 @@
+import React, { PureComponent } from 'react'
+import Button from '../../atoms/Button'
+import { User } from '../../../context/User'
+
+interface FaucetState {
+    isLoading: boolean
+    error?: string
+}
+
+export default class Faucet extends PureComponent<{}, FaucetState> {
+    public state = {
+        isLoading: false,
+        error: undefined
+    }
+
+    private getTokens = async (requestFromFaucet: any) => {
+        this.setState({ isLoading: true })
+
+        try {
+            await requestFromFaucet()
+            this.setState({ isLoading: false })
+        } catch (error) {
+            this.setState({ isLoading: false, error })
+        }
+    }
+
+    public render() {
+        return (
+            <User.Consumer>
+                {states =>
+                    this.state.isLoading ? (
+                        'Getting tokens...'
+                    ) : this.state.error ? (
+                        this.state.error
+                    ) : (
+                        <Button
+                            link
+                            onClick={() =>
+                                this.getTokens(states.requestFromFaucet)
+                            }
+                        >
+                            Make it rain
+                        </Button>
+                    )
+                }
+            </User.Consumer>
+        )
+    }
+}

src/components/molecules/AccountStatus/Indicator.module.scss

@@ -0,0 +1,34 @@
+@import '../../../styles/variables';
+
+.status {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+}
+
+// default: red square
+.statusIndicator {
+    width: $font-size-small;
+    height: $font-size-small;
+    display: block;
+    background: $red;
+    margin-bottom: -.1rem;
+}
+
+// yellow triangle
+.statusIndicatorCloseEnough {
+    composes: statusIndicator;
+    background: none;
+    width: 0;
+    height: 0;
+    border-left: $font-size-small / 1.7 solid transparent;
+    border-right: $font-size-small / 1.7 solid transparent;
+    border-bottom: $font-size-small solid $yellow;
+}
+
+// green circle
+.statusIndicatorActive {
+    composes: statusIndicator;
+    border-radius: 50%;
+    background: $green;
+}

src/components/molecules/AccountStatus/Indicator.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import cx from 'classnames'
+import { User } from '../../../context/User'
+import styles from './Indicator.module.scss'
+
+const Indicator = ({
+    className,
+    showPopover
+}: {
+    className?: string
+    showPopover: any
+}) => (
+    <div
+        className={cx(styles.status, className)}
+        onClick={showPopover}
+        onMouseOver={showPopover}
+    >
+        <User.Consumer>
+            {states =>
+                !states.isWeb3 ? (
+                    <span className={styles.statusIndicator} />
+                ) : !states.isLogged ? (
+                    <span className={styles.statusIndicatorCloseEnough} />
+                ) : states.isLogged ? (
+                    <span className={styles.statusIndicatorActive} />
+                ) : null
+            }
+        </User.Consumer>
+    </div>
+)
+
+export default Indicator

src/components/molecules/AccountStatus/Popover.module.scss

@@ -1,37 +1,4 @@
-@import '../../styles/variables';
+@import '../../../styles/variables';
-
-.status {
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-}
-
-// default: red square
-.statusIndicator {
-    width: $font-size-small;
-    height: $font-size-small;
-    display: block;
-    background: $red;
-    margin-bottom: -.1rem;
-}
-
-// yellow triangle
-.statusIndicatorCloseEnough {
-    composes: statusIndicator;
-    background: none;
-    width: 0;
-    height: 0;
-    border-left: $font-size-small / 1.7 solid transparent;
-    border-right: $font-size-small / 1.7 solid transparent;
-    border-bottom: $font-size-small solid $yellow;
-}
-
-// green circle
-.statusIndicatorActive {
-    composes: statusIndicator;
-    border-radius: 50%;
-    background: $green;
-}
 
 $popoverWidth: 18rem;
 

src/components/molecules/AccountStatus/Popover.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { User } from '../../../context/User'
+import Faucet from './Faucet'
+import styles from './Popover.module.scss'
+
+const Popover = () => (
+    <div className={styles.popover}>
+        <div className={styles.accountName}>
+            <User.Consumer>
+                {states =>
+                    states.account ? (
+                        <span className={styles.address} title={states.account}>
+                            {states.account}
+                        </span>
+                    ) : (
+                        <em>No account selected</em>
+                    )
+                }
+            </User.Consumer>
+        </div>
+        <div className={styles.popoverInfoline}>
+            Network: &nbsp;<strong>{''}</strong>
+        </div>
+        <div className={styles.popoverInfoline}>
+            <Faucet />
+        </div>
+    </div>
+)
+
+export default Popover

src/components/molecules/AccountStatus/index.tsx

@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react'
+import Popover from 'react-popover'
+import AccountPopover from './Popover'
+import AccountIndicator from './Indicator'
+
+interface AccountStatusProps {
+    className?: string
+}
+
+interface AccountStatusState {
+    popoverIsOpen: boolean
+}
+
+export default class AccountStatus extends PureComponent<
+    AccountStatusProps,
+    AccountStatusState
+> {
+    public state = {
+        popoverIsOpen: false
+    }
+
+    public togglePopover(toState?: boolean) {
+        const popoverIsOpen =
+            typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
+        this.setState({ popoverIsOpen })
+    }
+
+    public render() {
+        const popoverProps = {
+            isOpen: this.state.popoverIsOpen,
+            enterExitTransitionDurationMs: 300,
+            tipSize: 0.01,
+            onOuterAction: () => this.togglePopover(false),
+            body: <AccountPopover />
+        }
+
+        return (
+            <Popover {...popoverProps}>
+                <AccountIndicator
+                    showPopover={() => this.togglePopover(true)}
+                    className={this.props.className}
+                />
+            </Popover>
+        )
+    }
+}