consume & faucet tweaks for Web3 cases

client/src/components/organisms/Web3message.module.scss

@@ -9,6 +9,7 @@
     border-top: .1rem solid $brand-grey-lighter;
     padding-top: $spacer / 2;
     padding-bottom: $spacer / 2;
+    text-align: left;
 }
 
 .account {

client/src/components/organisms/Web3message.tsx

@@ -5,6 +5,50 @@ import styles from './Web3message.module.scss'
 import { User } from '../../context/User'
 
 export default class Web3message extends PureComponent {
+    private noWeb3 = () => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Not a Web3 Browser. For
+            publishing or downloading an asset you need to{' '}
+            <a
+                href="https://docs.oceanprotocol.com/tutorials/metamask-setup/"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                setup MetaMask
+            </a>{' '}
+            or use any other Web3-capable plugin or browser.
+        </div>
+    )
+
+    private unlockAccount = (states: any) => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Account locked. For
+            publishing and downloading an asset you need to unlock your Web3
+            account.{' '}
+            <Button link onClick={states.startLogin}>
+                Unlock account
+            </Button>
+        </div>
+    )
+
+    private haveAccount = (account: string) => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Connected with account
+            <code className={styles.account} title={account && account}>
+                {`${account && account.substring(0, 20)}...`}
+            </code>
+        </div>
+    )
+
+    private wrongNetwork = (network: string) => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Not connected to Nile
+            network, but to {network}.<br />
+            Please connect in MetaMask with Custom RPC{' '}
+            <code>{`https://nile.dev-ocean.com`}</code>
+        </div>
+    )
+
     public render() {
         return (
             <User.Consumer>
@@ -22,55 +66,4 @@ export default class Web3message extends PureComponent {
             </User.Consumer>
         )
     }
-
-    public noWeb3() {
-        return (
-            <div className={styles.message}>
-                <AccountStatus className={styles.status} /> Not a Web3 Browser.
-                For publishing or consuming an asset you need to{' '}
-                <a
-                    href="https://docs.oceanprotocol.com/tutorials/metamask-setup/"
-                    target="_blank"
-                >
-                    setup MetaMask
-                </a>{' '}
-                or use any other Web3-capable plugin or browser.
-            </div>
-        )
-    }
-
-    public unlockAccount(states: any) {
-        return (
-            <div className={styles.message}>
-                <AccountStatus className={styles.status} /> Account locked. For
-                publishing an asset you need to unlock your Web3 account.{' '}
-                <Button link onClick={states.startLogin}>
-                    Unlock account
-                </Button>
-            </div>
-        )
-    }
-
-    public haveAccount(account: string) {
-        return (
-            <div className={styles.message}>
-                <AccountStatus className={styles.status} /> Connected with
-                account
-                <code className={styles.account} title={account && account}>
-                    {`${account && account.substring(0, 20)}...`}
-                </code>
-            </div>
-        )
-    }
-
-    public wrongNetwork(network: string) {
-        return (
-            <div className={styles.message}>
-                <AccountStatus className={styles.status} /> Not connected to
-                Nile network, but to {network}.<br />
-                Please connect in MetaMask with Custom RPC{' '}
-                <code>{`https://nile.dev-ocean.com`}</code>
-            </div>
-        )
-    }
 }

client/src/routes/Details/AssetFile.tsx

@@ -76,7 +76,7 @@ export default class AssetFile extends PureComponent<
     public render() {
         const { ddo, file } = this.props
         const { isLoading, message, error } = this.state
-        const { isLogged, startLogin } = this.context
+        const { isLogged } = this.context
 
         return (
             <div className={styles.fileWrap}>
@@ -97,11 +97,7 @@ export default class AssetFile extends PureComponent<
                     <Button
                         primary
                         className={styles.buttonMain}
-                        onClick={
-                            isLogged
-                                ? () => this.purchaseAsset(ddo, file.index)
-                                : startLogin
-                        }
+                        onClick={() => this.purchaseAsset(ddo, file.index)}
                         disabled={!isLogged}
                     >
                         Get file

client/src/routes/Faucet.tsx

@@ -36,53 +36,13 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
 
             this.setState({
                 isLoading: false,
-                success: `Successfully added ETH to your account.`
+                success: 'Successfully added ETH to your account.'
             })
         } catch (error) {
             this.setState({ isLoading: false, error })
         }
     }
 
-    private RequestMarkup = () => (
-        <User.Consumer>
-            {states =>
-                states.isLogged ? (
-                    <Button
-                        primary
-                        onClick={() => this.getTokens(states.requestFromFaucet)}
-                    >
-                        Request Ether
-                    </Button>
-                ) : states.isWeb3 ? (
-                    <Web3message />
-                ) : (
-                    <Web3message />
-                )
-            }
-        </User.Consumer>
-    )
-
-    private ActionMarkup = () => (
-        <div className={styles.action}>
-            {this.state.isLoading ? (
-                <Spinner message="Getting Ether..." />
-            ) : this.state.error ? (
-                <div className={styles.error}>
-                    <p>{this.state.error}</p>
-                    <Button onClick={this.reset}>Try again</Button>
-                </div>
-            ) : this.state.success ? (
-                <div className={styles.success}>{this.state.success}</div>
-            ) : (
-                <this.RequestMarkup />
-            )}
-
-            <p>
-                You can only request Ether once every 24 hours for your address.
-            </p>
-        </div>
-    )
-
     private reset = () => {
         this.setState({
             error: undefined,
@@ -91,18 +51,57 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
         })
     }
 
+    private Success = () => (
+        <div className={styles.success}>{this.state.success}</div>
+    )
+
+    private Error = () => (
+        <div className={styles.error}>
+            <p>{this.state.error}</p>
+            <Button onClick={() => this.reset()}>Try again</Button>
+        </div>
+    )
+
+    private Action = () => (
+        <>
+            <Button
+                primary
+                onClick={() => this.getTokens(this.context.requestFromFaucet)}
+                disabled={!this.context.isLogged}
+            >
+                Request Ether
+            </Button>
+            <p>
+                You can only request Ether once every 24 hours for your address.
+            </p>
+        </>
+    )
+
     public render() {
+        const { isWeb3 } = this.context
+        const { isLoading, error, success } = this.state
+
         return (
             <Route
                 title="Faucet"
-                description="Shower yourself with some Ether for the Ocean POA network."
+                description="Shower yourself with some Ether for Ocean's Nile test network."
             >
-                <User.Consumer>
-                    {states => !states.isNile && <Web3message />}
-                </User.Consumer>
+                <Web3message />
 
-                <this.ActionMarkup />
+                <div className={styles.action}>
+                    {isLoading ? (
+                        <Spinner message="Getting Ether..." />
+                    ) : error ? (
+                        <this.Error />
+                    ) : success ? (
+                        <this.Success />
+                    ) : (
+                        isWeb3 && <this.Action />
+                    )}
+                </div>
             </Route>
         )
     }
 }
+
+Faucet.contextType = User