add the ConfirmModal.

diff --git a/src/features/transactions/actions.js b/src/features/transactions/actions.js
index 19e2ab2..dcf715c 100644 (file)
--- a/src/features/transactions/actions.js
+++ b/src/features/transactions/actions.js
@@ -20,7 +20,7 @@ function preprocessTransaction(formParams) {
 
   if (formParams.form === 'normalTx') {
     const gasPrice = formParams.state.estimateGas * Number(formParams.gasLevel)
-   
+
     builder.actions.push({
       accountAlias: formParams.accountAlias,
       accountId: formParams.accountId,

diff --git a/src/features/transactions/components/New/ConfirmModal/ConfirmModal.jsx b/src/features/transactions/components/New/ConfirmModal/ConfirmModal.jsx
new file mode 100644 (file)
index 0000000..61fbef1
--- /dev/null
+++ b/src/features/transactions/components/New/ConfirmModal/ConfirmModal.jsx
@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import {reduxForm} from 'redux-form'
+import {PasswordField} from 'features/shared/components'
+import { btmID } from 'utility/environment'
+
+class ConfirmModal extends Component {
+  render() {
+    const {
+      fields: { assetId, assetAlias, address, amount, password, gasLevel },
+      handleSubmit,
+      gas,
+      lang
+    } = this.props
+    
+    const fee = Number(gasLevel.value * gas)
+
+    const  Total = (assetAlias.value ==='BTM' ||assetId.value === btmID)?
+      (Number(amount.value) + fee): amount.value
+    return (
+      <div>
+        <h3>Confirm Transaction</h3>
+        <div>
+          <label>Asset: </label>
+          <span>{assetAlias.value || assetId.value}</span>
+        </div>
+
+        <div>
+          <label>To: </label>
+          <span>{address.value}</span>
+        </div>
+
+        <div>
+          <label>Amount: </label>
+          <span>{amount.value}</span>
+        </div>
+
+        <div>
+          <label>Fee: </label>
+          <span>{fee}</span>
+        </div>
+
+        <div>
+          <label>Total: </label>
+          <span>{Total}</span>
+        </div>
+
+
+
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label>{lang === 'zh' ? '密码' : 'Password'}</label>
+            <PasswordField
+              placeholder={lang === 'zh' ? '请输入密码' : 'Please enter the password'}
+              fieldProps={password}
+            />
+          </div>
+          <div>
+            {/*<button type='button' onClick={previousPage}>*/}
+              {/*<i/> Cancel*/}
+            {/*</button>*/}
+            <button type='submit'>
+              Next <i/>
+            </button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+}
+
+const validate = values => {
+  const errors = {}
+  if (!values.password) {
+    errors.password = 'Required'
+  }
+  return errors
+}
+
+
+export default  reduxForm({
+  form: 'NormalTransactionForm',
+  fields:[
+    'accountAlias',
+    'accountId',
+    'amount',
+    'assetAlias',
+    'assetId',
+    'gasLevel',
+    'address',
+    'password'
+  ],
+  destroyOnUnmount: false,
+  validate
+})(ConfirmModal)
\ No newline at end of file

diff --git a/src/features/transactions/components/New/NormalTransactionForm.jsx b/src/features/transactions/components/New/NormalTransactionForm.jsx
index 8ab5d98..b8d9eff 100644 (file)
--- a/src/features/transactions/components/New/NormalTransactionForm.jsx
+++ b/src/features/transactions/components/New/NormalTransactionForm.jsx
@@ -8,7 +8,6 @@ import {
   AmountInputMask,
   ErrorBanner,
   SubmitIndicator,
-  PasswordField,
   GasField
 } from 'features/shared/components'
 import {chainClient} from 'utility/environment'
@@ -17,6 +16,8 @@ import React from 'react'
 import styles from './New.scss'
 import disableAutocomplete from 'utility/disableAutocomplete'
 import { btmID } from 'utility/environment'
+import actions from 'actions'
+import ConfirmModal from './ConfirmModal/ConfirmModal'
 
 
 class NormalTxForm extends React.Component {
@@ -39,31 +40,35 @@ class NormalTxForm extends React.Component {
     return !( (this.state.estimateGas) &&
       (hasValue(props.accountId) || hasValue(props.accountAlias)) &&
       (hasValue(props.assetId) || hasValue(props.assetAlias)) &&
-      hasValue(props.address) && (hasValue(props.amount)) &&
-      hasValue(props.password)
+      hasValue(props.address) && (hasValue(props.amount))
     )
   }
 
   submitWithValidation(data) {
     return new Promise((resolve, reject) => {
       this.props.submitForm(Object.assign({}, data, {state: this.state, form: 'normalTx'}))
+        .then(
+          this.props.closeModal()
+        )
         .catch((err) => {
           const response = {}
 
-          if (err.data) {
-            response.actions = []
-
-            err.data.forEach((error) => {
-              response.actions[error.data.actionIndex] = {type: error}
-            })
-          }
-
           response['_error'] = err
           return reject(response)
         })
     })
   }
 
+  confirmedTransaction(e){
+    e.preventDefault()
+    this.props.showModal(
+      <ConfirmModal
+        onSubmit={this.submitWithValidation}
+        gas={this.state.estimateGas}
+      />
+    )
+  }
+
   estimateNormalTransactionGas() {
     const transaction = this.props.fields
     const address = transaction.address.value
@@ -129,9 +134,8 @@ class NormalTxForm extends React.Component {
 
   render() {
     const {
-      fields: {accountId, accountAlias, assetId, assetAlias, address, amount, password, gasLevel},
+      fields: {accountId, accountAlias, assetId, assetAlias, address, amount, gasLevel},
       error,
-      handleSubmit,
       submitting
     } = this.props
     const lang = this.props.lang;
@@ -153,8 +157,10 @@ class NormalTxForm extends React.Component {
     return (
         <form
           className={styles.container}
-          onSubmit={handleSubmit(this.submitWithValidation)} {...disableAutocomplete}
-          onKeyDown={(e) => { this.props.handleKeyDown(e, handleSubmit(this.submitWithValidation), this.disableSubmit(this.props.fields)) }}>
+          onSubmit={e => this.confirmedTransaction(e)}
+          {...disableAutocomplete}
+          // onKeyDown={(e) => { this.props.handleKeyDown(e, handleSubmit(this.submitWithValidation), this.disableSubmit(this.props.fields)) }}
+        >
           <div>
             <label className={styles.title}>{lang === 'zh' ? '从' : 'From'}</label>
             <div className={styles.main}>
@@ -209,13 +215,6 @@ class NormalTxForm extends React.Component {
               fieldProps={gasLevel}
               btmAmountUnit={this.props.btmAmountUnit}
             />
-
-
-            <label className={styles.title}>{lang === 'zh' ? '密码' : 'Password'}</label>
-            <PasswordField
-              placeholder={lang === 'zh' ? '请输入密码' : 'Please enter the password'}
-              fieldProps={password}
-            />
           </div>
 
           <FormSection className={styles.submitSection}>
@@ -225,8 +224,10 @@ class NormalTxForm extends React.Component {
               error={error} />}
 
             <div className={styles.submit}>
-              <button type='submit' className='btn btn-primary' disabled={submitting || this.disableSubmit(this.props.fields)}>
-                {submitLabel ||  ( lang === 'zh' ? '提交' : 'Submit' )}
+              <button type='submit' className='btn btn-primary'
+                      disabled={submitting || this.disableSubmit(this.props.fields)}
+              >
+                {submitLabel}
               </button>
 
               {submitting &&
@@ -273,6 +274,16 @@ export default BaseNew.connect(
   BaseNew.mapStateToProps('transaction'),
   (dispatch) => ({
     showError: err => dispatch({type: 'ERROR', payload: err}),
+    closeModal: () => dispatch(actions.app.hideModal),
+    showModal: (body) => dispatch(actions.app.showModal(
+      body,
+      actions.app.hideModal,
+      null,
+      {
+        // dialog: true,
+        noCloseBtn: true
+      }
+    )),
     ...BaseNew.mapDispatchToProps('transaction')(dispatch)
   }),
   reduxForm({
@@ -285,19 +296,16 @@ export default BaseNew.connect(
       'assetId',
       'gasLevel',
       'address',
-      'submitAction',
-      'password'
     ],
     asyncValidate,
     asyncBlurFields: [ 'address'],
     validate,
+    destroyOnUnmount: false,
     touchOnChange: true,
     initialValues: {
-      submitAction: 'submit',
       gasLevel: '1'
     },
-  }
-  )(NormalTxForm)
+  })(NormalTxForm)
 )