aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/send
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/send')
-rw-r--r--ui/app/components/send/currency-display.js58
1 files changed, 45 insertions, 13 deletions
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 90fb2b66c..360dd15d4 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -1,7 +1,6 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
-const CurrencyInput = require('../currency-input')
const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
const currencyFormatter = require('currency-formatter')
const currencies = require('currency-formatter/currencies')
@@ -21,21 +20,36 @@ function toHexWei (value) {
})
}
+CurrencyDisplay.prototype.componentWillMount = function () {
+ this.setState({
+ valueToRender: this.getValueToRender(this.props),
+ })
+}
+
+CurrencyDisplay.prototype.componentWillReceiveProps = function (nextProps) {
+ const currentValueToRender = this.getValueToRender(this.props)
+ const newValueToRender = this.getValueToRender(nextProps)
+ if (currentValueToRender !== newValueToRender) {
+ this.setState({
+ valueToRender: newValueToRender,
+ })
+ }
+}
+
CurrencyDisplay.prototype.getAmount = function (value) {
const { selectedToken } = this.props
const { decimals } = selectedToken || {}
const multiplier = Math.pow(10, Number(decimals || 0))
- const sendAmount = multiplyCurrencies(value, multiplier, {toNumericBase: 'hex'})
+ const sendAmount = multiplyCurrencies(value || '0', multiplier, {toNumericBase: 'hex'})
return selectedToken
? sendAmount
: toHexWei(value)
}
-CurrencyDisplay.prototype.getValueToRender = function () {
- const { selectedToken, conversionRate, value } = this.props
-
+CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value }) {
+ if (value === '0x0') return '0'
const { decimals, symbol } = selectedToken || {}
const multiplier = Math.pow(10, Number(decimals || 0))
@@ -76,6 +90,18 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu
: convertedValue
}
+CurrencyDisplay.prototype.handleChange = function (newVal) {
+ this.setState({ valueToRender: newVal })
+ this.props.onChange(this.getAmount(newVal))
+}
+
+CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) {
+ const valueString = String(valueToRender)
+ const valueLength = valueString.length || 1
+ const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0
+ return (valueLength + decimalPointDeficit + 0.75) + 'ch'
+}
+
CurrencyDisplay.prototype.render = function () {
const {
className = 'currency-display',
@@ -85,10 +111,10 @@ CurrencyDisplay.prototype.render = function () {
convertedCurrency,
readOnly = false,
inError = false,
- handleChange,
+ onBlur,
} = this.props
+ const { valueToRender } = this.state
- const valueToRender = this.getValueToRender()
const convertedValueToRender = this.getConvertedValueToRender(valueToRender)
return h('div', {
@@ -96,24 +122,30 @@ CurrencyDisplay.prototype.render = function () {
style: {
borderColor: inError ? 'red' : null,
},
- onClick: () => this.currencyInput && this.currencyInput.focus(),
+ onClick: () => {
+ this.currencyInput && this.currencyInput.focus()
+ },
}, [
h('div.currency-display__primary-row', [
h('div.currency-display__input-wrapper', [
- h(readOnly ? 'input' : CurrencyInput, {
+ h('input', {
className: primaryBalanceClassName,
value: `${valueToRender}`,
placeholder: '0',
+ type: 'number',
readOnly,
...(!readOnly ? {
- onInputChange: newValue => {
- handleChange(this.getAmount(newValue))
- },
- inputRef: input => { this.currencyInput = input },
+ onChange: e => this.handleChange(e.target.value),
+ onBlur: () => onBlur(this.getAmount(valueToRender)),
} : {}),
+ ref: input => { this.currencyInput = input },
+ style: {
+ width: this.getInputWidth(valueToRender, readOnly),
+ },
+ min: 0,
}),
h('span.currency-display__currency-symbol', primaryCurrency),