Merge pull request #5704 from MetaMask/new-gas-customize-feature-branch-d
Gas customization featuresfeature/default_network_editable
Dan J Miller
6 years ago
committed by
GitHub
commit
d1996509de
File diff suppressed because one or more lines are too long
@ -0,0 +1,144 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import classnames from 'classnames' |
||||||
|
import Loading from '../../../loading-screen' |
||||||
|
import GasPriceChart from '../../gas-price-chart' |
||||||
|
import debounce from 'lodash.debounce' |
||||||
|
|
||||||
|
export default class AdvancedTabContent extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
updateCustomGasPrice: PropTypes.func, |
||||||
|
updateCustomGasLimit: PropTypes.func, |
||||||
|
customGasPrice: PropTypes.number, |
||||||
|
customGasLimit: PropTypes.number, |
||||||
|
gasEstimatesLoading: PropTypes.bool, |
||||||
|
millisecondsRemaining: PropTypes.number, |
||||||
|
totalFee: PropTypes.string, |
||||||
|
timeRemaining: PropTypes.string, |
||||||
|
gasChartProps: PropTypes.object, |
||||||
|
insufficientBalance: PropTypes.bool, |
||||||
|
} |
||||||
|
|
||||||
|
constructor (props) { |
||||||
|
super(props) |
||||||
|
|
||||||
|
this.debouncedGasLimitReset = debounce((dVal) => { |
||||||
|
if (dVal < 21000) { |
||||||
|
props.updateCustomGasLimit(21000) |
||||||
|
} |
||||||
|
}, 1000, { trailing: true }) |
||||||
|
this.onChangeGasLimit = (val) => { |
||||||
|
props.updateCustomGasLimit(val) |
||||||
|
this.debouncedGasLimitReset(val) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
gasInput (value, onChange, min, insufficientBalance, showGWEI) { |
||||||
|
return ( |
||||||
|
<div className="advanced-tab__gas-edit-row__input-wrapper"> |
||||||
|
<input |
||||||
|
className={classnames('advanced-tab__gas-edit-row__input', { |
||||||
|
'advanced-tab__gas-edit-row__input--error': insufficientBalance, |
||||||
|
})} |
||||||
|
type="number" |
||||||
|
value={value} |
||||||
|
min={min} |
||||||
|
onChange={event => onChange(Number(event.target.value))} |
||||||
|
/> |
||||||
|
<div className={classnames('advanced-tab__gas-edit-row__input-arrows', { |
||||||
|
'advanced-tab__gas-edit-row__input-arrows--error': insufficientBalance, |
||||||
|
})}> |
||||||
|
<div className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value + 1)}><i className="fa fa-sm fa-angle-up" /></div> |
||||||
|
<div className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value - 1)}><i className="fa fa-sm fa-angle-down" /></div> |
||||||
|
</div> |
||||||
|
{insufficientBalance && <div className="advanced-tab__gas-edit-row__insufficient-balance"> |
||||||
|
Insufficient Balance |
||||||
|
</div>} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
infoButton (onClick) { |
||||||
|
return <i className="fa fa-info-circle" onClick={onClick} /> |
||||||
|
} |
||||||
|
|
||||||
|
renderDataSummary (totalFee, timeRemaining) { |
||||||
|
return ( |
||||||
|
<div className="advanced-tab__transaction-data-summary"> |
||||||
|
<div className="advanced-tab__transaction-data-summary__titles"> |
||||||
|
<span>{ this.context.t('newTransactionFee') }</span> |
||||||
|
<span>~{ this.context.t('transactionTime') }</span> |
||||||
|
</div> |
||||||
|
<div className="advanced-tab__transaction-data-summary__container"> |
||||||
|
<div className="advanced-tab__transaction-data-summary__fee"> |
||||||
|
{totalFee} |
||||||
|
</div> |
||||||
|
<div className="time-remaining">{timeRemaining}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderGasEditRow (labelKey, ...gasInputArgs) { |
||||||
|
return ( |
||||||
|
<div className="advanced-tab__gas-edit-row"> |
||||||
|
<div className="advanced-tab__gas-edit-row__label"> |
||||||
|
{ this.context.t(labelKey) } |
||||||
|
{ this.infoButton(() => {}) } |
||||||
|
</div> |
||||||
|
{ this.gasInput(...gasInputArgs) } |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance) { |
||||||
|
return ( |
||||||
|
<div className="advanced-tab__gas-edit-rows"> |
||||||
|
{ this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, true) } |
||||||
|
{ this.renderGasEditRow('gasLimit', customGasLimit, this.onChangeGasLimit, customGasLimit, insufficientBalance) } |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
updateCustomGasPrice, |
||||||
|
updateCustomGasLimit, |
||||||
|
timeRemaining, |
||||||
|
customGasPrice, |
||||||
|
customGasLimit, |
||||||
|
insufficientBalance, |
||||||
|
totalFee, |
||||||
|
gasChartProps, |
||||||
|
gasEstimatesLoading, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="advanced-tab"> |
||||||
|
{ this.renderDataSummary(totalFee, timeRemaining) } |
||||||
|
<div className="advanced-tab__fee-chart"> |
||||||
|
{ this.renderGasEditRows( |
||||||
|
customGasPrice, |
||||||
|
updateCustomGasPrice, |
||||||
|
customGasLimit, |
||||||
|
updateCustomGasLimit, |
||||||
|
insufficientBalance |
||||||
|
) } |
||||||
|
<div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div> |
||||||
|
{!gasEstimatesLoading |
||||||
|
? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} /> |
||||||
|
: <Loading /> |
||||||
|
} |
||||||
|
<div className="advanced-tab__fee-chart__speed-buttons"> |
||||||
|
<span>Slower</span> |
||||||
|
<span>Faster</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './advanced-tab-content.component' |
||||||
@ -0,0 +1,191 @@ |
|||||||
|
@import './time-remaining/index'; |
||||||
|
|
||||||
|
.advanced-tab { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
|
||||||
|
&__transaction-data-summary, |
||||||
|
&__fee-chart-title { |
||||||
|
padding-left: 24px; |
||||||
|
padding-right: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
&__transaction-data-summary { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
color: $mid-gray; |
||||||
|
margin-top: 12px; |
||||||
|
padding-left: 18px; |
||||||
|
padding-right: 18px; |
||||||
|
|
||||||
|
&__titles, |
||||||
|
&__container { |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 12px; |
||||||
|
color: #888EA3; |
||||||
|
} |
||||||
|
|
||||||
|
&__container { |
||||||
|
font-size: 16px; |
||||||
|
margin-top: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
&__fee { |
||||||
|
font-size: 16px; |
||||||
|
color: #313A5E; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__fee-chart { |
||||||
|
margin-top: 8px; |
||||||
|
height: 265px; |
||||||
|
background: #F8F9FB; |
||||||
|
border-bottom: 1px solid #d2d8dd; |
||||||
|
border-top: 1px solid #d2d8dd; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 12px; |
||||||
|
color: #313A5E; |
||||||
|
margin-left: 22px; |
||||||
|
} |
||||||
|
|
||||||
|
&__speed-buttons { |
||||||
|
position: absolute; |
||||||
|
bottom: 13px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding-left: 20px; |
||||||
|
padding-right: 19px; |
||||||
|
width: 100%; |
||||||
|
font-size: 10px; |
||||||
|
color: #888EA3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__slider-container { |
||||||
|
padding-left: 27px; |
||||||
|
padding-right: 27px; |
||||||
|
} |
||||||
|
|
||||||
|
&__gas-edit-rows { |
||||||
|
height: 73px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: space-between; |
||||||
|
margin-left: 20px; |
||||||
|
margin-right: 10px; |
||||||
|
margin-top: 9px; |
||||||
|
} |
||||||
|
|
||||||
|
&__gas-edit-row { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
|
||||||
|
&__label { |
||||||
|
color: #313B5E; |
||||||
|
font-size: 14px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.fa-info-circle { |
||||||
|
color: $silver; |
||||||
|
margin-left: 10px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.fa-info-circle:hover { |
||||||
|
color: $mid-gray; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__insufficient-balance { |
||||||
|
font-size: 12px; |
||||||
|
color: red; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
&__input-wrapper { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
&__input { |
||||||
|
border: 1px solid $dusty-gray; |
||||||
|
border-radius: 4px; |
||||||
|
color: $mid-gray; |
||||||
|
font-size: 16px; |
||||||
|
height: 24px; |
||||||
|
width: 155px; |
||||||
|
padding-left: 8px; |
||||||
|
padding-top: 2px; |
||||||
|
margin-top: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
&__input--error { |
||||||
|
border: 1px solid $red; |
||||||
|
} |
||||||
|
|
||||||
|
&__input-arrows { |
||||||
|
position: absolute; |
||||||
|
top: 7px; |
||||||
|
right: 0px; |
||||||
|
width: 17px; |
||||||
|
height: 24px; |
||||||
|
border: 1px solid #dadada; |
||||||
|
border-top-right-radius: 4px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
color: #9b9b9b; |
||||||
|
font-size: .8em; |
||||||
|
border-bottom-right-radius: 4px; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&__i-wrap { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
&__i-wrap:hover { |
||||||
|
background: #4EADE7; |
||||||
|
color: $white; |
||||||
|
} |
||||||
|
|
||||||
|
i:hover { |
||||||
|
background: #4EADE7; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__input-arrows--error { |
||||||
|
border: 1px solid $red; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="number"]::-webkit-inner-spin-button { |
||||||
|
-webkit-appearance: none; |
||||||
|
-moz-appearance: none; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="number"]:hover::-webkit-inner-spin-button { |
||||||
|
-webkit-appearance: none; |
||||||
|
-moz-appearance: none; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&__gwei-symbol { |
||||||
|
position: absolute; |
||||||
|
top: 8px; |
||||||
|
right: 10px; |
||||||
|
color: $dusty-gray; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,273 @@ |
|||||||
|
import React from 'react' |
||||||
|
import assert from 'assert' |
||||||
|
import shallow from '../../../../../../lib/shallow-with-context' |
||||||
|
import sinon from 'sinon' |
||||||
|
import AdvancedTabContent from '../advanced-tab-content.component.js' |
||||||
|
|
||||||
|
import GasPriceChart from '../../../gas-price-chart' |
||||||
|
import Loading from '../../../../loading-screen' |
||||||
|
|
||||||
|
const propsMethodSpies = { |
||||||
|
updateCustomGasPrice: sinon.spy(), |
||||||
|
updateCustomGasLimit: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRow') |
||||||
|
sinon.spy(AdvancedTabContent.prototype, 'gasInput') |
||||||
|
sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRows') |
||||||
|
sinon.spy(AdvancedTabContent.prototype, 'renderDataSummary') |
||||||
|
|
||||||
|
describe('AdvancedTabContent Component', function () { |
||||||
|
let wrapper |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
wrapper = shallow(<AdvancedTabContent |
||||||
|
updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice} |
||||||
|
updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit} |
||||||
|
customGasPrice={11} |
||||||
|
customGasLimit={23456} |
||||||
|
timeRemaining={21500} |
||||||
|
totalFee={'$0.25'} |
||||||
|
insufficientBalance={false} |
||||||
|
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }) |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
propsMethodSpies.updateCustomGasPrice.resetHistory() |
||||||
|
propsMethodSpies.updateCustomGasLimit.resetHistory() |
||||||
|
AdvancedTabContent.prototype.renderGasEditRow.resetHistory() |
||||||
|
AdvancedTabContent.prototype.gasInput.resetHistory() |
||||||
|
AdvancedTabContent.prototype.renderGasEditRows.resetHistory() |
||||||
|
AdvancedTabContent.prototype.renderDataSummary.resetHistory() |
||||||
|
}) |
||||||
|
|
||||||
|
describe('render()', () => { |
||||||
|
it('should render the advanced-tab root node', () => { |
||||||
|
assert(wrapper.hasClass('advanced-tab')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the expected four children of the advanced-tab div', () => { |
||||||
|
const advancedTabChildren = wrapper.children() |
||||||
|
assert.equal(advancedTabChildren.length, 2) |
||||||
|
|
||||||
|
assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary')) |
||||||
|
assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart')) |
||||||
|
|
||||||
|
const feeChartDiv = advancedTabChildren.at(1) |
||||||
|
|
||||||
|
assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows')) |
||||||
|
assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title')) |
||||||
|
assert(feeChartDiv.childAt(2).is(GasPriceChart)) |
||||||
|
assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => { |
||||||
|
wrapper.setProps({ gasEstimatesLoading: true }) |
||||||
|
const advancedTabChildren = wrapper.children() |
||||||
|
assert.equal(advancedTabChildren.length, 2) |
||||||
|
|
||||||
|
assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary')) |
||||||
|
assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart')) |
||||||
|
|
||||||
|
const feeChartDiv = advancedTabChildren.at(1) |
||||||
|
|
||||||
|
assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows')) |
||||||
|
assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title')) |
||||||
|
assert(feeChartDiv.childAt(2).is(Loading)) |
||||||
|
assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call renderDataSummary with the expected params', () => { |
||||||
|
assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1) |
||||||
|
const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args |
||||||
|
assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500]) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call renderGasEditRows with the expected params', () => { |
||||||
|
assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1) |
||||||
|
const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args |
||||||
|
assert.deepEqual(renderGasEditRowArgs, [ |
||||||
|
11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit, false, |
||||||
|
]) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderDataSummary()', () => { |
||||||
|
let dataSummary |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
dataSummary = shallow(wrapper.instance().renderDataSummary('mockTotalFee', 'mockMsRemaining')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the transaction-data-summary root node', () => { |
||||||
|
assert(dataSummary.hasClass('advanced-tab__transaction-data-summary')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render titles of the data', () => { |
||||||
|
const titlesNode = dataSummary.children().at(0) |
||||||
|
assert(titlesNode.hasClass('advanced-tab__transaction-data-summary__titles')) |
||||||
|
assert.equal(titlesNode.children().at(0).text(), 'newTransactionFee') |
||||||
|
assert.equal(titlesNode.children().at(1).text(), '~transactionTime') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the data', () => { |
||||||
|
const dataNode = dataSummary.children().at(1) |
||||||
|
assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container')) |
||||||
|
assert.equal(dataNode.children().at(0).text(), 'mockTotalFee') |
||||||
|
assert(dataNode.children().at(1).hasClass('time-remaining')) |
||||||
|
assert.equal(dataNode.children().at(1).text(), 'mockMsRemaining') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderGasEditRow()', () => { |
||||||
|
let gasEditRow |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
AdvancedTabContent.prototype.gasInput.resetHistory() |
||||||
|
gasEditRow = shallow(wrapper.instance().renderGasEditRow( |
||||||
|
'mockLabelKey', 'argA', 'argB' |
||||||
|
)) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the gas-edit-row root node', () => { |
||||||
|
assert(gasEditRow.hasClass('advanced-tab__gas-edit-row')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a label and an input', () => { |
||||||
|
const gasEditRowChildren = gasEditRow.children() |
||||||
|
assert.equal(gasEditRowChildren.length, 2) |
||||||
|
assert(gasEditRowChildren.at(0).hasClass('advanced-tab__gas-edit-row__label')) |
||||||
|
assert(gasEditRowChildren.at(1).hasClass('advanced-tab__gas-edit-row__input-wrapper')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the label key and info button', () => { |
||||||
|
const gasRowLabelChildren = gasEditRow.children().at(0).children() |
||||||
|
assert.equal(gasRowLabelChildren.length, 2) |
||||||
|
assert(gasRowLabelChildren.at(0), 'mockLabelKey') |
||||||
|
assert(gasRowLabelChildren.at(1).hasClass('fa-info-circle')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call this.gasInput with the correct args', () => { |
||||||
|
const gasInputSpyArgs = AdvancedTabContent.prototype.gasInput.args |
||||||
|
assert.deepEqual(gasInputSpyArgs[0], [ 'argA', 'argB' ]) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderGasEditRows()', () => { |
||||||
|
let gasEditRows |
||||||
|
let tempOnChangeGasLimit |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
tempOnChangeGasLimit = wrapper.instance().onChangeGasLimit |
||||||
|
wrapper.instance().onChangeGasLimit = () => 'mockOnChangeGasLimit' |
||||||
|
AdvancedTabContent.prototype.renderGasEditRow.resetHistory() |
||||||
|
gasEditRows = shallow(wrapper.instance().renderGasEditRows( |
||||||
|
'mockGasPrice', |
||||||
|
() => 'mockUpdateCustomGasPriceReturn', |
||||||
|
'mockGasLimit', |
||||||
|
() => 'mockUpdateCustomGasLimitReturn', |
||||||
|
false |
||||||
|
)) |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
wrapper.instance().onChangeGasLimit = tempOnChangeGasLimit |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the gas-edit-rows root node', () => { |
||||||
|
assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render two rows', () => { |
||||||
|
const gasEditRowsChildren = gasEditRows.children() |
||||||
|
assert.equal(gasEditRowsChildren.length, 2) |
||||||
|
assert(gasEditRowsChildren.at(0).hasClass('advanced-tab__gas-edit-row')) |
||||||
|
assert(gasEditRowsChildren.at(1).hasClass('advanced-tab__gas-edit-row')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call this.renderGasEditRow twice, with the expected args', () => { |
||||||
|
const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args |
||||||
|
assert.equal(renderGasEditRowSpyArgs.length, 2) |
||||||
|
assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [ |
||||||
|
'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', false, true, |
||||||
|
].map(String)) |
||||||
|
assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [ |
||||||
|
'gasLimit', 'mockGasLimit', () => 'mockOnChangeGasLimit', 'mockGasLimit', false, |
||||||
|
].map(String)) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('infoButton()', () => { |
||||||
|
let infoButton |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
AdvancedTabContent.prototype.renderGasEditRow.resetHistory() |
||||||
|
infoButton = shallow(wrapper.instance().infoButton(() => 'mockOnClickReturn')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the i element', () => { |
||||||
|
assert(infoButton.hasClass('fa-info-circle')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should pass the onClick argument to the i tag onClick prop', () => { |
||||||
|
assert(infoButton.props().onClick(), 'mockOnClickReturn') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('gasInput()', () => { |
||||||
|
let gasInput |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
AdvancedTabContent.prototype.renderGasEditRow.resetHistory() |
||||||
|
gasInput = shallow(wrapper.instance().gasInput( |
||||||
|
321, |
||||||
|
value => value + 7, |
||||||
|
0, |
||||||
|
false, |
||||||
|
8 |
||||||
|
)) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the input-wrapper root node', () => { |
||||||
|
assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render two children, including an input', () => { |
||||||
|
assert.equal(gasInput.children().length, 2) |
||||||
|
assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should pass the correct value min and precision props to the input', () => { |
||||||
|
const inputProps = gasInput.find('input').props() |
||||||
|
assert.equal(inputProps.min, 0) |
||||||
|
assert.equal(inputProps.value, 321) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call the passed onChange method with the value of the input onChange event', () => { |
||||||
|
const inputOnChange = gasInput.find('input').props().onChange |
||||||
|
assert.equal(inputOnChange({ target: { value: 8} }), 15) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should have two input arrows', () => { |
||||||
|
const upArrow = gasInput.find('.fa-angle-up') |
||||||
|
assert.equal(upArrow.length, 1) |
||||||
|
const downArrow = gasInput.find('.fa-angle-down') |
||||||
|
assert.equal(downArrow.length, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call onChange with the value incremented decremented when its onchange method is called', () => { |
||||||
|
gasInput = shallow(wrapper.instance().gasInput( |
||||||
|
321, |
||||||
|
value => value + 7, |
||||||
|
0, |
||||||
|
8, |
||||||
|
false |
||||||
|
)) |
||||||
|
const upArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(0) |
||||||
|
assert.equal(upArrow.props().onClick(), 329) |
||||||
|
const downArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(1) |
||||||
|
assert.equal(downArrow.props().onClick(), 327) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './time-remaining.component' |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
.time-remaining { |
||||||
|
color: #313A5E; |
||||||
|
font-size: 16px; |
||||||
|
|
||||||
|
.minutes-num, .seconds-num { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.seconds-num { |
||||||
|
margin-left: 7px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.minutes-label, .seconds-label { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
import React from 'react' |
||||||
|
import assert from 'assert' |
||||||
|
import shallow from '../../../../../../../lib/shallow-with-context' |
||||||
|
import TimeRemaining from '../time-remaining.component.js' |
||||||
|
|
||||||
|
describe('TimeRemaining Component', function () { |
||||||
|
let wrapper |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
wrapper = shallow(<TimeRemaining |
||||||
|
milliseconds={495000} |
||||||
|
/>) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('render()', () => { |
||||||
|
it('should render the time-remaining root node', () => { |
||||||
|
assert(wrapper.hasClass('time-remaining')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render minutes and seconds numbers and labels', () => { |
||||||
|
const timeRemainingChildren = wrapper.children() |
||||||
|
assert.equal(timeRemainingChildren.length, 4) |
||||||
|
assert.equal(timeRemainingChildren.at(0).text(), 8) |
||||||
|
assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand') |
||||||
|
assert.equal(timeRemainingChildren.at(2).text(), 15) |
||||||
|
assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import { getTimeBreakdown } from './time-remaining.utils' |
||||||
|
|
||||||
|
export default class TimeRemaining extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
milliseconds: PropTypes.number, |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
milliseconds, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
const { |
||||||
|
minutes, |
||||||
|
seconds, |
||||||
|
} = getTimeBreakdown(milliseconds) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="time-remaining"> |
||||||
|
<span className="minutes-num">{minutes}</span> |
||||||
|
<span className="minutes-label">{this.context.t('minutesShorthand')}</span> |
||||||
|
<span className="seconds-num">{seconds}</span> |
||||||
|
<span className="seconds-label">{this.context.t('secondsShorthand')}</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
function getTimeBreakdown (milliseconds) { |
||||||
|
return { |
||||||
|
hours: Math.floor(milliseconds / 3600000), |
||||||
|
minutes: Math.floor((milliseconds % 3600000) / 60000), |
||||||
|
seconds: Math.floor((milliseconds % 60000) / 1000), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
getTimeBreakdown, |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import Loading from '../../../loading-screen' |
||||||
|
import GasPriceButtonGroup from '../../gas-price-button-group' |
||||||
|
|
||||||
|
export default class BasicTabContent extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
gasPriceButtonGroupProps: PropTypes.object, |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { gasPriceButtonGroupProps } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="basic-tab-content"> |
||||||
|
<div className="basic-tab-content__title">Estimated Processing Times</div> |
||||||
|
<div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div> |
||||||
|
{!gasPriceButtonGroupProps.loading |
||||||
|
? <GasPriceButtonGroup |
||||||
|
className="gas-price-button-group--alt" |
||||||
|
showCheck={true} |
||||||
|
{...gasPriceButtonGroupProps} |
||||||
|
/> |
||||||
|
: <Loading /> |
||||||
|
} |
||||||
|
<div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './basic-tab-content.component' |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
.basic-tab-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
padding-left: 21px; |
||||||
|
height: 324px; |
||||||
|
background: #F5F7F8; |
||||||
|
border-bottom: 1px solid #d2d8dd; |
||||||
|
|
||||||
|
&__title { |
||||||
|
margin-top: 19px; |
||||||
|
font-size: 16px; |
||||||
|
color: $black; |
||||||
|
} |
||||||
|
|
||||||
|
&__blurb { |
||||||
|
font-size: 12px; |
||||||
|
color: $black; |
||||||
|
margin-top: 5px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
&__footer-blurb { |
||||||
|
font-size: 12px; |
||||||
|
color: #979797; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
import React from 'react' |
||||||
|
import assert from 'assert' |
||||||
|
import { shallow } from 'enzyme' |
||||||
|
import BasicTabContent from '../basic-tab-content.component' |
||||||
|
|
||||||
|
import GasPriceButtonGroup from '../../../gas-price-button-group/' |
||||||
|
import Loading from '../../../../loading-screen' |
||||||
|
|
||||||
|
const mockGasPriceButtonGroupProps = { |
||||||
|
buttonDataLoading: false, |
||||||
|
className: 'gas-price-button-group', |
||||||
|
gasButtonInfo: [ |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.52', |
||||||
|
feeInSecondaryCurrency: '0.0048 ETH', |
||||||
|
timeEstimate: '~ 1 min 0 sec', |
||||||
|
priceInHexWei: '0xa1b2c3f', |
||||||
|
}, |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.39', |
||||||
|
feeInSecondaryCurrency: '0.004 ETH', |
||||||
|
timeEstimate: '~ 1 min 30 sec', |
||||||
|
priceInHexWei: '0xa1b2c39', |
||||||
|
}, |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.30', |
||||||
|
feeInSecondaryCurrency: '0.00354 ETH', |
||||||
|
timeEstimate: '~ 2 min 1 sec', |
||||||
|
priceInHexWei: '0xa1b2c30', |
||||||
|
}, |
||||||
|
], |
||||||
|
handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice), |
||||||
|
noButtonActiveByDefault: true, |
||||||
|
showCheck: true, |
||||||
|
} |
||||||
|
|
||||||
|
describe('BasicTabContent Component', function () { |
||||||
|
let wrapper |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
wrapper = shallow(<BasicTabContent |
||||||
|
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps} |
||||||
|
/>) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('render', () => { |
||||||
|
it('should have a title', () => { |
||||||
|
assert(wrapper.find('.basic-tab-content').childAt(0).hasClass('basic-tab-content__title')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a GasPriceButtonGroup compenent', () => { |
||||||
|
assert.equal(wrapper.find(GasPriceButtonGroup).length, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should pass correct props to GasPriceButtonGroup', () => { |
||||||
|
const { |
||||||
|
buttonDataLoading, |
||||||
|
className, |
||||||
|
gasButtonInfo, |
||||||
|
handleGasPriceSelection, |
||||||
|
noButtonActiveByDefault, |
||||||
|
showCheck, |
||||||
|
} = wrapper.find(GasPriceButtonGroup).props() |
||||||
|
assert.equal(wrapper.find(GasPriceButtonGroup).length, 1) |
||||||
|
assert.equal(buttonDataLoading, mockGasPriceButtonGroupProps.buttonDataLoading) |
||||||
|
assert.equal(className, mockGasPriceButtonGroupProps.className) |
||||||
|
assert.equal(noButtonActiveByDefault, mockGasPriceButtonGroupProps.noButtonActiveByDefault) |
||||||
|
assert.equal(showCheck, mockGasPriceButtonGroupProps.showCheck) |
||||||
|
assert.deepEqual(gasButtonInfo, mockGasPriceButtonGroupProps.gasButtonInfo) |
||||||
|
assert.equal(JSON.stringify(handleGasPriceSelection), JSON.stringify(mockGasPriceButtonGroupProps.handleGasPriceSelection)) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a loading component instead of the GasPriceButtonGroup if gasPriceButtonGroupProps.loading is true', () => { |
||||||
|
wrapper.setProps({ |
||||||
|
gasPriceButtonGroupProps: { ...mockGasPriceButtonGroupProps, loading: true }, |
||||||
|
}) |
||||||
|
|
||||||
|
assert.equal(wrapper.find(GasPriceButtonGroup).length, 0) |
||||||
|
assert.equal(wrapper.find(Loading).length, 1) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
@ -0,0 +1,178 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import PageContainer from '../../page-container' |
||||||
|
import { Tabs, Tab } from '../../tabs' |
||||||
|
import AdvancedTabContent from './advanced-tab-content' |
||||||
|
import BasicTabContent from './basic-tab-content' |
||||||
|
|
||||||
|
export default class GasModalPageContainer extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
hideModal: PropTypes.func, |
||||||
|
hideBasic: PropTypes.bool, |
||||||
|
updateCustomGasPrice: PropTypes.func, |
||||||
|
updateCustomGasLimit: PropTypes.func, |
||||||
|
customGasPrice: PropTypes.number, |
||||||
|
customGasLimit: PropTypes.number, |
||||||
|
fetchBasicGasAndTimeEstimates: PropTypes.func, |
||||||
|
fetchGasEstimates: PropTypes.func, |
||||||
|
gasPriceButtonGroupProps: PropTypes.object, |
||||||
|
infoRowProps: PropTypes.shape({ |
||||||
|
originalTotalFiat: PropTypes.string, |
||||||
|
originalTotalEth: PropTypes.string, |
||||||
|
newTotalFiat: PropTypes.string, |
||||||
|
newTotalEth: PropTypes.string, |
||||||
|
}), |
||||||
|
onSubmit: PropTypes.func, |
||||||
|
customModalGasPriceInHex: PropTypes.string, |
||||||
|
customModalGasLimitInHex: PropTypes.string, |
||||||
|
cancelAndClose: PropTypes.func, |
||||||
|
transactionFee: PropTypes.string, |
||||||
|
blockTime: PropTypes.oneOfType([ |
||||||
|
PropTypes.string, |
||||||
|
PropTypes.number, |
||||||
|
]), |
||||||
|
} |
||||||
|
|
||||||
|
state = {} |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
const promise = this.props.hideBasic |
||||||
|
? Promise.resolve(this.props.blockTime) |
||||||
|
: this.props.fetchBasicGasAndTimeEstimates() |
||||||
|
.then(basicEstimates => basicEstimates.blockTime) |
||||||
|
|
||||||
|
promise |
||||||
|
.then(blockTime => { |
||||||
|
this.props.fetchGasEstimates(blockTime) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
renderBasicTabContent (gasPriceButtonGroupProps) { |
||||||
|
return ( |
||||||
|
<BasicTabContent |
||||||
|
gasPriceButtonGroupProps={gasPriceButtonGroupProps} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderAdvancedTabContent ({ |
||||||
|
convertThenUpdateCustomGasPrice, |
||||||
|
convertThenUpdateCustomGasLimit, |
||||||
|
customGasPrice, |
||||||
|
customGasLimit, |
||||||
|
newTotalFiat, |
||||||
|
gasChartProps, |
||||||
|
currentTimeEstimate, |
||||||
|
insufficientBalance, |
||||||
|
gasEstimatesLoading, |
||||||
|
}) { |
||||||
|
const { transactionFee } = this.props |
||||||
|
return ( |
||||||
|
<AdvancedTabContent |
||||||
|
updateCustomGasPrice={convertThenUpdateCustomGasPrice} |
||||||
|
updateCustomGasLimit={convertThenUpdateCustomGasLimit} |
||||||
|
customGasPrice={customGasPrice} |
||||||
|
customGasLimit={customGasLimit} |
||||||
|
timeRemaining={currentTimeEstimate} |
||||||
|
transactionFee={transactionFee} |
||||||
|
totalFee={newTotalFiat} |
||||||
|
gasChartProps={gasChartProps} |
||||||
|
insufficientBalance={insufficientBalance} |
||||||
|
gasEstimatesLoading={gasEstimatesLoading} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) { |
||||||
|
return ( |
||||||
|
<div className="gas-modal-content__info-row-wrapper"> |
||||||
|
<div className="gas-modal-content__info-row"> |
||||||
|
<div className="gas-modal-content__info-row__send-info"> |
||||||
|
<span className="gas-modal-content__info-row__send-info__label">{this.context.t('sendAmount')}</span> |
||||||
|
<span className="gas-modal-content__info-row__send-info__value">{sendAmount}</span> |
||||||
|
</div> |
||||||
|
<div className="gas-modal-content__info-row__transaction-info"> |
||||||
|
<span className={'gas-modal-content__info-row__transaction-info__label'}>{this.context.t('transactionFee')}</span> |
||||||
|
<span className="gas-modal-content__info-row__transaction-info__value">{transactionFee}</span> |
||||||
|
</div> |
||||||
|
<div className="gas-modal-content__info-row__total-info"> |
||||||
|
<span className="gas-modal-content__info-row__total-info__label">{this.context.t('newTotal')}</span> |
||||||
|
<span className="gas-modal-content__info-row__total-info__value">{newTotalEth}</span> |
||||||
|
</div> |
||||||
|
<div className="gas-modal-content__info-row__fiat-total-info"> |
||||||
|
<span className="gas-modal-content__info-row__fiat-total-info__value">{newTotalFiat}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderTabs ({ |
||||||
|
originalTotalFiat, |
||||||
|
originalTotalEth, |
||||||
|
newTotalFiat, |
||||||
|
newTotalEth, |
||||||
|
sendAmount, |
||||||
|
transactionFee, |
||||||
|
}, |
||||||
|
{ |
||||||
|
gasPriceButtonGroupProps, |
||||||
|
hideBasic, |
||||||
|
...advancedTabProps |
||||||
|
}) { |
||||||
|
let tabsToRender = [ |
||||||
|
{ name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) }, |
||||||
|
{ name: 'advanced', content: this.renderAdvancedTabContent(advancedTabProps) }, |
||||||
|
] |
||||||
|
|
||||||
|
if (hideBasic) { |
||||||
|
tabsToRender = tabsToRender.slice(1) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Tabs> |
||||||
|
{tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}> |
||||||
|
<div className="gas-modal-content"> |
||||||
|
{ content } |
||||||
|
{ this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) } |
||||||
|
</div> |
||||||
|
</Tab> |
||||||
|
)} |
||||||
|
</Tabs> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
cancelAndClose, |
||||||
|
infoRowProps, |
||||||
|
onSubmit, |
||||||
|
customModalGasPriceInHex, |
||||||
|
customModalGasLimitInHex, |
||||||
|
...tabProps |
||||||
|
} = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="gas-modal-page-container"> |
||||||
|
<PageContainer |
||||||
|
title={this.context.t('customGas')} |
||||||
|
subtitle={this.context.t('customGasSubTitle')} |
||||||
|
tabsComponent={this.renderTabs(infoRowProps, tabProps)} |
||||||
|
disabled={tabProps.insufficientBalance} |
||||||
|
onCancel={() => cancelAndClose()} |
||||||
|
onClose={() => cancelAndClose()} |
||||||
|
onSubmit={() => { |
||||||
|
onSubmit(customModalGasLimitInHex, customModalGasPriceInHex) |
||||||
|
}} |
||||||
|
submitText={this.context.t('save')} |
||||||
|
headerCloseText={'Close'} |
||||||
|
hideCancel={true} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,283 @@ |
|||||||
|
import { connect } from 'react-redux' |
||||||
|
import { pipe, partialRight } from 'ramda' |
||||||
|
import GasModalPageContainer from './gas-modal-page-container.component' |
||||||
|
import { |
||||||
|
hideModal, |
||||||
|
setGasLimit, |
||||||
|
setGasPrice, |
||||||
|
createSpeedUpTransaction, |
||||||
|
hideSidebar, |
||||||
|
} from '../../../actions' |
||||||
|
import { |
||||||
|
setCustomGasPrice, |
||||||
|
setCustomGasLimit, |
||||||
|
resetCustomData, |
||||||
|
setCustomTimeEstimate, |
||||||
|
fetchGasEstimates, |
||||||
|
fetchBasicGasAndTimeEstimates, |
||||||
|
} from '../../../ducks/gas.duck' |
||||||
|
import { |
||||||
|
hideGasButtonGroup, |
||||||
|
} from '../../../ducks/send.duck' |
||||||
|
import { |
||||||
|
updateGasAndCalculate, |
||||||
|
} from '../../../ducks/confirm-transaction.duck' |
||||||
|
import { |
||||||
|
getCurrentCurrency, |
||||||
|
conversionRateSelector as getConversionRate, |
||||||
|
getSelectedToken, |
||||||
|
getCurrentEthBalance, |
||||||
|
} from '../../../selectors.js' |
||||||
|
import { |
||||||
|
formatTimeEstimate, |
||||||
|
getFastPriceEstimateInHexWEI, |
||||||
|
getBasicGasEstimateLoadingStatus, |
||||||
|
getGasEstimatesLoadingStatus, |
||||||
|
getCustomGasLimit, |
||||||
|
getCustomGasPrice, |
||||||
|
getDefaultActiveButtonIndex, |
||||||
|
getEstimatedGasPrices, |
||||||
|
getEstimatedGasTimes, |
||||||
|
getRenderableBasicEstimateData, |
||||||
|
getBasicGasEstimateBlockTime, |
||||||
|
} from '../../../selectors/custom-gas' |
||||||
|
import { |
||||||
|
submittedPendingTransactionsSelector, |
||||||
|
} from '../../../selectors/transactions' |
||||||
|
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, |
||||||
|
isBalanceSufficient, |
||||||
|
} from '../../send/send.utils' |
||||||
|
import { addHexPrefix } from 'ethereumjs-util' |
||||||
|
import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils' |
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => { |
||||||
|
const { transaction = {} } = ownProps |
||||||
|
const buttonDataLoading = getBasicGasEstimateLoadingStatus(state) |
||||||
|
const gasEstimatesLoading = getGasEstimatesLoadingStatus(state) |
||||||
|
|
||||||
|
const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id) |
||||||
|
const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice |
||||||
|
const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit |
||||||
|
const gasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex) |
||||||
|
|
||||||
|
const customGasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex) |
||||||
|
|
||||||
|
const gasButtonInfo = getRenderableBasicEstimateData(state) |
||||||
|
|
||||||
|
const currentCurrency = getCurrentCurrency(state) |
||||||
|
const conversionRate = getConversionRate(state) |
||||||
|
|
||||||
|
const newTotalFiat = addHexWEIsToRenderableFiat(value, customGasTotal, currentCurrency, conversionRate) |
||||||
|
|
||||||
|
const hideBasic = state.appState.modal.modalState.props.hideBasic |
||||||
|
|
||||||
|
const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex) |
||||||
|
|
||||||
|
const gasPrices = getEstimatedGasPrices(state) |
||||||
|
const estimatedTimes = getEstimatedGasTimes(state) |
||||||
|
const balance = getCurrentEthBalance(state) |
||||||
|
|
||||||
|
const insufficientBalance = !isBalanceSufficient({ |
||||||
|
amount: value, |
||||||
|
gasTotal, |
||||||
|
balance, |
||||||
|
conversionRate, |
||||||
|
}) |
||||||
|
|
||||||
|
return { |
||||||
|
hideBasic, |
||||||
|
isConfirm: isConfirm(state), |
||||||
|
customModalGasPriceInHex, |
||||||
|
customModalGasLimitInHex, |
||||||
|
customGasPrice, |
||||||
|
customGasLimit: calcCustomGasLimit(customModalGasLimitInHex), |
||||||
|
newTotalFiat, |
||||||
|
currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes), |
||||||
|
blockTime: getBasicGasEstimateBlockTime(state), |
||||||
|
gasPriceButtonGroupProps: { |
||||||
|
buttonDataLoading, |
||||||
|
defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex), |
||||||
|
gasButtonInfo, |
||||||
|
}, |
||||||
|
gasChartProps: { |
||||||
|
currentPrice: customGasPrice, |
||||||
|
gasPrices, |
||||||
|
estimatedTimes, |
||||||
|
gasPricesMax: gasPrices[gasPrices.length - 1], |
||||||
|
estimatedTimesMax: estimatedTimes[0], |
||||||
|
}, |
||||||
|
infoRowProps: { |
||||||
|
originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate), |
||||||
|
originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal), |
||||||
|
newTotalFiat, |
||||||
|
newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal), |
||||||
|
transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal), |
||||||
|
sendAmount: addHexWEIsToRenderableEth(value, '0x0'), |
||||||
|
}, |
||||||
|
isSpeedUp: transaction.status === 'submitted', |
||||||
|
txId: transaction.id, |
||||||
|
insufficientBalance, |
||||||
|
gasEstimatesLoading, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => { |
||||||
|
const updateCustomGasPrice = newPrice => dispatch(setCustomGasPrice(addHexPrefix(newPrice))) |
||||||
|
|
||||||
|
return { |
||||||
|
cancelAndClose: () => { |
||||||
|
dispatch(resetCustomData()) |
||||||
|
dispatch(hideModal()) |
||||||
|
}, |
||||||
|
hideModal: () => dispatch(hideModal()), |
||||||
|
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) => { |
||||||
|
updateCustomGasPrice(gasPrice) |
||||||
|
dispatch(setCustomGasLimit(addHexPrefix(gasLimit.toString(16)))) |
||||||
|
return dispatch(updateGasAndCalculate({ gasLimit, gasPrice })) |
||||||
|
}, |
||||||
|
createSpeedUpTransaction: (txId, gasPrice) => { |
||||||
|
return dispatch(createSpeedUpTransaction(txId, gasPrice)) |
||||||
|
}, |
||||||
|
hideGasButtonGroup: () => dispatch(hideGasButtonGroup()), |
||||||
|
setCustomTimeEstimate: (timeEstimateInSeconds) => dispatch(setCustomTimeEstimate(timeEstimateInSeconds)), |
||||||
|
hideSidebar: () => dispatch(hideSidebar()), |
||||||
|
fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)), |
||||||
|
fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mergeProps = (stateProps, dispatchProps, ownProps) => { |
||||||
|
const { gasPriceButtonGroupProps, isConfirm, isSpeedUp, txId } = stateProps |
||||||
|
const { |
||||||
|
updateCustomGasPrice: dispatchUpdateCustomGasPrice, |
||||||
|
hideGasButtonGroup: dispatchHideGasButtonGroup, |
||||||
|
setGasData: dispatchSetGasData, |
||||||
|
updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate, |
||||||
|
createSpeedUpTransaction: dispatchCreateSpeedUpTransaction, |
||||||
|
hideSidebar: dispatchHideSidebar, |
||||||
|
cancelAndClose: dispatchCancelAndClose, |
||||||
|
hideModal: dispatchHideModal, |
||||||
|
...otherDispatchProps |
||||||
|
} = dispatchProps |
||||||
|
|
||||||
|
return { |
||||||
|
...stateProps, |
||||||
|
...otherDispatchProps, |
||||||
|
...ownProps, |
||||||
|
onSubmit: (gasLimit, gasPrice) => { |
||||||
|
if (isConfirm) { |
||||||
|
dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice) |
||||||
|
dispatchHideModal() |
||||||
|
} else if (isSpeedUp) { |
||||||
|
dispatchCreateSpeedUpTransaction(txId, gasPrice) |
||||||
|
dispatchHideSidebar() |
||||||
|
dispatchCancelAndClose() |
||||||
|
} else { |
||||||
|
dispatchSetGasData(gasLimit, gasPrice) |
||||||
|
dispatchHideGasButtonGroup() |
||||||
|
dispatchCancelAndClose() |
||||||
|
} |
||||||
|
}, |
||||||
|
gasPriceButtonGroupProps: { |
||||||
|
...gasPriceButtonGroupProps, |
||||||
|
handleGasPriceSelection: dispatchUpdateCustomGasPrice, |
||||||
|
}, |
||||||
|
cancelAndClose: () => { |
||||||
|
dispatchCancelAndClose() |
||||||
|
if (isSpeedUp) { |
||||||
|
dispatchHideSidebar() |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(GasModalPageContainer) |
||||||
|
|
||||||
|
function isConfirm (state) { |
||||||
|
return Boolean(Object.keys(state.confirmTransaction.txData).length) |
||||||
|
} |
||||||
|
|
||||||
|
function calcCustomGasPrice (customGasPriceInHex) { |
||||||
|
return Number(hexWEIToDecGWEI(customGasPriceInHex)) |
||||||
|
} |
||||||
|
|
||||||
|
function calcCustomGasLimit (customGasLimitInHex) { |
||||||
|
return parseInt(customGasLimitInHex, 16) |
||||||
|
} |
||||||
|
|
||||||
|
function getTxParams (state, transactionId) { |
||||||
|
const { confirmTransaction: { txData }, metamask: { send } } = state |
||||||
|
const pendingTransactions = submittedPendingTransactionsSelector(state) |
||||||
|
const pendingTransaction = pendingTransactions.find(({ id }) => id === transactionId) |
||||||
|
const { txParams: pendingTxParams } = pendingTransaction || {} |
||||||
|
return txData.txParams || pendingTxParams || { |
||||||
|
from: send.from, |
||||||
|
gas: send.gasLimit, |
||||||
|
gasPrice: send.gasPrice || getFastPriceEstimateInHexWEI(state, true), |
||||||
|
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) |
||||||
|
} |
||||||
|
|
||||||
|
function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) { |
||||||
|
const minGasPrice = gasPrices[0] |
||||||
|
const maxGasPrice = gasPrices[gasPrices.length - 1] |
||||||
|
let priceForEstimation = currentGasPrice |
||||||
|
if (currentGasPrice < minGasPrice) { |
||||||
|
priceForEstimation = minGasPrice |
||||||
|
} else if (currentGasPrice > maxGasPrice) { |
||||||
|
priceForEstimation = maxGasPrice |
||||||
|
} |
||||||
|
|
||||||
|
const { |
||||||
|
closestLowerValueIndex, |
||||||
|
closestHigherValueIndex, |
||||||
|
closestHigherValue, |
||||||
|
closestLowerValue, |
||||||
|
} = getAdjacentGasPrices({ gasPrices, priceToPosition: priceForEstimation }) |
||||||
|
|
||||||
|
const newTimeEstimate = extrapolateY({ |
||||||
|
higherY: estimatedTimes[closestHigherValueIndex], |
||||||
|
lowerY: estimatedTimes[closestLowerValueIndex], |
||||||
|
higherX: closestHigherValue, |
||||||
|
lowerX: closestLowerValue, |
||||||
|
xForExtrapolation: priceForEstimation, |
||||||
|
}) |
||||||
|
|
||||||
|
return formatTimeEstimate(newTimeEstimate, currentGasPrice > maxGasPrice, currentGasPrice < minGasPrice) |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './gas-modal-page-container.container' |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
@import './advanced-tab-content/index'; |
||||||
|
@import './basic-tab-content/index'; |
||||||
|
|
||||||
|
.gas-modal-page-container { |
||||||
|
.page-container { |
||||||
|
max-width: 391px; |
||||||
|
min-height: 585px; |
||||||
|
overflow-y: initial; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
max-width: 344px; |
||||||
|
|
||||||
|
&__content { |
||||||
|
display: flex; |
||||||
|
overflow-y: initial; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__header { |
||||||
|
padding: 0px; |
||||||
|
padding-top: 16px; |
||||||
|
|
||||||
|
&--no-padding-bottom { |
||||||
|
padding-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__footer { |
||||||
|
header { |
||||||
|
padding-top: 12px; |
||||||
|
padding-bottom: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__header-close-text { |
||||||
|
font-size: 14px; |
||||||
|
color: #4EADE7; |
||||||
|
position: absolute; |
||||||
|
top: 16px; |
||||||
|
right: 16px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
&__title { |
||||||
|
color: $black; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 16px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: flex-start; |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&__subtitle { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&__tabs { |
||||||
|
margin-top: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
&__tab { |
||||||
|
width: 100%; |
||||||
|
font-size: 14px; |
||||||
|
|
||||||
|
&:last-of-type { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&--selected { |
||||||
|
color: $curious-blue; |
||||||
|
border-bottom: 2px solid $curious-blue; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.gas-modal-content { |
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
&__basic-tab { |
||||||
|
height: 219px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
&__info-row, &__info-row--fade { |
||||||
|
width: 100%; |
||||||
|
background: $polar; |
||||||
|
padding: 15px 21px; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
color: $scorpion; |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
padding: 4px 21px; |
||||||
|
} |
||||||
|
|
||||||
|
&__send-info, &__transaction-info, &__total-info, &__fiat-total-info { |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
&__fiat-total-info { |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
&__total-info { |
||||||
|
&__label { |
||||||
|
font-size: 16px; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__value { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__transaction-info, &__send-info { |
||||||
|
&__label { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
&__value { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__info-row--fade { |
||||||
|
background: white; |
||||||
|
color: $dusty-gray; |
||||||
|
border-top: 1px solid $mischka; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,273 @@ |
|||||||
|
import React from 'react' |
||||||
|
import assert from 'assert' |
||||||
|
import shallow from '../../../../../lib/shallow-with-context' |
||||||
|
import sinon from 'sinon' |
||||||
|
import GasModalPageContainer from '../gas-modal-page-container.component.js' |
||||||
|
import timeout from '../../../../../lib/test-timeout' |
||||||
|
|
||||||
|
import PageContainer from '../../../page-container' |
||||||
|
|
||||||
|
import { Tab } from '../../../tabs' |
||||||
|
|
||||||
|
const mockBasicGasEstimates = { |
||||||
|
blockTime: 'mockBlockTime', |
||||||
|
} |
||||||
|
|
||||||
|
const propsMethodSpies = { |
||||||
|
cancelAndClose: sinon.spy(), |
||||||
|
onSubmit: sinon.spy(), |
||||||
|
fetchBasicGasAndTimeEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)), |
||||||
|
fetchGasEstimates: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
const mockGasPriceButtonGroupProps = { |
||||||
|
buttonDataLoading: false, |
||||||
|
className: 'gas-price-button-group', |
||||||
|
gasButtonInfo: [ |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.52', |
||||||
|
feeInSecondaryCurrency: '0.0048 ETH', |
||||||
|
timeEstimate: '~ 1 min 0 sec', |
||||||
|
priceInHexWei: '0xa1b2c3f', |
||||||
|
}, |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.39', |
||||||
|
feeInSecondaryCurrency: '0.004 ETH', |
||||||
|
timeEstimate: '~ 1 min 30 sec', |
||||||
|
priceInHexWei: '0xa1b2c39', |
||||||
|
}, |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.30', |
||||||
|
feeInSecondaryCurrency: '0.00354 ETH', |
||||||
|
timeEstimate: '~ 2 min 1 sec', |
||||||
|
priceInHexWei: '0xa1b2c30', |
||||||
|
}, |
||||||
|
], |
||||||
|
handleGasPriceSelection: 'mockSelectionFunction', |
||||||
|
noButtonActiveByDefault: true, |
||||||
|
showCheck: true, |
||||||
|
newTotalFiat: 'mockNewTotalFiat', |
||||||
|
newTotalEth: 'mockNewTotalEth', |
||||||
|
} |
||||||
|
const mockInfoRowProps = { |
||||||
|
originalTotalFiat: 'mockOriginalTotalFiat', |
||||||
|
originalTotalEth: 'mockOriginalTotalEth', |
||||||
|
newTotalFiat: 'mockNewTotalFiat', |
||||||
|
newTotalEth: 'mockNewTotalEth', |
||||||
|
sendAmount: 'mockSendAmount', |
||||||
|
transactionFee: 'mockTransactionFee', |
||||||
|
} |
||||||
|
|
||||||
|
const GP = GasModalPageContainer.prototype |
||||||
|
describe('GasModalPageContainer Component', function () { |
||||||
|
let wrapper |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
wrapper = shallow(<GasModalPageContainer |
||||||
|
cancelAndClose={propsMethodSpies.cancelAndClose} |
||||||
|
onSubmit={propsMethodSpies.onSubmit} |
||||||
|
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates} |
||||||
|
fetchGasEstimates={propsMethodSpies.fetchGasEstimates} |
||||||
|
updateCustomGasPrice={() => 'mockupdateCustomGasPrice'} |
||||||
|
updateCustomGasLimit={() => 'mockupdateCustomGasLimit'} |
||||||
|
customGasPrice={21} |
||||||
|
customGasLimit={54321} |
||||||
|
gasPriceButtonGroupProps={mockGasPriceButtonGroupProps} |
||||||
|
infoRowProps={mockInfoRowProps} |
||||||
|
currentTimeEstimate={'1 min 31 sec'} |
||||||
|
customGasPriceInHex={'mockCustomGasPriceInHex'} |
||||||
|
customGasLimitInHex={'mockCustomGasLimitInHex'} |
||||||
|
insufficientBalance={false} |
||||||
|
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }) |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
propsMethodSpies.cancelAndClose.resetHistory() |
||||||
|
}) |
||||||
|
|
||||||
|
describe('componentDidMount', () => { |
||||||
|
it('should call props.fetchBasicGasAndTimeEstimates', () => { |
||||||
|
propsMethodSpies.fetchBasicGasAndTimeEstimates.resetHistory() |
||||||
|
assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 0) |
||||||
|
wrapper.instance().componentDidMount() |
||||||
|
assert.equal(propsMethodSpies.fetchBasicGasAndTimeEstimates.callCount, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call props.fetchGasEstimates with the block time returned by fetchBasicGasAndTimeEstimates', async () => { |
||||||
|
propsMethodSpies.fetchGasEstimates.resetHistory() |
||||||
|
assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 0) |
||||||
|
wrapper.instance().componentDidMount() |
||||||
|
await timeout(250) |
||||||
|
assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1) |
||||||
|
assert.equal(propsMethodSpies.fetchGasEstimates.getCall(0).args[0], 'mockBlockTime') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('render', () => { |
||||||
|
it('should render a PageContainer compenent', () => { |
||||||
|
assert.equal(wrapper.find(PageContainer).length, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should pass correct props to PageContainer', () => { |
||||||
|
const { |
||||||
|
title, |
||||||
|
subtitle, |
||||||
|
disabled, |
||||||
|
} = wrapper.find(PageContainer).props() |
||||||
|
assert.equal(title, 'customGas') |
||||||
|
assert.equal(subtitle, 'customGasSubTitle') |
||||||
|
assert.equal(disabled, false) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should pass the correct onCancel and onClose methods to PageContainer', () => { |
||||||
|
const { |
||||||
|
onCancel, |
||||||
|
onClose, |
||||||
|
} = wrapper.find(PageContainer).props() |
||||||
|
assert.equal(propsMethodSpies.cancelAndClose.callCount, 0) |
||||||
|
onCancel() |
||||||
|
assert.equal(propsMethodSpies.cancelAndClose.callCount, 1) |
||||||
|
onClose() |
||||||
|
assert.equal(propsMethodSpies.cancelAndClose.callCount, 2) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should pass the correct renderTabs property to PageContainer', () => { |
||||||
|
sinon.stub(GP, 'renderTabs').returns('mockTabs') |
||||||
|
const renderTabsWrapperTester = shallow(<GasModalPageContainer |
||||||
|
fetchBasicGasAndTimeEstimates={propsMethodSpies.fetchBasicGasAndTimeEstimates} |
||||||
|
fetchGasEstimates={propsMethodSpies.fetchGasEstimates} |
||||||
|
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }) |
||||||
|
const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props() |
||||||
|
assert.equal(tabsComponent, 'mockTabs') |
||||||
|
GasModalPageContainer.prototype.renderTabs.restore() |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
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(mockInfoRowProps, { |
||||||
|
gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, |
||||||
|
otherProps: 'mockAdvancedTabProps', |
||||||
|
}) |
||||||
|
const renderedTabs = shallow(renderTabsResult) |
||||||
|
assert.equal(renderedTabs.props().className, 'tabs') |
||||||
|
|
||||||
|
const tabs = renderedTabs.find(Tab) |
||||||
|
assert.equal(tabs.length, 2) |
||||||
|
|
||||||
|
assert.equal(tabs.at(0).props().name, 'basic') |
||||||
|
assert.equal(tabs.at(1).props().name, 'advanced') |
||||||
|
|
||||||
|
assert.equal(tabs.at(0).childAt(0).props().className, 'gas-modal-content') |
||||||
|
assert.equal(tabs.at(1).childAt(0).props().className, 'gas-modal-content') |
||||||
|
}) |
||||||
|
|
||||||
|
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(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' }) |
||||||
|
|
||||||
|
assert.equal(GP.renderBasicTabContent.callCount, 1) |
||||||
|
assert.equal(GP.renderAdvancedTabContent.callCount, 1) |
||||||
|
|
||||||
|
assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps) |
||||||
|
assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { otherProps: 'mockAdvancedTabProps' }) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call renderInfoRows with the expected props', () => { |
||||||
|
assert.equal(GP.renderInfoRows.callCount, 0) |
||||||
|
|
||||||
|
wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' }) |
||||||
|
|
||||||
|
assert.equal(GP.renderInfoRows.callCount, 2) |
||||||
|
|
||||||
|
assert.deepEqual(GP.renderInfoRows.getCall(0).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee']) |
||||||
|
assert.deepEqual(GP.renderInfoRows.getCall(1).args, ['mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee']) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should not render the basic tab if hideBasic is true', () => { |
||||||
|
const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, { |
||||||
|
gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, |
||||||
|
otherProps: 'mockAdvancedTabProps', |
||||||
|
hideBasic: true, |
||||||
|
}) |
||||||
|
|
||||||
|
const renderedTabs = shallow(renderTabsResult) |
||||||
|
const tabs = renderedTabs.find(Tab) |
||||||
|
assert.equal(tabs.length, 1) |
||||||
|
assert.equal(tabs.at(0).props().name, 'advanced') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderBasicTabContent', () => { |
||||||
|
it('should render', () => { |
||||||
|
const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent(mockGasPriceButtonGroupProps) |
||||||
|
|
||||||
|
assert.deepEqual( |
||||||
|
renderBasicTabContentResult.props.gasPriceButtonGroupProps, |
||||||
|
mockGasPriceButtonGroupProps |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderAdvancedTabContent', () => { |
||||||
|
it('should render with the correct props', () => { |
||||||
|
const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent({ |
||||||
|
convertThenUpdateCustomGasPrice: () => 'mockConvertThenUpdateCustomGasPrice', |
||||||
|
convertThenUpdateCustomGasLimit: () => 'mockConvertThenUpdateCustomGasLimit', |
||||||
|
customGasPrice: 123, |
||||||
|
customGasLimit: 456, |
||||||
|
newTotalFiat: '$0.30', |
||||||
|
currentTimeEstimate: '1 min 31 sec', |
||||||
|
gasEstimatesLoading: 'mockGasEstimatesLoading', |
||||||
|
}) |
||||||
|
const advancedTabContentProps = renderAdvancedTabContentResult.props |
||||||
|
assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice') |
||||||
|
assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockConvertThenUpdateCustomGasLimit') |
||||||
|
assert.equal(advancedTabContentProps.customGasPrice, 123) |
||||||
|
assert.equal(advancedTabContentProps.customGasLimit, 456) |
||||||
|
assert.equal(advancedTabContentProps.timeRemaining, '1 min 31 sec') |
||||||
|
assert.equal(advancedTabContentProps.totalFee, '$0.30') |
||||||
|
assert.equal(advancedTabContentProps.gasEstimatesLoading, 'mockGasEstimatesLoading') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderInfoRows', () => { |
||||||
|
it('should render the info rows with the passed data', () => { |
||||||
|
const baseClassName = 'gas-modal-content__info-row' |
||||||
|
const renderedInfoRowsContainer = shallow(wrapper.instance().renderInfoRows( |
||||||
|
'mockNewTotalFiat', |
||||||
|
' mockNewTotalEth', |
||||||
|
' mockSendAmount', |
||||||
|
' mockTransactionFee' |
||||||
|
)) |
||||||
|
|
||||||
|
assert(renderedInfoRowsContainer.childAt(0).hasClass(baseClassName)) |
||||||
|
|
||||||
|
const renderedInfoRows = renderedInfoRowsContainer.childAt(0).children() |
||||||
|
assert.equal(renderedInfoRows.length, 4) |
||||||
|
assert(renderedInfoRows.at(0).hasClass(`${baseClassName}__send-info`)) |
||||||
|
assert(renderedInfoRows.at(1).hasClass(`${baseClassName}__transaction-info`)) |
||||||
|
assert(renderedInfoRows.at(2).hasClass(`${baseClassName}__total-info`)) |
||||||
|
assert(renderedInfoRows.at(3).hasClass(`${baseClassName}__fiat-total-info`)) |
||||||
|
|
||||||
|
assert.equal(renderedInfoRows.at(0).text(), 'sendAmount mockSendAmount') |
||||||
|
assert.equal(renderedInfoRows.at(1).text(), 'transactionFee mockTransactionFee') |
||||||
|
assert.equal(renderedInfoRows.at(2).text(), 'newTotal mockNewTotalEth') |
||||||
|
assert.equal(renderedInfoRows.at(3).text(), 'mockNewTotalFiat') |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
@ -0,0 +1,360 @@ |
|||||||
|
import assert from 'assert' |
||||||
|
import proxyquire from 'proxyquire' |
||||||
|
import sinon from 'sinon' |
||||||
|
|
||||||
|
let mapStateToProps |
||||||
|
let mapDispatchToProps |
||||||
|
let mergeProps |
||||||
|
|
||||||
|
const actionSpies = { |
||||||
|
hideModal: sinon.spy(), |
||||||
|
setGasLimit: sinon.spy(), |
||||||
|
setGasPrice: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
const gasActionSpies = { |
||||||
|
setCustomGasPrice: sinon.spy(), |
||||||
|
setCustomGasLimit: sinon.spy(), |
||||||
|
resetCustomData: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
const confirmTransactionActionSpies = { |
||||||
|
updateGasAndCalculate: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
const sendActionSpies = { |
||||||
|
hideGasButtonGroup: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
proxyquire('../gas-modal-page-container.container.js', { |
||||||
|
'react-redux': { |
||||||
|
connect: (ms, md, mp) => { |
||||||
|
mapStateToProps = ms |
||||||
|
mapDispatchToProps = md |
||||||
|
mergeProps = mp |
||||||
|
return () => ({}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
'../../../selectors/custom-gas': { |
||||||
|
getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${Object.keys(s).length}`, |
||||||
|
getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${Object.keys(s).length}`, |
||||||
|
getDefaultActiveButtonIndex: (a, b) => a + b, |
||||||
|
}, |
||||||
|
'../../../actions': actionSpies, |
||||||
|
'../../../ducks/gas.duck': gasActionSpies, |
||||||
|
'../../../ducks/confirm-transaction.duck': confirmTransactionActionSpies, |
||||||
|
'../../../ducks/send.duck': sendActionSpies, |
||||||
|
'../../../selectors.js': { |
||||||
|
getCurrentEthBalance: (state) => state.metamask.balance || '0x0', |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
describe('gas-modal-page-container container', () => { |
||||||
|
|
||||||
|
describe('mapStateToProps()', () => { |
||||||
|
it('should map the correct properties to props', () => { |
||||||
|
const baseMockState = { |
||||||
|
appState: { |
||||||
|
modal: { |
||||||
|
modalState: { |
||||||
|
props: { |
||||||
|
hideBasic: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
metamask: { |
||||||
|
send: { |
||||||
|
gasLimit: '16', |
||||||
|
gasPrice: '32', |
||||||
|
amount: '64', |
||||||
|
}, |
||||||
|
currentCurrency: 'abc', |
||||||
|
conversionRate: 50, |
||||||
|
}, |
||||||
|
gas: { |
||||||
|
basicEstimates: { |
||||||
|
blockTime: 12, |
||||||
|
}, |
||||||
|
customData: { |
||||||
|
limit: 'aaaaaaaa', |
||||||
|
price: 'ffffffff', |
||||||
|
}, |
||||||
|
gasEstimatesLoading: false, |
||||||
|
priceAndTimeEstimates: [ |
||||||
|
{ gasprice: 3, expectedTime: 31 }, |
||||||
|
{ gasprice: 4, expectedTime: 62 }, |
||||||
|
{ gasprice: 5, expectedTime: 93 }, |
||||||
|
{ gasprice: 6, expectedTime: 124 }, |
||||||
|
], |
||||||
|
}, |
||||||
|
confirmTransaction: { |
||||||
|
txData: { |
||||||
|
txParams: { |
||||||
|
gas: '0x1600000', |
||||||
|
gasPrice: '0x3200000', |
||||||
|
value: '0x640000000000000', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
const baseExpectedResult = { |
||||||
|
isConfirm: true, |
||||||
|
customGasPrice: 4.294967295, |
||||||
|
customGasLimit: 2863311530, |
||||||
|
currentTimeEstimate: '~1 min 11 sec', |
||||||
|
newTotalFiat: '637.41', |
||||||
|
blockTime: 12, |
||||||
|
customModalGasLimitInHex: 'aaaaaaaa', |
||||||
|
customModalGasPriceInHex: 'ffffffff', |
||||||
|
gasChartProps: { |
||||||
|
'currentPrice': 4.294967295, |
||||||
|
estimatedTimes: ['31', '62', '93', '124'], |
||||||
|
estimatedTimesMax: '31', |
||||||
|
gasPrices: [3, 4, 5, 6], |
||||||
|
gasPricesMax: 6, |
||||||
|
}, |
||||||
|
gasPriceButtonGroupProps: { |
||||||
|
buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4', |
||||||
|
defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff', |
||||||
|
gasButtonInfo: 'mockRenderableBasicEstimateData:4', |
||||||
|
}, |
||||||
|
gasEstimatesLoading: false, |
||||||
|
hideBasic: true, |
||||||
|
infoRowProps: { |
||||||
|
originalTotalFiat: '637.41', |
||||||
|
originalTotalEth: '12.748189 ETH', |
||||||
|
newTotalFiat: '637.41', |
||||||
|
newTotalEth: '12.748189 ETH', |
||||||
|
sendAmount: '0.45036 ETH', |
||||||
|
transactionFee: '12.297829 ETH', |
||||||
|
}, |
||||||
|
insufficientBalance: true, |
||||||
|
isSpeedUp: false, |
||||||
|
txId: 34, |
||||||
|
} |
||||||
|
const baseMockOwnProps = { transaction: { id: 34 } } |
||||||
|
const tests = [ |
||||||
|
{ mockState: baseMockState, expectedResult: baseExpectedResult, mockOwnProps: baseMockOwnProps }, |
||||||
|
{ |
||||||
|
mockState: Object.assign({}, baseMockState, { |
||||||
|
metamask: { ...baseMockState.metamask, balance: '0xfffffffffffffffffffff' }, |
||||||
|
}), |
||||||
|
expectedResult: Object.assign({}, baseExpectedResult, { insufficientBalance: false }), |
||||||
|
mockOwnProps: baseMockOwnProps, |
||||||
|
}, |
||||||
|
{ |
||||||
|
mockState: baseMockState, |
||||||
|
mockOwnProps: Object.assign({}, baseMockOwnProps, { |
||||||
|
transaction: { id: 34, status: 'submitted' }, |
||||||
|
}), |
||||||
|
expectedResult: Object.assign({}, baseExpectedResult, { isSpeedUp: true }), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
let result |
||||||
|
tests.forEach(({ mockState, mockOwnProps, expectedResult}) => { |
||||||
|
result = mapStateToProps(mockState, mockOwnProps) |
||||||
|
assert.deepEqual(result, expectedResult) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
describe('mapDispatchToProps()', () => { |
||||||
|
let dispatchSpy |
||||||
|
let mapDispatchToPropsObject |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
dispatchSpy = sinon.spy() |
||||||
|
mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
actionSpies.hideModal.resetHistory() |
||||||
|
gasActionSpies.setCustomGasPrice.resetHistory() |
||||||
|
gasActionSpies.setCustomGasLimit.resetHistory() |
||||||
|
}) |
||||||
|
|
||||||
|
describe('hideGasButtonGroup()', () => { |
||||||
|
it('should dispatch a hideGasButtonGroup action', () => { |
||||||
|
mapDispatchToPropsObject.hideGasButtonGroup() |
||||||
|
assert(dispatchSpy.calledOnce) |
||||||
|
assert(sendActionSpies.hideGasButtonGroup.calledOnce) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('cancelAndClose()', () => { |
||||||
|
it('should dispatch a hideModal action', () => { |
||||||
|
mapDispatchToPropsObject.cancelAndClose() |
||||||
|
assert(dispatchSpy.calledTwice) |
||||||
|
assert(actionSpies.hideModal.calledOnce) |
||||||
|
assert(gasActionSpies.resetCustomData.calledOnce) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('updateCustomGasPrice()', () => { |
||||||
|
it('should dispatch a setCustomGasPrice action with the arg passed to updateCustomGasPrice hex prefixed', () => { |
||||||
|
mapDispatchToPropsObject.updateCustomGasPrice('ffff') |
||||||
|
assert(dispatchSpy.calledOnce) |
||||||
|
assert(gasActionSpies.setCustomGasPrice.calledOnce) |
||||||
|
assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0xffff') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('convertThenUpdateCustomGasPrice()', () => { |
||||||
|
it('should dispatch a setCustomGasPrice action with the arg passed to convertThenUpdateCustomGasPrice converted to WEI', () => { |
||||||
|
mapDispatchToPropsObject.convertThenUpdateCustomGasPrice('0xffff') |
||||||
|
assert(dispatchSpy.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.equal(dispatchSpy.callCount, 3) |
||||||
|
assert(confirmTransactionActionSpies.updateGasAndCalculate.calledOnce) |
||||||
|
assert.deepEqual(confirmTransactionActionSpies.updateGasAndCalculate.getCall(0).args[0], { gasLimit: 'ffff', gasPrice: 'aaaa' }) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
describe('mergeProps', () => { |
||||||
|
let stateProps |
||||||
|
let dispatchProps |
||||||
|
let ownProps |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
stateProps = { |
||||||
|
gasPriceButtonGroupProps: { |
||||||
|
someGasPriceButtonGroupProp: 'foo', |
||||||
|
anotherGasPriceButtonGroupProp: 'bar', |
||||||
|
}, |
||||||
|
isConfirm: true, |
||||||
|
someOtherStateProp: 'baz', |
||||||
|
} |
||||||
|
dispatchProps = { |
||||||
|
updateCustomGasPrice: sinon.spy(), |
||||||
|
hideGasButtonGroup: sinon.spy(), |
||||||
|
setGasData: sinon.spy(), |
||||||
|
updateConfirmTxGasAndCalculate: sinon.spy(), |
||||||
|
someOtherDispatchProp: sinon.spy(), |
||||||
|
createSpeedUpTransaction: sinon.spy(), |
||||||
|
hideSidebar: sinon.spy(), |
||||||
|
hideModal: sinon.spy(), |
||||||
|
cancelAndClose: sinon.spy(), |
||||||
|
} |
||||||
|
ownProps = { someOwnProp: 123 } |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
dispatchProps.updateCustomGasPrice.resetHistory() |
||||||
|
dispatchProps.hideGasButtonGroup.resetHistory() |
||||||
|
dispatchProps.setGasData.resetHistory() |
||||||
|
dispatchProps.updateConfirmTxGasAndCalculate.resetHistory() |
||||||
|
dispatchProps.someOtherDispatchProp.resetHistory() |
||||||
|
dispatchProps.createSpeedUpTransaction.resetHistory() |
||||||
|
dispatchProps.hideSidebar.resetHistory() |
||||||
|
dispatchProps.hideModal.resetHistory() |
||||||
|
}) |
||||||
|
it('should return the expected props when isConfirm is true', () => { |
||||||
|
const result = mergeProps(stateProps, dispatchProps, ownProps) |
||||||
|
|
||||||
|
assert.equal(result.isConfirm, true) |
||||||
|
assert.equal(result.someOtherStateProp, 'baz') |
||||||
|
assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo') |
||||||
|
assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar') |
||||||
|
assert.equal(result.someOwnProp, 123) |
||||||
|
|
||||||
|
assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0) |
||||||
|
assert.equal(dispatchProps.setGasData.callCount, 0) |
||||||
|
assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0) |
||||||
|
assert.equal(dispatchProps.hideModal.callCount, 0) |
||||||
|
|
||||||
|
result.onSubmit() |
||||||
|
|
||||||
|
assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 1) |
||||||
|
assert.equal(dispatchProps.setGasData.callCount, 0) |
||||||
|
assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0) |
||||||
|
assert.equal(dispatchProps.hideModal.callCount, 1) |
||||||
|
|
||||||
|
assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0) |
||||||
|
result.gasPriceButtonGroupProps.handleGasPriceSelection() |
||||||
|
assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1) |
||||||
|
|
||||||
|
assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0) |
||||||
|
result.someOtherDispatchProp() |
||||||
|
assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should return the expected props when isConfirm is false', () => { |
||||||
|
const result = mergeProps(Object.assign({}, stateProps, { isConfirm: false }), dispatchProps, ownProps) |
||||||
|
|
||||||
|
assert.equal(result.isConfirm, false) |
||||||
|
assert.equal(result.someOtherStateProp, 'baz') |
||||||
|
assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo') |
||||||
|
assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar') |
||||||
|
assert.equal(result.someOwnProp, 123) |
||||||
|
|
||||||
|
assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0) |
||||||
|
assert.equal(dispatchProps.setGasData.callCount, 0) |
||||||
|
assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0) |
||||||
|
assert.equal(dispatchProps.cancelAndClose.callCount, 0) |
||||||
|
|
||||||
|
result.onSubmit('mockNewLimit', 'mockNewPrice') |
||||||
|
|
||||||
|
assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0) |
||||||
|
assert.equal(dispatchProps.setGasData.callCount, 1) |
||||||
|
assert.deepEqual(dispatchProps.setGasData.getCall(0).args, ['mockNewLimit', 'mockNewPrice']) |
||||||
|
assert.equal(dispatchProps.hideGasButtonGroup.callCount, 1) |
||||||
|
assert.equal(dispatchProps.cancelAndClose.callCount, 1) |
||||||
|
|
||||||
|
assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0) |
||||||
|
result.gasPriceButtonGroupProps.handleGasPriceSelection() |
||||||
|
assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1) |
||||||
|
|
||||||
|
assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0) |
||||||
|
result.someOtherDispatchProp() |
||||||
|
assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should dispatch the expected actions from obSubmit when isConfirm is false and isSpeedUp is true', () => { |
||||||
|
const result = mergeProps(Object.assign({}, stateProps, { isSpeedUp: true, isConfirm: false }), dispatchProps, ownProps) |
||||||
|
|
||||||
|
result.onSubmit() |
||||||
|
|
||||||
|
assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0) |
||||||
|
assert.equal(dispatchProps.setGasData.callCount, 0) |
||||||
|
assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0) |
||||||
|
assert.equal(dispatchProps.cancelAndClose.callCount, 1) |
||||||
|
|
||||||
|
assert.equal(dispatchProps.createSpeedUpTransaction.callCount, 1) |
||||||
|
assert.equal(dispatchProps.hideSidebar.callCount, 1) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import ButtonGroup from '../../button-group' |
||||||
|
import Button from '../../button' |
||||||
|
|
||||||
|
const GAS_OBJECT_PROPTYPES_SHAPE = { |
||||||
|
label: PropTypes.string, |
||||||
|
feeInPrimaryCurrency: PropTypes.string, |
||||||
|
feeInSecondaryCurrency: PropTypes.string, |
||||||
|
timeEstimate: PropTypes.string, |
||||||
|
priceInHexWei: PropTypes.string, |
||||||
|
} |
||||||
|
|
||||||
|
export default class GasPriceButtonGroup extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
buttonDataLoading: PropTypes.bool, |
||||||
|
className: PropTypes.string, |
||||||
|
defaultActiveButtonIndex: PropTypes.number, |
||||||
|
gasButtonInfo: PropTypes.arrayOf(PropTypes.shape(GAS_OBJECT_PROPTYPES_SHAPE)), |
||||||
|
handleGasPriceSelection: PropTypes.func, |
||||||
|
newActiveButtonIndex: PropTypes.number, |
||||||
|
noButtonActiveByDefault: PropTypes.bool, |
||||||
|
showCheck: PropTypes.bool, |
||||||
|
} |
||||||
|
|
||||||
|
renderButtonContent ({ |
||||||
|
labelKey, |
||||||
|
feeInPrimaryCurrency, |
||||||
|
feeInSecondaryCurrency, |
||||||
|
timeEstimate, |
||||||
|
}, { |
||||||
|
className, |
||||||
|
showCheck, |
||||||
|
}) { |
||||||
|
return (<div> |
||||||
|
{ labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> } |
||||||
|
{ timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> } |
||||||
|
{ feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> } |
||||||
|
{ feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> } |
||||||
|
{ showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> } |
||||||
|
</div>) |
||||||
|
} |
||||||
|
|
||||||
|
renderButton ({ |
||||||
|
priceInHexWei, |
||||||
|
...renderableGasInfo |
||||||
|
}, { |
||||||
|
buttonDataLoading, |
||||||
|
handleGasPriceSelection, |
||||||
|
...buttonContentPropsAndFlags |
||||||
|
}, index) { |
||||||
|
return ( |
||||||
|
<Button |
||||||
|
onClick={() => handleGasPriceSelection(priceInHexWei)} |
||||||
|
key={`gas-price-button-${index}`} |
||||||
|
> |
||||||
|
{this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)} |
||||||
|
</Button> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
gasButtonInfo, |
||||||
|
defaultActiveButtonIndex = 1, |
||||||
|
newActiveButtonIndex, |
||||||
|
noButtonActiveByDefault = false, |
||||||
|
buttonDataLoading, |
||||||
|
...buttonPropsAndFlags |
||||||
|
} = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
!buttonDataLoading |
||||||
|
? <ButtonGroup |
||||||
|
className={buttonPropsAndFlags.className} |
||||||
|
defaultActiveButtonIndex={defaultActiveButtonIndex} |
||||||
|
newActiveButtonIndex={newActiveButtonIndex} |
||||||
|
noButtonActiveByDefault={noButtonActiveByDefault} |
||||||
|
> |
||||||
|
{ gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) } |
||||||
|
</ButtonGroup> |
||||||
|
: <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './gas-price-button-group.component' |
||||||
@ -0,0 +1,235 @@ |
|||||||
|
.gas-price-button-group { |
||||||
|
margin-top: 22px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-evenly; |
||||||
|
width: 100%; |
||||||
|
padding-left: 20px; |
||||||
|
padding-right: 20px; |
||||||
|
|
||||||
|
&__primary-currency { |
||||||
|
font-size: 18px; |
||||||
|
height: 20.5px; |
||||||
|
margin-bottom: 7.5px; |
||||||
|
} |
||||||
|
|
||||||
|
&__time-estimate { |
||||||
|
margin-top: 5.5px; |
||||||
|
color: $silver-chalice; |
||||||
|
height: 15.4px; |
||||||
|
} |
||||||
|
|
||||||
|
&__loading-container { |
||||||
|
height: 130px; |
||||||
|
} |
||||||
|
|
||||||
|
.button-group__button, .button-group__button--active { |
||||||
|
height: 130px; |
||||||
|
max-width: 108px; |
||||||
|
font-size: 12px; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
padding-top: 17px; |
||||||
|
border-radius: 4px; |
||||||
|
border: 2px solid $spindle; |
||||||
|
background: $white; |
||||||
|
color: $scorpion; |
||||||
|
|
||||||
|
div { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
&:last-child { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button-group__button--active { |
||||||
|
border: 2px solid $curious-blue; |
||||||
|
color: $scorpion; |
||||||
|
|
||||||
|
i { |
||||||
|
&:last-child { |
||||||
|
display: flex; |
||||||
|
color: $curious-blue; |
||||||
|
margin-top: 8px |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.gas-price-button-group--small { |
||||||
|
display: flex; |
||||||
|
justify-content: stretch; |
||||||
|
max-width: 260px; |
||||||
|
|
||||||
|
&__button-fiat-price { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
&__button-label { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
&__label { |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
&__primary-currency { |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__secondary-currency { |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__loading-container { |
||||||
|
height: 78px; |
||||||
|
} |
||||||
|
|
||||||
|
.button-group__button, .button-group__button--active { |
||||||
|
height: 78px; |
||||||
|
background: white; |
||||||
|
color: $scorpion; |
||||||
|
padding-top: 9px; |
||||||
|
padding-left: 8.5px; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
padding-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
&:last-child { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button-group__button--active { |
||||||
|
color: $white; |
||||||
|
background: $dodger-blue; |
||||||
|
|
||||||
|
i { |
||||||
|
&:last-child { |
||||||
|
display: flex; |
||||||
|
color: $curious-blue; |
||||||
|
margin-top: 10px |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.gas-price-button-group--alt { |
||||||
|
display: flex; |
||||||
|
justify-content: stretch; |
||||||
|
width: 95%; |
||||||
|
|
||||||
|
&__button-fiat-price { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
&__button-label { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
&__label { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 10px; |
||||||
|
text-transform: capitalize; |
||||||
|
} |
||||||
|
|
||||||
|
&__primary-currency { |
||||||
|
font-size: 11px; |
||||||
|
margin-top: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
&__secondary-currency { |
||||||
|
font-size: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
&__loading-container { |
||||||
|
height: 78px; |
||||||
|
} |
||||||
|
|
||||||
|
&__time-estimate { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 500; |
||||||
|
margin-top: 4px; |
||||||
|
color: $black; |
||||||
|
} |
||||||
|
|
||||||
|
.button-group__button, .button-group__button--active { |
||||||
|
height: 78px; |
||||||
|
background: white; |
||||||
|
color: #2A4055; |
||||||
|
width: 108px; |
||||||
|
height: 97px; |
||||||
|
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.151579); |
||||||
|
border-radius: 6px; |
||||||
|
border: none; |
||||||
|
|
||||||
|
div { |
||||||
|
display: flex; |
||||||
|
flex-flow: column;; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: flex-start; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.button-check-wrapper { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
margin-right: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-left: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button-group__button--active { |
||||||
|
background: #F7FCFF; |
||||||
|
border: 2px solid #2C8BDC; |
||||||
|
|
||||||
|
.button-check-wrapper { |
||||||
|
height: 16px; |
||||||
|
width: 16px; |
||||||
|
border-radius: 8px; |
||||||
|
position: absolute; |
||||||
|
top: -11px; |
||||||
|
right: -10px; |
||||||
|
background: #D5ECFA; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
display: flex; |
||||||
|
color: $curious-blue; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,233 @@ |
|||||||
|
import React from 'react' |
||||||
|
import assert from 'assert' |
||||||
|
import shallow from '../../../../../lib/shallow-with-context' |
||||||
|
import sinon from 'sinon' |
||||||
|
import GasPriceButtonGroup from '../gas-price-button-group.component' |
||||||
|
|
||||||
|
import ButtonGroup from '../../../button-group/' |
||||||
|
|
||||||
|
const mockGasPriceButtonGroupProps = { |
||||||
|
buttonDataLoading: false, |
||||||
|
className: 'gas-price-button-group', |
||||||
|
gasButtonInfo: [ |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.52', |
||||||
|
feeInSecondaryCurrency: '0.0048 ETH', |
||||||
|
timeEstimate: '~ 1 min 0 sec', |
||||||
|
priceInHexWei: '0xa1b2c3f', |
||||||
|
}, |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.39', |
||||||
|
feeInSecondaryCurrency: '0.004 ETH', |
||||||
|
timeEstimate: '~ 1 min 30 sec', |
||||||
|
priceInHexWei: '0xa1b2c39', |
||||||
|
}, |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency: '$0.30', |
||||||
|
feeInSecondaryCurrency: '0.00354 ETH', |
||||||
|
timeEstimate: '~ 2 min 1 sec', |
||||||
|
priceInHexWei: '0xa1b2c30', |
||||||
|
}, |
||||||
|
], |
||||||
|
handleGasPriceSelection: sinon.spy(), |
||||||
|
noButtonActiveByDefault: true, |
||||||
|
defaultActiveButtonIndex: 2, |
||||||
|
showCheck: true, |
||||||
|
} |
||||||
|
|
||||||
|
const mockButtonPropsAndFlags = Object.assign({}, { |
||||||
|
className: mockGasPriceButtonGroupProps.className, |
||||||
|
handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection, |
||||||
|
showCheck: mockGasPriceButtonGroupProps.showCheck, |
||||||
|
}) |
||||||
|
|
||||||
|
sinon.spy(GasPriceButtonGroup.prototype, 'renderButton') |
||||||
|
sinon.spy(GasPriceButtonGroup.prototype, 'renderButtonContent') |
||||||
|
|
||||||
|
describe('GasPriceButtonGroup Component', function () { |
||||||
|
let wrapper |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
wrapper = shallow(<GasPriceButtonGroup |
||||||
|
{...mockGasPriceButtonGroupProps} |
||||||
|
/>) |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
GasPriceButtonGroup.prototype.renderButton.resetHistory() |
||||||
|
GasPriceButtonGroup.prototype.renderButtonContent.resetHistory() |
||||||
|
mockGasPriceButtonGroupProps.handleGasPriceSelection.resetHistory() |
||||||
|
}) |
||||||
|
|
||||||
|
describe('render', () => { |
||||||
|
it('should render a ButtonGroup', () => { |
||||||
|
assert(wrapper.is(ButtonGroup)) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the correct props on the ButtonGroup', () => { |
||||||
|
const { |
||||||
|
className, |
||||||
|
defaultActiveButtonIndex, |
||||||
|
noButtonActiveByDefault, |
||||||
|
} = wrapper.props() |
||||||
|
assert.equal(className, 'gas-price-button-group') |
||||||
|
assert.equal(defaultActiveButtonIndex, 2) |
||||||
|
assert.equal(noButtonActiveByDefault, true) |
||||||
|
}) |
||||||
|
|
||||||
|
function renderButtonArgsTest (i, mockButtonPropsAndFlags) { |
||||||
|
assert.deepEqual( |
||||||
|
GasPriceButtonGroup.prototype.renderButton.getCall(i).args, |
||||||
|
[ |
||||||
|
Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[i]), |
||||||
|
mockButtonPropsAndFlags, |
||||||
|
i, |
||||||
|
] |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
it('should call this.renderButton 3 times, with the correct args', () => { |
||||||
|
assert.equal(GasPriceButtonGroup.prototype.renderButton.callCount, 3) |
||||||
|
renderButtonArgsTest(0, mockButtonPropsAndFlags) |
||||||
|
renderButtonArgsTest(1, mockButtonPropsAndFlags) |
||||||
|
renderButtonArgsTest(2, mockButtonPropsAndFlags) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should show loading if buttonDataLoading', () => { |
||||||
|
wrapper.setProps({ buttonDataLoading: true }) |
||||||
|
assert(wrapper.is('div')) |
||||||
|
assert(wrapper.hasClass('gas-price-button-group__loading-container')) |
||||||
|
assert.equal(wrapper.text(), 'loading') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderButton', () => { |
||||||
|
let wrappedRenderButtonResult |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
GasPriceButtonGroup.prototype.renderButtonContent.resetHistory() |
||||||
|
const renderButtonResult = GasPriceButtonGroup.prototype.renderButton( |
||||||
|
Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[0]), |
||||||
|
mockButtonPropsAndFlags |
||||||
|
) |
||||||
|
wrappedRenderButtonResult = shallow(renderButtonResult) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a button', () => { |
||||||
|
assert.equal(wrappedRenderButtonResult.type(), 'button') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call the correct method when clicked', () => { |
||||||
|
assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 0) |
||||||
|
wrappedRenderButtonResult.props().onClick() |
||||||
|
assert.equal(mockGasPriceButtonGroupProps.handleGasPriceSelection.callCount, 1) |
||||||
|
assert.deepEqual( |
||||||
|
mockGasPriceButtonGroupProps.handleGasPriceSelection.getCall(0).args, |
||||||
|
[mockGasPriceButtonGroupProps.gasButtonInfo[0].priceInHexWei] |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call this.renderButtonContent with the correct args', () => { |
||||||
|
assert.equal(GasPriceButtonGroup.prototype.renderButtonContent.callCount, 1) |
||||||
|
const { |
||||||
|
feeInPrimaryCurrency, |
||||||
|
feeInSecondaryCurrency, |
||||||
|
timeEstimate, |
||||||
|
} = mockGasPriceButtonGroupProps.gasButtonInfo[0] |
||||||
|
const { |
||||||
|
showCheck, |
||||||
|
className, |
||||||
|
} = mockGasPriceButtonGroupProps |
||||||
|
assert.deepEqual( |
||||||
|
GasPriceButtonGroup.prototype.renderButtonContent.getCall(0).args, |
||||||
|
[ |
||||||
|
{ |
||||||
|
feeInPrimaryCurrency, |
||||||
|
feeInSecondaryCurrency, |
||||||
|
timeEstimate, |
||||||
|
}, |
||||||
|
{ |
||||||
|
showCheck, |
||||||
|
className, |
||||||
|
}, |
||||||
|
] |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderButtonContent', () => { |
||||||
|
it('should render a label if passed a labelKey', () => { |
||||||
|
const renderButtonContentResult = wrapper.instance().renderButtonContent({ |
||||||
|
labelKey: 'mockLabelKey', |
||||||
|
}, { |
||||||
|
className: 'someClass', |
||||||
|
}) |
||||||
|
const wrappedRenderButtonContentResult = shallow(renderButtonContentResult) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.find('.someClass__label').text(), 'mockLabelKey') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a feeInPrimaryCurrency if passed a feeInPrimaryCurrency', () => { |
||||||
|
const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({ |
||||||
|
feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency', |
||||||
|
}, { |
||||||
|
className: 'someClass', |
||||||
|
}) |
||||||
|
const wrappedRenderButtonContentResult = shallow(renderButtonContentResult) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.find('.someClass__primary-currency').text(), 'mockFeeInPrimaryCurrency') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a feeInSecondaryCurrency if passed a feeInSecondaryCurrency', () => { |
||||||
|
const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({ |
||||||
|
feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency', |
||||||
|
}, { |
||||||
|
className: 'someClass', |
||||||
|
}) |
||||||
|
const wrappedRenderButtonContentResult = shallow(renderButtonContentResult) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.find('.someClass__secondary-currency').text(), 'mockFeeInSecondaryCurrency') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a timeEstimate if passed a timeEstimate', () => { |
||||||
|
const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({ |
||||||
|
timeEstimate: 'mockTimeEstimate', |
||||||
|
}, { |
||||||
|
className: 'someClass', |
||||||
|
}) |
||||||
|
const wrappedRenderButtonContentResult = shallow(renderButtonContentResult) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.find('.someClass__time-estimate').text(), 'mockTimeEstimate') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render a check if showCheck is true', () => { |
||||||
|
const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, { |
||||||
|
className: 'someClass', |
||||||
|
showCheck: true, |
||||||
|
}) |
||||||
|
const wrappedRenderButtonContentResult = shallow(renderButtonContentResult) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.find('.fa-check').length, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render all elements if all args passed', () => { |
||||||
|
const renderButtonContentResult = wrapper.instance().renderButtonContent({ |
||||||
|
labelKey: 'mockLabel', |
||||||
|
feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency', |
||||||
|
feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency', |
||||||
|
timeEstimate: 'mockTimeEstimate', |
||||||
|
}, { |
||||||
|
className: 'someClass', |
||||||
|
showCheck: true, |
||||||
|
}) |
||||||
|
const wrappedRenderButtonContentResult = shallow(renderButtonContentResult) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.children().length, 5) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
it('should render no elements if all args passed', () => { |
||||||
|
const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({}, {}) |
||||||
|
const wrappedRenderButtonContentResult = shallow(renderButtonContentResult) |
||||||
|
assert.equal(wrappedRenderButtonContentResult.children().length, 0) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import * as d3 from 'd3' |
||||||
|
import { |
||||||
|
generateChart, |
||||||
|
getCoordinateData, |
||||||
|
handleChartUpdate, |
||||||
|
hideDataUI, |
||||||
|
setTickPosition, |
||||||
|
handleMouseMove, |
||||||
|
} from './gas-price-chart.utils.js' |
||||||
|
|
||||||
|
export default class GasPriceChart extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
gasPrices: PropTypes.array, |
||||||
|
estimatedTimes: PropTypes.array, |
||||||
|
gasPricesMax: PropTypes.number, |
||||||
|
estimatedTimesMax: PropTypes.number, |
||||||
|
currentPrice: PropTypes.number, |
||||||
|
updateCustomGasPrice: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
renderChart ({ |
||||||
|
currentPrice, |
||||||
|
gasPrices, |
||||||
|
estimatedTimes, |
||||||
|
gasPricesMax, |
||||||
|
estimatedTimesMax, |
||||||
|
updateCustomGasPrice, |
||||||
|
}) { |
||||||
|
const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) |
||||||
|
setTimeout(function () { |
||||||
|
setTickPosition('y', 0, -5, 8) |
||||||
|
setTickPosition('y', 1, -3, -5) |
||||||
|
setTickPosition('x', 0, 3) |
||||||
|
setTickPosition('x', 1, 3, -8) |
||||||
|
|
||||||
|
const { x: domainX } = getCoordinateData('.domain') |
||||||
|
const { x: yAxisX } = getCoordinateData('.c3-axis-y-label') |
||||||
|
const { x: tickX } = getCoordinateData('.c3-axis-x .tick') |
||||||
|
|
||||||
|
d3.select('.c3-axis-x .tick').attr('transform', 'translate(' + (domainX - tickX) / 2 + ', 0)') |
||||||
|
d3.select('.c3-axis-x-label').attr('transform', 'translate(0,-15)') |
||||||
|
d3.select('.c3-axis-y-label').attr('transform', 'translate(' + (domainX - yAxisX - 12) + ', 2) rotate(-90)') |
||||||
|
d3.select('.c3-xgrid-focus line').attr('y2', 98) |
||||||
|
|
||||||
|
d3.select('.c3-chart').on('mouseout', () => { |
||||||
|
hideDataUI(chart, '#overlayed-circle') |
||||||
|
}) |
||||||
|
|
||||||
|
d3.select('.c3-chart').on('click', () => { |
||||||
|
const { x: newGasPrice } = d3.select('#overlayed-circle').datum() |
||||||
|
updateCustomGasPrice(newGasPrice) |
||||||
|
}) |
||||||
|
|
||||||
|
const { x: chartXStart, width: chartWidth } = getCoordinateData('.c3-areas-data1') |
||||||
|
|
||||||
|
handleChartUpdate({ |
||||||
|
chart, |
||||||
|
gasPrices, |
||||||
|
newPrice: currentPrice, |
||||||
|
cssId: '#set-circle', |
||||||
|
}) |
||||||
|
|
||||||
|
d3.select('.c3-chart').on('mousemove', function () { |
||||||
|
handleMouseMove({ |
||||||
|
xMousePos: d3.event.clientX, |
||||||
|
chartXStart, |
||||||
|
chartWidth, |
||||||
|
gasPrices, |
||||||
|
estimatedTimes, |
||||||
|
chart, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, 0) |
||||||
|
|
||||||
|
this.chart = chart |
||||||
|
} |
||||||
|
|
||||||
|
componentDidUpdate (prevProps) { |
||||||
|
const { gasPrices, currentPrice: newPrice } = this.props |
||||||
|
|
||||||
|
if (prevProps.currentPrice !== newPrice) { |
||||||
|
handleChartUpdate({ |
||||||
|
chart: this.chart, |
||||||
|
gasPrices, |
||||||
|
newPrice, |
||||||
|
cssId: '#set-circle', |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
this.renderChart(this.props) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return ( |
||||||
|
<div className="gas-price-chart" id="container"> |
||||||
|
<div className="gas-price-chart__root" id="chart"></div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,354 @@ |
|||||||
|
import * as d3 from 'd3' |
||||||
|
import c3 from 'c3' |
||||||
|
import BigNumber from 'bignumber.js' |
||||||
|
|
||||||
|
const newBigSigDig = n => (new BigNumber(n.toPrecision(15))) |
||||||
|
const createOp = (a, b, op) => (newBigSigDig(a))[op](newBigSigDig(b)) |
||||||
|
const bigNumMinus = (a = 0, b = 0) => createOp(a, b, 'minus') |
||||||
|
const bigNumDiv = (a = 0, b = 1) => createOp(a, b, 'div') |
||||||
|
|
||||||
|
export function handleMouseMove ({ xMousePos, chartXStart, chartWidth, gasPrices, estimatedTimes, chart }) { |
||||||
|
const { currentPosValue, newTimeEstimate } = getNewXandTimeEstimate({ |
||||||
|
xMousePos, |
||||||
|
chartXStart, |
||||||
|
chartWidth, |
||||||
|
gasPrices, |
||||||
|
estimatedTimes, |
||||||
|
}) |
||||||
|
|
||||||
|
if (currentPosValue === null && newTimeEstimate === null) { |
||||||
|
hideDataUI(chart, '#overlayed-circle') |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const indexOfNewCircle = estimatedTimes.length + 1 |
||||||
|
const dataUIObj = generateDataUIObj(currentPosValue, indexOfNewCircle, newTimeEstimate) |
||||||
|
|
||||||
|
chart.internal.overlayPoint(dataUIObj, indexOfNewCircle) |
||||||
|
chart.internal.showTooltip([dataUIObj], d3.select('.c3-areas-data1')._groups[0]) |
||||||
|
chart.internal.showXGridFocus([dataUIObj]) |
||||||
|
} |
||||||
|
|
||||||
|
export function getCoordinateData (selector) { |
||||||
|
const node = d3.select(selector).node() |
||||||
|
return node ? node.getBoundingClientRect() : {} |
||||||
|
} |
||||||
|
|
||||||
|
export function generateDataUIObj (x, index, value) { |
||||||
|
return { |
||||||
|
x, |
||||||
|
value, |
||||||
|
index, |
||||||
|
id: 'data1', |
||||||
|
name: 'data1', |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function handleChartUpdate ({ chart, gasPrices, newPrice, cssId }) { |
||||||
|
const { |
||||||
|
closestLowerValueIndex, |
||||||
|
closestLowerValue, |
||||||
|
closestHigherValueIndex, |
||||||
|
closestHigherValue, |
||||||
|
} = getAdjacentGasPrices({ gasPrices, priceToPosition: newPrice }) |
||||||
|
|
||||||
|
if (closestLowerValue && closestHigherValue) { |
||||||
|
setSelectedCircle({ |
||||||
|
chart, |
||||||
|
newPrice, |
||||||
|
closestLowerValueIndex, |
||||||
|
closestLowerValue, |
||||||
|
closestHigherValueIndex, |
||||||
|
closestHigherValue, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
hideDataUI(chart, cssId) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function getAdjacentGasPrices ({ gasPrices, priceToPosition }) { |
||||||
|
const closestLowerValueIndex = gasPrices.findIndex((e, i, a) => e <= priceToPosition && a[i + 1] >= priceToPosition) |
||||||
|
const closestHigherValueIndex = gasPrices.findIndex((e, i, a) => e > priceToPosition) |
||||||
|
return { |
||||||
|
closestLowerValueIndex, |
||||||
|
closestHigherValueIndex, |
||||||
|
closestHigherValue: gasPrices[closestHigherValueIndex], |
||||||
|
closestLowerValue: gasPrices[closestLowerValueIndex], |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function extrapolateY ({ higherY = 0, lowerY = 0, higherX = 0, lowerX = 0, xForExtrapolation = 0 }) { |
||||||
|
const slope = bigNumMinus(higherY, lowerY).div(bigNumMinus(higherX, lowerX)) |
||||||
|
const newTimeEstimate = slope.times(bigNumMinus(higherX, xForExtrapolation)).minus(newBigSigDig(higherY)).negated() |
||||||
|
|
||||||
|
return newTimeEstimate.toNumber() |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function getNewXandTimeEstimate ({ xMousePos, chartXStart, chartWidth, gasPrices, estimatedTimes }) { |
||||||
|
const chartMouseXPos = bigNumMinus(xMousePos, chartXStart) |
||||||
|
const posPercentile = bigNumDiv(chartMouseXPos, chartWidth) |
||||||
|
|
||||||
|
const currentPosValue = (bigNumMinus(gasPrices[gasPrices.length - 1], gasPrices[0])) |
||||||
|
.times(newBigSigDig(posPercentile)) |
||||||
|
.plus(newBigSigDig(gasPrices[0])) |
||||||
|
.toNumber() |
||||||
|
|
||||||
|
const { |
||||||
|
closestLowerValueIndex, |
||||||
|
closestLowerValue, |
||||||
|
closestHigherValueIndex, |
||||||
|
closestHigherValue, |
||||||
|
} = getAdjacentGasPrices({ gasPrices, priceToPosition: currentPosValue }) |
||||||
|
|
||||||
|
return !closestHigherValue || !closestLowerValue |
||||||
|
? { |
||||||
|
currentPosValue: null, |
||||||
|
newTimeEstimate: null, |
||||||
|
} |
||||||
|
: { |
||||||
|
currentPosValue, |
||||||
|
newTimeEstimate: extrapolateY({ |
||||||
|
higherY: estimatedTimes[closestHigherValueIndex], |
||||||
|
lowerY: estimatedTimes[closestLowerValueIndex], |
||||||
|
higherX: closestHigherValue, |
||||||
|
lowerX: closestLowerValue, |
||||||
|
xForExtrapolation: currentPosValue, |
||||||
|
}), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function hideDataUI (chart, dataNodeId) { |
||||||
|
const overLayedCircle = d3.select(dataNodeId) |
||||||
|
if (!overLayedCircle.empty()) { |
||||||
|
overLayedCircle.remove() |
||||||
|
} |
||||||
|
d3.select('.c3-tooltip-container').style('display', 'none !important') |
||||||
|
chart.internal.hideXGridFocus() |
||||||
|
} |
||||||
|
|
||||||
|
export function setTickPosition (axis, n, newPosition, secondNewPosition) { |
||||||
|
const positionToShift = axis === 'y' ? 'x' : 'y' |
||||||
|
const secondPositionToShift = axis === 'y' ? 'y' : 'x' |
||||||
|
d3.select('#chart') |
||||||
|
.select(`.c3-axis-${axis}`) |
||||||
|
.selectAll('.tick') |
||||||
|
.filter((d, i) => i === n) |
||||||
|
.select('text') |
||||||
|
.attr(positionToShift, 0) |
||||||
|
.select('tspan') |
||||||
|
.attr(positionToShift, newPosition) |
||||||
|
.attr(secondPositionToShift, secondNewPosition || 0) |
||||||
|
.style('visibility', 'visible') |
||||||
|
} |
||||||
|
|
||||||
|
export function appendOrUpdateCircle ({ data, itemIndex, cx, cy, cssId, appendOnly }) { |
||||||
|
const circle = this.main |
||||||
|
.select('.c3-selected-circles' + this.getTargetSelectorSuffix(data.id)) |
||||||
|
.selectAll(`.c3-selected-circle-${itemIndex}`) |
||||||
|
|
||||||
|
if (appendOnly || circle.empty()) { |
||||||
|
circle.data([data]) |
||||||
|
.enter().append('circle') |
||||||
|
.attr('class', () => this.generateClass('c3-selected-circle', itemIndex)) |
||||||
|
.attr('id', cssId) |
||||||
|
.attr('cx', cx) |
||||||
|
.attr('cy', cy) |
||||||
|
.attr('stroke', () => this.color(data)) |
||||||
|
.attr('r', 6) |
||||||
|
} else { |
||||||
|
circle.data([data]) |
||||||
|
.attr('cx', cx) |
||||||
|
.attr('cy', cy) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setSelectedCircle ({ |
||||||
|
chart, |
||||||
|
newPrice, |
||||||
|
closestLowerValueIndex, |
||||||
|
closestLowerValue, |
||||||
|
closestHigherValueIndex, |
||||||
|
closestHigherValue, |
||||||
|
}) { |
||||||
|
const numberOfValues = chart.internal.data.xs.data1.length |
||||||
|
|
||||||
|
const { x: lowerX, y: lowerY } = getCoordinateData(`.c3-circle-${closestLowerValueIndex}`) |
||||||
|
let { x: higherX, y: higherY } = getCoordinateData(`.c3-circle-${closestHigherValueIndex}`) |
||||||
|
let count = closestHigherValueIndex + 1 |
||||||
|
|
||||||
|
if (lowerX && higherX) { |
||||||
|
while (lowerX === higherX) { |
||||||
|
higherX = getCoordinateData(`.c3-circle-${count}`).x |
||||||
|
higherY = getCoordinateData(`.c3-circle-${count}`).y |
||||||
|
count++ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const currentX = bigNumMinus(higherX, lowerX) |
||||||
|
.times(bigNumMinus(newPrice, closestLowerValue)) |
||||||
|
.div(bigNumMinus(closestHigherValue, closestLowerValue)) |
||||||
|
.plus(newBigSigDig(lowerX)) |
||||||
|
|
||||||
|
const newTimeEstimate = extrapolateY({ higherY, lowerY, higherX, lowerX, xForExtrapolation: currentX }) |
||||||
|
|
||||||
|
chart.internal.selectPoint( |
||||||
|
generateDataUIObj(currentX.toNumber(), numberOfValues, newTimeEstimate), |
||||||
|
numberOfValues |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) { |
||||||
|
const gasPricesMaxPadded = gasPricesMax + 1 |
||||||
|
const chart = c3.generate({ |
||||||
|
size: { |
||||||
|
height: 165, |
||||||
|
}, |
||||||
|
transition: { |
||||||
|
duration: 0, |
||||||
|
}, |
||||||
|
padding: {left: 20, right: 15, top: 6, bottom: 10}, |
||||||
|
data: { |
||||||
|
x: 'x', |
||||||
|
columns: [ |
||||||
|
['x', ...gasPrices], |
||||||
|
['data1', ...estimatedTimes], |
||||||
|
], |
||||||
|
types: { |
||||||
|
data1: 'area', |
||||||
|
}, |
||||||
|
selection: { |
||||||
|
enabled: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
color: { |
||||||
|
data1: '#259de5', |
||||||
|
}, |
||||||
|
axis: { |
||||||
|
x: { |
||||||
|
min: gasPrices[0], |
||||||
|
max: gasPricesMax, |
||||||
|
tick: { |
||||||
|
values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMax)], |
||||||
|
outer: false, |
||||||
|
format: function (val) { return val + ' GWEI' }, |
||||||
|
}, |
||||||
|
padding: {left: gasPricesMax / 50, right: gasPricesMax / 50}, |
||||||
|
label: { |
||||||
|
text: 'Gas Price ($)', |
||||||
|
position: 'outer-center', |
||||||
|
}, |
||||||
|
}, |
||||||
|
y: { |
||||||
|
padding: {top: 7, bottom: 7}, |
||||||
|
tick: { |
||||||
|
values: [Math.floor(estimatedTimesMax * 0.05), Math.ceil(estimatedTimesMax * 0.97)], |
||||||
|
outer: false, |
||||||
|
}, |
||||||
|
label: { |
||||||
|
text: 'Confirmation time (sec)', |
||||||
|
position: 'outer-middle', |
||||||
|
}, |
||||||
|
min: 0, |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
x: {}, |
||||||
|
lines: { |
||||||
|
front: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
point: { |
||||||
|
focus: { |
||||||
|
expand: { |
||||||
|
enabled: false, |
||||||
|
r: 3.5, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
format: { |
||||||
|
title: (v) => v.toPrecision(4), |
||||||
|
}, |
||||||
|
contents: function (d) { |
||||||
|
const titleFormat = this.config.tooltip_format_title |
||||||
|
let text |
||||||
|
d.forEach(el => { |
||||||
|
if (el && (el.value || el.value === 0) && !text) { |
||||||
|
text = "<table class='" + 'custom-tooltip' + "'>" + "<tr><th colspan='2'>" + titleFormat(el.x) + '</th></tr>' |
||||||
|
} |
||||||
|
}) |
||||||
|
return text + '</table>' + "<div class='tooltip-arrow'></div>" |
||||||
|
}, |
||||||
|
position: function (data) { |
||||||
|
if (d3.select('#overlayed-circle').empty()) { |
||||||
|
return { top: -100, left: -100 } |
||||||
|
} |
||||||
|
|
||||||
|
const { x: circleX, y: circleY, width: circleWidth } = getCoordinateData('#overlayed-circle') |
||||||
|
const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-chart') |
||||||
|
|
||||||
|
// TODO: Confirm the below constants work with all data sets and screen sizes
|
||||||
|
const flipTooltip = circleY - circleWidth < chartYStart + 5 |
||||||
|
|
||||||
|
d3 |
||||||
|
.select('.tooltip-arrow') |
||||||
|
.style('margin-top', flipTooltip ? '-16px' : '4px') |
||||||
|
|
||||||
|
return { |
||||||
|
top: bigNumMinus(circleY, chartYStart).minus(19).plus(flipTooltip ? circleWidth + 38 : 0).toNumber(), |
||||||
|
left: bigNumMinus(circleX, chartXStart).plus(newBigSigDig(circleWidth)).minus(bigNumDiv(gasPricesMaxPadded, 50)).toNumber(), |
||||||
|
} |
||||||
|
}, |
||||||
|
show: true, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
chart.internal.selectPoint = function (data, itemIndex = (data.index || 0)) { |
||||||
|
const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-areas-data1') |
||||||
|
|
||||||
|
d3.select('#set-circle').remove() |
||||||
|
|
||||||
|
appendOrUpdateCircle.bind(this)({ |
||||||
|
data, |
||||||
|
itemIndex, |
||||||
|
cx: () => bigNumMinus(data.x, chartXStart).plus(11).toNumber(), |
||||||
|
cy: () => bigNumMinus(data.value, chartYStart).plus(10).toNumber(), |
||||||
|
cssId: 'set-circle', |
||||||
|
appendOnly: true, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
chart.internal.overlayPoint = function (data, itemIndex) { |
||||||
|
appendOrUpdateCircle.bind(this)({ |
||||||
|
data, |
||||||
|
itemIndex, |
||||||
|
cx: this.circleX.bind(this), |
||||||
|
cy: this.circleY.bind(this), |
||||||
|
cssId: 'overlayed-circle', |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
chart.internal.showTooltip = function (selectedData, element) { |
||||||
|
const dataToShow = selectedData.filter((d) => d && (d.value || d.value === 0)) |
||||||
|
|
||||||
|
if (dataToShow.length) { |
||||||
|
this.tooltip.html( |
||||||
|
this.config.tooltip_contents.call(this, selectedData, this.axis.getXAxisTickFormat(), this.getYFormat(), this.color) |
||||||
|
).style('display', 'flex') |
||||||
|
|
||||||
|
// Get tooltip dimensions
|
||||||
|
const tWidth = this.tooltip.property('offsetWidth') |
||||||
|
const tHeight = this.tooltip.property('offsetHeight') |
||||||
|
const position = this.config.tooltip_position.call(this, dataToShow, tWidth, tHeight, element) |
||||||
|
// Set tooltip
|
||||||
|
this.tooltip.style('top', position.top + 'px').style('left', position.left + 'px') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return chart |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './gas-price-chart.component' |
||||||
@ -0,0 +1,132 @@ |
|||||||
|
.gas-price-chart { |
||||||
|
display: flex; |
||||||
|
position: relative; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
&__root { |
||||||
|
max-height: 154px; |
||||||
|
max-width: 391px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
max-width: 326px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tick text, .c3-axis-x-label, .c3-axis-y-label { |
||||||
|
font-family: Roboto; |
||||||
|
font-style: normal; |
||||||
|
font-weight: bold; |
||||||
|
line-height: normal; |
||||||
|
font-size: 8px; |
||||||
|
text-align: center; |
||||||
|
fill: #9A9CA6 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-tooltip-container { |
||||||
|
display: flex; |
||||||
|
justify-content: center !important; |
||||||
|
align-items: flex-end !important; |
||||||
|
} |
||||||
|
|
||||||
|
.custom-tooltip { |
||||||
|
background: rgba(0, 0, 0, 1); |
||||||
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); |
||||||
|
border-radius: 3px; |
||||||
|
opacity: 1 !important; |
||||||
|
height: 21px; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.tooltip-arrow { |
||||||
|
background: black; |
||||||
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); |
||||||
|
-webkit-transform: rotate(45deg); |
||||||
|
transform: rotate(45deg); |
||||||
|
opacity: 1 !important; |
||||||
|
width: 9px; |
||||||
|
height: 9px; |
||||||
|
margin-top: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.custom-tooltip th { |
||||||
|
font-family: Roboto; |
||||||
|
font-style: normal; |
||||||
|
font-weight: 500; |
||||||
|
line-height: normal; |
||||||
|
font-size: 10px; |
||||||
|
text-align: center; |
||||||
|
padding: 3px; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-circle { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-selected-circle, .c3-circle._expanded_ { |
||||||
|
fill: #FFFFFF !important; |
||||||
|
stroke-width: 2.4px !important; |
||||||
|
stroke: #2d9fd9 !important; |
||||||
|
/* visibility: visible; */ |
||||||
|
} |
||||||
|
|
||||||
|
#set-circle { |
||||||
|
fill: #313A5E !important; |
||||||
|
stroke: #313A5E !important; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-axis-x-label, .c3-axis-y-label { |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.tick text tspan { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-circle { |
||||||
|
fill: #2d9fd9 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-line-data1 { |
||||||
|
stroke: #2d9fd9 !important; |
||||||
|
background: rgba(0,0,0,0) !important; |
||||||
|
color: rgba(0,0,0,0) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.c3 path { |
||||||
|
fill: none; |
||||||
|
} |
||||||
|
|
||||||
|
.c3 path.c3-area-data1 { |
||||||
|
opacity: 1; |
||||||
|
fill: #e9edf1 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-xgrid-line line { |
||||||
|
stroke: #B8B8B8 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-xgrid-focus { |
||||||
|
stroke: #aaa; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-axis-x .domain { |
||||||
|
fill: none; |
||||||
|
stroke: none; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-axis-y .domain { |
||||||
|
fill: none; |
||||||
|
stroke: #C8CCD6; |
||||||
|
} |
||||||
|
|
||||||
|
.c3-event-rect { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
#chart { |
||||||
|
background: #F8F9FB |
||||||
|
} |
||||||
@ -0,0 +1,218 @@ |
|||||||
|
import React from 'react' |
||||||
|
import assert from 'assert' |
||||||
|
import proxyquire from 'proxyquire' |
||||||
|
import sinon from 'sinon' |
||||||
|
import shallow from '../../../../../lib/shallow-with-context' |
||||||
|
import * as d3 from 'd3' |
||||||
|
|
||||||
|
function timeout (time) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
setTimeout(resolve, time) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const propsMethodSpies = { |
||||||
|
updateCustomGasPrice: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
const selectReturnSpies = { |
||||||
|
empty: sinon.spy(), |
||||||
|
remove: sinon.spy(), |
||||||
|
style: sinon.spy(), |
||||||
|
select: d3.select, |
||||||
|
attr: sinon.spy(), |
||||||
|
on: sinon.spy(), |
||||||
|
datum: sinon.stub().returns({ x: 'mockX' }), |
||||||
|
} |
||||||
|
|
||||||
|
const mockSelectReturn = { |
||||||
|
...d3.select('div'), |
||||||
|
node: () => ({ |
||||||
|
getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }), |
||||||
|
}), |
||||||
|
...selectReturnSpies, |
||||||
|
} |
||||||
|
|
||||||
|
const gasPriceChartUtilsSpies = { |
||||||
|
appendOrUpdateCircle: sinon.spy(), |
||||||
|
generateChart: sinon.stub().returns({ mockChart: true }), |
||||||
|
generateDataUIObj: sinon.spy(), |
||||||
|
getAdjacentGasPrices: sinon.spy(), |
||||||
|
getCoordinateData: sinon.stub().returns({ x: 'mockCoordinateX', width: 'mockWidth' }), |
||||||
|
getNewXandTimeEstimate: sinon.spy(), |
||||||
|
handleChartUpdate: sinon.spy(), |
||||||
|
hideDataUI: sinon.spy(), |
||||||
|
setSelectedCircle: sinon.spy(), |
||||||
|
setTickPosition: sinon.spy(), |
||||||
|
handleMouseMove: sinon.spy(), |
||||||
|
} |
||||||
|
|
||||||
|
const testProps = { |
||||||
|
gasPrices: [1.5, 2.5, 4, 8], |
||||||
|
estimatedTimes: [100, 80, 40, 10], |
||||||
|
gasPricesMax: 9, |
||||||
|
estimatedTimesMax: '100', |
||||||
|
currentPrice: 6, |
||||||
|
updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice, |
||||||
|
} |
||||||
|
|
||||||
|
const GasPriceChart = proxyquire('../gas-price-chart.component.js', { |
||||||
|
'./gas-price-chart.utils.js': gasPriceChartUtilsSpies, |
||||||
|
'd3': { |
||||||
|
...d3, |
||||||
|
select: function (...args) { |
||||||
|
const result = d3.select(...args) |
||||||
|
return result.empty() |
||||||
|
? mockSelectReturn |
||||||
|
: result |
||||||
|
}, |
||||||
|
event: { |
||||||
|
clientX: 'mockClientX', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}).default |
||||||
|
|
||||||
|
sinon.spy(GasPriceChart.prototype, 'renderChart') |
||||||
|
|
||||||
|
describe('GasPriceChart Component', function () { |
||||||
|
let wrapper |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
wrapper = shallow(<GasPriceChart {...testProps} />) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('render()', () => { |
||||||
|
it('should render', () => { |
||||||
|
assert(wrapper.hasClass('gas-price-chart')) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should render the chart div', () => { |
||||||
|
assert(wrapper.childAt(0).hasClass('gas-price-chart__root')) |
||||||
|
assert.equal(wrapper.childAt(0).props().id, 'chart') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('componentDidMount', () => { |
||||||
|
it('should call this.renderChart with the components props', () => { |
||||||
|
assert(GasPriceChart.prototype.renderChart.callCount, 1) |
||||||
|
wrapper.instance().componentDidMount() |
||||||
|
assert(GasPriceChart.prototype.renderChart.callCount, 2) |
||||||
|
assert.deepEqual(GasPriceChart.prototype.renderChart.getCall(1).args, [{...testProps}]) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('componentDidUpdate', () => { |
||||||
|
it('should call handleChartUpdate if props.currentPrice has changed', () => { |
||||||
|
gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() |
||||||
|
wrapper.instance().componentDidUpdate({ currentPrice: 7 }) |
||||||
|
assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 1) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call handleChartUpdate with the correct props', () => { |
||||||
|
gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() |
||||||
|
wrapper.instance().componentDidUpdate({ currentPrice: 7 }) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{ |
||||||
|
chart: { mockChart: true }, |
||||||
|
gasPrices: [1.5, 2.5, 4, 8], |
||||||
|
newPrice: 6, |
||||||
|
cssId: '#set-circle', |
||||||
|
}]) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should not call handleChartUpdate if props.currentPrice has not changed', () => { |
||||||
|
gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() |
||||||
|
wrapper.instance().componentDidUpdate({ currentPrice: 6 }) |
||||||
|
assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 0) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('renderChart', () => { |
||||||
|
it('should call setTickPosition 4 times, with the expected props', async () => { |
||||||
|
await timeout(0) |
||||||
|
gasPriceChartUtilsSpies.setTickPosition.resetHistory() |
||||||
|
assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 0) |
||||||
|
wrapper.instance().renderChart(testProps) |
||||||
|
await timeout(0) |
||||||
|
assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 4) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(0).args, ['y', 0, -5, 8]) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(1).args, ['y', 1, -3, -5]) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3]) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(3).args, ['x', 1, 3, -8]) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call handleChartUpdate with the correct props', async () => { |
||||||
|
await timeout(0) |
||||||
|
gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() |
||||||
|
wrapper.instance().renderChart(testProps) |
||||||
|
await timeout(0) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{ |
||||||
|
chart: { mockChart: true }, |
||||||
|
gasPrices: [1.5, 2.5, 4, 8], |
||||||
|
newPrice: 6, |
||||||
|
cssId: '#set-circle', |
||||||
|
}]) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should add three events to the chart', async () => { |
||||||
|
await timeout(0) |
||||||
|
selectReturnSpies.on.resetHistory() |
||||||
|
assert.equal(selectReturnSpies.on.callCount, 0) |
||||||
|
wrapper.instance().renderChart(testProps) |
||||||
|
await timeout(0) |
||||||
|
assert.equal(selectReturnSpies.on.callCount, 3) |
||||||
|
|
||||||
|
const firstOnEventArgs = selectReturnSpies.on.getCall(0).args |
||||||
|
assert.equal(firstOnEventArgs[0], 'mouseout') |
||||||
|
const secondOnEventArgs = selectReturnSpies.on.getCall(1).args |
||||||
|
assert.equal(secondOnEventArgs[0], 'click') |
||||||
|
const thirdOnEventArgs = selectReturnSpies.on.getCall(2).args |
||||||
|
assert.equal(thirdOnEventArgs[0], 'mousemove') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should hide the data UI on mouseout', async () => { |
||||||
|
await timeout(0) |
||||||
|
selectReturnSpies.on.resetHistory() |
||||||
|
wrapper.instance().renderChart(testProps) |
||||||
|
gasPriceChartUtilsSpies.hideDataUI.resetHistory() |
||||||
|
await timeout(0) |
||||||
|
const mouseoutEventArgs = selectReturnSpies.on.getCall(0).args |
||||||
|
assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 0) |
||||||
|
mouseoutEventArgs[1]() |
||||||
|
assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 1) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.hideDataUI.getCall(0).args, [{ mockChart: true }, '#overlayed-circle']) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should updateCustomGasPrice on click', async () => { |
||||||
|
await timeout(0) |
||||||
|
selectReturnSpies.on.resetHistory() |
||||||
|
wrapper.instance().renderChart(testProps) |
||||||
|
propsMethodSpies.updateCustomGasPrice.resetHistory() |
||||||
|
await timeout(0) |
||||||
|
const mouseoutEventArgs = selectReturnSpies.on.getCall(1).args |
||||||
|
assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 0) |
||||||
|
mouseoutEventArgs[1]() |
||||||
|
assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 1) |
||||||
|
assert.equal(propsMethodSpies.updateCustomGasPrice.getCall(0).args[0], 'mockX') |
||||||
|
}) |
||||||
|
|
||||||
|
it('should handle mousemove', async () => { |
||||||
|
await timeout(0) |
||||||
|
selectReturnSpies.on.resetHistory() |
||||||
|
wrapper.instance().renderChart(testProps) |
||||||
|
gasPriceChartUtilsSpies.handleMouseMove.resetHistory() |
||||||
|
await timeout(0) |
||||||
|
const mouseoutEventArgs = selectReturnSpies.on.getCall(2).args |
||||||
|
assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 0) |
||||||
|
mouseoutEventArgs[1]() |
||||||
|
assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 1) |
||||||
|
assert.deepEqual(gasPriceChartUtilsSpies.handleMouseMove.getCall(0).args, [{ |
||||||
|
xMousePos: 'mockClientX', |
||||||
|
chartXStart: 'mockCoordinateX', |
||||||
|
chartWidth: 'mockWidth', |
||||||
|
gasPrices: testProps.gasPrices, |
||||||
|
estimatedTimes: testProps.estimatedTimes, |
||||||
|
chart: { mockChart: true }, |
||||||
|
}]) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
|
||||||
|
export default class AdvancedTabContent extends Component { |
||||||
|
static propTypes = { |
||||||
|
onChange: PropTypes.func, |
||||||
|
lowLabel: PropTypes.string, |
||||||
|
highLabel: PropTypes.string, |
||||||
|
value: PropTypes.number, |
||||||
|
step: PropTypes.number, |
||||||
|
max: PropTypes.number, |
||||||
|
min: PropTypes.number, |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
onChange, |
||||||
|
lowLabel, |
||||||
|
highLabel, |
||||||
|
value, |
||||||
|
step, |
||||||
|
max, |
||||||
|
min, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="gas-slider"> |
||||||
|
<input |
||||||
|
className="gas-slider__input" |
||||||
|
type="range" |
||||||
|
step={step} |
||||||
|
max={max} |
||||||
|
min={min} |
||||||
|
value={value} |
||||||
|
id="gasSlider" |
||||||
|
onChange={event => onChange(event.target.value)} |
||||||
|
/> |
||||||
|
<div className="gas-slider__bar"> |
||||||
|
<div className="gas-slider__colored"/> |
||||||
|
</div> |
||||||
|
<div className="gas-slider__labels"> |
||||||
|
<span>{lowLabel}</span> |
||||||
|
<span>{highLabel}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './gas-slider.component' |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
.gas-slider { |
||||||
|
position: relative; |
||||||
|
width: 322px; |
||||||
|
|
||||||
|
&__input { |
||||||
|
width: 322px; |
||||||
|
margin-left: -2px; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
|
||||||
|
input[type=range] { |
||||||
|
-webkit-appearance: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
input[type=range]::-webkit-slider-thumb { |
||||||
|
-webkit-appearance: none !important; |
||||||
|
height: 34px; |
||||||
|
width: 34px; |
||||||
|
background-color: $curious-blue; |
||||||
|
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); |
||||||
|
border-radius: 50%; |
||||||
|
position: relative; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
|
||||||
|
&__bar { |
||||||
|
height: 6px; |
||||||
|
width: 322px; |
||||||
|
background: $alto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
position: absolute; |
||||||
|
top: 16px; |
||||||
|
z-index: 0; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
&__colored { |
||||||
|
height: 6px; |
||||||
|
border-radius: 4px; |
||||||
|
margin-left: 102px; |
||||||
|
width: 322px; |
||||||
|
z-index: 1; |
||||||
|
background-color: $blizzard-blue; |
||||||
|
} |
||||||
|
|
||||||
|
&__labels { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 12px; |
||||||
|
margin-top: -6px; |
||||||
|
color: $mid-gray; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
const selectors = { |
||||||
|
getCurrentBlockTime, |
||||||
|
getBasicGasEstimateLoadingStatus, |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = selectors |
||||||
|
|
||||||
|
function getCurrentBlockTime (state) { |
||||||
|
return state.gas.currentBlockTime |
||||||
|
} |
||||||
|
|
||||||
|
function getBasicGasEstimateLoadingStatus (state) { |
||||||
|
return state.gas.basicEstimateIsLoading |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
@import './gas-slider/index'; |
||||||
|
|
||||||
|
@import './gas-modal-page-container/index'; |
||||||
|
|
||||||
|
@import './gas-price-chart/index'; |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
.sidebar-left { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.gas-modal-page-container { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.page-container { |
||||||
|
flex: 1; |
||||||
|
max-width: 100%; |
||||||
|
|
||||||
|
&__content { |
||||||
|
display: flex; |
||||||
|
overflow-y: initial; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
max-width: 344px; |
||||||
|
min-height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: $break-small) { |
||||||
|
max-height: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.gas-price-chart { |
||||||
|
margin-left: 10px; |
||||||
|
|
||||||
|
&__root { |
||||||
|
max-height: 160px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.page-container__bottom { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
flex-flow: space-between; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.page-container__content { |
||||||
|
overflow-y: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.basic-tab-content { |
||||||
|
height: auto; |
||||||
|
margin-bottom: 0px; |
||||||
|
border-bottom: 1px solid #d2d8dd; |
||||||
|
flex: 1 1 70%; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
padding-left: 14px; |
||||||
|
padding-bottom: 21px; |
||||||
|
} |
||||||
|
|
||||||
|
.gas-price-button-group--alt { |
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
max-width: 318px; |
||||||
|
|
||||||
|
&__time-estimate { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.advanced-tab { |
||||||
|
@media screen and (min-width: $break-small) { |
||||||
|
flex: 1 1 70%; |
||||||
|
} |
||||||
|
|
||||||
|
&__fee-chart { |
||||||
|
height: 320px; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
height: initial; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__fee-chart__speed-buttons { |
||||||
|
bottom: 77px; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.gas-modal-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
&__info-row-wrapper { |
||||||
|
display: flex; |
||||||
|
@media screen and (min-width: $break-small) { |
||||||
|
flex: 1 1 30%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__info-row { |
||||||
|
height: 170px; |
||||||
|
|
||||||
|
@media screen and (max-width: $break-small) { |
||||||
|
height: initial; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,51 +0,0 @@ |
|||||||
.gas-slider { |
|
||||||
position: relative; |
|
||||||
width: 313px; |
|
||||||
|
|
||||||
&__input { |
|
||||||
width: 317px; |
|
||||||
margin-left: -2px; |
|
||||||
z-index: 2; |
|
||||||
} |
|
||||||
|
|
||||||
input[type=range] { |
|
||||||
-webkit-appearance: none !important; |
|
||||||
} |
|
||||||
|
|
||||||
input[type=range]::-webkit-slider-thumb { |
|
||||||
-webkit-appearance: none !important; |
|
||||||
height: 26px; |
|
||||||
width: 26px; |
|
||||||
border: 2px solid #B8B8B8; |
|
||||||
background-color: #FFFFFF; |
|
||||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); |
|
||||||
border-radius: 50%; |
|
||||||
position: relative; |
|
||||||
z-index: 10; |
|
||||||
} |
|
||||||
|
|
||||||
&__bar { |
|
||||||
height: 6px; |
|
||||||
width: 313px; |
|
||||||
background: $alto; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
position: absolute; |
|
||||||
top: 11px; |
|
||||||
z-index: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&__low, &__high { |
|
||||||
height: 6px; |
|
||||||
width: 49px; |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
|
|
||||||
&__low { |
|
||||||
background-color: $crimson; |
|
||||||
} |
|
||||||
|
|
||||||
&__high { |
|
||||||
background-color: $caribbean-green; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,468 @@ |
|||||||
|
import { clone, uniqBy, flatten } from 'ramda' |
||||||
|
import BigNumber from 'bignumber.js' |
||||||
|
import { |
||||||
|
loadLocalStorageData, |
||||||
|
saveLocalStorageData, |
||||||
|
} from '../../lib/local-storage-helpers' |
||||||
|
|
||||||
|
// Actions
|
||||||
|
const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED' |
||||||
|
const BASIC_GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_STARTED' |
||||||
|
const GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/GAS_ESTIMATE_LOADING_FINISHED' |
||||||
|
const GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/GAS_ESTIMATE_LOADING_STARTED' |
||||||
|
const RESET_CUSTOM_GAS_STATE = 'metamask/gas/RESET_CUSTOM_GAS_STATE' |
||||||
|
const RESET_CUSTOM_DATA = 'metamask/gas/RESET_CUSTOM_DATA' |
||||||
|
const SET_BASIC_GAS_ESTIMATE_DATA = 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA' |
||||||
|
const SET_CUSTOM_GAS_ERRORS = 'metamask/gas/SET_CUSTOM_GAS_ERRORS' |
||||||
|
const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT' |
||||||
|
const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE' |
||||||
|
const SET_CUSTOM_GAS_TOTAL = 'metamask/gas/SET_CUSTOM_GAS_TOTAL' |
||||||
|
const SET_PRICE_AND_TIME_ESTIMATES = 'metamask/gas/SET_PRICE_AND_TIME_ESTIMATES' |
||||||
|
const SET_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_API_ESTIMATES_LAST_RETRIEVED' |
||||||
|
const SET_BASIC_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_API_ESTIMATES_LAST_RETRIEVED' |
||||||
|
|
||||||
|
// TODO: determine if this approach to initState is consistent with conventional ducks pattern
|
||||||
|
const initState = { |
||||||
|
customData: { |
||||||
|
price: null, |
||||||
|
limit: '0x5208', |
||||||
|
}, |
||||||
|
basicEstimates: { |
||||||
|
average: null, |
||||||
|
fastestWait: null, |
||||||
|
fastWait: null, |
||||||
|
fast: null, |
||||||
|
safeLowWait: null, |
||||||
|
blockNum: null, |
||||||
|
avgWait: null, |
||||||
|
blockTime: null, |
||||||
|
speed: null, |
||||||
|
fastest: null, |
||||||
|
safeLow: null, |
||||||
|
}, |
||||||
|
basicEstimateIsLoading: true, |
||||||
|
gasEstimatesLoading: true, |
||||||
|
priceAndTimeEstimates: [], |
||||||
|
basicPriceAndTimeEstimates: [], |
||||||
|
priceAndTimeEstimatesLastRetrieved: 0, |
||||||
|
basicPriceAndTimeEstimatesLastRetrieved: 0, |
||||||
|
errors: {}, |
||||||
|
} |
||||||
|
|
||||||
|
// Reducer
|
||||||
|
export default function reducer ({ gas: gasState = initState }, action = {}) { |
||||||
|
const newState = clone(gasState) |
||||||
|
|
||||||
|
switch (action.type) { |
||||||
|
case BASIC_GAS_ESTIMATE_LOADING_STARTED: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
basicEstimateIsLoading: true, |
||||||
|
} |
||||||
|
case BASIC_GAS_ESTIMATE_LOADING_FINISHED: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
basicEstimateIsLoading: false, |
||||||
|
} |
||||||
|
case GAS_ESTIMATE_LOADING_STARTED: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
gasEstimatesLoading: true, |
||||||
|
} |
||||||
|
case GAS_ESTIMATE_LOADING_FINISHED: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
gasEstimatesLoading: false, |
||||||
|
} |
||||||
|
case SET_BASIC_GAS_ESTIMATE_DATA: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
basicEstimates: action.value, |
||||||
|
} |
||||||
|
case SET_CUSTOM_GAS_PRICE: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
customData: { |
||||||
|
...newState.customData, |
||||||
|
price: action.value, |
||||||
|
}, |
||||||
|
} |
||||||
|
case SET_CUSTOM_GAS_LIMIT: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
customData: { |
||||||
|
...newState.customData, |
||||||
|
limit: action.value, |
||||||
|
}, |
||||||
|
} |
||||||
|
case SET_CUSTOM_GAS_TOTAL: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
customData: { |
||||||
|
...newState.customData, |
||||||
|
total: action.value, |
||||||
|
}, |
||||||
|
} |
||||||
|
case SET_PRICE_AND_TIME_ESTIMATES: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
priceAndTimeEstimates: action.value, |
||||||
|
} |
||||||
|
case SET_CUSTOM_GAS_ERRORS: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
errors: { |
||||||
|
...newState.errors, |
||||||
|
...action.value, |
||||||
|
}, |
||||||
|
} |
||||||
|
case SET_API_ESTIMATES_LAST_RETRIEVED: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
priceAndTimeEstimatesLastRetrieved: action.value, |
||||||
|
} |
||||||
|
case SET_BASIC_API_ESTIMATES_LAST_RETRIEVED: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
basicPriceAndTimeEstimatesLastRetrieved: action.value, |
||||||
|
} |
||||||
|
case RESET_CUSTOM_DATA: |
||||||
|
return { |
||||||
|
...newState, |
||||||
|
customData: clone(initState.customData), |
||||||
|
} |
||||||
|
case RESET_CUSTOM_GAS_STATE: |
||||||
|
return clone(initState) |
||||||
|
default: |
||||||
|
return newState |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Action Creators
|
||||||
|
export function basicGasEstimatesLoadingStarted () { |
||||||
|
return { |
||||||
|
type: BASIC_GAS_ESTIMATE_LOADING_STARTED, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function basicGasEstimatesLoadingFinished () { |
||||||
|
return { |
||||||
|
type: BASIC_GAS_ESTIMATE_LOADING_FINISHED, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function gasEstimatesLoadingStarted () { |
||||||
|
return { |
||||||
|
type: GAS_ESTIMATE_LOADING_STARTED, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function gasEstimatesLoadingFinished () { |
||||||
|
return { |
||||||
|
type: GAS_ESTIMATE_LOADING_FINISHED, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function fetchBasicGasEstimates () { |
||||||
|
return (dispatch) => { |
||||||
|
dispatch(basicGasEstimatesLoadingStarted()) |
||||||
|
|
||||||
|
return fetch('https://dev.blockscale.net/api/gasexpress.json', { |
||||||
|
'headers': {}, |
||||||
|
'referrer': 'https://dev.blockscale.net/api/', |
||||||
|
'referrerPolicy': 'no-referrer-when-downgrade', |
||||||
|
'body': null, |
||||||
|
'method': 'GET', |
||||||
|
'mode': 'cors'} |
||||||
|
) |
||||||
|
.then(r => r.json()) |
||||||
|
.then(({ |
||||||
|
safeLow, |
||||||
|
standard: average, |
||||||
|
fast, |
||||||
|
fastest, |
||||||
|
block_time: blockTime, |
||||||
|
blockNum, |
||||||
|
}) => { |
||||||
|
const basicEstimates = { |
||||||
|
safeLow, |
||||||
|
average, |
||||||
|
fast, |
||||||
|
fastest, |
||||||
|
blockTime, |
||||||
|
blockNum, |
||||||
|
} |
||||||
|
dispatch(setBasicGasEstimateData(basicEstimates)) |
||||||
|
dispatch(basicGasEstimatesLoadingFinished()) |
||||||
|
return basicEstimates |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function fetchBasicGasAndTimeEstimates () { |
||||||
|
return (dispatch, getState) => { |
||||||
|
const { |
||||||
|
basicPriceAndTimeEstimatesLastRetrieved, |
||||||
|
basicPriceAndTimeEstimates, |
||||||
|
} = getState().gas |
||||||
|
const timeLastRetrieved = basicPriceAndTimeEstimatesLastRetrieved || loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') || 0 |
||||||
|
|
||||||
|
dispatch(basicGasEstimatesLoadingStarted()) |
||||||
|
|
||||||
|
const promiseToFetch = Date.now() - timeLastRetrieved > 75000 |
||||||
|
? fetch('https://ethgasstation.info/json/ethgasAPI.json', { |
||||||
|
'headers': {}, |
||||||
|
'referrer': 'http://ethgasstation.info/json/', |
||||||
|
'referrerPolicy': 'no-referrer-when-downgrade', |
||||||
|
'body': null, |
||||||
|
'method': 'GET', |
||||||
|
'mode': 'cors'} |
||||||
|
) |
||||||
|
.then(r => r.json()) |
||||||
|
.then(({ |
||||||
|
average: averageTimes10, |
||||||
|
avgWait, |
||||||
|
block_time: blockTime, |
||||||
|
blockNum, |
||||||
|
fast: fastTimes10, |
||||||
|
fastest: fastestTimes10, |
||||||
|
fastestWait, |
||||||
|
fastWait, |
||||||
|
safeLow: safeLowTimes10, |
||||||
|
safeLowWait, |
||||||
|
speed, |
||||||
|
}) => { |
||||||
|
const [average, fast, fastest, safeLow] = [ |
||||||
|
averageTimes10, |
||||||
|
fastTimes10, |
||||||
|
fastestTimes10, |
||||||
|
safeLowTimes10, |
||||||
|
].map(price => (new BigNumber(price)).div(10).toNumber()) |
||||||
|
|
||||||
|
const basicEstimates = { |
||||||
|
average, |
||||||
|
avgWait, |
||||||
|
blockTime, |
||||||
|
blockNum, |
||||||
|
fast, |
||||||
|
fastest, |
||||||
|
fastestWait, |
||||||
|
fastWait, |
||||||
|
safeLow, |
||||||
|
safeLowWait, |
||||||
|
speed, |
||||||
|
} |
||||||
|
|
||||||
|
const timeRetrieved = Date.now() |
||||||
|
dispatch(setBasicApiEstimatesLastRetrieved(timeRetrieved)) |
||||||
|
saveLocalStorageData(timeRetrieved, 'BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') |
||||||
|
saveLocalStorageData(basicEstimates, 'BASIC_GAS_AND_TIME_API_ESTIMATES') |
||||||
|
|
||||||
|
return basicEstimates |
||||||
|
}) |
||||||
|
: Promise.resolve(basicPriceAndTimeEstimates.length |
||||||
|
? basicPriceAndTimeEstimates |
||||||
|
: loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES') |
||||||
|
) |
||||||
|
|
||||||
|
return promiseToFetch.then(basicEstimates => { |
||||||
|
dispatch(setBasicGasEstimateData(basicEstimates)) |
||||||
|
dispatch(basicGasEstimatesLoadingFinished()) |
||||||
|
return basicEstimates |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function extrapolateY ({ higherY, lowerY, higherX, lowerX, xForExtrapolation }) { |
||||||
|
higherY = new BigNumber(higherY, 10) |
||||||
|
lowerY = new BigNumber(lowerY, 10) |
||||||
|
higherX = new BigNumber(higherX, 10) |
||||||
|
lowerX = new BigNumber(lowerX, 10) |
||||||
|
xForExtrapolation = new BigNumber(xForExtrapolation, 10) |
||||||
|
const slope = (higherY.minus(lowerY)).div(higherX.minus(lowerX)) |
||||||
|
const newTimeEstimate = slope.times(higherX.minus(xForExtrapolation)).minus(higherY).negated() |
||||||
|
|
||||||
|
return Number(newTimeEstimate.toPrecision(10)) |
||||||
|
} |
||||||
|
|
||||||
|
function getRandomArbitrary (min, max) { |
||||||
|
min = new BigNumber(min, 10) |
||||||
|
max = new BigNumber(max, 10) |
||||||
|
const random = new BigNumber(String(Math.random()), 10) |
||||||
|
return new BigNumber(random.times(max.minus(min)).plus(min)).toPrecision(10) |
||||||
|
} |
||||||
|
|
||||||
|
function calcMedian (list) { |
||||||
|
const medianPos = (Math.floor(list.length / 2) + Math.ceil(list.length / 2)) / 2 |
||||||
|
return medianPos === Math.floor(medianPos) |
||||||
|
? (list[medianPos - 1] + list[medianPos]) / 2 |
||||||
|
: list[Math.floor(medianPos)] |
||||||
|
} |
||||||
|
|
||||||
|
function quartiles (data) { |
||||||
|
const lowerHalf = data.slice(0, Math.floor(data.length / 2)) |
||||||
|
const upperHalf = data.slice(Math.floor(data.length / 2) + (data.length % 2 === 0 ? 0 : 1)) |
||||||
|
const median = calcMedian(data) |
||||||
|
const lowerQuartile = calcMedian(lowerHalf) |
||||||
|
const upperQuartile = calcMedian(upperHalf) |
||||||
|
return { |
||||||
|
median, |
||||||
|
lowerQuartile, |
||||||
|
upperQuartile, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function inliersByIQR (data, prop) { |
||||||
|
const { lowerQuartile, upperQuartile } = quartiles(data.map(d => prop ? d[prop] : d)) |
||||||
|
const IQR = upperQuartile - lowerQuartile |
||||||
|
const lowerBound = lowerQuartile - 1.5 * IQR |
||||||
|
const upperBound = upperQuartile + 1.5 * IQR |
||||||
|
return data.filter(d => { |
||||||
|
const value = prop ? d[prop] : d |
||||||
|
return value >= lowerBound && value <= upperBound |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function fetchGasEstimates (blockTime) { |
||||||
|
return (dispatch, getState) => { |
||||||
|
const { |
||||||
|
priceAndTimeEstimatesLastRetrieved, |
||||||
|
priceAndTimeEstimates, |
||||||
|
} = getState().gas |
||||||
|
const timeLastRetrieved = priceAndTimeEstimatesLastRetrieved || loadLocalStorageData('GAS_API_ESTIMATES_LAST_RETRIEVED') || 0 |
||||||
|
|
||||||
|
dispatch(gasEstimatesLoadingStarted()) |
||||||
|
|
||||||
|
const promiseToFetch = Date.now() - timeLastRetrieved > 75000 |
||||||
|
? fetch('https://ethgasstation.info/json/predictTable.json', { |
||||||
|
'headers': {}, |
||||||
|
'referrer': 'http://ethgasstation.info/json/', |
||||||
|
'referrerPolicy': 'no-referrer-when-downgrade', |
||||||
|
'body': null, |
||||||
|
'method': 'GET', |
||||||
|
'mode': 'cors'} |
||||||
|
) |
||||||
|
.then(r => r.json()) |
||||||
|
.then(r => { |
||||||
|
const estimatedPricesAndTimes = r.map(({ expectedTime, expectedWait, gasprice }) => ({ expectedTime, expectedWait, gasprice })) |
||||||
|
const estimatedTimeWithUniquePrices = uniqBy(({ expectedTime }) => expectedTime, estimatedPricesAndTimes) |
||||||
|
|
||||||
|
const withSupplementalTimeEstimates = flatten(estimatedTimeWithUniquePrices.map(({ expectedWait, gasprice }, i, arr) => { |
||||||
|
const next = arr[i + 1] |
||||||
|
if (!next) { |
||||||
|
return [{ expectedWait, gasprice }] |
||||||
|
} else { |
||||||
|
const supplementalPrice = getRandomArbitrary(gasprice, next.gasprice) |
||||||
|
const supplementalTime = extrapolateY({ |
||||||
|
higherY: next.expectedWait, |
||||||
|
lowerY: expectedWait, |
||||||
|
higherX: next.gasprice, |
||||||
|
lowerX: gasprice, |
||||||
|
xForExtrapolation: supplementalPrice, |
||||||
|
}) |
||||||
|
const supplementalPrice2 = getRandomArbitrary(supplementalPrice, next.gasprice) |
||||||
|
const supplementalTime2 = extrapolateY({ |
||||||
|
higherY: next.expectedWait, |
||||||
|
lowerY: supplementalTime, |
||||||
|
higherX: next.gasprice, |
||||||
|
lowerX: supplementalPrice, |
||||||
|
xForExtrapolation: supplementalPrice2, |
||||||
|
}) |
||||||
|
return [ |
||||||
|
{ expectedWait, gasprice }, |
||||||
|
{ expectedWait: supplementalTime, gasprice: supplementalPrice }, |
||||||
|
{ expectedWait: supplementalTime2, gasprice: supplementalPrice2 }, |
||||||
|
] |
||||||
|
} |
||||||
|
})) |
||||||
|
const withOutliersRemoved = inliersByIQR(withSupplementalTimeEstimates.slice(0).reverse(), 'expectedWait').reverse() |
||||||
|
const timeMappedToSeconds = withOutliersRemoved.map(({ expectedWait, gasprice }) => { |
||||||
|
const expectedTime = (new BigNumber(expectedWait)).times(Number(blockTime), 10).toNumber() |
||||||
|
return { |
||||||
|
expectedTime, |
||||||
|
gasprice: (new BigNumber(gasprice, 10).toNumber()), |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const timeRetrieved = Date.now() |
||||||
|
dispatch(setApiEstimatesLastRetrieved(timeRetrieved)) |
||||||
|
saveLocalStorageData(timeRetrieved, 'GAS_API_ESTIMATES_LAST_RETRIEVED') |
||||||
|
saveLocalStorageData(timeMappedToSeconds, 'GAS_API_ESTIMATES') |
||||||
|
|
||||||
|
return timeMappedToSeconds |
||||||
|
}) |
||||||
|
: Promise.resolve(priceAndTimeEstimates.length |
||||||
|
? priceAndTimeEstimates |
||||||
|
: loadLocalStorageData('GAS_API_ESTIMATES') |
||||||
|
) |
||||||
|
|
||||||
|
return promiseToFetch.then(estimates => { |
||||||
|
dispatch(setPricesAndTimeEstimates(estimates)) |
||||||
|
dispatch(gasEstimatesLoadingFinished()) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setBasicGasEstimateData (basicGasEstimateData) { |
||||||
|
return { |
||||||
|
type: SET_BASIC_GAS_ESTIMATE_DATA, |
||||||
|
value: basicGasEstimateData, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setPricesAndTimeEstimates (estimatedPricesAndTimes) { |
||||||
|
return { |
||||||
|
type: SET_PRICE_AND_TIME_ESTIMATES, |
||||||
|
value: estimatedPricesAndTimes, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setCustomGasPrice (newPrice) { |
||||||
|
return { |
||||||
|
type: SET_CUSTOM_GAS_PRICE, |
||||||
|
value: newPrice, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setCustomGasLimit (newLimit) { |
||||||
|
return { |
||||||
|
type: SET_CUSTOM_GAS_LIMIT, |
||||||
|
value: newLimit, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setCustomGasTotal (newTotal) { |
||||||
|
return { |
||||||
|
type: SET_CUSTOM_GAS_TOTAL, |
||||||
|
value: newTotal, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setCustomGasErrors (newErrors) { |
||||||
|
return { |
||||||
|
type: SET_CUSTOM_GAS_ERRORS, |
||||||
|
value: newErrors, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setApiEstimatesLastRetrieved (retrievalTime) { |
||||||
|
return { |
||||||
|
type: SET_API_ESTIMATES_LAST_RETRIEVED, |
||||||
|
value: retrievalTime, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function setBasicApiEstimatesLastRetrieved (retrievalTime) { |
||||||
|
return { |
||||||
|
type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED, |
||||||
|
value: retrievalTime, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function resetCustomGasState () { |
||||||
|
return { type: RESET_CUSTOM_GAS_STATE } |
||||||
|
} |
||||||
|
|
||||||
|
export function resetCustomData () { |
||||||
|
return { type: RESET_CUSTOM_DATA } |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,544 @@ |
|||||||
|
import assert from 'assert' |
||||||
|
import sinon from 'sinon' |
||||||
|
import proxyquire from 'proxyquire' |
||||||
|
|
||||||
|
|
||||||
|
const GasDuck = proxyquire('../gas.duck.js', { |
||||||
|
'../../lib/local-storage-helpers': { |
||||||
|
loadLocalStorageData: sinon.spy(), |
||||||
|
saveLocalStorageData: sinon.spy(), |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const { |
||||||
|
basicGasEstimatesLoadingStarted, |
||||||
|
basicGasEstimatesLoadingFinished, |
||||||
|
setBasicGasEstimateData, |
||||||
|
setCustomGasPrice, |
||||||
|
setCustomGasLimit, |
||||||
|
setCustomGasTotal, |
||||||
|
setCustomGasErrors, |
||||||
|
resetCustomGasState, |
||||||
|
fetchBasicGasAndTimeEstimates, |
||||||
|
gasEstimatesLoadingStarted, |
||||||
|
gasEstimatesLoadingFinished, |
||||||
|
setPricesAndTimeEstimates, |
||||||
|
fetchGasEstimates, |
||||||
|
setApiEstimatesLastRetrieved, |
||||||
|
} = GasDuck |
||||||
|
const GasReducer = GasDuck.default |
||||||
|
|
||||||
|
describe('Gas Duck', () => { |
||||||
|
let tempFetch |
||||||
|
let tempDateNow |
||||||
|
const mockEthGasApiResponse = { |
||||||
|
average: 20, |
||||||
|
avgWait: 'mockAvgWait', |
||||||
|
block_time: 'mockBlock_time', |
||||||
|
blockNum: 'mockBlockNum', |
||||||
|
fast: 30, |
||||||
|
fastest: 40, |
||||||
|
fastestWait: 'mockFastestWait', |
||||||
|
fastWait: 'mockFastWait', |
||||||
|
safeLow: 10, |
||||||
|
safeLowWait: 'mockSafeLowWait', |
||||||
|
speed: 'mockSpeed', |
||||||
|
} |
||||||
|
const mockPredictTableResponse = [ |
||||||
|
{ expectedTime: 400, expectedWait: 40, gasprice: 0.25, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 200, expectedWait: 20, gasprice: 0.5, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 100, expectedWait: 10, gasprice: 1, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 75, expectedWait: 7.5, gasprice: 1.5, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 50, expectedWait: 5, gasprice: 2, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 35, expectedWait: 4.5, gasprice: 3, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 34, expectedWait: 4.4, gasprice: 3.1, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 25, expectedWait: 4.2, gasprice: 3.5, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 20, expectedWait: 4, gasprice: 4, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 19, expectedWait: 3.9, gasprice: 4.1, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 15, expectedWait: 3, gasprice: 7, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 14, expectedWait: 2.9, gasprice: 7.1, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 12, expectedWait: 2.5, gasprice: 8, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 10, expectedWait: 2, gasprice: 10, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 9, expectedWait: 1.9, gasprice: 10.1, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 5, expectedWait: 1, gasprice: 15, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 4, expectedWait: 0.9, gasprice: 15.1, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 2, expectedWait: 0.8, gasprice: 17, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 1.1, expectedWait: 0.6, gasprice: 19.9, somethingElse: 'foobar' }, |
||||||
|
{ expectedTime: 1, expectedWait: 0.5, gasprice: 20, somethingElse: 'foobar' }, |
||||||
|
] |
||||||
|
const fetchStub = sinon.stub().callsFake((url) => new Promise(resolve => { |
||||||
|
const dataToResolve = url.match(/ethgasAPI/) |
||||||
|
? mockEthGasApiResponse |
||||||
|
: mockPredictTableResponse |
||||||
|
resolve({ |
||||||
|
json: () => new Promise(resolve => resolve(dataToResolve)), |
||||||
|
}) |
||||||
|
})) |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
tempFetch = global.fetch |
||||||
|
tempDateNow = global.Date.now |
||||||
|
global.fetch = fetchStub |
||||||
|
global.Date.now = () => 2000000 |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(() => { |
||||||
|
global.fetch = tempFetch |
||||||
|
global.Date.now = tempDateNow |
||||||
|
}) |
||||||
|
|
||||||
|
const mockState = { |
||||||
|
gas: { |
||||||
|
mockProp: 123, |
||||||
|
}, |
||||||
|
} |
||||||
|
const initState = { |
||||||
|
customData: { |
||||||
|
price: null, |
||||||
|
limit: '0x5208', |
||||||
|
}, |
||||||
|
basicEstimates: { |
||||||
|
average: null, |
||||||
|
fastestWait: null, |
||||||
|
fastWait: null, |
||||||
|
fast: null, |
||||||
|
safeLowWait: null, |
||||||
|
blockNum: null, |
||||||
|
avgWait: null, |
||||||
|
blockTime: null, |
||||||
|
speed: null, |
||||||
|
fastest: null, |
||||||
|
safeLow: null, |
||||||
|
}, |
||||||
|
basicEstimateIsLoading: true, |
||||||
|
errors: {}, |
||||||
|
gasEstimatesLoading: true, |
||||||
|
priceAndTimeEstimates: [], |
||||||
|
priceAndTimeEstimatesLastRetrieved: 0, |
||||||
|
basicPriceAndTimeEstimates: [], |
||||||
|
basicPriceAndTimeEstimatesLastRetrieved: 0, |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
const BASIC_GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_FINISHED' |
||||||
|
const BASIC_GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/BASIC_GAS_ESTIMATE_LOADING_STARTED' |
||||||
|
const GAS_ESTIMATE_LOADING_FINISHED = 'metamask/gas/GAS_ESTIMATE_LOADING_FINISHED' |
||||||
|
const GAS_ESTIMATE_LOADING_STARTED = 'metamask/gas/GAS_ESTIMATE_LOADING_STARTED' |
||||||
|
const RESET_CUSTOM_GAS_STATE = 'metamask/gas/RESET_CUSTOM_GAS_STATE' |
||||||
|
const SET_BASIC_GAS_ESTIMATE_DATA = 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA' |
||||||
|
const SET_CUSTOM_GAS_ERRORS = 'metamask/gas/SET_CUSTOM_GAS_ERRORS' |
||||||
|
const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT' |
||||||
|
const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE' |
||||||
|
const SET_CUSTOM_GAS_TOTAL = 'metamask/gas/SET_CUSTOM_GAS_TOTAL' |
||||||
|
const SET_PRICE_AND_TIME_ESTIMATES = 'metamask/gas/SET_PRICE_AND_TIME_ESTIMATES' |
||||||
|
const SET_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_API_ESTIMATES_LAST_RETRIEVED' |
||||||
|
const SET_BASIC_API_ESTIMATES_LAST_RETRIEVED = 'metamask/gas/SET_BASIC_API_ESTIMATES_LAST_RETRIEVED' |
||||||
|
|
||||||
|
describe('GasReducer()', () => { |
||||||
|
it('should initialize state', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer({}), |
||||||
|
initState |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should return state unchanged if it does not match a dispatched actions type', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: 'someOtherAction', |
||||||
|
value: 'someValue', |
||||||
|
}), |
||||||
|
Object.assign({}, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set basicEstimateIsLoading to true when receiving a BASIC_GAS_ESTIMATE_LOADING_STARTED action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: BASIC_GAS_ESTIMATE_LOADING_STARTED, |
||||||
|
}), |
||||||
|
Object.assign({basicEstimateIsLoading: true}, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set basicEstimateIsLoading to false when receiving a BASIC_GAS_ESTIMATE_LOADING_FINISHED action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: BASIC_GAS_ESTIMATE_LOADING_FINISHED, |
||||||
|
}), |
||||||
|
Object.assign({basicEstimateIsLoading: false}, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set gasEstimatesLoading to true when receiving a GAS_ESTIMATE_LOADING_STARTED action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: GAS_ESTIMATE_LOADING_STARTED, |
||||||
|
}), |
||||||
|
Object.assign({gasEstimatesLoading: true}, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set gasEstimatesLoading to false when receiving a GAS_ESTIMATE_LOADING_FINISHED action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: GAS_ESTIMATE_LOADING_FINISHED, |
||||||
|
}), |
||||||
|
Object.assign({gasEstimatesLoading: false}, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should return a new object (and not just modify the existing state object)', () => { |
||||||
|
assert.deepEqual(GasReducer(mockState), mockState.gas) |
||||||
|
assert.notEqual(GasReducer(mockState), mockState.gas) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set basicEstimates when receiving a SET_BASIC_GAS_ESTIMATE_DATA action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_BASIC_GAS_ESTIMATE_DATA, |
||||||
|
value: { someProp: 'someData123' }, |
||||||
|
}), |
||||||
|
Object.assign({basicEstimates: {someProp: 'someData123'} }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set priceAndTimeEstimates when receiving a SET_PRICE_AND_TIME_ESTIMATES action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_PRICE_AND_TIME_ESTIMATES, |
||||||
|
value: { someProp: 'someData123' }, |
||||||
|
}), |
||||||
|
Object.assign({priceAndTimeEstimates: {someProp: 'someData123'} }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set customData.price when receiving a SET_CUSTOM_GAS_PRICE action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_CUSTOM_GAS_PRICE, |
||||||
|
value: 4321, |
||||||
|
}), |
||||||
|
Object.assign({customData: {price: 4321} }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set customData.limit when receiving a SET_CUSTOM_GAS_LIMIT action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_CUSTOM_GAS_LIMIT, |
||||||
|
value: 9876, |
||||||
|
}), |
||||||
|
Object.assign({customData: {limit: 9876} }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set customData.total when receiving a SET_CUSTOM_GAS_TOTAL action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_CUSTOM_GAS_TOTAL, |
||||||
|
value: 10000, |
||||||
|
}), |
||||||
|
Object.assign({customData: {total: 10000} }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set priceAndTimeEstimatesLastRetrieved when receiving a SET_API_ESTIMATES_LAST_RETRIEVED action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_API_ESTIMATES_LAST_RETRIEVED, |
||||||
|
value: 1500000000000, |
||||||
|
}), |
||||||
|
Object.assign({ priceAndTimeEstimatesLastRetrieved: 1500000000000 }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set priceAndTimeEstimatesLastRetrieved when receiving a SET_BASIC_API_ESTIMATES_LAST_RETRIEVED action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED, |
||||||
|
value: 1700000000000, |
||||||
|
}), |
||||||
|
Object.assign({ basicPriceAndTimeEstimatesLastRetrieved: 1700000000000 }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should set errors when receiving a SET_CUSTOM_GAS_ERRORS action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: SET_CUSTOM_GAS_ERRORS, |
||||||
|
value: { someError: 'error_error' }, |
||||||
|
}), |
||||||
|
Object.assign({errors: {someError: 'error_error'} }, mockState.gas) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should return the initial state in response to a RESET_CUSTOM_GAS_STATE action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
GasReducer(mockState, { |
||||||
|
type: RESET_CUSTOM_GAS_STATE, |
||||||
|
}), |
||||||
|
Object.assign({}, initState) |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('basicGasEstimatesLoadingStarted', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
basicGasEstimatesLoadingStarted(), |
||||||
|
{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('basicGasEstimatesLoadingFinished', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
basicGasEstimatesLoadingFinished(), |
||||||
|
{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('fetchBasicGasAndTimeEstimates', () => { |
||||||
|
const mockDistpatch = sinon.spy() |
||||||
|
it('should call fetch with the expected params', async () => { |
||||||
|
await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign( |
||||||
|
{}, |
||||||
|
initState, |
||||||
|
{ basicPriceAndTimeEstimatesLastRetrieved: 1000000 } |
||||||
|
) })) |
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(0).args, |
||||||
|
[{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ] |
||||||
|
) |
||||||
|
assert.deepEqual( |
||||||
|
global.fetch.getCall(0).args, |
||||||
|
[ |
||||||
|
'https://ethgasstation.info/json/ethgasAPI.json', |
||||||
|
{ |
||||||
|
'headers': {}, |
||||||
|
'referrer': 'http://ethgasstation.info/json/', |
||||||
|
'referrerPolicy': 'no-referrer-when-downgrade', |
||||||
|
'body': null, |
||||||
|
'method': 'GET', |
||||||
|
'mode': 'cors', |
||||||
|
}, |
||||||
|
] |
||||||
|
) |
||||||
|
|
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(1).args, |
||||||
|
[{ type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ] |
||||||
|
) |
||||||
|
|
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(2).args, |
||||||
|
[{ |
||||||
|
type: SET_BASIC_GAS_ESTIMATE_DATA, |
||||||
|
value: { |
||||||
|
average: 2, |
||||||
|
avgWait: 'mockAvgWait', |
||||||
|
blockTime: 'mockBlock_time', |
||||||
|
blockNum: 'mockBlockNum', |
||||||
|
fast: 3, |
||||||
|
fastest: 4, |
||||||
|
fastestWait: 'mockFastestWait', |
||||||
|
fastWait: 'mockFastWait', |
||||||
|
safeLow: 1, |
||||||
|
safeLowWait: 'mockSafeLowWait', |
||||||
|
speed: 'mockSpeed', |
||||||
|
}, |
||||||
|
}] |
||||||
|
) |
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(3).args, |
||||||
|
[{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }] |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('fetchGasEstimates', () => { |
||||||
|
const mockDistpatch = sinon.spy() |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
mockDistpatch.resetHistory() |
||||||
|
}) |
||||||
|
|
||||||
|
it('should call fetch with the expected params', async () => { |
||||||
|
global.fetch.resetHistory() |
||||||
|
await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign( |
||||||
|
{}, |
||||||
|
initState, |
||||||
|
{ priceAndTimeEstimatesLastRetrieved: 1000000 } |
||||||
|
) })) |
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(0).args, |
||||||
|
[{ type: GAS_ESTIMATE_LOADING_STARTED} ] |
||||||
|
) |
||||||
|
assert.deepEqual( |
||||||
|
global.fetch.getCall(0).args, |
||||||
|
[ |
||||||
|
'https://ethgasstation.info/json/predictTable.json', |
||||||
|
{ |
||||||
|
'headers': {}, |
||||||
|
'referrer': 'http://ethgasstation.info/json/', |
||||||
|
'referrerPolicy': 'no-referrer-when-downgrade', |
||||||
|
'body': null, |
||||||
|
'method': 'GET', |
||||||
|
'mode': 'cors', |
||||||
|
}, |
||||||
|
] |
||||||
|
) |
||||||
|
|
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(1).args, |
||||||
|
[{ type: SET_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 }] |
||||||
|
) |
||||||
|
|
||||||
|
const { type: thirdDispatchCallType, value: priceAndTimeEstimateResult } = mockDistpatch.getCall(2).args[0] |
||||||
|
assert.equal(thirdDispatchCallType, SET_PRICE_AND_TIME_ESTIMATES) |
||||||
|
assert(priceAndTimeEstimateResult.length < mockPredictTableResponse.length * 3 - 2) |
||||||
|
assert(!priceAndTimeEstimateResult.find(d => d.expectedTime > 100)) |
||||||
|
assert(!priceAndTimeEstimateResult.find((d, i, a) => a[a + 1] && d.expectedTime > a[a + 1].expectedTime)) |
||||||
|
assert(!priceAndTimeEstimateResult.find((d, i, a) => a[a + 1] && d.gasprice > a[a + 1].gasprice)) |
||||||
|
|
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(3).args, |
||||||
|
[{ type: GAS_ESTIMATE_LOADING_FINISHED }] |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
it('should not call fetch if the estimates were retrieved < 75000 ms ago', async () => { |
||||||
|
global.fetch.resetHistory() |
||||||
|
await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign( |
||||||
|
{}, |
||||||
|
initState, |
||||||
|
{ |
||||||
|
priceAndTimeEstimatesLastRetrieved: Date.now(), |
||||||
|
priceAndTimeEstimates: [{ |
||||||
|
expectedTime: '10', |
||||||
|
expectedWait: 2, |
||||||
|
gasprice: 50, |
||||||
|
}], |
||||||
|
} |
||||||
|
) })) |
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(0).args, |
||||||
|
[{ type: GAS_ESTIMATE_LOADING_STARTED} ] |
||||||
|
) |
||||||
|
assert.equal(global.fetch.callCount, 0) |
||||||
|
|
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(1).args, |
||||||
|
[{ |
||||||
|
type: SET_PRICE_AND_TIME_ESTIMATES, |
||||||
|
value: [ |
||||||
|
{ |
||||||
|
expectedTime: '10', |
||||||
|
expectedWait: 2, |
||||||
|
gasprice: 50, |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
}] |
||||||
|
) |
||||||
|
assert.deepEqual( |
||||||
|
mockDistpatch.getCall(2).args, |
||||||
|
[{ type: GAS_ESTIMATE_LOADING_FINISHED }] |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('gasEstimatesLoadingStarted', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
gasEstimatesLoadingStarted(), |
||||||
|
{ type: GAS_ESTIMATE_LOADING_STARTED } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('gasEstimatesLoadingFinished', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
gasEstimatesLoadingFinished(), |
||||||
|
{ type: GAS_ESTIMATE_LOADING_FINISHED } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('setPricesAndTimeEstimates', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
setPricesAndTimeEstimates('mockPricesAndTimeEstimates'), |
||||||
|
{ type: SET_PRICE_AND_TIME_ESTIMATES, value: 'mockPricesAndTimeEstimates' } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('setBasicGasEstimateData', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
setBasicGasEstimateData('mockBasicEstimatData'), |
||||||
|
{ type: SET_BASIC_GAS_ESTIMATE_DATA, value: 'mockBasicEstimatData' } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('setCustomGasPrice', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
setCustomGasPrice('mockCustomGasPrice'), |
||||||
|
{ type: SET_CUSTOM_GAS_PRICE, value: 'mockCustomGasPrice' } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('setCustomGasLimit', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
setCustomGasLimit('mockCustomGasLimit'), |
||||||
|
{ type: SET_CUSTOM_GAS_LIMIT, value: 'mockCustomGasLimit' } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('setCustomGasTotal', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
setCustomGasTotal('mockCustomGasTotal'), |
||||||
|
{ type: SET_CUSTOM_GAS_TOTAL, value: 'mockCustomGasTotal' } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('setCustomGasErrors', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
setCustomGasErrors('mockErrorObject'), |
||||||
|
{ type: SET_CUSTOM_GAS_ERRORS, value: 'mockErrorObject' } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('setApiEstimatesLastRetrieved', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
setApiEstimatesLastRetrieved(1234), |
||||||
|
{ type: SET_API_ESTIMATES_LAST_RETRIEVED, value: 1234 } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('resetCustomGasState', () => { |
||||||
|
it('should create the correct action', () => { |
||||||
|
assert.deepEqual( |
||||||
|
resetCustomGasState(), |
||||||
|
{ type: RESET_CUSTOM_GAS_STATE } |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export function formatETHFee (ethFee) { |
||||||
|
return ethFee + ' ETH' |
||||||
|
} |
||||||
@ -0,0 +1,270 @@ |
|||||||
|
import { pipe, partialRight } from 'ramda' |
||||||
|
import { |
||||||
|
conversionUtil, |
||||||
|
multiplyCurrencies, |
||||||
|
} from '../conversion-util' |
||||||
|
import { |
||||||
|
getCurrentCurrency, |
||||||
|
} from '../selectors' |
||||||
|
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' |
||||||
|
import { addHexPrefix } from 'ethereumjs-util' |
||||||
|
|
||||||
|
const selectors = { |
||||||
|
formatTimeEstimate, |
||||||
|
getAveragePriceEstimateInHexWEI, |
||||||
|
getFastPriceEstimateInHexWEI, |
||||||
|
getBasicGasEstimateLoadingStatus, |
||||||
|
getBasicGasEstimateBlockTime, |
||||||
|
getCustomGasErrors, |
||||||
|
getCustomGasLimit, |
||||||
|
getCustomGasPrice, |
||||||
|
getCustomGasTotal, |
||||||
|
getDefaultActiveButtonIndex, |
||||||
|
getEstimatedGasPrices, |
||||||
|
getEstimatedGasTimes, |
||||||
|
getGasEstimatesLoadingStatus, |
||||||
|
getPriceAndTimeEstimates, |
||||||
|
getRenderableBasicEstimateData, |
||||||
|
getRenderableEstimateDataForSmallButtonsFromGWEI, |
||||||
|
priceEstimateToWei, |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = selectors |
||||||
|
|
||||||
|
const NUMBER_OF_DECIMALS_SM_BTNS = 5 |
||||||
|
|
||||||
|
function getCustomGasErrors (state) { |
||||||
|
return state.gas.errors |
||||||
|
} |
||||||
|
|
||||||
|
function getCustomGasLimit (state) { |
||||||
|
return state.gas.customData.limit |
||||||
|
} |
||||||
|
|
||||||
|
function getCustomGasPrice (state) { |
||||||
|
return state.gas.customData.price |
||||||
|
} |
||||||
|
|
||||||
|
function getCustomGasTotal (state) { |
||||||
|
return state.gas.customData.total |
||||||
|
} |
||||||
|
|
||||||
|
function getBasicGasEstimateLoadingStatus (state) { |
||||||
|
return state.gas.basicEstimateIsLoading |
||||||
|
} |
||||||
|
|
||||||
|
function getGasEstimatesLoadingStatus (state) { |
||||||
|
return state.gas.gasEstimatesLoading |
||||||
|
} |
||||||
|
|
||||||
|
function getPriceAndTimeEstimates (state) { |
||||||
|
return state.gas.priceAndTimeEstimates |
||||||
|
} |
||||||
|
|
||||||
|
function getEstimatedGasPrices (state) { |
||||||
|
return getPriceAndTimeEstimates(state).map(({ gasprice }) => gasprice) |
||||||
|
} |
||||||
|
|
||||||
|
function getEstimatedGasTimes (state) { |
||||||
|
return getPriceAndTimeEstimates(state).map(({ expectedTime }) => expectedTime) |
||||||
|
} |
||||||
|
|
||||||
|
function getAveragePriceEstimateInHexWEI (state) { |
||||||
|
const averagePriceEstimate = state.gas.basicEstimates.average |
||||||
|
return getGasPriceInHexWei(averagePriceEstimate || '0x0') |
||||||
|
} |
||||||
|
|
||||||
|
function getFastPriceEstimateInHexWEI (state) { |
||||||
|
const fastPriceEstimate = state.gas.basicEstimates.fast |
||||||
|
return getGasPriceInHexWei(fastPriceEstimate || '0x0') |
||||||
|
} |
||||||
|
|
||||||
|
function getDefaultActiveButtonIndex (gasButtonInfo, customGasPriceInHex, gasPrice) { |
||||||
|
return gasButtonInfo.findIndex(({ priceInHexWei }) => { |
||||||
|
return priceInHexWei === addHexPrefix(customGasPriceInHex || gasPrice) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function getBasicGasEstimateBlockTime (state) { |
||||||
|
return state.gas.basicEstimates.blockTime |
||||||
|
} |
||||||
|
|
||||||
|
function basicPriceEstimateToETHTotal (estimate, gasLimit, numberOfDecimals = 9) { |
||||||
|
return conversionUtil(calcGasTotal(gasLimit, estimate), { |
||||||
|
fromNumericBase: 'hex', |
||||||
|
toNumericBase: 'dec', |
||||||
|
fromDenomination: 'GWEI', |
||||||
|
numberOfDecimals, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function getRenderableEthFee (estimate, gasLimit, numberOfDecimals = 9) { |
||||||
|
return pipe( |
||||||
|
x => conversionUtil(x, { fromNumericBase: 'dec', toNumericBase: 'hex' }), |
||||||
|
partialRight(basicPriceEstimateToETHTotal, [gasLimit, numberOfDecimals]), |
||||||
|
formatETHFee |
||||||
|
)(estimate, gasLimit) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function getRenderableConvertedCurrencyFee (estimate, gasLimit, convertedCurrency, conversionRate) { |
||||||
|
return pipe( |
||||||
|
x => conversionUtil(x, { fromNumericBase: 'dec', toNumericBase: 'hex' }), |
||||||
|
partialRight(basicPriceEstimateToETHTotal, [gasLimit]), |
||||||
|
partialRight(ethTotalToConvertedCurrency, [convertedCurrency, conversionRate]), |
||||||
|
partialRight(formatCurrency, [convertedCurrency]) |
||||||
|
)(estimate, gasLimit, convertedCurrency, conversionRate) |
||||||
|
} |
||||||
|
|
||||||
|
function getTimeEstimateInSeconds (blockWaitEstimate) { |
||||||
|
return multiplyCurrencies(blockWaitEstimate, 60, { |
||||||
|
toNumericBase: 'dec', |
||||||
|
multiplicandBase: 10, |
||||||
|
multiplierBase: 10, |
||||||
|
numberOfDecimals: 1, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function formatTimeEstimate (totalSeconds, greaterThanMax, lessThanMin) { |
||||||
|
const minutes = Math.floor(totalSeconds / 60) |
||||||
|
const seconds = Math.floor(totalSeconds % 60) |
||||||
|
|
||||||
|
if (!minutes && !seconds) { |
||||||
|
return '...' |
||||||
|
} |
||||||
|
|
||||||
|
let symbol = '~' |
||||||
|
if (greaterThanMax) { |
||||||
|
symbol = '< ' |
||||||
|
} else if (lessThanMin) { |
||||||
|
symbol = '> ' |
||||||
|
} |
||||||
|
|
||||||
|
const formattedMin = `${minutes ? minutes + ' min' : ''}` |
||||||
|
const formattedSec = `${seconds ? seconds + ' sec' : ''}` |
||||||
|
const formattedCombined = formattedMin && formattedSec |
||||||
|
? `${symbol}${formattedMin} ${formattedSec}` |
||||||
|
: symbol + [formattedMin, formattedSec].find(t => t) |
||||||
|
|
||||||
|
return formattedCombined |
||||||
|
} |
||||||
|
|
||||||
|
function getRenderableTimeEstimate (blockWaitEstimate) { |
||||||
|
return pipe( |
||||||
|
getTimeEstimateInSeconds, |
||||||
|
formatTimeEstimate |
||||||
|
)(blockWaitEstimate) |
||||||
|
} |
||||||
|
|
||||||
|
function priceEstimateToWei (priceEstimate) { |
||||||
|
return conversionUtil(priceEstimate, { |
||||||
|
fromNumericBase: 'hex', |
||||||
|
toNumericBase: 'hex', |
||||||
|
fromDenomination: 'GWEI', |
||||||
|
toDenomination: 'WEI', |
||||||
|
numberOfDecimals: 9, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function getGasPriceInHexWei (price) { |
||||||
|
return pipe( |
||||||
|
x => conversionUtil(x, { fromNumericBase: 'dec', toNumericBase: 'hex' }), |
||||||
|
priceEstimateToWei, |
||||||
|
addHexPrefix |
||||||
|
)(price) |
||||||
|
} |
||||||
|
|
||||||
|
function getRenderableBasicEstimateData (state) { |
||||||
|
if (getBasicGasEstimateLoadingStatus(state)) { |
||||||
|
return [] |
||||||
|
} |
||||||
|
const gasLimit = state.metamask.send.gasLimit || getCustomGasLimit(state) |
||||||
|
const conversionRate = state.metamask.conversionRate |
||||||
|
const currentCurrency = getCurrentCurrency(state) |
||||||
|
const { |
||||||
|
gas: { |
||||||
|
basicEstimates: { |
||||||
|
safeLow, |
||||||
|
fast, |
||||||
|
fastest, |
||||||
|
safeLowWait, |
||||||
|
fastestWait, |
||||||
|
fastWait, |
||||||
|
}, |
||||||
|
}, |
||||||
|
} = state |
||||||
|
|
||||||
|
return [ |
||||||
|
{ |
||||||
|
labelKey: 'fastest', |
||||||
|
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(fastest, gasLimit, currentCurrency, conversionRate), |
||||||
|
feeInSecondaryCurrency: getRenderableEthFee(fastest, gasLimit), |
||||||
|
timeEstimate: fastestWait && getRenderableTimeEstimate(fastestWait), |
||||||
|
priceInHexWei: getGasPriceInHexWei(fastest), |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'fast', |
||||||
|
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate), |
||||||
|
feeInSecondaryCurrency: getRenderableEthFee(fast, gasLimit), |
||||||
|
timeEstimate: fastWait && getRenderableTimeEstimate(fastWait), |
||||||
|
priceInHexWei: getGasPriceInHexWei(fast), |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'slow', |
||||||
|
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate), |
||||||
|
feeInSecondaryCurrency: getRenderableEthFee(safeLow, gasLimit), |
||||||
|
timeEstimate: safeLowWait && getRenderableTimeEstimate(safeLowWait), |
||||||
|
priceInHexWei: getGasPriceInHexWei(safeLow), |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
function getRenderableEstimateDataForSmallButtonsFromGWEI (state) { |
||||||
|
if (getBasicGasEstimateLoadingStatus(state)) { |
||||||
|
return [] |
||||||
|
} |
||||||
|
const gasLimit = state.metamask.send.gasLimit || getCustomGasLimit(state) |
||||||
|
const conversionRate = state.metamask.conversionRate |
||||||
|
const currentCurrency = getCurrentCurrency(state) |
||||||
|
const { |
||||||
|
gas: { |
||||||
|
basicEstimates: { |
||||||
|
safeLow, |
||||||
|
fast, |
||||||
|
fastest, |
||||||
|
}, |
||||||
|
}, |
||||||
|
} = state |
||||||
|
|
||||||
|
return [ |
||||||
|
{ |
||||||
|
labelKey: 'fastest', |
||||||
|
feeInSecondaryCurrency: getRenderableConvertedCurrencyFee(fastest, gasLimit, currentCurrency, conversionRate), |
||||||
|
feeInPrimaryCurrency: getRenderableEthFee(fastest, gasLimit, NUMBER_OF_DECIMALS_SM_BTNS, true), |
||||||
|
priceInHexWei: getGasPriceInHexWei(fastest, true), |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'fast', |
||||||
|
feeInSecondaryCurrency: getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate), |
||||||
|
feeInPrimaryCurrency: getRenderableEthFee(fast, gasLimit, NUMBER_OF_DECIMALS_SM_BTNS, true), |
||||||
|
priceInHexWei: getGasPriceInHexWei(fast, true), |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'slow', |
||||||
|
feeInSecondaryCurrency: getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate), |
||||||
|
feeInPrimaryCurrency: getRenderableEthFee(safeLow, gasLimit, NUMBER_OF_DECIMALS_SM_BTNS, true), |
||||||
|
priceInHexWei: getGasPriceInHexWei(safeLow, true), |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue