aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan <danjm.com@gmail.com>2017-11-08 07:36:26 +0800
committerDan <danjm.com@gmail.com>2017-11-08 07:36:26 +0800
commitc57d504794b6020d42dcdabe08a13ed412450fc1 (patch)
tree99151d2b40844d5e90a4175550a4b37950d6c744
parent8c6e1232e417f5a2974b5aa1cc479dac4925df63 (diff)
downloadtangerine-wallet-browser-c57d504794b6020d42dcdabe08a13ed412450fc1.tar
tangerine-wallet-browser-c57d504794b6020d42dcdabe08a13ed412450fc1.tar.gz
tangerine-wallet-browser-c57d504794b6020d42dcdabe08a13ed412450fc1.tar.bz2
tangerine-wallet-browser-c57d504794b6020d42dcdabe08a13ed412450fc1.tar.lz
tangerine-wallet-browser-c57d504794b6020d42dcdabe08a13ed412450fc1.tar.xz
tangerine-wallet-browser-c57d504794b6020d42dcdabe08a13ed412450fc1.tar.zst
tangerine-wallet-browser-c57d504794b6020d42dcdabe08a13ed412450fc1.zip
Add currency-input component to correct send amount behaviour and move currency display value state to parent component.
-rw-r--r--ui/app/components/currency-input.js93
-rw-r--r--ui/app/components/send/currency-display.js36
-rw-r--r--ui/app/send-v2.js6
3 files changed, 103 insertions, 32 deletions
diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js
new file mode 100644
index 000000000..5e534d87b
--- /dev/null
+++ b/ui/app/components/currency-input.js
@@ -0,0 +1,93 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = CurrencyInput
+
+inherits(CurrencyInput, Component)
+function CurrencyInput (props) {
+ Component.call(this)
+
+ this.state = {
+ value: sanitizeValue(props.value),
+ }
+}
+
+function removeNonDigits (str) {
+ return str.match(/\d|$/g).join('')
+}
+
+// Removes characters that are not digits, then removes leading zeros
+function sanitizeInteger (val) {
+ return String(parseInt(removeNonDigits(val) || '0', 10))
+}
+
+function sanitizeDecimal (val) {
+ return removeNonDigits(val)
+}
+
+// Take a single string param and returns a non-negative integer or float as a string.
+// Breaks the input into three parts: the integer, the decimal point, and the decimal/fractional part.
+// Removes leading zeros from the integer, and non-digits from the integer and decimal
+// The integer is returned as '0' in cases where it would be empty. A decimal point is
+// included in the returned string if one is included in the param
+// Examples:
+// sanitizeValue('0') -> '0'
+// sanitizeValue('a') -> '0'
+// sanitizeValue('010.') -> '10.'
+// sanitizeValue('0.005') -> '0.005'
+// sanitizeValue('22.200') -> '22.200'
+// sanitizeValue('.200') -> '0.200'
+// sanitizeValue('a.b.1.c,89.123') -> '0.189123'
+function sanitizeValue (value) {
+ let [,integer, point, decimal] = (/([^.]*)([.]?)([^.]*)/).exec(value)
+
+ integer = sanitizeInteger(integer) || '0'
+ decimal = sanitizeDecimal(decimal)
+
+ return `${integer}${point}${decimal}`
+}
+
+CurrencyInput.prototype.handleChange = function (newValue) {
+ const { onInputChange } = this.props
+
+ this.setState({ value: sanitizeValue(newValue) })
+
+ onInputChange(sanitizeValue(newValue))
+}
+
+// If state.value === props.value plus a decimal point, or at least one
+// zero or a decimal point and at least one zero, then this returns state.value
+// after it is sanitized with getValueParts
+CurrencyInput.prototype.getValueToRender = function () {
+ const { value } = this.props
+ const { value: stateValue } = this.state
+
+ const trailingStateString = (new RegExp(`^${value}(.+)`)).exec(stateValue)
+ const trailingDecimalAndZeroes = trailingStateString && (/^[.0]0*/).test(trailingStateString[1])
+
+ return sanitizeValue(trailingDecimalAndZeroes
+ ? stateValue
+ : value)
+}
+
+CurrencyInput.prototype.render = function () {
+ const {
+ className,
+ placeholder,
+ readOnly,
+ } = this.props
+
+ const inputSizeMultiplier = readOnly ? 1 : 1.2
+
+ const valueToRender = this.getValueToRender()
+
+ return h('input', {
+ className,
+ value: valueToRender,
+ placeholder,
+ size: valueToRender.length * inputSizeMultiplier,
+ readOnly,
+ onChange: e => this.handleChange(e.target.value),
+ })
+}
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 45986e371..8b72b3e6d 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -1,6 +1,7 @@
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')
module.exports = CurrencyDisplay
@@ -8,10 +9,6 @@ module.exports = CurrencyDisplay
inherits(CurrencyDisplay, Component)
function CurrencyDisplay () {
Component.call(this)
-
- this.state = {
- value: null,
- }
}
function isValidInput (text) {
@@ -49,13 +46,11 @@ CurrencyDisplay.prototype.render = function () {
convertedCurrency,
readOnly = false,
inError = false,
- value: initValue,
+ value,
handleChange,
- validate,
} = this.props
- const { value } = this.state
- const initValueToRender = conversionUtil(initValue, {
+ const valueToRender = conversionUtil(value, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
fromDenomination: 'WEI',
@@ -63,7 +58,7 @@ CurrencyDisplay.prototype.render = function () {
conversionRate,
})
- const convertedValue = conversionUtil(value || initValueToRender, {
+ const convertedValue = conversionUtil(valueToRender, {
fromNumericBase: 'dec',
fromCurrency: primaryCurrency,
toCurrency: convertedCurrency,
@@ -84,29 +79,14 @@ CurrencyDisplay.prototype.render = function () {
h('div.currency-display__input-wrapper', [
- h('input', {
+ h(CurrencyInput, {
className: primaryBalanceClassName,
- value: `${value || initValueToRender}`,
+ value: `${valueToRender}`,
placeholder: '0',
- size: (value || initValueToRender).length * inputSizeMultiplier,
readOnly,
- onChange: (event) => {
- let newValue = event.target.value
-
- if (newValue === '') {
- newValue = '0'
- } else if (newValue.match(/^0[1-9]$/)) {
- newValue = newValue.match(/[1-9]/)[0]
- }
-
- if (newValue && !isValidInput(newValue)) {
- event.preventDefault()
- } else {
- validate(this.getAmount(newValue))
- this.setState({ value: newValue })
- }
+ onInputChange: newValue => {
+ handleChange(this.getAmount(newValue))
},
- onBlur: event => !readOnly && handleChange(this.getAmount(event.target.value)),
}),
h('span.currency-display__currency-symbol', primaryCurrency),
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index bb4c592e8..8c8b97a6d 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -300,6 +300,7 @@ SendTransactionScreen.prototype.handleAmountChange = function (value) {
const amount = value
const { updateSendAmount } = this.props
+ this.validateAmount(amount)
updateSendAmount(amount)
}
@@ -330,7 +331,6 @@ SendTransactionScreen.prototype.setAmountToMax = function () {
updateGasPrice(MIN_GAS_PRICE_HEX)
updateGasLimit(MIN_GAS_LIMIT_HEX)
updateGasTotal(MIN_GAS_TOTAL)
-
updateSendAmount(maxAmount)
}
@@ -393,9 +393,8 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
errors,
amount,
} = this.props
-
return h('div.send-v2__form-row', [
-
+
h('div.send-v2__form-label', [
'Amount:',
this.renderErrorMessage('amount'),
@@ -416,7 +415,6 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
value: amount || '0x0',
conversionRate: amountConversionRate,
handleChange: this.handleAmountChange,
- validate: this.validateAmount,
}),
]),