From 9f7ddf1c3155d3087843dce14fb40a02971cecb8 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 1 Apr 2019 17:15:59 +0200
Subject: [PATCH] pass through faucet server response, error feedback

---
 client/src/App.tsx                   |  4 +++-
 client/src/routes/Faucet.module.scss |  7 +++++++
 client/src/routes/Faucet.tsx         | 24 +++++++++++++++---------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0d861d7..a12c56a 100644
--- a/client/src/App.tsx
+++ b/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)
             }
diff --git a/client/src/routes/Faucet.module.scss b/client/src/routes/Faucet.module.scss
index 4ec11b4..f5733fb 100644
--- a/client/src/routes/Faucet.module.scss
+++ b/client/src/routes/Faucet.module.scss
@@ -13,3 +13,10 @@
 .success {
     color: $green;
 }
+
+.error {
+    &,
+    p {
+        color: $red;
+    }
+}
diff --git a/client/src/routes/Faucet.tsx b/client/src/routes/Faucet.tsx
index 5130988..e091c2a 100644
--- a/client/src/routes/Faucet.tsx
+++ b/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,
+                    error: response.error
+                })
+
+                return
+            }
+
             this.setState({
                 isLoading: false,
-                success: `Successfully added ${
-                    this.state.eth
-                } ETH to your account.`
+                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}{' '}
-                    <Button link onClick={this.reset}>
-                        Try again
-                    </Button>
+                    <p>{this.state.error}</p>
+                    <Button onClick={this.reset}>Try again</Button>
                 </div>
             ) : this.state.success ? (
                 <div className={styles.success}>{this.state.success}</div>