From dbd765124a9383111f0cc4f0645952a7df9a83cf Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 28 Feb 2019 13:12:48 -0300
Subject: [PATCH] put faucet onto its own page

---
 src/Routes.tsx                                |  2 +
 .../molecules/AccountStatus/Faucet.tsx        | 60 -----------------
 .../molecules/AccountStatus/Indicator.tsx     |  2 +-
 .../molecules/AccountStatus/Popover.tsx       |  6 +-
 src/data/menu.json                            |  4 ++
 src/routes/Faucet.module.scss                 |  2 +
 src/routes/Faucet.tsx                         | 65 +++++++++++++++++++
 7 files changed, 77 insertions(+), 64 deletions(-)
 delete mode 100644 src/components/molecules/AccountStatus/Faucet.tsx
 create mode 100644 src/routes/Faucet.module.scss
 create mode 100644 src/routes/Faucet.tsx

diff --git a/src/Routes.tsx b/src/Routes.tsx
index 84fef08..4b82bf3 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -7,6 +7,7 @@ import Home from './routes/Home'
 import NotFound from './routes/NotFound'
 import Publish from './routes/Publish/'
 import Search from './routes/Search'
+import Faucet from './routes/Faucet'
 import Styleguide from './routes/Styleguide'
 
 const Routes = () => (
@@ -17,6 +18,7 @@ const Routes = () => (
         <Route component={Publish} path="/publish" />
         <Route component={Search} path="/search" />
         <Route component={Details} path="/asset/:did" />
+        <Route component={Faucet} path="/faucet" />
         <Route component={NotFound} />
     </Switch>
 )
diff --git a/src/components/molecules/AccountStatus/Faucet.tsx b/src/components/molecules/AccountStatus/Faucet.tsx
deleted file mode 100644
index 7b1ea80..0000000
--- a/src/components/molecules/AccountStatus/Faucet.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-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<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, success: 'Tokens added!' })
-        } catch (error) {
-            this.setState({ isLoading: false, error })
-        }
-    }
-
-    public render() {
-        return (
-            <User.Consumer>
-                {states =>
-                    this.state.isLoading ? (
-                        'Getting tokens...'
-                    ) : this.state.error ? (
-                        this.state.error
-                    ) : this.state.success ? (
-                        this.state.success
-                    ) : (
-                        <Button
-                            link
-                            onClick={() =>
-                                this.getTokens(states.requestFromFaucet)
-                            }
-                        >
-                            Request Ether
-                        </Button>
-                    )
-                }
-            </User.Consumer>
-        )
-    }
-}
diff --git a/src/components/molecules/AccountStatus/Indicator.tsx b/src/components/molecules/AccountStatus/Indicator.tsx
index aa3c6e0..52c2d86 100644
--- a/src/components/molecules/AccountStatus/Indicator.tsx
+++ b/src/components/molecules/AccountStatus/Indicator.tsx
@@ -8,7 +8,7 @@ const Indicator = ({
     togglePopover
 }: {
     className?: string
-    togglePopover: any
+    togglePopover: () => void
 }) => (
     <div
         className={cx(styles.status, className)}
diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx
index 570f4b5..ce46c1f 100644
--- a/src/components/molecules/AccountStatus/Popover.tsx
+++ b/src/components/molecules/AccountStatus/Popover.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import { User } from '../../../context/User'
-import Faucet from './Faucet'
 import styles from './Popover.module.scss'
 
-const Popover = ({ togglePopover }: { togglePopover: any }) => (
+const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
     <div
         className={styles.popover}
         onMouseOver={togglePopover}
@@ -23,7 +23,7 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => (
         </div>
 
         <div className={styles.popoverInfoline}>
-            <Faucet togglePopover={togglePopover} />
+            <Link to={'/faucet'}>Request Ether</Link>
         </div>
 
         <div className={styles.popoverInfoline}>
diff --git a/src/data/menu.json b/src/data/menu.json
index 5dc0a19..b48c27b 100644
--- a/src/data/menu.json
+++ b/src/data/menu.json
@@ -3,6 +3,10 @@
     "title": "Publish",
     "link": "/publish"
   },
+  {
+    "title": "Faucet",
+    "link": "/faucet"
+  },
   {
     "title": "About",
     "link": "/about"
diff --git a/src/routes/Faucet.module.scss b/src/routes/Faucet.module.scss
new file mode 100644
index 0000000..38b9719
--- /dev/null
+++ b/src/routes/Faucet.module.scss
@@ -0,0 +1,2 @@
+@import '../styles/variables';
+
diff --git a/src/routes/Faucet.tsx b/src/routes/Faucet.tsx
new file mode 100644
index 0000000..2a7ae5e
--- /dev/null
+++ b/src/routes/Faucet.tsx
@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react'
+import Route from '../components/templates/Route'
+import Button from '../components/atoms/Button'
+import { User } from '../context/User'
+import Web3message from '../components/molecules/Web3message'
+import styles from './Faucet.module.scss'
+
+interface FaucetState {
+    isLoading: boolean
+    success?: string
+    error?: string
+}
+
+class Faucet extends PureComponent<{}, FaucetState> {
+    public state = {
+        isLoading: false,
+        success: undefined,
+        error: undefined
+    }
+
+    private getTokens = async (requestFromFaucet: () => void) => {
+        this.setState({ isLoading: true })
+
+        try {
+            await requestFromFaucet()
+            this.setState({ isLoading: false, success: 'Tokens added!' })
+        } catch (error) {
+            this.setState({ isLoading: false, error })
+        }
+    }
+
+    public render() {
+        return (
+            <Route
+                title="Faucet"
+                description="Shower yourself with some Ether."
+            >
+                <Web3message />
+
+                <User.Consumer>
+                    {states =>
+                        this.state.isLoading ? (
+                            'Getting tokens...'
+                        ) : this.state.error ? (
+                            this.state.error
+                        ) : this.state.success ? (
+                            this.state.success
+                        ) : (
+                            <Button
+                                primary
+                                onClick={() =>
+                                    this.getTokens(states.requestFromFaucet)
+                                }
+                            >
+                                Request Ether
+                            </Button>
+                        )
+                    }
+                </User.Consumer>
+            </Route>
+        )
+    }
+}
+
+export default Faucet