mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-26 20:39:08 +01:00
Breaks send-v2 down into renderable functions.
This commit is contained in:
Dan
Chi Kei Chan
parent
03685c64b8
commit
4915aff750
@ -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(),
|
||||
])
|
||||
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user