put faucet onto its own page

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>
 )

src/components/molecules/AccountStatus/Faucet.tsx

@@ -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>
-        )
-    }
-}

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)}

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}>

src/data/menu.json

@@ -3,6 +3,10 @@
     "title": "Publish",
     "link": "/publish"
   },
+  {
+    "title": "Faucet",
+    "link": "/faucet"
+  },
   {
     "title": "About",
     "link": "/about"

src/routes/Faucet.module.scss

@@ -0,0 +1,2 @@
+@import '../styles/variables';
+

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