Adds amount and gas field to sendV2.

feature/default_network_editable
Dan 7 years ago committed by Chi Kei Chan
parent fbab0f3a1f
commit ea7926c211
  1. 1
      package.json
  2. 85
      ui/app/components/send/currency-display.js
  3. 2
      ui/app/conversion-util.js
  4. 50
      ui/app/css/itcss/components/currency-display.scss
  5. 2
      ui/app/css/itcss/components/index.scss
  6. 55
      ui/app/send-v2.js

@ -136,6 +136,7 @@
"react-addons-css-transition-group": "^15.6.0",
"react-dom": "^15.5.4",
"react-hyperscript": "^3.0.0",
"react-input-autosize": "^2.0.1",
"react-markdown": "^2.3.0",
"react-redux": "^5.0.5",
"react-select": "^1.0.0-rc.2",

@ -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}`),
])
}

@ -125,7 +125,7 @@ const conversionUtil = (value, {
conversionRate,
ethToUSDRate,
invertConversionRate,
value,
value: value || '0',
});
const addCurrencies = (a, b, { toNumericBase, numberOfDecimals }) => {

@ -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;
}
}

@ -29,3 +29,5 @@
@import './token-list.scss';
@import './add-token.scss';
@import './currency-display.scss';

@ -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

Loading…
Cancel
Save