output transaction hash

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 {

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 = () => (