AmountInputMask,
ErrorBanner,
SubmitIndicator,
- PasswordField
+ PasswordField,
+ GasField
} from 'features/shared/components'
import {chainClient} from 'utility/environment'
import {reduxForm} from 'redux-form'
import React from 'react'
import styles from './New.scss'
import disableAutocomplete from 'utility/disableAutocomplete'
-import { normalizeBTMAmountUnit } from 'utility/buildInOutDisplay'
import { btmID } from 'utility/environment'
-const rangeOptions = [
- {
- label: 'Standard',
- label_zh: '标准',
- ratio: 1
- },
- {
- label: 'Fast',
- label_zh: '快速',
- ratio: 2
- },
- {
- label: 'Customize',
- label_zh: '自定义',
- value: ''
- }
-]
class NormalTxForm extends React.Component {
constructor(props) {
this.disableSubmit = this.disableSubmit.bind(this)
}
- componentDidMount() {
- this.props.fields.gas.type.onChange(rangeOptions[0].label)
- this.props.fields.gas.price.onChange(rangeOptions[0].value)
- }
-
disableSubmit(props) {
const hasValue = target => {
return !!(target && target.value)
}
- return !( (this.state.estimateGas || hasValue(props.gas.price))&&
+ return !( (this.state.estimateGas)&&
(hasValue(props.accountId) || hasValue(props.accountAlias)) &&
(hasValue(props.assetId) || hasValue(props.assetAlias)) &&
hasValue(props.address) && (hasValue(props.amount)) &&
render() {
const {
- fields: {accountId, accountAlias, assetId, assetAlias, address, amount, gas, password},
+ fields: {accountId, accountAlias, assetId, assetAlias, address, amount, password, gasLevel},
error,
handleSubmit,
submitting
let submitLabel = lang === 'zh' ? '提交交易' : 'Submit transaction'
- const gasOnChange = event => {
- gas.type.onChange(event)
-
- const range = rangeOptions.find(item => item.label === event.target.value)
- gas.price.onChange(range.value)
- }
const assetDecimal = this.props.assetDecimal(this.props.fields) || 0
const showAvailableBalance = (accountAlias.value || accountId.value) &&
return (
<form
+ className={styles.container}
onSubmit={handleSubmit(this.submitWithValidation)} {...disableAutocomplete}
onKeyDown={(e) => { this.props.handleKeyDown(e, handleSubmit(this.submitWithValidation), this.disableSubmit(this.props.fields)) }}>
- <FormSection title={lang === 'zh' ? '简单交易' : 'Normal Trasaction'}>
+ <div>
+ <label className={styles.title}>{lang === 'zh' ? '从' : 'From'}</label>
+ <div className={styles.main}>
+ <ObjectSelectorField
+ key='account-selector-field'
+ keyIndex='normaltx-account'
+ lang={lang}
+ title={lang === 'zh' ? '账户' : 'Account'}
+ aliasField={Autocomplete.AccountAlias}
+ fieldProps={{
+ id: accountId,
+ alias: accountAlias
+ }}
+ />
<div>
- <label className={styles.title}>{lang === 'zh' ? '从' : 'From'}</label>
- <div className={styles.main}>
- <ObjectSelectorField
- key='account-selector-field'
- keyIndex='normaltx-account'
- lang={lang}
- title={lang === 'zh' ? '账户' : 'Account'}
- aliasField={Autocomplete.AccountAlias}
- fieldProps={{
- id: accountId,
- alias: accountAlias
- }}
- />
- <ObjectSelectorField
- key='asset-selector-field'
- keyIndex='normaltx-asset'
- lang={lang}
- title={lang === 'zh' ? '资产' : 'Asset'}
- aliasField={Autocomplete.AssetAlias}
- fieldProps={{
- id: assetId,
- alias: assetAlias
- }}
- />
- {showAvailableBalance && availableBalance &&
- <small className={styles.balanceHint}>{lang === 'zh' ? '可用余额:' : 'Available balance:'} {availableBalance}</small>}
- </div>
+ <ObjectSelectorField
+ key='asset-selector-field'
+ keyIndex='normaltx-asset'
+ lang={lang}
+ title={lang === 'zh' ? '资产' : 'Asset'}
+ aliasField={Autocomplete.AssetAlias}
+ fieldProps={{
+ id: assetId,
+ alias: assetAlias
+ }}
+ />
+ {showAvailableBalance && availableBalance &&
+ <small className={styles.balanceHint}>{lang === 'zh' ? '可用余额:' : 'Available balance:'} {availableBalance}</small>}
</div>
+ </div>
- <div>
- <label className={styles.title}>{lang === 'zh' ? '至' : 'To'}</label>
- <div className={styles.main}>
- <TextField title={lang === 'zh' ? '地址' : 'Address'} fieldProps={{
- ...address,
- onBlur: (e) => {
- address.onBlur(e)
- this.estimateNormalTransactionGas()
- },
- }}/>
- {!showBtmAmountUnit &&
- <AmountInputMask title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount} decimal={assetDecimal}
- />}
- {showBtmAmountUnit &&
- <AmountUnitField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount}/>
- }
- </div>
- </div>
+ <label className={styles.title}>{lang === 'zh' ? '至' : 'To'}</label>
+ <div className={styles.main}>
+ <TextField title={lang === 'zh' ? '地址' : 'Address'} fieldProps={{
+ ...address,
+ onBlur: (e) => {
+ address.onBlur(e)
+ this.estimateNormalTransactionGas()
+ },
+ }}/>
+ {!showBtmAmountUnit &&
+ <AmountInputMask title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount} decimal={assetDecimal}
+ />}
+ {showBtmAmountUnit &&
+ <AmountUnitField title={lang === 'zh' ? '数量' : 'Amount'} fieldProps={amount}/>
+ }
+ </div>
+
+ <label className={styles.title}>{lang === 'zh' ? '选择手续费' : 'Select Fee'}</label>
+ <GasField
+ gas={this.state.estimateGas}
+ fieldProps={gasLevel}
+ btmAmountUnit={this.props.btmAmountUnit}
+ />
- <label className={styles.title}>Gas</label>
- <table>
- <tbody className={styles.optionsBtnContianer}>
- {rangeOptions.map((option) =>
- <tr className={styles.optionsBtn}>
- <td className={styles.optionsLabel}>
- <label>
- <input type='radio'
- {...gas.type}
- onChange={gasOnChange}
- value={option.label}
- checked={option.label == gas.type.value}
- />
- {lang === 'zh' ? option.label_zh : option.label}
- </label>
- </td>
- <td>
- {
- option.label == gas.type.value && option.label !== 'Customize'
- && this.state.estimateGas && ((lang === 'zh' ? '估算' : 'estimated') + ' ' + normalizeBTMAmountUnit(btmID,
- option.ratio * this.state.estimateGas,
- this.props.btmAmountUnit))
- }
- {
- option.label === 'Customize' && gas.type.value === 'Customize' &&
- <div>
- <AmountUnitField
- autoFocus={true}
- fieldProps={gas.price}
- placeholder='Enter gas'/>
- </div>
- }
- </td>
- </tr>
- )}
- </tbody>
- </table>
<label className={styles.title}>{lang === 'zh' ? '密码' : 'Password'}</label>
<PasswordField
placeholder={lang === 'zh' ? '请输入密码' : 'Please enter the password'}
fieldProps={password}
/>
- </FormSection>
+ </div>
<FormSection className={styles.submitSection}>
{error &&
'amount',
'assetAlias',
'assetId',
- 'gas',
- 'gas.type',
- 'gas.price',
+ 'gasLevel',
'address',
'submitAction',
'password'
touchOnChange: true,
initialValues: {
submitAction: 'submit',
+ gasLevel: '1'
},
}
)(NormalTxForm)
div.react-console-message-Error{
color: $text-danger;
}
+
+input[type=range] {
+ height: 34px;
+ -webkit-appearance: none;
+}
+input[type=range]:focus {
+ outline: none;
+}
+
+//Chrome
+input[type=range]::-webkit-slider-runnable-track {
+ height: 7px;
+ cursor: pointer;
+ animate: 0.2s;
+ background: $background-content-color;
+}
+input[type=range]::-webkit-slider-thumb {
+ height: 20px;
+ width: 20px;
+ border-radius: 15px;
+ background: $highlight-default;
+ cursor: pointer;
+ -webkit-appearance: none;
+ margin-top: -6px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+ background: $background-content-color;
+}
+
+//Firefox
+input[type=range]::-moz-range-track {
+ height: 7px;
+ cursor: pointer;
+ animate: 0.2s;
+ background: $background-content-color;
+}
+input[type=range]::-moz-range-thumb {
+ border: none;
+ height: 20px;
+ width: 20px;
+ border-radius: 15px;
+ background: $highlight-default;
+ cursor: pointer;
+}
+
+//IE
+input[type=range]::-ms-track {
+ height: 7px;
+ cursor: pointer;
+ animate: 0.2s;
+ background: transparent;
+ border-color: transparent;
+ color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+ background: $highlight-default;
+ border-radius: 2px;
+}
+input[type=range]::-ms-fill-upper {
+ background: $background-content-color;
+ border-radius: 2px;
+}
+input[type=range]::-ms-thumb {
+ margin-top: 1px;
+ height: 20px;
+ width: 20px;
+ border-radius: 15px;
+ background: $highlight-default;
+ cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+ background: $highlight-default;
+}
+input[type=range]:focus::-ms-fill-upper {
+ background: $background-content-color;
+}
OSDN Git Service
