mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Adds not yet functional gas price chart.
This commit is contained in:
Dan Miller
parent
6dd1028c71
commit
0ba6f7d9bb
@ -98,11 +98,13 @@
|
||||
"browser-passworder": "^2.0.3",
|
||||
"browserify-derequire": "^0.9.4",
|
||||
"browserify-unibabel": "^3.0.0",
|
||||
"c3": "^0.6.7",
|
||||
"classnames": "^2.2.5",
|
||||
"clone": "^2.1.2",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"css-loader": "^0.28.11",
|
||||
"currency-formatter": "^1.4.2",
|
||||
"d3": "^5.7.0",
|
||||
"debounce": "1.1.0",
|
||||
"debounce-stream": "^2.0.0",
|
||||
"deep-extend": "^0.5.1",
|
||||
|
||||
@ -3,3 +3,5 @@ require('babel-register')({
|
||||
})
|
||||
|
||||
require('./helper')
|
||||
|
||||
window.SVGPathElement = window.SVGPathElement || { prototype: {} }
|
||||
|
||||
@ -94,7 +94,12 @@ export default class AdvancedTabContent extends Component {
|
||||
customGasLimit,
|
||||
updateCustomGasLimit
|
||||
) }
|
||||
<div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
|
||||
<GasPriceChart />
|
||||
<div className="advanced-tab__fee-chart__speed-buttons">
|
||||
<span>Slower</span>
|
||||
<span>Faster</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -38,19 +38,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__fee-chart-title {
|
||||
font-size: 14px;
|
||||
color: $scorpion;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
&__fee-chart {
|
||||
padding-left: 10px;
|
||||
margin-top: 8px;
|
||||
height: 258px;
|
||||
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;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
&__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 {
|
||||
@ -59,11 +72,11 @@
|
||||
}
|
||||
|
||||
&__gas-edit-rows {
|
||||
height: 87px;
|
||||
height: 73px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
@ -54,7 +54,9 @@ describe('AdvancedTabContent Component', function () {
|
||||
const feeChartDiv = advancedTabChildren.at(1)
|
||||
|
||||
assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
|
||||
assert(feeChartDiv.childAt(1).is(GasPriceChart))
|
||||
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 call renderDataSummary with the expected params', () => {
|
||||
|
||||
@ -154,7 +154,7 @@ 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,
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
|
||||
.gas-modal-page-container {
|
||||
.page-container {
|
||||
width: 391px;
|
||||
max-width: 391px;
|
||||
min-height: 585px;
|
||||
|
||||
&__header {
|
||||
padding: 0px;
|
||||
|
||||
@ -1,15 +1,162 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import * as d3 from 'd3'
|
||||
import c3 from 'c3'
|
||||
|
||||
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 default class GasPriceChart extends Component {
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
}
|
||||
|
||||
renderChart () {
|
||||
c3.generate({
|
||||
size: {
|
||||
height: 154,
|
||||
},
|
||||
padding: {left: 36, right: 25, top: -5, bottom: 5},
|
||||
data: {
|
||||
x: 'x',
|
||||
columns: [
|
||||
['x', 0, 0.01, 0.02, 0.03, 0.05, 0.07, 0.11, 0.15, 0.29, 0.35, 0.5, 0.55, 0.60, 0.63, 0.77, 0.88, 0.92, 0.93, 0.98, 0.99],
|
||||
['data1', 100, 66, 55, 50, 45, 25, 22, 20.1, 20, 19.9, 15, 12, 10, 9.9, 8.0, 4.0, 3, 1, 0.5, 0.2],
|
||||
],
|
||||
types: {
|
||||
data1: 'area',
|
||||
},
|
||||
},
|
||||
color: {
|
||||
data1: '#259de5',
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
min: 0,
|
||||
max: 1,
|
||||
tick: {
|
||||
values: ['0', '1.00'],
|
||||
outer: false,
|
||||
format: val => val === '0' ? val : '$' + val,
|
||||
},
|
||||
padding: {left: 0.005, right: 0},
|
||||
label: {
|
||||
text: 'Gas Price ($)',
|
||||
position: 'outer-center',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
padding: {top: 2, bottom: 0},
|
||||
tick: {
|
||||
values: ['5', '97'],
|
||||
outer: false,
|
||||
format: val => val === '5' ? '0' : '100',
|
||||
},
|
||||
label: {
|
||||
text: 'Confirmation time (sec)',
|
||||
position: 'outer-middle',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
lines: [
|
||||
{value: 0.0833},
|
||||
{value: 0.1667},
|
||||
{value: 0.2500},
|
||||
{value: 0.3333},
|
||||
{value: 0.4167},
|
||||
{value: 0.5000},
|
||||
{value: 0.5833},
|
||||
{value: 0.6667},
|
||||
{value: 0.7500},
|
||||
{value: 0.8333},
|
||||
{value: 0.9167},
|
||||
{value: 1.0000},
|
||||
],
|
||||
},
|
||||
lines: {
|
||||
front: false,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
focus: {
|
||||
expand: {
|
||||
enabled: true,
|
||||
r: 3.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
|
||||
const $$ = this
|
||||
const config = $$.config
|
||||
const titleFormat = config.tooltip_format_title || defaultTitleFormat
|
||||
|
||||
let text, title
|
||||
d.forEach(n => {
|
||||
if (n && (n.value || n.value === 0)) {
|
||||
|
||||
if (!text) {
|
||||
title = titleFormat ? titleFormat(n.x) : n.x
|
||||
text = "<table class='" + 'custom-tooltip' + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + '</th></tr>' : '')
|
||||
}
|
||||
}
|
||||
})
|
||||
// for (i = 0; i < d.length; i++) {
|
||||
// if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
|
||||
|
||||
// if (! text) {
|
||||
// title = titleFormat ? titleFormat(d[i].x) : d[i].x;
|
||||
// text = "<table class='" + 'custom-tooltip' + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
|
||||
// }
|
||||
// }
|
||||
return text + '</table>' + "<div class='tooltip-arrow'></div>"
|
||||
},
|
||||
position: function (data, width, height, element) {
|
||||
const x = d3.event.pageX - document.getElementById('chart').getBoundingClientRect().x + 19
|
||||
const y = d3.event.pageY - document.getElementById('chart').getBoundingClientRect().y + 20
|
||||
return {top: y, left: x}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
setTickPosition('y', 0, -5, 2)
|
||||
setTickPosition('y', 1, -3)
|
||||
setTickPosition('x', 0, 3)
|
||||
setTickPosition('x', 1, 3, -5)
|
||||
d3.select('.c3-axis-x-label').attr('transform', 'translate(0,-15)')
|
||||
d3.select('.c3-axis-y-label').attr('transform', 'translate(42, 2) rotate(-90)')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.renderChart()
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="gas-price-chart">
|
||||
<div className="gas-price-chart__container" id="chart"></div>
|
||||
<div className="gas-price-chart" id="container">
|
||||
<div className="gas-price-chart__root" id="chart"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,6 +1,104 @@
|
||||
.gas-price-chart {
|
||||
&__container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.custom-tooltip {
|
||||
background: rgba(0, 0, 0, 1);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 3px;
|
||||
transform: translate(-41px, -50px);
|
||||
opacity: 1 !important;
|
||||
width: 44px;
|
||||
height: 21px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
background: rgba(0, 0, 0, 1);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
|
||||
top: -35px;
|
||||
left: -23px;
|
||||
transform: rotate(45deg);
|
||||
opacity: 1 !important;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.custom-tooltip th {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.c3-circle._expanded_ {
|
||||
fill: #FFFFFF !important;
|
||||
stroke-width: 2.4px !important;
|
||||
stroke: #2d9fd9 !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-axis .tick line {display: none;}
|
||||
|
||||
.c3-axis-x .domain {
|
||||
fill: none;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.c3-axis-y .domain {
|
||||
fill: none;
|
||||
stroke: #C8CCD6;
|
||||
}
|
||||
}
|
||||
|
||||
@import url(//fonts.googleapis.com/css?family=Roboto:400,700,300);
|
||||
|
||||
#chart {
|
||||
background: #F8F9FB
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ describe('GasPriceChart Component', function () {
|
||||
})
|
||||
|
||||
it('should render the chart div', () => {
|
||||
assert(wrapper.childAt(0).hasClass('gas-price-chart__container'))
|
||||
assert(wrapper.childAt(0).hasClass('gas-price-chart__root'))
|
||||
assert.equal(wrapper.childAt(0).props().id, 'chart')
|
||||
})
|
||||
})
|
||||
|
||||
@ -23,7 +23,7 @@ export default class PageContainer extends PureComponent {
|
||||
// PageContainerFooter props
|
||||
cancelText: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
hideCancel: PropTypes.string,
|
||||
hideCancel: PropTypes.bool,
|
||||
onCancel: PropTypes.func,
|
||||
onSubmit: PropTypes.func,
|
||||
submitText: PropTypes.string,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user