add the asset decimal function in transaction page.

[bytom/bytom-electron.git] / src / features / transactions / components / New / New.jsx

diff --git a/src/features/transactions/components/New/New.jsx b/src/features/transactions/components/New/New.jsx
index 9e53f03..015c896 100644 (file)
--- a/src/features/transactions/components/New/New.jsx
+++ b/src/features/transactions/components/New/New.jsx
@@ -6,15 +6,16 @@ import {
   TextField,
   Autocomplete,
   ObjectSelectorField,
-  AmountUnitField
+  AmountUnitField,
+  AmountInputMask
 } from 'features/shared/components'
 import {DropdownButton, MenuItem} from 'react-bootstrap'
 import {reduxForm} from 'redux-form'
 import ActionItem from './FormActionItem'
 import React from 'react'
 import styles from './New.scss'
-import balanceActions from 'features/balances/actions'
-import {normalizeBTMAmountUnit} from 'utility/buildInOutDisplay'
+import actions from 'actions'
+import { normalizeBTMAmountUnit, converIntToDec } from 'utility/buildInOutDisplay'
 
 const rangeOptions = [
   {
@@ -58,12 +59,17 @@ class Form extends React.Component {
         this.props.didLoadAutocomplete()
       })
     }
+    if (!this.props.autocompleteIsAssetLoaded) {
+      this.props.fetchAssetAll().then(() => {
+        this.props.didLoadAssetAutocomplete()
+      })
+    }
 
     this.props.fields.normalTransaction.gas.type.onChange(rangeOptions[0].label)
     this.props.fields.normalTransaction.gas.price.onChange(rangeOptions[0].value)
   }
 
-  balanceAmount(normalTransaction) {
+  balanceAmount(normalTransaction, assetdecimal) {
     let balances = this.props.balances
     let filteredBalances = balances
     if (normalTransaction.accountAlias.value) {
@@ -79,7 +85,30 @@ class Form extends React.Component {
       filteredBalances = filteredBalances.filter(balance => balance.assetId === normalTransaction.assetId.value)
     }
 
-    return filteredBalances.length === 1 ? normalizeBTMAmountUnit(filteredBalances[0].assetId, filteredBalances[0].amount, this.props.btmAmountUnit) : null
+    if(filteredBalances.length === 1){
+      if (filteredBalances[0].assetId === btmID){
+        return normalizeBTMAmountUnit(filteredBalances[0].assetId, filteredBalances[0].amount, this.props.btmAmountUnit)
+      }else if( assetdecimal ){
+        return converIntToDec(filteredBalances[0].amount, assetdecimal)
+      }else{
+        return filteredBalances[0].amount
+      }
+    }else {
+      return null
+    }
+  }
+
+  assetDecimal(normalTransaction) {
+    let asset = this.props.asset
+    let filteredAsset = asset
+    if (normalTransaction.assetAlias.value) {
+      filteredAsset = filteredAsset.filter(asset => asset.alias === normalTransaction.assetAlias.value)
+    }
+    if (normalTransaction.assetId.value) {
+      filteredAsset = filteredAsset.filter(asset => asset.id === normalTransaction.assetId.value)
+    }
+
+    return (filteredAsset.length === 1 && filteredAsset[0].definition && filteredAsset[0].id !== btmID ) ? filteredAsset[0].definition.decimals : null
   }
 
   toggleDropwdown() {
@@ -164,14 +193,16 @@ class Form extends React.Component {
       const range = rangeOptions.find(item => item.label === event.target.value)
       normalTransaction.gas.price.onChange(range.value)
     }
+    const assetDecimal = this.assetDecimal(normalTransaction)
 
     const showAvailableBalance = (normalTransaction.accountAlias.value || normalTransaction.accountId.value) &&
       (normalTransaction.assetAlias.value || normalTransaction.assetId.value)
-    const availableBalance = this.balanceAmount(normalTransaction)
+    const availableBalance = this.balanceAmount(normalTransaction, assetDecimal)
 
     const showBtmAmountUnit = (normalTransaction.assetAlias.value === 'BTM' ||
       normalTransaction.assetId.value === 'ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff')
 
+
     return (
       <FormContainer
         error={error}
@@ -232,12 +263,15 @@ class Form extends React.Component {
           <label className={styles.title}>{lang === 'zh' ? '至' : 'To'}</label>
           <div className={styles.main}>
             <TextField title={lang === 'zh' ? '地址' : 'Address'} fieldProps={normalTransaction.address}/>
-            {!showBtmAmountUnit &&
+            {!showBtmAmountUnit && !assetDecimal &&
             <TextField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={normalTransaction.amount}
             />}
-            {showBtmAmountUnit &&
-            <AmountUnitField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={normalTransaction.amount}
+            {!showBtmAmountUnit && assetDecimal &&
+            <AmountInputMask title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={normalTransaction.amount} decimal={assetDecimal}
             />}
+            {showBtmAmountUnit &&
+            <AmountUnitField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={normalTransaction.amount}/>
+            }
           </div>
 
           <label className={styles.title}>Gas</label>
@@ -411,51 +445,55 @@ export default BaseNew.connect(
     }
 
     return {
-      autocompleteIsLoaded: state.key.autocompleteIsLoaded,
+      autocompleteIsLoaded: state.balance.autocompleteIsLoaded,
+      autocompleteIsAssetLoaded: state.balance.autocompleteIsLoaded,
       lang: state.core.lang,
       btmAmountUnit: state.core.btmAmountUnit,
       balances,
+      asset: Object.keys(state.asset.items).map(k => state.asset.items[k]),
       ...BaseNew.mapStateToProps('transaction')(state)
     }
   },
   (dispatch) => ({
-    didLoadAutocomplete: () => dispatch(balanceActions.didLoadAutocomplete),
-    fetchAll: (cb) => dispatch(balanceActions.fetchAll(cb)),
+    didLoadAutocomplete: () => dispatch(actions.balance.didLoadAutocomplete),
+    fetchAll: (cb) => dispatch(actions.balance.fetchAll(cb)),
+    didLoadAssetAutocomplete: () => dispatch(actions.asset.didLoadAutocomplete),
+    fetchAssetAll: (cb) => dispatch(actions.asset.fetchAll(cb)),
     ...BaseNew.mapDispatchToProps('transaction')(dispatch)
   }),
   reduxForm({
-      form: 'NewTransactionForm',
-      fields: [
-        'baseTransaction',
-        'actions[].accountId',
-        'actions[].accountAlias',
-        'actions[].assetId',
-        'actions[].assetAlias',
-        'actions[].amount',
-        'actions[].receiver',
-        'actions[].outputId',
-        'actions[].referenceData',
-        'actions[].type',
-        'actions[].address',
-        'actions[].password',
-        'normalTransaction.accountAlias',
-        'normalTransaction.accountId',
-        'normalTransaction.amount',
-        'normalTransaction.assetAlias',
-        'normalTransaction.assetId',
-        'normalTransaction.gas',
-        'normalTransaction.gas.type',
-        'normalTransaction.gas.price',
-        'normalTransaction.address',
-        'submitAction',
-        'password'
-      ],
-      validate,
-      touchOnChange: true,
-      initialValues: {
-        submitAction: 'submit',
-      },
-    }
+    form: 'NewTransactionForm',
+    fields: [
+      'baseTransaction',
+      'actions[].accountId',
+      'actions[].accountAlias',
+      'actions[].assetId',
+      'actions[].assetAlias',
+      'actions[].amount',
+      'actions[].receiver',
+      'actions[].outputId',
+      'actions[].referenceData',
+      'actions[].type',
+      'actions[].address',
+      'actions[].password',
+      'normalTransaction.accountAlias',
+      'normalTransaction.accountId',
+      'normalTransaction.amount',
+      'normalTransaction.assetAlias',
+      'normalTransaction.assetId',
+      'normalTransaction.gas',
+      'normalTransaction.gas.type',
+      'normalTransaction.gas.price',
+      'normalTransaction.address',
+      'submitAction',
+      'password'
+    ],
+    validate,
+    touchOnChange: true,
+    initialValues: {
+      submitAction: 'submit',
+    },
+  }
   )(Form)
 )