diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index f04b95800..9f91af0e1 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -28,6 +28,9 @@ function SendTransactionScreen () { memo: '', dropdownOpen: false, } + + this.handleToChange = this.handleToChange.bind(this) + this.handleAmountChange = this.handleAmountChange.bind(this) } SendTransactionScreen.prototype.componentWillMount = function () { @@ -97,149 +100,203 @@ SendTransactionScreen.prototype.renderCopy = function () { ]) } -SendTransactionScreen.prototype.render = function () { +SendTransactionScreen.prototype.renderHeader = function () { + return h('div', [ + h('div.send-v2__header', {}, [ + + this.renderHeaderIcon(), + + h('div.send-v2__arrow-background', [ + h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'), + ]), + + h('div.send-v2__header-tip'), + + ]), + + this.renderTitle(), + + this.renderCopy(), + ]) +} + +SendTransactionScreen.prototype.renderFromRow = function () { const { accounts, conversionRate, - tokenToUSDRate, - selectedToken, - showCustomizeGasModal, selectedAccount, setSelectedAddress, + } = this.props + + const { dropdownOpen } = this.state + + return h('div.send-v2__form-row', [ + + h('div.send-v2__form-label', 'From:'), + + h(FromDropdown, { + dropdownOpen, + accounts, + selectedAccount, + onSelect: address => setSelectedAddress(address), + openDropdown: () => this.setState({ dropdownOpen: true }), + closeDropdown: () => this.setState({ dropdownOpen: false }), + conversionRate, + }), + + ]) +} + +SendTransactionScreen.prototype.handleToChange = function (event) { + const to = event.target.value + + this.setState({ + ...this.state, + to, + }) +} + +SendTransactionScreen.prototype.renderToRow = function () { + const { accounts } = this.props + const { to } = this.state + + return h('div.send-v2__form-row', [ + + h('div.send-v2__form-label', 'To:'), + + h(ToAutoComplete, { + to, + accounts, + onChange: this.handleToChange, + }), + + ]) +} + +SendTransactionScreen.prototype.handleAmountChange = function (value) { + const amount = value + + this.setState({ + ...this.state, + amount, + }) +} + +SendTransactionScreen.prototype.renderAmountRow = function () { + const { + conversionRate, + tokenToUSDRate, + selectedToken, primaryCurrency = 'ETH', + } = this.props + + const { amount } = this.state + + const amountConversionRate = selectedToken ? tokenToUSDRate : conversionRate + + return h('div.send-v2__form-row', [ + + h('div.send-v2__form-label', 'Amount:'), + + h(CurrencyDisplay, { + primaryCurrency, + convertedCurrency: 'USD', + value: amount, + conversionRate: amountConversionRate, + convertedPrefix: '$', + handleChange: this.handleAmountChange + }), + + ]) +} + +SendTransactionScreen.prototype.renderGasRow = function () { + const { + conversionRate, + showCustomizeGasModal, gasLimit, gasPrice, } = this.props - const { - dropdownOpen, - to, - amount, - // gasLimit, - // gasPrice, - memo, - } = this.state + return h('div.send-v2__form-row', [ - const amountConversionRate = selectedToken ? tokenToUSDRate : conversionRate + h('div.send-v2__form-label', 'Gas fee:'), + h(GasFeeDisplay, { + gasLimit, + gasPrice, + conversionRate, + onClick: showCustomizeGasModal, + }), + + h('div.send-v2__sliders-icon-container', { + onClick: showCustomizeGasModal, + }, [ + h('i.fa.fa-sliders.send-v2__sliders-icon'), + ]) + + ]) +} + +SendTransactionScreen.prototype.renderMemoRow = function () { + const { memo } = this.state + + return h('div.send-v2__form-row', [ + + h('div.send-v2__form-label', 'Transaction Memo:'), + + h(MemoTextArea, { + memo, + onChange: (event) => { + this.setState({ + ...this.state, + memo: event.target.value, + }) + }, + }), + + ]) +} + +SendTransactionScreen.prototype.renderForm = function () { + return h('div.send-v2__form', {}, [ + + this.renderFromRow(), + + this.renderToRow(), + + this.renderAmountRow(), + + this.renderGasRow(), + + this.renderMemoRow(), + + ]) +} + +SendTransactionScreen.prototype.renderFooter = function () { + const { goHome } = this.props + + return h('div.send-v2__footer', [ + h('button.send-v2__cancel-btn', { + onClick: goHome, + }, 'Cancel'), + h('button.send-v2__next-btn', { + onClick: event => this.onSubmit(event), + }, 'Next'), + ]) +} + +SendTransactionScreen.prototype.render = function () { return ( h('div.send-v2__container', [ - h('div.send-v2__header', {}, [ - this.renderHeaderIcon(), + this.renderHeader(), - h('div.send-v2__arrow-background', [ - h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'), - ]), + this.renderForm(), - h('div.send-v2__header-tip'), - - ]), - - this.renderTitle(), - - this.renderCopy(), - - h('div.send-v2__form', {}, [ - - h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', 'From:'), - - h(FromDropdown, { - dropdownOpen, - accounts, - selectedAccount, - onSelect: address => setSelectedAddress(address), - openDropdown: () => this.setState({ dropdownOpen: true }), - closeDropdown: () => this.setState({ dropdownOpen: false }), - conversionRate, - }), - - ]), - - h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', 'To:'), - - h(ToAutoComplete, { - to, - accounts, - onChange: (event) => { - this.setState({ - ...this.state, - to: event.target.value, - }) - }, - }), - - ]), - - h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', 'Amount:'), - - h(CurrencyDisplay, { - primaryCurrency, - convertedCurrency: 'USD', - value: amount, - conversionRate: amountConversionRate, - convertedPrefix: '$', - handleChange: (value) => { - this.setState({ - ...this.state, - amount: value, - }) - } - }), - - ]), - - h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', 'Gas fee:'), - - h(GasFeeDisplay, { - gasLimit, - gasPrice, - conversionRate, - onClick: showCustomizeGasModal, - }), - - h('div.send-v2__sliders-icon-container', { - onClick: showCustomizeGasModal, - }, [ - h('i.fa.fa-sliders.send-v2__sliders-icon'), - ]) - - ]), - - h('div.send-v2__form-row', [ - - h('div.send-v2__form-label', 'Transaction Memo:'), - - h(MemoTextArea, { - memo, - onChange: (event) => { - this.setState({ - ...this.state, - memo: event.target.value, - }) - }, - }), - - ]), - - ]), - - // Buttons underneath card - h('div.send-v2__footer', [ - h('button.send-v2__cancel-btn', {}, 'Cancel'), - h('button.send-v2__next-btn', { - onClick: event => this.onSubmit(event), - }, 'Next'), - ]), + this.renderFooter(), ]) )