src/features/transactions/components/New/ConfirmModal/ConfirmModal.jsx

   1 import React, { Component } from 'react'
   2 import {reduxForm} from 'redux-form'
   3 import {
   4   PasswordField,
   5   ErrorBanner,
   6   SubmitIndicator
   7 } from 'features/shared/components'
   8 import { btmID } from 'utility/environment'
   9 import { sum } from 'utility/math'
  10 import { normalizeBTMAmountUnit, converIntToDec } from 'utility/buildInOutDisplay'
  11 import styles from './ConfirmModal.scss'
  12 import { Link } from 'react-router'
  13
  14
  15 class ConfirmModal extends Component {
  16   constructor(props) {
  17     super(props)
  18   }
  19
  20   render() {
  21     const {
  22       fields: { accountId, accountAlias, assetId, assetAlias, receivers, password, gasLevel },
  23       handleSubmit,
  24       submitting,
  25       cancel,
  26       error,
  27       gas,
  28       lang,
  29       btmAmountUnit,
  30       assetDecimal
  31     } = this.props
  32
  33     const fee = Number(gasLevel.value * gas)
  34
  35     const totalAmount = sum(receivers, 'amount.value')
  36
  37     const  Total = (assetAlias.value ==='BTM' ||assetId.value === btmID)?
  38       (totalAmount + fee): totalAmount
  39
  40     let submitLabel = lang === 'zh' ? '提交交易' : 'Submit transaction'
  41
  42     const normalize = (value, asset) => {
  43       if (asset === btmID || asset === 'BTM'){
  44         return normalizeBTMAmountUnit(btmID, value, btmAmountUnit)
  45       }else if( assetDecimal ){
  46         return converIntToDec(value, assetDecimal)
  47       }else{
  48         return value
  49       }
  50     }
  51
  52     const findAssetById = assetId.value && this.props.asset.find(i => i.id === assetId.value)
  53     const findAssetByAlias = assetAlias.value && this.props.asset.find(i => i.alias === assetAlias.value)
  54
  55     const asset = assetAlias.value || ( findAssetById && findAssetById.alias ) || assetId.value
  56     const assetIdLink = assetId.value || ( findAssetByAlias && findAssetByAlias.id )
  57
  58     const unit =  <Link to={`/assets/${assetIdLink}`}  className={styles.unit} target='_blank'>
  59         {(asset !== btmID && asset !== 'BTM') && asset}
  60       </Link>
  61
  62     return (
  63       <div>
  64         <h3>{lang ==='zh'?'确认交易':'Confirm Transaction'}</h3>
  65         <table className={styles.table}>
  66           <tbody>
  67             <tr>
  68               <td className={styles.colLabel}>From</td>
  69               <td> <span>{accountAlias.value || accountId.value}</span></td>
  70             </tr>
  71             <tr>
  72               <td></td>
  73             </tr>
  74
  75
  76             {receivers.map((receiver) =>
  77              [<tr>
  78                 <td className={styles.colLabel}>To</td>
  79                 <td> <span>{receiver.address.value}</span> </td>
  80               </tr>,
  81               <tr>
  82                 <td className={styles.colLabel}>{lang === 'zh'? '数量':'Amount'}</td>
  83                 <td> <code>{normalize(receiver.amount.value, asset)} {unit}</code> </td>
  84               </tr>,
  85              <tr>
  86                <td></td>
  87              </tr>
  88              ])}
  89
  90             <tr>
  91               <td className={styles.colLabel}>{lang === 'zh'?'手续费':'Fee'}</td>
  92               <td> <code>{normalizeBTMAmountUnit(btmID, fee, btmAmountUnit)}</code> </td>
  93             </tr>
  94
  95             <tr>
  96               <td className={styles.colLabel}>{lang === 'zh'? '交易总数' :'Total'}</td>
  97               <td> <code>{normalize(Total, asset)} {unit}</code> </td>
  98             </tr>
  99           </tbody>
 100         </table>
 101
 102         <hr className={styles.hr}/>
 103
 104         <form onSubmit={handleSubmit}>
 105           <div>
 106             <label>{lang === 'zh' ? '密码' : 'Password'}</label>
 107             <PasswordField
 108               placeholder={lang === 'zh' ? '请输入密码' : 'Please enter the password'}
 109               fieldProps={password}
 110             />
 111           </div>
 112
 113           {error && error.message === 'PasswordWrong' &&
 114           <ErrorBanner
 115             title='Error submitting form'
 116             error='Your password is wrong, please check your password.' />}
 117
 118           <div className={styles.btnGroup}>
 119             <div>
 120               <button type='submit' className='btn btn-primary'
 121                       disabled={submitting}>
 122                 {submitLabel}
 123               </button>
 124
 125               {submitting &&
 126               <SubmitIndicator className={styles.submitIndicator} />
 127               }
 128             </div>
 129             <button type='button'  className='btn btn-default' onClick={cancel}>
 130               <i/> {lang ==='zh'? '返回' :'Cancel'}
 131             </button>
 132           </div>
 133         </form>
 134       </div>
 135     )
 136
 137   }
 138 }
 139
 140 const validate = values => {
 141   const errors = {}
 142   if (!values.password) {
 143     errors.password = 'Required'
 144   }
 145   return errors
 146 }
 147
 148 export default  reduxForm({
 149   form: 'NormalTransactionForm',
 150   fields:[
 151     'accountAlias',
 152     'accountId',
 153     'assetAlias',
 154     'assetId',
 155     'receivers[].amount',
 156     'receivers[].address',
 157     'gasLevel',
 158     'password'
 159   ],
 160   destroyOnUnmount: false,
 161   validate
 162 })(ConfirmModal)