From 3dfa034a5bde9700542e5183726693352855d156 Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Wed, 10 Oct 2018 18:34:28 +0800
Subject: [PATCH] add the transaction fee description.

---
 src/features/transactions/components/New/New.scss       | 11 +++++++++++
 .../components/New/NormalTransactionForm.jsx            | 17 +++++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/features/transactions/components/New/New.scss b/src/features/transactions/components/New/New.scss
index 9edf428..c361379 100644
--- a/src/features/transactions/components/New/New.scss
+++ b/src/features/transactions/components/New/New.scss
@@ -6,6 +6,17 @@
   flex-direction: row;
 }
 
+.txFeeBox{
+  display: flex;
+  align-items: center;
+}
+
+.feeDescription{
+  width: 50%;
+  margin-left: $gutter-size;
+  margin-bottom: $gutter-size;
+}
+
 .center{
   margin: 0 auto;
   width: 100%;
diff --git a/src/features/transactions/components/New/NormalTransactionForm.jsx b/src/features/transactions/components/New/NormalTransactionForm.jsx
index 98e20d0..cec8842 100644
--- a/src/features/transactions/components/New/NormalTransactionForm.jsx
+++ b/src/features/transactions/components/New/NormalTransactionForm.jsx
@@ -220,7 +220,7 @@ class NormalTxForm extends React.Component {
 
                 {index===0 ?
                   <a href='#' className={styles.receiverBtn} onClick={this.addReceiverItem}>+</a> :
-                  <a href='#' className={`${styles.receiverBtn} text-danger`}onClick={() => this.removeReceiverItem(index)}>-</a>
+                  <a href='#' className={`${styles.receiverBtn} text-danger`} onClick={()=> this.removeReceiverItem(index)}>-</a>
                 }
 
               </div>
@@ -228,11 +228,16 @@ class NormalTxForm extends React.Component {
             </div>
 
             <label className={styles.title}>{lang === 'zh' ? '选择手续费' : 'Select Fee'}</label>
-            <GasField
-              gas={this.state.estimateGas}
-              fieldProps={gasLevel}
-              btmAmountUnit={this.props.btmAmountUnit}
-            />
+            <div className={styles.txFeeBox}>
+              <GasField
+                gas={this.state.estimateGas}
+                fieldProps={gasLevel}
+                btmAmountUnit={this.props.btmAmountUnit}
+              />
+              <span className={styles.feeDescription}> {lang ==='zh'?
+                '交易所需手续费， 你的交易将会在2.5分钟之后完成。':
+                'This is the money that might be used to process this transaction. Your transaction will be mined usually within 2.5 minutes.'}</span>
+            </div>
           </div>
 
           <FormSection className={styles.submitSection}>
-- 
2.11.0