From 4a6053ec825f1839ea12db2502166872ad82e553 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 11 Apr 2019 20:01:15 +0200
Subject: [PATCH] output transaction hash

---
 client/src/routes/Faucet.module.scss | 13 +++++++++++++
 client/src/routes/Faucet.tsx         | 17 ++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/client/src/routes/Faucet.module.scss b/client/src/routes/Faucet.module.scss
index f5733fb..d407fdb 100644
--- a/client/src/routes/Faucet.module.scss
+++ b/client/src/routes/Faucet.module.scss
@@ -12,6 +12,19 @@
 
 .success {
     color: $green;
+
+    p {
+        margin-top: $spacer / 2;
+    }
+
+    strong {
+        display: block;
+    }
+
+    code {
+        overflow-wrap: break-word;
+        display: inline;
+    }
 }
 
 .error {
diff --git a/client/src/routes/Faucet.tsx b/client/src/routes/Faucet.tsx
index 8452cc0..275350c 100644
--- a/client/src/routes/Faucet.tsx
+++ b/client/src/routes/Faucet.tsx
@@ -10,13 +10,15 @@ interface FaucetState {
     isLoading: boolean
     success?: string
     error?: string
+    trxHash?: string
 }
 
 export default class Faucet extends PureComponent<{}, FaucetState> {
     public state = {
         isLoading: false,
         success: undefined,
-        error: undefined
+        error: undefined,
+        trxHash: undefined
     }
 
     private getTokens = async (requestFromFaucet: () => any) => {
@@ -33,9 +35,12 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
                 return
             }
 
+            const { trxHash } = response
+
             this.setState({
                 isLoading: false,
-                success: response.message
+                success: response.message,
+                trxHash
             })
         } catch (error) {
             this.setState({ isLoading: false, error })
@@ -51,7 +56,13 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
     }
 
     private Success = () => (
-        <div className={styles.success}>{this.state.success}</div>
+        <div className={styles.success}>
+            <strong>{this.state.success}</strong>
+            <p>
+                <strong>Your Transaction Hash</strong>
+                <code>{this.state.trxHash}</code>
+            </p>
+        </div>
     )
 
     private Error = () => (