Merge pull request #199 from oceanprotocol/feature/request_tokens

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,5 @@ 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,14 @@ class Faucet extends PureComponent<{}, FaucetState> {
         trxHash: undefined
     }
 
-    private getTokens = async (
+    private getTokens = async () => {
+        const { ocean } = this.context
+        const accounts = await ocean.accounts.list()
+        const account = accounts[0]
+        await ocean.accounts.requestTokens(account, 100)
+    }
+
+    private getEther = async (
         requestFromFaucet: () => Promise<FaucetResponse>
     ) => {
         this.setState({ isLoading: true })
@@ -91,13 +99,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 +115,20 @@ class Faucet extends PureComponent<{}, FaucetState> {
         </>
     )
 
+    private GetTokens = () => (
+        <>
+            <Button
+                primary
+                onClick={() => this.getTokens()}
+                disabled={!this.context.isLogged}
+                name="FaucetTokens"
+            >
+                Request OCEAN 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,7 +151,12 @@ class Faucet extends PureComponent<{}, FaucetState> {
                                 ) : success ? (
                                     <this.Success />
                                 ) : (
-                                    isLogged && <this.Action />
+                                    <>
+                                        {isLogged && <this.GetEther />}
+                                        {isLogged && showRequestTokens && (
+                                            <this.GetTokens />
+                                        )}
+                                    </>
                                 )}
                             </div>
                         </Content>

cypress/integration/4_faucet.spec.js

@@ -3,14 +3,14 @@ context('Faucet', () => {
     before(() => {
         cy.visit('/faucet')
         // Wait for end of loading
-        cy.get('button[name="Faucet"]', { timeout: 60000 }).should(
+        cy.get('button[name="FaucetEther"]', { timeout: 60000 }).should(
             'have.length',
             1
         )
     })
 
     beforeEach(() => {
-        cy.get('button[name="Faucet"]')
+        cy.get('button[name="FaucetEther"]')
             .first()
             .as('button')
     })