diff options
author | Dan <danjm.com@gmail.com> | 2018-06-20 23:48:23 +0800 |
---|---|---|
committer | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2018-07-16 23:28:32 +0800 |
commit | b3d78ed8a1fbea059344b04416fb21bdb1b73f86 (patch) | |
tree | 6a2d8f6dda690961331c9bcbf5e2c6bf7102bced /ui/app/components/send/currency-display | |
parent | f31e87dcd5cec09e81c741e311efc3793c9d9b98 (diff) | |
download | tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.gz tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.bz2 tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.lz tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.xz tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.zst tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.zip |
Remove send_ directory, revert to just having send
Revert accidentally changed constants.
Require defaults in ens-input, gas-fee-display and confirm screens.
Diffstat (limited to 'ui/app/components/send/currency-display')
-rw-r--r-- | ui/app/components/send/currency-display/currency-display.js | 169 | ||||
-rw-r--r-- | ui/app/components/send/currency-display/index.js | 1 |
2 files changed, 170 insertions, 0 deletions
diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js new file mode 100644 index 000000000..1b9f7738c --- /dev/null +++ b/ui/app/components/send/currency-display/currency-display.js @@ -0,0 +1,169 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const { conversionUtil, multiplyCurrencies } = require('../../../conversion-util') +const { removeLeadingZeroes } = require('../send.utils') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') +const ethUtil = require('ethereumjs-util') + +module.exports = CurrencyDisplay + +inherits(CurrencyDisplay, Component) +function CurrencyDisplay () { + Component.call(this) +} + +function toHexWei (value) { + return conversionUtil(value, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + toDenomination: 'WEI', + }) +} + +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 || '0', multiplier, {toNumericBase: 'hex'}) + + return selectedToken + ? sendAmount + : toHexWei(value) +} + +CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value, readOnly }) { + if (value === '0x0') return readOnly ? '0' : '' + const { decimals, symbol } = selectedToken || {} + const multiplier = Math.pow(10, Number(decimals || 0)) + + return selectedToken + ? conversionUtil(ethUtil.addHexPrefix(value), { + fromNumericBase: 'hex', + toNumericBase: 'dec', + toCurrency: symbol, + conversionRate: multiplier, + invertConversionRate: true, + }) + : conversionUtil(ethUtil.addHexPrefix(value), { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromDenomination: 'WEI', + numberOfDecimals: 9, + conversionRate, + }) +} + +CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) { + const { primaryCurrency, convertedCurrency, conversionRate } = this.props + + let convertedValue = conversionUtil(nonFormattedValue, { + fromNumericBase: 'dec', + fromCurrency: primaryCurrency, + toCurrency: convertedCurrency, + numberOfDecimals: 2, + conversionRate, + }) + convertedValue = Number(convertedValue).toFixed(2) + + const upperCaseCurrencyCode = convertedCurrency.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(convertedValue), { + code: upperCaseCurrencyCode, + }) + : convertedValue +} + +CurrencyDisplay.prototype.handleChange = function (newVal) { + this.setState({ valueToRender: removeLeadingZeroes(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', + primaryBalanceClassName = 'currency-display__input', + convertedBalanceClassName = 'currency-display__converted-value', + primaryCurrency, + convertedCurrency, + readOnly = false, + inError = false, + onBlur, + step, + } = this.props + const { valueToRender } = this.state + + const convertedValueToRender = this.getConvertedValueToRender(valueToRender) + + return h('div', { + className, + style: { + borderColor: inError ? 'red' : null, + }, + onClick: () => { + this.currencyInput && this.currencyInput.focus() + }, + }, [ + + h('div.currency-display__primary-row', [ + + h('div.currency-display__input-wrapper', [ + + h('input', { + className: primaryBalanceClassName, + value: `${valueToRender}`, + placeholder: '0', + type: 'number', + readOnly, + ...(!readOnly ? { + 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, + step, + }), + + h('span.currency-display__currency-symbol', primaryCurrency), + + ]), + + ]), + + h('div', { + className: convertedBalanceClassName, + }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`), + + ]) + +} + diff --git a/ui/app/components/send/currency-display/index.js b/ui/app/components/send/currency-display/index.js new file mode 100644 index 000000000..0185a19e9 --- /dev/null +++ b/ui/app/components/send/currency-display/index.js @@ -0,0 +1 @@ +export { default } from './currency-display.js'
\ No newline at end of file |