mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 11:46:13 +02:00
803eaaf968
* Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices.
92 lines
2.2 KiB
JavaScript
92 lines
2.2 KiB
JavaScript
const Component = require('react').Component
|
|
const h = require('react-hyperscript')
|
|
const inherits = require('util').inherits
|
|
const connect = require('react-redux').connect
|
|
const actions = require('../../actions')
|
|
const GasModalCard = require('./gas-modal-card')
|
|
|
|
function mapStateToProps (state) {
|
|
return {}
|
|
}
|
|
|
|
function mapDispatchToProps (dispatch) {
|
|
return {
|
|
hideModal: () => dispatch(actions.hideModal()),
|
|
}
|
|
}
|
|
|
|
inherits(CustomizeGasModal, Component)
|
|
function CustomizeGasModal () {
|
|
Component.call(this)
|
|
|
|
this.state = {
|
|
gasPrice: '0.23',
|
|
gasLimit: '25000',
|
|
}
|
|
}
|
|
|
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
|
|
|
|
CustomizeGasModal.prototype.render = function () {
|
|
const { hideModal } = this.props
|
|
const { gasPrice, gasLimit } = this.state
|
|
|
|
return h('div.send-v2__customize-gas', {}, [
|
|
h('div', {
|
|
}, [
|
|
h('div.send-v2__customize-gas__header', {}, [
|
|
|
|
h('div.send-v2__customize-gas__title', 'Customize Gas'),
|
|
|
|
h('div.send-v2__customize-gas__close', {
|
|
onClick: hideModal,
|
|
}),
|
|
|
|
]),
|
|
|
|
h('div.send-v2__customize-gas__body', {}, [
|
|
|
|
h(GasModalCard, {
|
|
value: gasPrice,
|
|
min: 0.0,
|
|
max: 5.0,
|
|
step: 0.01,
|
|
onChange: gasPrice => this.setState({ gasPrice }),
|
|
title: 'Gas Price',
|
|
copy: 'We calculate the suggested gas prices based on network success rates.',
|
|
}),
|
|
|
|
h(GasModalCard, {
|
|
value: gasLimit,
|
|
min: 20000,
|
|
max: 100000,
|
|
step: 1,
|
|
onChange: gasLimit => this.setState({ gasLimit }),
|
|
title: 'Gas Limit',
|
|
copy: 'We calculate the suggested gas limit based on network success rates.',
|
|
}),
|
|
|
|
]),
|
|
|
|
h('div.send-v2__customize-gas__footer', {}, [
|
|
|
|
h('div.send-v2__customize-gas__revert', {
|
|
onClick: () => console.log('Revert'),
|
|
}, ['Revert']),
|
|
|
|
h('div.send-v2__customize-gas__buttons', [
|
|
h('div.send-v2__customize-gas__cancel', {
|
|
onClick: this.props.hideModal,
|
|
}, ['CANCEL']),
|
|
|
|
h('div.send-v2__customize-gas__save', {
|
|
onClick: () => console.log('Save'),
|
|
}, ['SAVE']),
|
|
])
|
|
|
|
]),
|
|
|
|
]),
|
|
])
|
|
}
|