aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.eslintrc1
-rw-r--r--package-lock.json144
-rw-r--r--package.json1
-rw-r--r--ui/app/components/send/currency-display.js57
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js6
-rw-r--r--ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js38
-rw-r--r--ui/app/css/itcss/components/currency-display.scss22
7 files changed, 231 insertions, 38 deletions
diff --git a/.eslintrc b/.eslintrc
index 511d6f216..b49a7a28a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -142,6 +142,7 @@
"operator-linebreak": [1, "after", { "overrides": { "?": "ignore", ":": "ignore" } }],
"padded-blocks": "off",
"quotes": [2, "single", {"avoidEscape": true, "allowTemplateLiterals": true}],
+ "react/no-deprecated": 0,
"semi": [2, "never"],
"semi-spacing": [2, { "before": false, "after": true }],
"space-before-blocks": [1, "always"],
diff --git a/package-lock.json b/package-lock.json
index a1fdf0059..aa26a41eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1934,6 +1934,12 @@
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
},
+ "arch": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.0.tgz",
+ "integrity": "sha1-NhOqRhSQZLPB8GB5Gb8dR4boKIk=",
+ "dev": true
+ },
"archy": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
@@ -3793,6 +3799,12 @@
"integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY=",
"dev": true
},
+ "base64url": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/base64url/-/base64url-2.0.0.tgz",
+ "integrity": "sha1-6sFuA+oUOO/5Qj1puqNiYu0fcLs=",
+ "dev": true
+ },
"bcrypt-pbkdf": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
@@ -5141,6 +5153,33 @@
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
},
+ "clipboardy": {
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz",
+ "integrity": "sha512-2WNImOvCRe6r63Gk9pShfkwXsVtKCroMAevIbiae021mS850UkWPbevxsBz3tnvjZIEGvlwaqCPsw+4ulzNgJA==",
+ "dev": true,
+ "requires": {
+ "arch": "2.1.0",
+ "execa": "0.8.0"
+ },
+ "dependencies": {
+ "execa": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
+ "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
+ "dev": true,
+ "requires": {
+ "cross-spawn": "5.1.0",
+ "get-stream": "3.0.0",
+ "is-stream": "1.1.0",
+ "npm-run-path": "2.0.2",
+ "p-finally": "1.0.0",
+ "signal-exit": "3.0.2",
+ "strip-eof": "1.0.0"
+ }
+ }
+ }
+ },
"cliui": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -9483,6 +9522,16 @@
"integrity": "sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g==",
"dev": true
},
+ "fill-keys": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/fill-keys/-/fill-keys-1.0.2.tgz",
+ "integrity": "sha1-mo+jb06K1jTjv2tPPIiCVRRS6yA=",
+ "dev": true,
+ "requires": {
+ "is-object": "1.0.1",
+ "merge-descriptors": "1.0.1"
+ }
+ },
"fill-range": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
@@ -11347,6 +11396,62 @@
}
}
},
+ "gh-pages": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-1.1.0.tgz",
+ "integrity": "sha512-ZpDkeOVmIrN5mz+sBWDz5zmTqcbNJzI/updCwEv/7rrSdpTNlj1B5GhBqG7f4Q8p5sJOdnBV0SIqxJrxtZQ9FA==",
+ "dev": true,
+ "requires": {
+ "async": "2.6.0",
+ "base64url": "2.0.0",
+ "commander": "2.11.0",
+ "fs-extra": "4.0.3",
+ "globby": "6.1.0",
+ "graceful-fs": "4.1.11",
+ "rimraf": "2.6.2"
+ },
+ "dependencies": {
+ "fs-extra": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+ "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+ "dev": true,
+ "requires": {
+ "graceful-fs": "4.1.11",
+ "jsonfile": "4.0.0",
+ "universalify": "0.1.1"
+ }
+ },
+ "globby": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+ "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+ "dev": true,
+ "requires": {
+ "array-union": "1.0.2",
+ "glob": "7.1.2",
+ "object-assign": "4.1.1",
+ "pify": "2.3.0",
+ "pinkie-promise": "2.0.1"
+ }
+ },
+ "jsonfile": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+ "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+ "dev": true,
+ "requires": {
+ "graceful-fs": "4.1.11"
+ }
+ },
+ "pify": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+ "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+ "dev": true
+ }
+ }
+ },
"gifencoder": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/gifencoder/-/gifencoder-1.1.0.tgz",
@@ -18541,6 +18646,12 @@
}
}
},
+ "module-not-found-error": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/module-not-found-error/-/module-not-found-error-1.0.1.tgz",
+ "integrity": "sha1-z4tP9PKWQGdNbN0CsOO8UjwrvcA=",
+ "dev": true
+ },
"moment": {
"version": "2.22.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
@@ -24330,6 +24441,28 @@
"integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
"dev": true
},
+ "proxyquire": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/proxyquire/-/proxyquire-2.0.1.tgz",
+ "integrity": "sha512-fQr3VQrbdzHrdaDn3XuisVoJlJNDJizHAvUXw9IuXRR8BpV2x0N7LsCxrpJkeKfPbNjiNU/V5vc008cI0TmzzQ==",
+ "dev": true,
+ "requires": {
+ "fill-keys": "1.0.2",
+ "module-not-found-error": "1.0.1",
+ "resolve": "1.5.0"
+ },
+ "dependencies": {
+ "resolve": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
+ "integrity": "sha512-hgoSGrc3pjzAPHNBg+KnFcK2HwlHTs/YrAGUr6qgTVUZmXv1UEXXl0bZNBKMA9fud6lRYFdPGz0xXxycPzmmiw==",
+ "dev": true,
+ "requires": {
+ "path-parse": "1.0.5"
+ }
+ }
+ }
+ },
"prr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -25095,6 +25228,11 @@
}
}
},
+ "react-numeric-input": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmjs.org/react-numeric-input/-/react-numeric-input-2.2.3.tgz",
+ "integrity": "sha1-S/WRjD6v7YUagN8euZLZQQArtVI="
+ },
"react-onclickoutside": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz",
@@ -30195,6 +30333,12 @@
"unist-util-is": "2.1.1"
}
},
+ "universalify": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
+ "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=",
+ "dev": true
+ },
"unorm": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/unorm/-/unorm-1.4.1.tgz",
diff --git a/package.json b/package.json
index b02957a65..bf7e3b165 100644
--- a/package.json
+++ b/package.json
@@ -163,6 +163,7 @@
"react-dom": "^15.6.2",
"react-hyperscript": "^3.0.0",
"react-markdown": "^3.0.0",
+ "react-numeric-input": "^2.2.3",
"react-redux": "^5.0.5",
"react-router-dom": "^4.2.2",
"react-select": "^1.0.0",
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 90fb2b66c..b98ebee09 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -1,10 +1,10 @@
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')
+const NumericInput = require('react-numeric-input')
module.exports = CurrencyDisplay
@@ -21,21 +21,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 ''
const { decimals, symbol } = selectedToken || {}
const multiplier = Math.pow(10, Number(decimals || 0))
@@ -76,6 +91,19 @@ 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 dynamicBuffer = readOnly ? 0 : 1
+ const decimalPointDeficit = !readOnly && valueString.match(/\./) ? -0.5 : 0
+ return (valueLength + dynamicBuffer + decimalPointDeficit) + 'ch'
+}
+
CurrencyDisplay.prototype.render = function () {
const {
className = 'currency-display',
@@ -85,10 +113,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', {
@@ -103,21 +131,20 @@ CurrencyDisplay.prototype.render = function () {
h('div.currency-display__input-wrapper', [
- h(readOnly ? 'input' : CurrencyInput, {
+ h(NumericInput, {
className: primaryBalanceClassName,
value: `${valueToRender}`,
- placeholder: '0',
+ placeholder: `0 ${primaryCurrency}`,
readOnly,
...(!readOnly ? {
- onInputChange: newValue => {
- handleChange(this.getAmount(newValue))
- },
- inputRef: input => { this.currencyInput = input },
+ onChange: e => this.handleChange(e),
+ onBlur: () => onBlur(this.getAmount(valueToRender)),
} : {}),
+ style: false,
+ format: num => `${num} ${primaryCurrency}`,
+ parse: stringWithCurrency => stringWithCurrency && stringWithCurrency.match(/^([.\d]+)/)[1],
}),
- h('span.currency-display__currency-symbol', primaryCurrency),
-
]),
]),
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
index b094d0cd5..8aefeed4a 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
@@ -49,11 +49,10 @@ export default class SendAmountRow extends Component {
})
}
- handleAmountChange (amount) {
+ updateAmount (amount) {
const { updateSendAmount, setMaxModeTo } = this.props
setMaxModeTo(false)
- this.validateAmount(amount)
updateSendAmount(amount)
}
@@ -78,7 +77,8 @@ export default class SendAmountRow extends Component {
<CurrencyDisplay
conversionRate={amountConversionRate}
convertedCurrency={convertedCurrency}
- handleChange={newAmount => this.handleAmountChange(newAmount)}
+ onBlur={newAmount => this.updateAmount(newAmount)}
+ onChange={newAmount => this.validateAmount(newAmount)}
inError={inError}
primaryCurrency={primaryCurrency || 'ETH'}
selectedToken={selectedToken}
diff --git a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
index 31d2e2515..2205579ca 100644
--- a/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-amount-row/tests/send-amount-row-component.test.js
@@ -14,7 +14,7 @@ const propsMethodSpies = {
updateSendAmountError: sinon.spy(),
}
-sinon.spy(SendAmountRow.prototype, 'handleAmountChange')
+sinon.spy(SendAmountRow.prototype, 'updateAmount')
sinon.spy(SendAmountRow.prototype, 'validateAmount')
describe('SendAmountRow Component', function () {
@@ -45,7 +45,7 @@ describe('SendAmountRow Component', function () {
propsMethodSpies.updateSendAmount.resetHistory()
propsMethodSpies.updateSendAmountError.resetHistory()
SendAmountRow.prototype.validateAmount.resetHistory()
- SendAmountRow.prototype.handleAmountChange.resetHistory()
+ SendAmountRow.prototype.updateAmount.resetHistory()
})
describe('validateAmount', () => {
@@ -71,11 +71,11 @@ describe('SendAmountRow Component', function () {
})
- describe('handleAmountChange', () => {
+ describe('updateAmount', () => {
it('should call setMaxModeTo', () => {
assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
- instance.handleAmountChange('someAmount')
+ instance.updateAmount('someAmount')
assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
assert.deepEqual(
propsMethodSpies.setMaxModeTo.getCall(0).args,
@@ -83,19 +83,9 @@ describe('SendAmountRow Component', function () {
)
})
- it('should call this.validateAmount', () => {
- assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
- instance.handleAmountChange('someAmount')
- assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1)
- assert.deepEqual(
- propsMethodSpies.updateSendAmount.getCall(0).args,
- ['someAmount']
- )
- })
-
it('should call updateSendAmount', () => {
assert.equal(propsMethodSpies.updateSendAmount.callCount, 0)
- instance.handleAmountChange('someAmount')
+ instance.updateAmount('someAmount')
assert.equal(propsMethodSpies.updateSendAmount.callCount, 1)
assert.deepEqual(
propsMethodSpies.updateSendAmount.getCall(0).args,
@@ -136,7 +126,8 @@ describe('SendAmountRow Component', function () {
const {
conversionRate,
convertedCurrency,
- handleChange,
+ onBlur,
+ onChange,
inError,
primaryCurrency,
selectedToken,
@@ -148,11 +139,18 @@ describe('SendAmountRow Component', function () {
assert.equal(primaryCurrency, 'mockPrimaryCurrency')
assert.deepEqual(selectedToken, { address: 'mockTokenAddress' })
assert.equal(value, 'mockAmount')
- assert.equal(SendAmountRow.prototype.handleAmountChange.callCount, 0)
- handleChange('mockNewAmount')
- assert.equal(SendAmountRow.prototype.handleAmountChange.callCount, 1)
+ assert.equal(SendAmountRow.prototype.updateAmount.callCount, 0)
+ onBlur('mockNewAmount')
+ assert.equal(SendAmountRow.prototype.updateAmount.callCount, 1)
+ assert.deepEqual(
+ SendAmountRow.prototype.updateAmount.getCall(0).args,
+ ['mockNewAmount']
+ )
+ assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
+ onChange('mockNewAmount')
+ assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1)
assert.deepEqual(
- SendAmountRow.prototype.handleAmountChange.getCall(0).args,
+ SendAmountRow.prototype.validateAmount.getCall(0).args,
['mockNewAmount']
)
})
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index 36d843c79..3560b0b0c 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -47,10 +47,32 @@
&__input-wrapper {
position: relative;
display: flex;
+
+ input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ display: none;
+ }
+
+ input[type="number"]:hover::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ display: none;
+ }
}
&__currency-symbol {
margin-top: 1px;
color: $scorpion;
}
+
+ .react-numeric-input {
+ input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ display: none;
+ }
+
+ input[type="number"]:hover::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ display: none;
+ }
+ }
} \ No newline at end of file
generated by cgit (git 2.34.1) at 2024-10-20 15:48:11 +0800