move requestFromFaucet function, typed response

client/src/context/UserProvider.tsx

@@ -1,17 +1,9 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import Web3 from 'web3'
 import { Logger } from '@oceanprotocol/squid'
 import { User } from '.'
-import { provideOcean } from '../ocean'
+import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean'
-
+import { nodeHost, nodePort, nodeScheme } from '../config/config'
-import {
-    nodeHost,
-    nodePort,
-    nodeScheme,
-    faucetHost,
-    faucetPort,
-    faucetScheme
-} from '../config/config'
 
 const POLL_ACCOUNTS = 1000 // every 1s
 const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
@@ -42,34 +34,11 @@ interface UserProviderState {
     network: string
     web3: Web3
     ocean: any
-    requestFromFaucet(): Promise<{}>
+    requestFromFaucet(account: string): Promise<FaucetResponse>
     message: string
 }
 
-export default class UserProvider extends Component<{}, UserProviderState> {
+export default class UserProvider extends PureComponent<{}, UserProviderState> {
-    private accountsInterval: any = null
-    private networkInterval: any = null
-
-    private requestFromFaucet = async () => {
-        try {
-            const url = `${faucetScheme}://${faucetHost}:${faucetPort}/faucet`
-            const response = await fetch(url, {
-                method: 'POST',
-                headers: {
-                    Accept: 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    address: this.state.account,
-                    agent: 'commons'
-                })
-            })
-            return response.json()
-        } catch (error) {
-            Logger.log('requestFromFaucet', error)
-        }
-    }
-
     public state = {
         isLogged: false,
         isLoading: true,
@@ -87,10 +56,13 @@ export default class UserProvider extends Component<{}, UserProviderState> {
         ),
         account: '',
         ocean: {} as any,
-        requestFromFaucet: this.requestFromFaucet,
+        requestFromFaucet: () => requestFromFaucet(''),
         message: 'Connecting to Ocean...'
     }
 
+    private accountsInterval: any = null
+    private networkInterval: any = null
+
     public async componentDidMount() {
         await this.bootstrap()
 
@@ -162,7 +134,11 @@ export default class UserProvider extends Component<{}, UserProviderState> {
 
                 // Get accounts
                 await this.fetchAccounts()
-                this.setState({ isLoading: false })
+                this.setState({
+                    isLoading: false,
+                    requestFromFaucet: () =>
+                        requestFromFaucet(this.state.account)
+                })
 
                 // Set proper network names now that we have Ocean
                 this.fetchNetwork()
@@ -218,10 +194,14 @@ export default class UserProvider extends Component<{}, UserProviderState> {
             const accounts = await ocean.accounts.list()
 
             if (accounts.length > 0) {
-                const account = accounts[0].getId()
+                const account = await accounts[0].getId()
 
                 if (account !== this.state.account) {
-                    this.setState({ account, isLogged: true })
+                    this.setState({
+                        account,
+                        isLogged: true,
+                        requestFromFaucet: () => requestFromFaucet(account)
+                    })
                 }
 
                 const balance = await accounts[0].getBalance()

client/src/ocean.ts

@@ -1,4 +1,4 @@
-import { Ocean } from '@oceanprotocol/squid'
+import { Ocean, Logger } from '@oceanprotocol/squid'
 import Web3 from 'web3'
 
 import {
@@ -9,6 +9,9 @@ import {
     brizoPort,
     brizoScheme,
     brizoAddress,
+    faucetHost,
+    faucetPort,
+    faucetScheme,
     nodeHost,
     nodePort,
     nodeScheme,
@@ -43,3 +46,32 @@ export async function provideOcean(web3provider: Web3) {
 
     return { ocean }
 }
+
+//
+// Faucet
+//
+export interface FaucetResponse {
+    success: boolean
+    message: string
+    trxHash?: string
+}
+
+export async function requestFromFaucet(account: string) {
+    try {
+        const url = `${faucetScheme}://${faucetHost}:${faucetPort}/faucet`
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                address: account,
+                agent: 'commons'
+            })
+        })
+        return response.json()
+    } catch (error) {
+        Logger.log('requestFromFaucet', error)
+    }
+}

client/src/routes/Faucet.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import { FaucetResponse } from '../ocean'
 import Route from '../components/templates/Route'
 import Button from '../components/atoms/Button'
 import Spinner from '../components/atoms/Spinner'
@@ -21,7 +22,9 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
         trxHash: undefined
     }
 
-    private getTokens = async (requestFromFaucet: () => any) => {
+    private getTokens = async (
+        requestFromFaucet: () => Promise<FaucetResponse>
+    ) => {
         this.setState({ isLoading: true })
 
         try {