diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js index 64b94e66c..426f940d1 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js @@ -51,6 +51,7 @@ import { calcGasTotal, } from '../../send/send.utils' import { addHexPrefix } from 'ethereumjs-util' +import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils' const mapStateToProps = state => { const buttonDataLoading = getBasicGasEstimateLoadingStatus(state) @@ -83,7 +84,7 @@ const mapStateToProps = state => { customGasPrice, customGasLimit: calcCustomGasLimit(customModalGasLimitInHex), newTotalFiat, - currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, getPriceAndTimeEstimates(state)), + currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes), gasPriceButtonGroupProps: { buttonDataLoading, defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex), @@ -93,7 +94,7 @@ const mapStateToProps = state => { currentPrice: customGasPrice, gasPrices, estimatedTimes, - gasPricesMax: gasPrices[gasPrices.length - 1] + 1, + gasPricesMax: gasPrices[gasPrices.length - 1], estimatedTimesMax: estimatedTimes[0], }, infoRowProps: { @@ -173,7 +174,6 @@ function calcCustomGasLimit (customGasLimitInHex) { function getTxParams (state) { const { confirmTransaction: { txData }, metamask: { send } } = state - console.log('txData', txData) return txData.txParams || { from: send.from, gas: send.gasLimit, @@ -198,24 +198,21 @@ function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conver )(aHexWEI, bHexWEI) } -function getRenderableTimeEstimate (currentGasPrice, priceAndTimeEstimates) { - const gasPrices = priceAndTimeEstimates.map(({ gasprice }) => gasprice) - const estimatedTimes = priceAndTimeEstimates.map(({ expectedTime }) => expectedTime) - - const closestLowerValueIndex = gasPrices.findIndex((e, i, a) => { - return e <= currentGasPrice && a[i + 1] >= currentGasPrice - }) - const closestHigherValueIndex = gasPrices.findIndex((e, i, a) => { - return e > currentGasPrice +function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) { + const { + closestLowerValueIndex, + closestHigherValueIndex, + closestHigherValue, + closestLowerValue, + } = getAdjacentGasPrices({ gasPrices, priceToPosition: currentGasPrice }) + + const newTimeEstimate = extrapolateY({ + higherY: estimatedTimes[closestHigherValueIndex], + lowerY: estimatedTimes[closestLowerValueIndex], + higherX: closestHigherValue, + lowerX: closestLowerValue, + xForExtrapolation: currentGasPrice, }) - const closestLowerValue = gasPrices[closestLowerValueIndex] - const closestHigherValue = gasPrices[closestHigherValueIndex] - const estimatedClosestLowerTimeEstimate = estimatedTimes[closestLowerValueIndex] - const estimatedClosestHigherTimeEstimate = estimatedTimes[closestHigherValueIndex] - - const slope = (estimatedClosestHigherTimeEstimate - estimatedClosestLowerTimeEstimate) / (closestHigherValue - closestLowerValue) - const newTimeEstimate = -1 * (slope * (closestHigherValue - currentGasPrice) - estimatedClosestHigherTimeEstimate) - return formatTimeEstimate(newTimeEstimate) } diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js index 2170c242d..54fbfb66c 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js @@ -107,7 +107,7 @@ describe('gas-modal-page-container container', () => { estimatedTimes: ['31', '62', '93', '124'], estimatedTimesMax: '31', gasPrices: [3, 4, 5, 6], - gasPricesMax: 7, + gasPricesMax: 6, }, gasPriceButtonGroupProps: { buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4', diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js index ffd8056b0..67508703f 100644 --- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js +++ b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js @@ -133,8 +133,8 @@ export function setTickPosition (axis, n, newPosition, secondNewPosition) { 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) + .select('.c3-selected-circles' + this.getTargetSelectorSuffix(data.id)) + .selectAll(`.c3-selected-circle-${itemIndex}`) if (appendOnly || circle.empty()) { circle.data([data]) @@ -175,6 +175,7 @@ export function setSelectedCircle ({ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) { + const gasPricesMaxPadded = gasPricesMax + 1 const chart = c3.generate({ size: { height: 165, @@ -202,13 +203,13 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate axis: { x: { min: gasPrices[0], - max: gasPricesMax, + max: gasPricesMaxPadded, tick: { - values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMax)], + values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMaxPadded)], outer: false, format: function (val) { return val + ' GWEI' }, }, - padding: {left: gasPricesMax / 50, right: gasPricesMax / 50}, + padding: {left: gasPricesMaxPadded / 50, right: gasPricesMaxPadded / 50}, label: { text: 'Gas Price ($)', position: 'outer-center', @@ -275,7 +276,7 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate return { top: circleY - chartYStart - 19 + (flipTooltip ? circleWidth + 38 : 0), - left: circleX - chartXStart + circleWidth - (gasPricesMax / 50), + left: circleX - chartXStart + circleWidth - (gasPricesMaxPadded / 50), } }, show: true, diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss index 4c4640b1f..0990d6abb 100644 --- a/ui/app/components/gas-customization/gas-price-chart/index.scss +++ b/ui/app/components/gas-customization/gas-price-chart/index.scss @@ -37,15 +37,11 @@ .tooltip-arrow { background: black; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); - /* top: 15px; */ - /* left: 27px; */ -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 1 !important; width: 9px; height: 9px; - /* position: absolute; */ - /* display: inline-block; */ margin-top: 4px; } @@ -126,8 +122,6 @@ } } -@import url(//fonts.googleapis.com/css?family=Roboto:400,700,300); - #chart { background: #F8F9FB }