m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
Dan Miller 2018-10-24 22:23:12 -02:30
parent d14af8346a
commit 3ced3c9b2a
4 changed files with 24 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
View File

@ -51,6 +51,7 @@ import {
calcGasTotal, calcGasTotal,
} from '../../send/send.utils' } from '../../send/send.utils'
import { addHexPrefix } from 'ethereumjs-util' import { addHexPrefix } from 'ethereumjs-util'
import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
const mapStateToProps = state => { const mapStateToProps = state => {
const buttonDataLoading = getBasicGasEstimateLoadingStatus(state) const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
@ -83,7 +84,7 @@ const mapStateToProps = state => {
customGasPrice, customGasPrice,
customGasLimit: calcCustomGasLimit(customModalGasLimitInHex), customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
newTotalFiat, newTotalFiat,
currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, getPriceAndTimeEstimates(state)), currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, gasPrices, estimatedTimes),
gasPriceButtonGroupProps: { gasPriceButtonGroupProps: {
buttonDataLoading, buttonDataLoading,
defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex), defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex),
@ -93,7 +94,7 @@ const mapStateToProps = state => {
currentPrice: customGasPrice, currentPrice: customGasPrice,
gasPrices, gasPrices,
estimatedTimes, estimatedTimes,
gasPricesMax: gasPrices[gasPrices.length - 1] + 1, gasPricesMax: gasPrices[gasPrices.length - 1],
estimatedTimesMax: estimatedTimes[0], estimatedTimesMax: estimatedTimes[0],
}, },
infoRowProps: { infoRowProps: {
@ -173,7 +174,6 @@ function calcCustomGasLimit (customGasLimitInHex) {
function getTxParams (state) { function getTxParams (state) {
const { confirmTransaction: { txData }, metamask: { send } } = state const { confirmTransaction: { txData }, metamask: { send } } = state
console.log('txData', txData)
return txData.txParams || { return txData.txParams || {
from: send.from, from: send.from,
gas: send.gasLimit, gas: send.gasLimit,
@ -198,24 +198,21 @@ function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conver
)(aHexWEI, bHexWEI) )(aHexWEI, bHexWEI)
} }
function getRenderableTimeEstimate (currentGasPrice, priceAndTimeEstimates) { function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) {
const gasPrices = priceAndTimeEstimates.map(({ gasprice }) => gasprice) const {
const estimatedTimes = priceAndTimeEstimates.map(({ expectedTime }) => expectedTime) closestLowerValueIndex,
closestHigherValueIndex,
closestHigherValue,
closestLowerValue,
} = getAdjacentGasPrices({ gasPrices, priceToPosition: currentGasPrice })
const closestLowerValueIndex = gasPrices.findIndex((e, i, a) => { const newTimeEstimate = extrapolateY({
return e <= currentGasPrice && a[i + 1] >= currentGasPrice higherY: estimatedTimes[closestHigherValueIndex],
lowerY: estimatedTimes[closestLowerValueIndex],
higherX: closestHigherValue,
lowerX: closestLowerValue,
xForExtrapolation: currentGasPrice,
}) })
const closestHigherValueIndex = gasPrices.findIndex((e, i, a) => {
return e > 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) return formatTimeEstimate(newTimeEstimate)
} }

2
ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
View File

@ -107,7 +107,7 @@ describe('gas-modal-page-container container', () => {
estimatedTimes: ['31', '62', '93', '124'], estimatedTimes: ['31', '62', '93', '124'],
estimatedTimesMax: '31', estimatedTimesMax: '31',
gasPrices: [3, 4, 5, 6], gasPrices: [3, 4, 5, 6],
gasPricesMax: 7, gasPricesMax: 6,
}, },
gasPriceButtonGroupProps: { gasPriceButtonGroupProps: {
buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4', buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4',

13
ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
View File

@ -133,8 +133,8 @@ export function setTickPosition (axis, n, newPosition, secondNewPosition) {
export function appendOrUpdateCircle ({ data, itemIndex, cx, cy, cssId, appendOnly }) { export function appendOrUpdateCircle ({ data, itemIndex, cx, cy, cssId, appendOnly }) {
const circle = this.main const circle = this.main
.select('.' + 'c3-selected-circles' + this.getTargetSelectorSuffix(data.id)) .select('.c3-selected-circles' + this.getTargetSelectorSuffix(data.id))
.selectAll('.' + 'c3-selected-circle' + '-' + itemIndex) .selectAll(`.c3-selected-circle-${itemIndex}`)
if (appendOnly || circle.empty()) { if (appendOnly || circle.empty()) {
circle.data([data]) circle.data([data])
@ -175,6 +175,7 @@ export function setSelectedCircle ({
export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) { export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) {
const gasPricesMaxPadded = gasPricesMax + 1
const chart = c3.generate({ const chart = c3.generate({
size: { size: {
height: 165, height: 165,
@ -202,13 +203,13 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate
axis: { axis: {
x: { x: {
min: gasPrices[0], min: gasPrices[0],
max: gasPricesMax, max: gasPricesMaxPadded,
tick: { tick: {
values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMax)], values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMaxPadded)],
outer: false, outer: false,
format: function (val) { return val + ' GWEI' }, format: function (val) { return val + ' GWEI' },
}, },
padding: {left: gasPricesMax / 50, right: gasPricesMax / 50}, padding: {left: gasPricesMaxPadded / 50, right: gasPricesMaxPadded / 50},
label: { label: {
text: 'Gas Price ($)', text: 'Gas Price ($)',
position: 'outer-center', position: 'outer-center',
@ -275,7 +276,7 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate
return { return {
top: circleY - chartYStart - 19 + (flipTooltip ? circleWidth + 38 : 0), top: circleY - chartYStart - 19 + (flipTooltip ? circleWidth + 38 : 0),
left: circleX - chartXStart + circleWidth - (gasPricesMax / 50), left: circleX - chartXStart + circleWidth - (gasPricesMaxPadded / 50),
} }
}, },
show: true, show: true,

6
ui/app/components/gas-customization/gas-price-chart/index.scss
View File

@ -37,15 +37,11 @@
.tooltip-arrow { .tooltip-arrow {
background: black; background: black;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
/* top: 15px; */
/* left: 27px; */
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
opacity: 1 !important; opacity: 1 !important;
width: 9px; width: 9px;
height: 9px; height: 9px;
/* position: absolute; */
/* display: inline-block; */
margin-top: 4px; margin-top: 4px;
} }
@ -126,8 +122,6 @@
} }
} }
@import url(//fonts.googleapis.com/css?family=Roboto:400,700,300);
#chart { #chart {
background: #F8F9FB background: #F8F9FB
} }