1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00

Connects remained of the gas customization component to redux.

This commit is contained in:
Dan Miller 2018-09-13 06:17:05 -02:30
parent 6ada9b4a3c
commit 7de3f22d63
22 changed files with 496 additions and 193 deletions

View File

@ -3,7 +3,6 @@ const pify = require('pify')
const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
const { getTokenAddressFromTokenObject } = require('./util')
const {
calcGasTotal,
calcTokenBalance,
estimateGas,
} = require('./components/send/send.utils')
@ -12,6 +11,7 @@ const { fetchLocale } = require('../i18n-helper')
const log = require('loglevel')
const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums')
const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util')
const gasDuck = require('./ducks/gas.duck')
const WebcamUtils = require('../lib/webcam-utils')
var actions = {
@ -921,6 +921,7 @@ function setGasTotal (gasTotal) {
}
function updateGasData ({
gasPrice,
blockGasLimit,
recentBlocks,
selectedAddress,
@ -931,34 +932,19 @@ function updateGasData ({
}) {
return (dispatch) => {
dispatch(actions.gasLoadingStarted())
return new Promise((resolve, reject) => {
background.getGasPrice((err, data) => {
if (err) return reject(err)
return resolve(data)
})
return estimateGas({
estimateGasMethod: background.estimateGas,
blockGasLimit,
selectedAddress,
selectedToken,
to,
value,
estimateGasPrice: gasPrice,
data,
})
.then(estimateGasPrice => {
return Promise.all([
Promise.resolve(estimateGasPrice),
estimateGas({
estimateGasMethod: background.estimateGas,
blockGasLimit,
selectedAddress,
selectedToken,
to,
value,
estimateGasPrice,
data,
}),
])
})
.then(([gasPrice, gas]) => {
dispatch(actions.setGasPrice(gasPrice))
.then(gas => {
dispatch(actions.setGasLimit(gas))
return calcGasTotal(gas, gasPrice)
})
.then((gasEstimate) => {
dispatch(actions.setGasTotal(gasEstimate))
dispatch(gasDuck.setCustomGasLimit(gas))
dispatch(updateSendErrors({ gasLoadingError: null }))
dispatch(actions.gasLoadingFinished())
})

View File

@ -1,9 +1,5 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
MIN_GAS_PRICE_DEC,
MIN_GAS_LIMIT_DEC,
} from '../../../send/send.constants'
import TimeRemaining from './time-remaining'
export default class AdvancedTabContent extends Component {
@ -76,8 +72,8 @@ export default class AdvancedTabContent extends Component {
renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
return (
<div className="advanced-tab__gas-edit-rows">
{ this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
{ this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
{ this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) }
{ this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, 0) }
</div>
)
}

View File

@ -138,10 +138,10 @@ describe('AdvancedTabContent Component', function () {
const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
assert.equal(renderGasEditRowSpyArgs.length, 2)
assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
'gasPriceNoDenom', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', '0', 9, true,
'gasPriceNoDenom', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', 9, true,
].map(String))
assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 21000, '0',
'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', 0,
].map(String))
})
})

View File

@ -17,9 +17,7 @@ export default class BasicTabContent extends Component {
<div className="basic-tab-content__title">Suggest gas fee increases</div>
<GasPriceButtonGroup
className="gas-price-button-group"
noButtonActiveByDefault={true}
showCheck={true}
handleGasPriceSelection={(newPrice) => console.log('New Price:', newPrice)}
{...this.props.gasPriceButtonGroupProps}
/>
</div>

View File

@ -17,34 +17,42 @@ export default class GasModalPageContainer extends Component {
customGasPrice: PropTypes.number,
customGasLimit: PropTypes.number,
gasPriceButtonGroupProps: PropTypes.object,
infoRowProps: PropTypes.shape({
originalTotalFiat: PropTypes.string,
originalTotalEth: PropTypes.string,
newTotalFiat: PropTypes.string,
newTotalEth: PropTypes.string,
}),
onSubmit: PropTypes.func,
customGasPriceInHex: PropTypes.string,
customGasLimitInHex: PropTypes.string,
}
state = {}
renderBasicTabContent () {
renderBasicTabContent (gasPriceButtonGroupProps) {
return (
<BasicTabContent
gasPriceButtonGroupProps={this.props.gasPriceButtonGroupProps}
gasPriceButtonGroupProps={gasPriceButtonGroupProps}
/>
)
}
renderAdvancedTabContent = () => {
const {
updateCustomGasPrice,
updateCustomGasLimit,
customGasPrice,
customGasLimit,
} = this.props
renderAdvancedTabContent ({
convertThenUpdateCustomGasPrice,
convertThenUpdateCustomGasLimit,
customGasPrice,
customGasLimit,
newTotalFiat,
}) {
return (
<AdvancedTabContent
updateCustomGasPrice={updateCustomGasPrice}
updateCustomGasLimit={updateCustomGasLimit}
updateCustomGasPrice={convertThenUpdateCustomGasPrice}
updateCustomGasLimit={convertThenUpdateCustomGasLimit}
customGasPrice={customGasPrice}
customGasLimit={customGasLimit}
millisecondsRemaining={91000}
totalFee={'$0.30'}
totalFee={newTotalFiat}
/>
)
}
@ -64,41 +72,67 @@ export default class GasModalPageContainer extends Component {
)
}
renderTabContent (mainTabContent) {
renderInfoRows (originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) {
return (
<div className="gas-modal-content">
{ mainTabContent }
{ this.renderInfoRow('gas-modal-content__info-row--fade', 'originalTotal', '$20.02 USD', '0.06685 ETH') }
{ this.renderInfoRow('gas-modal-content__info-row', 'newTotal', '$20.02 USD', '0.06685 ETH') }
<div>
{ this.renderInfoRow('gas-modal-content__info-row--fade', 'originalTotal', originalTotalFiat, originalTotalEth) }
{ this.renderInfoRow('gas-modal-content__info-row', 'newTotal', newTotalFiat, newTotalEth) }
</div>
)
}
renderTabs () {
renderTabs ({
originalTotalFiat,
originalTotalEth,
newTotalFiat,
newTotalEth,
},
{
gasPriceButtonGroupProps,
...advancedTabProps
}) {
return (
<Tabs>
<Tab name={this.context.t('basic')}>
{ this.renderTabContent(this.renderBasicTabContent()) }
<div className="gas-modal-content">
{ this.renderBasicTabContent(gasPriceButtonGroupProps) }
{ this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) }
</div>
</Tab>
<Tab name={this.context.t('advanced')}>
{ this.renderTabContent(this.renderAdvancedTabContent()) }
<div className="gas-modal-content">
{ this.renderAdvancedTabContent(advancedTabProps) }
{ this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) }
</div>
</Tab>
</Tabs>
)
}
render () {
const { hideModal } = this.props
const {
hideModal,
infoRowProps,
onSubmit,
customGasPriceInHex,
customGasLimitInHex,
...tabProps
} = this.props
return (
<div className="gas-modal-page-container">
<PageContainer
title={this.context.t('customGas')}
subtitle={this.context.t('customGasSubTitle')}
tabsComponent={this.renderTabs()}
tabsComponent={this.renderTabs(infoRowProps, tabProps)}
disabled={false}
onCancel={() => hideModal()}
onClose={() => hideModal()}
onSubmit={() => {
onSubmit(customGasLimitInHex, customGasPriceInHex)
hideModal()
}}
submitText={this.context.t('save')}
/>
</div>
)

View File

@ -1,36 +1,161 @@
import { connect } from 'react-redux'
import { pipe, partialRight } from 'ramda'
import GasModalPageContainer from './gas-modal-page-container.component'
import { hideModal } from '../../../actions'
import {
hideModal,
setGasLimit,
setGasPrice,
} from '../../../actions'
import {
setCustomGasPrice,
setCustomGasLimit,
} from '../../../ducks/gas.duck'
import {
updateGasAndCalculate,
} from '../../../ducks/confirm-transaction.duck'
import {
getCurrentCurrency,
conversionRateSelector as getConversionRate,
getSelectedToken,
} from '../../../selectors.js'
import {
getCustomGasPrice,
getCustomGasLimit,
getRenderableBasicEstimateData,
getBasicGasEstimateLoadingStatus,
getAveragePriceEstimateInHexWEI,
getDefaultActiveButtonIndex,
} from '../../../selectors/custom-gas'
import {
formatCurrency,
} from '../../../helpers/confirm-transaction/util'
import {
addHexWEIsToDec,
decEthToConvertedCurrency as ethTotalToConvertedCurrency,
decGWEIToHexWEI,
hexWEIToDecGWEI,
} from '../../../helpers/conversions.util'
import {
formatETHFee,
} from '../../../helpers/formatters'
import {
calcGasTotal,
} from '../../send/send.utils'
import { addHexPrefix } from 'ethereumjs-util'
const mapStateToProps = state => {
const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
const { gasPrice, gas: gasLimit, value } = getTxParams(state)
const gasTotal = calcGasTotal(gasLimit, gasPrice)
const customGasPriceInHex = getCustomGasPrice(state)
const customGasLimitInHex = getCustomGasLimit(state)
const customGasTotal = calcGasTotal(customGasLimitInHex || gasLimit, customGasPriceInHex || gasPrice)
const gasButtonInfo = getRenderableBasicEstimateData(state)
const currentCurrency = getCurrentCurrency(state)
const conversionRate = getConversionRate(state)
const newTotalFiat = addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate)
return {
customGasPrice: getCustomGasPrice(state),
customGasLimit: getCustomGasLimit(state),
isConfirm: isConfirm(state),
customGasPriceInHex,
customGasLimitInHex,
customGasPrice: calcCustomGasPrice(customGasPriceInHex, gasPrice),
customGasLimit: calcCustomGasLimit(customGasLimitInHex, gasLimit),
newTotalFiat,
gasPriceButtonGroupProps: {
buttonDataLoading,
gasButtonInfo: getRenderableBasicEstimateData(state),
defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customGasPriceInHex, gasPrice),
gasButtonInfo,
},
infoRowProps: {
originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
newTotalFiat,
newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
},
}
}
const mapDispatchToProps = dispatch => {
const updateCustomGasPrice = newPrice => dispatch(setCustomGasPrice(addHexPrefix(newPrice)))
return {
hideModal: () => dispatch(hideModal()),
updateCustomGasPrice: (newPrice) => dispatch(setCustomGasPrice(newPrice)),
updateCustomGasLimit: (newLimit) => dispatch(setCustomGasLimit(newLimit)),
handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
updateCustomGasPrice,
convertThenUpdateCustomGasPrice: newPrice => updateCustomGasPrice(decGWEIToHexWEI(newPrice)),
convertThenUpdateCustomGasLimit: newLimit => dispatch(setCustomGasLimit(addHexPrefix(newLimit.toString(16)))),
setGasData: (newLimit, newPrice) => {
dispatch(setGasLimit(newLimit))
dispatch(setGasPrice(newPrice))
},
updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(GasModalPageContainer)
const mergeProps = (stateProps, dispatchProps, ownProps) => {
const { gasPriceButtonGroupProps, isConfirm } = stateProps
const {
updateCustomGasPrice: dispatchUpdateCustomGasPrice,
setGasData: dispatchSetGasData,
updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
...otherDispatchProps
} = dispatchProps
return {
...stateProps,
...otherDispatchProps,
...ownProps,
onSubmit: isConfirm ? dispatchUpdateConfirmTxGasAndCalculate : dispatchSetGasData,
gasPriceButtonGroupProps: {
...gasPriceButtonGroupProps,
handleGasPriceSelection: dispatchUpdateCustomGasPrice,
},
}
}
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(GasModalPageContainer)
function isConfirm (state) {
return Boolean(Object.keys(state.confirmTransaction.txData).length)
}
function calcCustomGasPrice (customGasPriceInHex, gasPrice) {
return Number(hexWEIToDecGWEI(customGasPriceInHex || gasPrice))
}
function calcCustomGasLimit (customGasLimitInHex, gasLimit) {
return parseInt(customGasLimitInHex || gasLimit, 16)
}
function getTxParams (state) {
const { confirmTransaction: { txData }, metamask: { send } } = state
return txData.txParams || {
from: send.from,
gas: send.gasLimit,
gasPrice: send.gasPrice || getAveragePriceEstimateInHexWEI(state),
to: send.to,
value: getSelectedToken(state) ? '0x0' : send.amount,
}
}
function addHexWEIsToRenderableEth (aHexWEI, bHexWEI) {
return pipe(
addHexWEIsToDec,
formatETHFee
)(aHexWEI, bHexWEI)
}
function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conversionRate) {
return pipe(
addHexWEIsToDec,
partialRight(ethTotalToConvertedCurrency, [convertedCurrency, conversionRate]),
partialRight(formatCurrency, [convertedCurrency]),
)(aHexWEI, bHexWEI)
}

View File

@ -5,13 +5,12 @@ import sinon from 'sinon'
import GasModalPageContainer from '../gas-modal-page-container.component.js'
import PageContainer from '../../../page-container'
import BasicTabContent from '../basic-tab-content'
import AdvancedTabContent from '../advanced-tab-content'
import { Tab } from '../../../tabs'
const propsMethodSpies = {
hideModal: sinon.spy(),
onSubmit: sinon.spy(),
}
const mockGasPriceButtonGroupProps = {
@ -41,18 +40,29 @@ const mockGasPriceButtonGroupProps = {
noButtonActiveByDefault: true,
showCheck: true,
}
const mockInfoRowProps = {
originalTotalFiat: 'mockOriginalTotalFiat',
originalTotalEth: 'mockOriginalTotalEth',
newTotalFiat: 'mockNewTotalFiat',
newTotalEth: 'mockNewTotalEth',
}
const GP = GasModalPageContainer.prototype
describe('GasModalPageContainer Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<GasModalPageContainer
hideModal={propsMethodSpies.hideModal}
onSubmit={propsMethodSpies.onSubmit}
updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
customGasPrice={21}
customGasLimit={54321}
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
infoRowProps={mockInfoRowProps}
customGasPriceInHex={'mockCustomGasPriceInHex'}
customGasLimitInHex={'mockCustomGasLimitInHex'}
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
})
@ -89,7 +99,7 @@ describe('GasModalPageContainer Component', function () {
})
it('should pass the correct renderTabs property to PageContainer', () => {
sinon.stub(GasModalPageContainer.prototype, 'renderTabs').returns('mockTabs')
sinon.stub(GP, 'renderTabs').returns('mockTabs')
const renderTabsWrapperTester = shallow(<GasModalPageContainer />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
assert.equal(tabsComponent, 'mockTabs')
@ -98,8 +108,23 @@ describe('GasModalPageContainer Component', function () {
})
describe('renderTabs', () => {
beforeEach(() => {
sinon.spy(GP, 'renderBasicTabContent')
sinon.spy(GP, 'renderAdvancedTabContent')
sinon.spy(GP, 'renderInfoRows')
})
afterEach(() => {
GP.renderBasicTabContent.restore()
GP.renderAdvancedTabContent.restore()
GP.renderInfoRows.restore()
})
it('should render a Tabs component with "Basic" and "Advanced" tabs', () => {
const renderTabsResult = wrapper.instance().renderTabs()
const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
otherProps: 'mockAdvancedTabProps',
})
const renderedTabs = shallow(renderTabsResult)
assert.equal(renderedTabs.props().className, 'tabs')
@ -113,45 +138,28 @@ describe('GasModalPageContainer Component', function () {
assert.equal(tabs.at(1).childAt(0).props().className, 'gas-modal-content')
})
it('should render the expected children of each tab', () => {
const GP = GasModalPageContainer.prototype
sinon.spy(GP, 'renderTabContent')
assert.equal(GP.renderTabContent.callCount, 0)
it('should call renderBasicTabContent and renderAdvancedTabContent with the expected props', () => {
assert.equal(GP.renderBasicTabContent.callCount, 0)
assert.equal(GP.renderAdvancedTabContent.callCount, 0)
wrapper.instance().renderTabs()
wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
assert.equal(GP.renderTabContent.callCount, 2)
assert.equal(GP.renderBasicTabContent.callCount, 1)
assert.equal(GP.renderAdvancedTabContent.callCount, 1)
assert.equal(GP.renderTabContent.firstCall.args.type, BasicTabContent.type)
assert.equal(GP.renderTabContent.secondCall.args.type, AdvancedTabContent.type)
GP.renderTabContent.restore()
})
})
describe('renderTabContent', () => {
it('should render a root gas-modal-content div', () => {
const renderTabContentResult = wrapper.instance().renderTabContent(() => {})
const renderedTabContent = shallow(renderTabContentResult)
assert.equal(renderedTabContent.props().className, 'gas-modal-content')
assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps)
assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { otherProps: 'mockAdvancedTabProps' })
})
it('should render the passed element as its first child', () => {
const renderTabContentResult = wrapper.instance().renderTabContent(<span>Mock content</span>)
const renderedTabContent = shallow(renderTabContentResult)
assert(renderedTabContent.childAt(0).equals(<span>Mock content</span>))
})
it('should call renderInfoRows with the expected props', () => {
assert.equal(GP.renderInfoRows.callCount, 0)
it('should render the element results of renderInfoRow calls as second and third childs', () => {
const GP = GasModalPageContainer.prototype
sinon.stub(GP, 'renderInfoRow').callsFake((...args) => args.join(','))
wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
const renderTabContentResult = wrapper.instance().renderTabContent(() => <span>Mock content</span>)
const renderedTabContent = shallow(renderTabContentResult)
assert.equal(renderedTabContent.childAt(1).text(), 'gas-modal-content__info-row--fade,originalTotal,$20.02 USD,0.06685 ETH')
assert.equal(renderedTabContent.childAt(2).text(), 'gas-modal-content__info-row,newTotal,$20.02 USD,0.06685 ETH')
assert.equal(GP.renderInfoRows.callCount, 2)
GP.renderInfoRow.restore()
assert.deepEqual(GP.renderInfoRows.getCall(0).args, ['mockOriginalTotalFiat', 'mockOriginalTotalEth', 'mockNewTotalFiat', 'mockNewTotalEth'])
assert.deepEqual(GP.renderInfoRows.getCall(1).args, ['mockOriginalTotalFiat', 'mockOriginalTotalEth', 'mockNewTotalFiat', 'mockNewTotalEth'])
})
})
@ -176,7 +184,7 @@ describe('GasModalPageContainer Component', function () {
describe('renderBasicTabContent', () => {
it('should render', () => {
const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent()
const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent(mockGasPriceButtonGroupProps)
assert.deepEqual(
renderBasicTabContentResult.props.gasPriceButtonGroupProps,
@ -187,15 +195,20 @@ describe('GasModalPageContainer Component', function () {
describe('renderAdvancedTabContent', () => {
it('should render with the correct props', () => {
const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent()
const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent({
convertThenUpdateCustomGasPrice: () => 'mockConvertThenUpdateCustomGasPrice',
convertThenUpdateCustomGasLimit: () => 'mockConvertThenUpdateCustomGasLimit',
customGasPrice: 123,
customGasLimit: 456,
newTotalFiat: '$0.30',
})
const advancedTabContentProps = renderAdvancedTabContentResult.props
assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockupdateCustomGasPrice')
assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockupdateCustomGasLimit')
assert.equal(advancedTabContentProps.customGasPrice, 21)
assert.equal(advancedTabContentProps.customGasLimit, 54321)
assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice')
assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockConvertThenUpdateCustomGasLimit')
assert.equal(advancedTabContentProps.customGasPrice, 123)
assert.equal(advancedTabContentProps.customGasLimit, 456)
assert.equal(advancedTabContentProps.millisecondsRemaining, 91000)
assert.equal(advancedTabContentProps.totalFee, '$0.30')
assert(shallow(renderAdvancedTabContentResult).hasClass('advanced-tab'))
})
})
})

View File

@ -7,13 +7,19 @@ let mapDispatchToProps
const actionSpies = {
hideModal: sinon.spy(),
setGasLimit: sinon.spy(),
setGasPrice: sinon.spy(),
}
const customGasActionSpies = {
const gasActionSpies = {
setCustomGasPrice: sinon.spy(),
setCustomGasLimit: sinon.spy(),
}
const confirmTransactionActionSpies = {
updateGasAndCalculate: sinon.spy(),
}
proxyquire('../gas-modal-page-container.container.js', {
'react-redux': {
connect: (ms, md) => {
@ -23,13 +29,13 @@ proxyquire('../gas-modal-page-container.container.js', {
},
},
'../../../selectors/custom-gas': {
getCustomGasPrice: (s) => `mockGasPrice:${s}`,
getCustomGasLimit: (s) => `mockGasLimit:${s}`,
getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${s}`,
getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${Object.keys(s).length}`,
getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${Object.keys(s).length}`,
getDefaultActiveButtonIndex: (a, b, c) => a + b + c,
},
'../../../actions': actionSpies,
'../../../ducks/gas.duck': customGasActionSpies,
'../../../ducks/gas.duck': gasActionSpies,
'../../../ducks/confirm-transaction.duck': confirmTransactionActionSpies,
})
describe('gas-modal-page-container container', () => {
@ -37,10 +43,54 @@ describe('gas-modal-page-container container', () => {
describe('mapStateToProps()', () => {
it('should map the correct properties to props', () => {
assert.equal(mapStateToProps('mockState').customGasPrice, 'mockGasPrice:mockState')
assert.equal(mapStateToProps('mockState').customGasLimit, 'mockGasLimit:mockState')
assert.equal(mapStateToProps('mockState').gasPriceButtonGroupProps.buttonDataLoading, 'mockBasicGasEstimateLoadingStatus:mockState')
assert.equal(mapStateToProps('mockState').gasPriceButtonGroupProps.gasButtonInfo, 'mockRenderableBasicEstimateData:mockState')
const mockState2 = {
metamask: {
send: {
gasLimit: '16',
gasPrice: '32',
amount: '64',
},
currentCurrency: 'abc',
conversionRate: 50,
},
gas: {
customData: {
limit: 'aaaaaaaa',
price: 'ffffffff',
},
},
confirmTransaction: {
txData: {
txParams: {
gas: '0x1600000',
gasPrice: '0x3200000',
value: '0x640000000000000',
},
},
},
}
const result2 = mapStateToProps(mockState2)
assert.deepEqual(result2, {
isConfirm: true,
customGasPriceInHex: 'ffffffff',
customGasLimitInHex: 'aaaaaaaa',
customGasPrice: 4.294967295,
customGasLimit: 2863311530,
newTotalFiat: '637.41',
gasPriceButtonGroupProps:
{
buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:3',
defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:3ffffffff0x3200000',
gasButtonInfo: 'mockRenderableBasicEstimateData:3',
},
infoRowProps: {
originalTotalFiat: '22.58',
originalTotalEth: '0.451569 ETH',
newTotalFiat: '637.41',
newTotalEth: '12.748189 ETH',
},
})
})
})
@ -54,6 +104,12 @@ describe('gas-modal-page-container container', () => {
mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
})
afterEach(() => {
actionSpies.hideModal.resetHistory()
gasActionSpies.setCustomGasPrice.resetHistory()
gasActionSpies.setCustomGasLimit.resetHistory()
})
describe('hideModal()', () => {
it('should dispatch a hideModal action', () => {
mapDispatchToPropsObject.hideModal()
@ -63,18 +119,50 @@ describe('gas-modal-page-container container', () => {
})
describe('updateCustomGasPrice()', () => {
it('should dispatch a setCustomGasPrice action', () => {
mapDispatchToPropsObject.updateCustomGasPrice()
it('should dispatch a setCustomGasPrice action with the arg passed to updateCustomGasPrice hex prefixed', () => {
mapDispatchToPropsObject.updateCustomGasPrice('ffff')
assert(dispatchSpy.calledOnce)
assert(customGasActionSpies.setCustomGasPrice.calledOnce)
assert(gasActionSpies.setCustomGasPrice.calledOnce)
assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0xffff')
})
})
describe('updateCustomGasLimit()', () => {
it('should dispatch a setCustomGasLimit action', () => {
mapDispatchToPropsObject.updateCustomGasLimit()
describe('convertThenUpdateCustomGasPrice()', () => {
it('should dispatch a setCustomGasPrice action with the arg passed to convertThenUpdateCustomGasPrice converted to WEI', () => {
mapDispatchToPropsObject.convertThenUpdateCustomGasPrice('0xffff')
assert(dispatchSpy.calledOnce)
assert(customGasActionSpies.setCustomGasLimit.calledOnce)
assert(gasActionSpies.setCustomGasPrice.calledOnce)
assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0x3b9a8e653600')
})
})
describe('convertThenUpdateCustomGasLimit()', () => {
it('should dispatch a setCustomGasLimit action with the arg passed to convertThenUpdateCustomGasLimit converted to hex', () => {
mapDispatchToPropsObject.convertThenUpdateCustomGasLimit(16)
assert(dispatchSpy.calledOnce)
assert(gasActionSpies.setCustomGasLimit.calledOnce)
assert.equal(gasActionSpies.setCustomGasLimit.getCall(0).args[0], '0x10')
})
})
describe('setGasData()', () => {
it('should dispatch a setGasPrice and setGasLimit action with the correct props', () => {
mapDispatchToPropsObject.setGasData('ffff', 'aaaa')
assert(dispatchSpy.calledTwice)
assert(actionSpies.setGasPrice.calledOnce)
assert(actionSpies.setGasLimit.calledOnce)
assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'ffff')
assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'aaaa')
})
})
describe('updateConfirmTxGasAndCalculate()', () => {
it('should dispatch a updateGasAndCalculate action with the correct props', () => {
mapDispatchToPropsObject.updateConfirmTxGasAndCalculate('ffff', 'aaaa')
assert(dispatchSpy.calledOnce)
assert(confirmTransactionActionSpies.updateGasAndCalculate.calledOnce)
assert.deepEqual(confirmTransactionActionSpies.updateGasAndCalculate.getCall(0).args[0], { gasLimit: 'ffff', gasPrice: 'aaaa' })
})
})

View File

@ -29,7 +29,7 @@ const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
const mapStateToProps = (state, props) => {
const { toAddress: propsToAddress } = props
const { confirmTransaction, metamask } = state
const { confirmTransaction, metamask, gas } = state
const {
ethTransactionAmount,
ethTransactionFee,
@ -60,6 +60,12 @@ const mapStateToProps = (state, props) => {
unapprovedTxs,
} = metamask
const assetImage = assetImages[txParamsToAddress]
const {
customGasLimit,
customGasPrice,
} = gas
const { balance } = accounts[selectedAddress]
const { name: fromName } = identities[selectedAddress]
const toAddress = propsToAddress || txParamsToAddress
@ -106,6 +112,10 @@ const mapStateToProps = (state, props) => {
unapprovedTxs,
unapprovedTxCount,
currentNetworkUnapprovedTxs,
customGas: {
gasLimit: customGasLimit || txData.gasPrice,
gasPrice: customGasPrice || txData.gasLimit,
},
}
}
@ -192,7 +202,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
...ownProps,
showCustomizeGasModal: () => dispatchShowCustomizeGasModal({
txData,
onSubmit: txData => dispatchUpdateGasAndCalculate(txData),
onSubmit: customGas => dispatchUpdateGasAndCalculate(customGas),
validate: validateEditGas,
}),
cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),

View File

@ -32,6 +32,7 @@ export default class ConfirmTransaction extends Component {
setTransactionToConfirm: PropTypes.func,
confirmTransaction: PropTypes.object,
clearConfirmTransaction: PropTypes.func,
fetchGasEstimates: PropTypes.func,
}
getParamsTransactionId () {
@ -45,6 +46,7 @@ export default class ConfirmTransaction extends Component {
send = {},
history,
confirmTransaction: { txData: { id: transactionId } = {} },
fetchGasEstimates,
} = this.props
if (!totalUnapprovedCount && !send.to) {
@ -53,6 +55,7 @@ export default class ConfirmTransaction extends Component {
}
if (!transactionId) {
fetchGasEstimates()
this.setTransactionToConfirm()
}
}

View File

@ -5,6 +5,9 @@ import {
setTransactionToConfirm,
clearConfirmTransaction,
} from '../../../ducks/confirm-transaction.duck'
import {
fetchGasEstimates,
} from '../../../ducks/gas.duck'
import ConfirmTransaction from './confirm-transaction.component'
import { getTotalUnapprovedCount } from '../../../selectors'
import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
@ -24,6 +27,7 @@ const mapDispatchToProps = dispatch => {
return {
setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
fetchGasEstimates: () => dispatch(fetchGasEstimates()),
}
}

View File

@ -73,10 +73,10 @@ export default class SendTransactionScreen extends PersistentForm {
selectedAddress,
selectedToken = {},
to: currentToAddress,
updateAndSetGasTotal,
updateAndSetGasLimit,
} = this.props
updateAndSetGasTotal({
updateAndSetGasLimit({
blockGasLimit,
editingTransactionId,
gasLimit,
@ -164,6 +164,9 @@ export default class SendTransactionScreen extends PersistentForm {
componentDidMount () {
this.props.fetchGasEstimates()
.then(() => {
this.updateGas()
})
}
componentWillMount () {
@ -173,12 +176,12 @@ export default class SendTransactionScreen extends PersistentForm {
tokenContract,
updateSendTokenBalance,
} = this.props
updateSendTokenBalance({
selectedToken,
tokenContract,
address,
})
this.updateGas()
// Show QR Scanner modal if ?scan=true
if (window.location.search === '?scan=true') {

View File

@ -79,7 +79,7 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch) {
return {
updateAndSetGasTotal: ({
updateAndSetGasLimit: ({
blockGasLimit,
editingTransactionId,
gasLimit,
@ -92,7 +92,7 @@ function mapDispatchToProps (dispatch) {
data,
}) => {
!editingTransactionId
? dispatch(updateGasData({ recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
? dispatch(updateGasData({ gasPrice, recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
: dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
},
updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {

View File

@ -8,7 +8,11 @@ const {
} = require('../../selectors')
const {
estimateGasPriceFromRecentBlocks,
calcGasTotal,
} = require('./send.utils')
import {
getAveragePriceEstimateInHexWEI,
} from '../../selectors/custom-gas'
const selectors = {
accountsWithSendEtherInfoSelector,
@ -131,11 +135,11 @@ function getForceGasMin (state) {
}
function getGasLimit (state) {
return state.metamask.send.gasLimit
return state.metamask.send.gasLimit || '0'
}
function getGasPrice (state) {
return state.metamask.send.gasPrice
return state.metamask.send.gasPrice || getAveragePriceEstimateInHexWEI(state)
}
function getGasPriceFromRecentBlocks (state) {
@ -143,7 +147,7 @@ function getGasPriceFromRecentBlocks (state) {
}
function getGasTotal (state) {
return state.metamask.send.gasTotal
return calcGasTotal(getGasLimit(state), getGasPrice(state))
}
function getPrimaryCurrency (state) {

View File

@ -9,11 +9,11 @@ import SendContent from '../send-content/send-content.component'
import SendFooter from '../send-footer/send-footer.container'
const propsMethodSpies = {
updateAndSetGasTotal: sinon.spy(),
updateAndSetGasLimit: sinon.spy(),
updateSendErrors: sinon.spy(),
updateSendTokenBalance: sinon.spy(),
resetSendState: sinon.spy(),
fetchGasEstimates: sinon.spy(),
fetchGasEstimates: sinon.stub().returns(Promise.resolve()),
}
const utilsMethodStubs = {
getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
@ -52,7 +52,7 @@ describe('Send Component', function () {
showHexData={true}
tokenBalance={'mockTokenBalance'}
tokenContract={'mockTokenContract'}
updateAndSetGasTotal={propsMethodSpies.updateAndSetGasTotal}
updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
updateSendErrors={propsMethodSpies.updateSendErrors}
updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
resetSendState={propsMethodSpies.resetSendState}
@ -66,7 +66,7 @@ describe('Send Component', function () {
utilsMethodStubs.getAmountErrorObject.resetHistory()
utilsMethodStubs.getGasFeeErrorObject.resetHistory()
propsMethodSpies.fetchGasEstimates.resetHistory()
propsMethodSpies.updateAndSetGasTotal.resetHistory()
propsMethodSpies.updateAndSetGasLimit.resetHistory()
propsMethodSpies.updateSendErrors.resetHistory()
propsMethodSpies.updateSendTokenBalance.resetHistory()
})
@ -75,16 +75,6 @@ describe('Send Component', function () {
assert(SendTransactionScreen.prototype.componentDidMount.calledOnce)
})
describe('componentWillMount', () => {
it('should call this.updateGas', () => {
SendTransactionScreen.prototype.updateGas.resetHistory()
propsMethodSpies.updateSendErrors.resetHistory()
assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
wrapper.instance().componentWillMount()
assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
})
})
describe('componentDidMount', () => {
it('should call props.fetchGasEstimates', () => {
propsMethodSpies.fetchGasEstimates.resetHistory()
@ -92,6 +82,14 @@ describe('Send Component', function () {
wrapper.instance().componentDidMount()
assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
})
it('should call this.updateGas', () => {
SendTransactionScreen.prototype.updateGas.resetHistory()
propsMethodSpies.updateSendErrors.resetHistory()
assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
wrapper.instance().componentDidMount()
setTimeout(() => assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1), 250)
})
})
describe('componentWillUnmount', () => {
@ -283,12 +281,12 @@ describe('Send Component', function () {
})
describe('updateGas', () => {
it('should call updateAndSetGasTotal with the correct params if no to prop is passed', () => {
propsMethodSpies.updateAndSetGasTotal.resetHistory()
it('should call updateAndSetGasLimit with the correct params if no to prop is passed', () => {
propsMethodSpies.updateAndSetGasLimit.resetHistory()
wrapper.instance().updateGas()
assert.equal(propsMethodSpies.updateAndSetGasTotal.callCount, 1)
assert.equal(propsMethodSpies.updateAndSetGasLimit.callCount, 1)
assert.deepEqual(
propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0],
propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0],
{
blockGasLimit: 'mockBlockGasLimit',
editingTransactionId: 'mockEditingTransactionId',
@ -304,20 +302,20 @@ describe('Send Component', function () {
)
})
it('should call updateAndSetGasTotal with the correct params if a to prop is passed', () => {
propsMethodSpies.updateAndSetGasTotal.resetHistory()
it('should call updateAndSetGasLimit with the correct params if a to prop is passed', () => {
propsMethodSpies.updateAndSetGasLimit.resetHistory()
wrapper.setProps({ to: 'someAddress' })
wrapper.instance().updateGas()
assert.equal(
propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0].to,
propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to,
'someaddress',
)
})
it('should call updateAndSetGasTotal with to set to lowercase if passed', () => {
propsMethodSpies.updateAndSetGasTotal.resetHistory()
it('should call updateAndSetGasLimit with to set to lowercase if passed', () => {
propsMethodSpies.updateAndSetGasLimit.resetHistory()
wrapper.instance().updateGas({ to: '0xABC' })
assert.equal(propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0].to, '0xabc')
assert.equal(propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to, '0xabc')
})
})

View File

@ -94,7 +94,7 @@ describe('send container', () => {
mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
})
describe('updateAndSetGasTotal()', () => {
describe('updateAndSetGasLimit()', () => {
const mockProps = {
blockGasLimit: 'mockBlockGasLimit',
editingTransactionId: '0x2',
@ -109,7 +109,7 @@ describe('send container', () => {
}
it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
mapDispatchToPropsObject.updateAndSetGasTotal(mockProps)
mapDispatchToPropsObject.updateAndSetGasLimit(mockProps)
assert(dispatchSpy.calledOnce)
assert.equal(
actionSpies.setGasTotal.getCall(0).args[0],
@ -118,14 +118,14 @@ describe('send container', () => {
})
it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
const { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
mapDispatchToPropsObject.updateAndSetGasTotal(
const { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
mapDispatchToPropsObject.updateAndSetGasLimit(
Object.assign({}, mockProps, {editingTransactionId: false})
)
assert(dispatchSpy.calledOnce)
assert.deepEqual(
actionSpies.updateGasData.getCall(0).args[0],
{ selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
{ gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, }
)
})
})

View File

@ -237,7 +237,7 @@ describe('send selectors', () => {
it('should return the send.gasTotal', () => {
assert.equal(
getGasTotal(mockState),
'0xb451dc41b578'
'a9ff56'
)
})
})

View File

@ -13,8 +13,8 @@ const SET_CUSTOM_GAS_TOTAL = 'metamask/gas/SET_CUSTOM_GAS_TOTAL'
// TODO: determine if this approach to initState is consistent with conventional ducks pattern
const initState = {
customData: {
price: 0,
limit: 21000,
price: null,
limit: '0x5208',
},
basicEstimates: {
average: null,

View File

@ -47,8 +47,8 @@ describe('Gas Duck', () => {
}
const initState = {
customData: {
price: 0,
limit: 21000,
price: null,
limit: '0x5208',
},
basicEstimates: {
average: null,

View File

@ -1,6 +1,7 @@
import ethUtil from 'ethereumjs-util'
import { conversionUtil } from '../conversion-util'
import { ETH, GWEI, WEI } from '../constants/common'
import { conversionUtil, addCurrencies } from '../conversion-util'
export function bnToHex (inputBn) {
return ethUtil.addHexPrefix(inputBn.toString(16))
@ -82,3 +83,41 @@ export function getWeiHexFromDecimalValue ({
toDenomination: WEI,
})
}
export function addHexWEIsToDec (aHexWEI, bHexWEI) {
return addCurrencies(aHexWEI, bHexWEI, {
aBase: 16,
bBase: 16,
fromDenomination: 'WEI',
numberOfDecimals: 6,
})
}
export function decEthToConvertedCurrency (ethTotal, convertedCurrency, conversionRate) {
return conversionUtil(ethTotal, {
fromNumericBase: 'dec',
toNumericBase: 'dec',
fromCurrency: 'ETH',
toCurrency: convertedCurrency,
numberOfDecimals: 2,
conversionRate,
})
}
export function decGWEIToHexWEI (decGWEI) {
return conversionUtil(decGWEI, {
fromNumericBase: 'dec',
toNumericBase: 'hex',
fromDenomination: 'GWEI',
toDenomination: 'WEI',
})
}
export function hexWEIToDecGWEI (decGWEI) {
return conversionUtil(decGWEI, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
fromDenomination: 'WEI',
toDenomination: 'GWEI',
})
}

View File

@ -0,0 +1,3 @@
export function formatETHFee (ethFee) {
return ethFee + ' ETH'
}

View File

@ -1,8 +1,4 @@
import { pipe, partialRight } from 'ramda'
import {
getConversionRate,
getGasLimit,
} from '../components/send/send.selectors'
import {
conversionUtil,
multiplyCurrencies,
@ -13,6 +9,12 @@ import {
import {
formatCurrency,
} from '../helpers/confirm-transaction/util'
import {
decEthToConvertedCurrency as ethTotalToConvertedCurrency,
} from '../helpers/conversions.util'
import {
formatETHFee,
} from '../helpers/formatters'
import {
calcGasTotal,
} from '../components/send/send.utils'
@ -25,6 +27,9 @@ const selectors = {
getCustomGasTotal,
getRenderableBasicEstimateData,
getBasicGasEstimateLoadingStatus,
getAveragePriceEstimateInHexWEI,
getDefaultActiveButtonIndex,
priceEstimateToWei,
}
module.exports = selectors
@ -49,6 +54,16 @@ function getBasicGasEstimateLoadingStatus (state) {
return state.gas.basicEstimateIsLoading
}
function getAveragePriceEstimateInHexWEI (state) {
const averagePriceEstimate = state.gas.basicEstimates.average
return getGasPriceInHexWei(averagePriceEstimate || '0x0')
}
function getDefaultActiveButtonIndex (gasButtonInfo, customGasPriceInHex, gasPrice) {
return gasButtonInfo.findIndex(({ priceInHexWei }) => {
return priceInHexWei === addHexPrefix(customGasPriceInHex || gasPrice)
})
}
function apiEstimateModifiedToGWEI (estimate) {
return multiplyCurrencies(estimate, 0.10, {
@ -68,21 +83,6 @@ function basicPriceEstimateToETHTotal (estimate, gasLimit) {
})
}
function ethTotalToConvertedCurrency (ethTotal, convertedCurrency, conversionRate) {
return conversionUtil(ethTotal, {
fromNumericBase: 'dec',
toNumericBase: 'dec',
fromCurrency: 'ETH',
toCurrency: convertedCurrency,
numberOfDecimals: 2,
conversionRate,
})
}
function formatETHFee (ethFee) {
return ethFee + ' ETH'
}
function getRenderableEthFee (estimate, gasLimit) {
return pipe(
apiEstimateModifiedToGWEI,
@ -150,9 +150,8 @@ function getRenderableBasicEstimateData (state) {
if (getBasicGasEstimateLoadingStatus(state)) {
return []
}
const gasLimit = getGasLimit(state)
const conversionRate = getConversionRate(state)
const gasLimit = state.metamask.send.gasLimit || getCustomGasLimit(state)
const conversionRate = state.metamask.conversionRate
const currentCurrency = getCurrentCurrency(state)
const {
gas: {