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 import {withNamespaces} from 'react-i18next'
  14
  15
  16 class ConfirmModal extends Component {
  17   constructor(props) {
  18     super(props)
  19   }
  20
  21   render() {
  22     const {
  23       fields: { accountId, accountAlias, assetId, assetAlias, receivers, password, gasLevel },
  24       handleSubmit,
  25       submitting,
  26       cancel,
  27       error,
  28       gas,
  29       t,
  30       btmAmountUnit,
  31       assetDecimal
  32     } = this.props
  33
  34     const fee = Number(gasLevel.value * gas)
  35
  36     const totalAmount = sum(receivers, 'amount.value')
  37
  38     const  Total = (assetAlias.value ==='BTM' ||assetId.value === btmID)?
  39       (totalAmount + fee): totalAmount
  40
  41     let submitLabel = t('transaction.new.submit')
  42
  43     const normalize = (value, asset) => {
  44       if (asset === btmID || asset === 'BTM'){
  45         return normalizeBTMAmountUnit(btmID, value, btmAmountUnit)
  46       }else if( assetDecimal ){
  47         return converIntToDec(value, assetDecimal)
  48       }else{
  49         return value
  50       }
  51     }
  52
  53     const findAssetById = assetId.value && this.props.asset.find(i => i.id === assetId.value)
  54     const findAssetByAlias = assetAlias.value && this.props.asset.find(i => i.alias === assetAlias.value)
  55
  56     const asset = assetAlias.value || ( findAssetById && findAssetById.alias ) || assetId.value
  57     const assetIdLink = assetId.value || ( findAssetByAlias && findAssetByAlias.id )
  58
  59     const unit =  <Link to={`/assets/${assetIdLink}`}  className={styles.unit} target='_blank'>
  60         {(asset !== btmID && asset !== 'BTM') && asset}
  61       </Link>
  62
  63     return (
  64       <div>
  65         <h3>{ t('transaction.normal.confirmation') }</h3>
  66         <table className={styles.table}>
  67           <tbody>
  68             <tr>
  69               <td className={styles.colLabel}>From</td>
  70               <td> <span>{accountAlias.value || accountId.value}</span></td>
  71             </tr>
  72             <tr>
  73               <td></td>
  74             </tr>
  75
  76
  77             {receivers.map((receiver) =>
  78              [<tr>
  79                 <td className={styles.colLabel}>To</td>
  80                 <td> <span>{receiver.address.value}</span> </td>
  81               </tr>,
  82               <tr>
  83                 <td className={styles.colLabel}>{t('form.amount')}</td>
  84                 <td> <code>{normalize(receiver.amount.value, asset)} {unit}</code> </td>
  85               </tr>,
  86              <tr>
  87                <td></td>
  88              </tr>
  89              ])}
  90
  91             <tr>
  92               <td className={styles.colLabel}>{t('form.fee')}</td>
  93               <td> <code>{normalizeBTMAmountUnit(btmID, fee, btmAmountUnit)}</code> </td>
  94             </tr>
  95
  96             <tr>
  97               <td className={styles.colLabel}>{t('transaction.normal.total')}</td>
  98               <td> <code>{normalize(Total, asset)} {unit}</code> </td>
  99             </tr>
 100           </tbody>
 101         </table>
 102
 103         <hr className={styles.hr}/>
 104
 105         <form onSubmit={handleSubmit}>
 106           <div>
 107             <label>{t('key.password')}</label>
 108             <PasswordField
 109               placeholder={t('key.passwordPlaceholder')}
 110               fieldProps={password}
 111             />
 112           </div>
 113
 114           {error && error.message === 'PasswordWrong' &&
 115           <ErrorBanner
 116             title={t('form.errorTitle')}
 117             error={t('errorMessage.password')} />}
 118
 119           <div className={styles.btnGroup}>
 120             <div>
 121               <button type='submit' className='btn btn-primary'
 122                       disabled={submitting}>
 123                 {submitLabel}
 124               </button>
 125
 126               {submitting &&
 127               <SubmitIndicator className={styles.submitIndicator} />
 128               }
 129             </div>
 130             <button type='button'  className='btn btn-default' onClick={cancel}>
 131               <i/> {t('form.cancel')}
 132             </button>
 133           </div>
 134         </form>
 135       </div>
 136     )
 137
 138   }
 139 }
 140
 141 const validate = values => {
 142   const errors = {}
 143   if (!values.password) {
 144     errors.password = 'Required'
 145   }
 146   return errors
 147 }
 148
 149 export default  withNamespaces('translations') (reduxForm({
 150   form: 'NormalTransactionForm',
 151   fields:[
 152     'accountAlias',
 153     'accountId',
 154     'assetAlias',
 155     'assetId',
 156     'receivers[].amount',
 157     'receivers[].address',
 158     'gasLevel',
 159     'password'
 160   ],
 161   destroyOnUnmount: false,
 162   validate
 163 })(ConfirmModal))