Merge pull request #49 from oceanprotocol/fix/faucet

pass through faucet server response, error feedback

client/src/App.tsx

@@ -53,7 +53,7 @@ class App extends Component<{}, AppState> {
     private requestFromFaucet = async () => {
         if (this.state.account !== '') {
             try {
-                await fetch(
+                const response = await fetch(
                     `${faucetScheme}://${faucetHost}:${faucetPort}/faucet`,
                     {
                         method: 'POST',
@@ -67,6 +67,8 @@ class App extends Component<{}, AppState> {
                         })
                     }
                 )
+
+                return response.json()
             } catch (error) {
                 Logger.log('requestFromFaucet', error)
             }

client/src/routes/Faucet.module.scss

@@ -13,3 +13,10 @@
 .success {
     color: $green;
 }
+
+.error {
+    &,
+    p {
+        color: $red;
+    }
+}

client/src/routes/Faucet.tsx

@@ -21,16 +21,24 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
         eth: 'xx'
     }
 
-    private getTokens = async (requestFromFaucet: () => void) => {
+    private getTokens = async (requestFromFaucet: () => any) => {
         this.setState({ isLoading: true })
 
         try {
-            await requestFromFaucet()
+            const response = await requestFromFaucet()
+
+            if (response.error) {
                 this.setState({
                     isLoading: false,
-                success: `Successfully added ${
+                    error: response.error
-                    this.state.eth
+                })
-                } ETH to your account.`
+
+                return
+            }
+
+            this.setState({
+                isLoading: false,
+                success: `Successfully added ETH to your account.`
             })
         } catch (error) {
             this.setState({ isLoading: false, error })
@@ -56,10 +64,8 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
                 <Spinner message="Getting Ether..." />
             ) : this.state.error ? (
                 <div className={styles.error}>
-                    {this.state.error}{' '}
+                    <p>{this.state.error}</p>
-                    <Button link onClick={this.reset}>
+                    <Button onClick={this.reset}>Try again</Button>
-                        Try again
-                    </Button>
                 </div>
             ) : this.state.success ? (
                 <div className={styles.success}>{this.state.success}</div>