Clean up for mmui-i11-custom-gas-price-chart branch

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)
 }

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',

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,

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
 }