diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/app/components/send/currency-display.js | 85 | ||||
| -rw-r--r-- | ui/app/conversion-util.js | 2 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/currency-display.scss | 50 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/index.scss | 2 | ||||
| -rw-r--r-- | ui/app/send-v2.js | 55 |
5 files changed, 186 insertions, 8 deletions
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js new file mode 100644 index 000000000..e0147012f --- /dev/null +++ b/ui/app/components/send/currency-display.js @@ -0,0 +1,85 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('../identicon') +const AutosizeInput = require('react-input-autosize').default +const { conversionUtil } = require('../../conversion-util') + +module.exports = CurrencyDisplay + +inherits(CurrencyDisplay, Component) +function CurrencyDisplay () { + Component.call(this) + + this.state = { + minWidth: null, + } +} + +function isValidNumber (text) { + const re = /^([1-9]\d*|0)(\.|\.\d*)?$/ + return re.test(text) +} + +CurrencyDisplay.prototype.componentDidMount = function () { + this.setState({ minWidth: this.refs.currencyDisplayInput.sizer.scrollWidth + 10 }) +} + +CurrencyDisplay.prototype.render = function () { + const { + className, + primaryCurrency, + convertedCurrency, + value = '', + placeholder = '0', + conversionRate, + convertedPrefix = '', + readOnly = false, + handleChange, + inputFontSize, + } = this.props + const { minWidth } = this.state + + const convertedValue = conversionUtil(value, { + fromNumericBase: 'dec', + fromCurrency: primaryCurrency, + toCurrency: convertedCurrency, + conversionRate, + }) + + return h('div.currency-display', { + className, + }, [ + + h('div.currency-display__primary-row', [ + + h(AutosizeInput, { + ref: 'currencyDisplayInput', + className: 'currency-display__input-wrapper', + inputClassName: 'currency-display__input', + value, + placeholder, + readOnly, + minWidth, + onChange: (event) => { + const newValue = event.target.value + if (newValue && !isValidNumber(newValue)) { + event.preventDefault() + } + else { + handleChange(newValue) + } + }, + style: { fontSize: inputFontSize }, + }), + + h('span.currency-display__primary-currency', {}, primaryCurrency), + + ]), + + h('div.currency-display__converted-value', {}, `${convertedPrefix}${convertedValue} ${convertedCurrency}`), + + ]) + +} + diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js index 20f77b35b..70c3c2622 100644 --- a/ui/app/conversion-util.js +++ b/ui/app/conversion-util.js @@ -125,7 +125,7 @@ const conversionUtil = (value, { conversionRate, ethToUSDRate, invertConversionRate, - value, + value: value || '0', }); const addCurrencies = (a, b, { toNumericBase, numberOfDecimals }) => { diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss new file mode 100644 index 000000000..b2776bb47 --- /dev/null +++ b/ui/app/css/itcss/components/currency-display.scss @@ -0,0 +1,50 @@ +.currency-display { + height: 54px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + font-weight: 300; + padding: 8px 10px; + position: relative; + + &__primary-row { + display: flex; + } + + &__input-wrapper { + margin-top: -1px; + } + + &__input { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + border: none; + outline: 0 !important; + } + + &__primary-currency { + color: $scorpion; + font-weight: 400; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + } + + &__converted-row { + display: flex; + } + + &__converted-value, + &__converted-currency { + color: $dusty-gray; + font-family: Roboto; + font-size: 12px; + line-height: 12px; + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 9b3690099..f24a9caa8 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -29,3 +29,5 @@ @import './token-list.scss'; @import './add-token.scss'; + +@import './currency-display.scss'; diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index dbc8a23d0..47f8b18bd 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const FromDropdown = require('./components/send/from-dropdown') const ToAutoComplete = require('./components/send/to-autocomplete') +const CurrencyDisplay = require('./components/send/currency-display') module.exports = connect(mapStateToProps)(SendTransactionScreen) @@ -19,8 +20,12 @@ function mapStateToProps (state) { secondary: `$30${i},000.00 USD`, } })) + const conversionRate = 301.0005 - return { accounts: mockAccounts } + return { + accounts: mockAccounts, + conversionRate + } } inherits(SendTransactionScreen, PersistentForm) @@ -31,10 +36,9 @@ function SendTransactionScreen () { newTx: { from: '', to: '', - amountToSend: '0x0', gasPrice: null, - gas: null, - amount: '0x0', + gas: '0.001', + amount: '10', txData: null, memo: '', }, @@ -43,9 +47,9 @@ function SendTransactionScreen () { } SendTransactionScreen.prototype.render = function () { - const { accounts } = this.props + const { accounts, conversionRate } = this.props const { dropdownOpen, newTx } = this.state - const { to } = newTx + const { to, amount, gas } = newTx return ( @@ -91,7 +95,7 @@ SendTransactionScreen.prototype.render = function () { h(ToAutoComplete, { to, - identities: identities.map(({ identity }) => identity), + identities: accounts.map(({ identity }) => identity), onChange: (event) => { this.setState({ newTx: { @@ -104,6 +108,43 @@ SendTransactionScreen.prototype.render = function () { ]), + h('div.send-v2__form-row', [ + + h('div.send-v2__form-label', 'Amount:'), + + h(CurrencyDisplay, { + primaryCurrency: 'ETH', + convertedCurrency: 'USD', + value: amount, + conversionRate, + convertedPrefix: '$', + handleChange: (value) => { + this.setState({ + newTx: { + ...this.state.newTx, + amount: value, + }, + }) + } + }), + + ]), + + h('div.send-v2__form-row', [ + + h('div.send-v2__form-label', 'Gas fee:'), + + h(CurrencyDisplay, { + primaryCurrency: 'ETH', + convertedCurrency: 'USD', + value: gas, + conversionRate, + convertedPrefix: '$', + readOnly: true, + }), + + ]), + ]), // Buttons underneath card |