added token faucet functionality

client/.env.local.example

@@ -54,3 +54,4 @@ REACT_APP_BRIZO_ADDRESS="0x0474ed05ba757dde575dfaaaa267d9e7f3643abc"
 
 REACT_APP_REPORT_EMAIL="test@example.com"
 # REACT_APP_ALLOW_PRICING=true
+# REACT_APP_SHOW_REQUEST_TOKENS_BUTTON=true

client/src/config.ts

@@ -29,3 +29,4 @@ export const faucetUri =
 export const verbose = true
 export const analyticsId = 'UA-60614729-11'
 export const allowPricing = process.env.REACT_APP_ALLOW_PRICING || false
+export const showRequestTokens = process.env.REACT_APP_SHOW_REQUEST_TOKENS_BUTTON || false

client/src/routes/Faucet.tsx

@@ -8,6 +8,7 @@ import Web3message from '../components/organisms/Web3message'
 import styles from './Faucet.module.scss'
 import Content from '../components/atoms/Content'
 import withTracker from '../hoc/withTracker'
+import { showRequestTokens } from '../config'
 
 interface FaucetState {
     isLoading: boolean
@@ -26,7 +27,17 @@ class Faucet extends PureComponent<{}, FaucetState> {
         trxHash: undefined
     }
 
-    private getTokens = async (
+    private getTokens = async () => {
+
+        const { ocean } = this.context
+        const accounts = await ocean.accounts.list()
+        console.log(accounts)
+        const account = accounts[0]
+        console.log(account)
+        await ocean.accounts.requestTokens(account, 10)
+    }
+
+    private getEther = async (
         requestFromFaucet: () => Promise<FaucetResponse>
     ) => {
         this.setState({ isLoading: true })
@@ -91,13 +102,13 @@ class Faucet extends PureComponent<{}, FaucetState> {
         </div>
     )
 
-    private Action = () => (
+    private GetEther = () => (
         <>
             <Button
                 primary
-                onClick={() => this.getTokens(this.context.requestFromFaucet)}
+                onClick={() => this.getEther(this.context.requestFromFaucet)}
                 disabled={!this.context.isLogged}
-                name="Faucet"
+                name="FaucetEther"
             >
                 Request Ether
             </Button>
@@ -107,6 +118,22 @@ class Faucet extends PureComponent<{}, FaucetState> {
         </>
     )
 
+    private GetTokens = () => (
+        <>
+            <Button
+                primary
+                onClick={() => this.getTokens()}
+                disabled={!this.context.isLogged}
+                name="FaucetTokens"
+            >
+                Request Tokens
+            </Button>
+            <p>
+                You can request tokens every once in a while.
+            </p>
+        </>
+    )
+
     public render() {
         const { isLogged } = this.context
         const { isLoading, error, success } = this.state
@@ -129,9 +156,25 @@ class Faucet extends PureComponent<{}, FaucetState> {
                                 ) : success ? (
                                     <this.Success />
                                 ) : (
-                                    isLogged && <this.Action />
+                                    isLogged && <this.GetEther />
                                 )}
                             </div>
+
+                            {
+                                showRequestTokens ?
+                                    <div className={styles.action}>
+                                        {isLoading ? (
+                                            <Spinner message="Getting Tokens..."/>
+                                        ) : error ? (
+                                            <this.Error/>
+                                        ) : success ? (
+                                            <this.Success/>
+                                        ) : (
+                                            isLogged && <this.GetTokens />
+                                        )}
+                                    </div> : null
+                            }
+
                         </Content>
                     </Route>
                 )}