Folder restructure (#6304)

* Remove ui/app/keychains/

* Remove ui/app/img/ (unused images)

* Move conversion-util to helpers/utils/

* Move token-util to helpers/utils/

* Move /helpers/*.js inside /helpers/utils/

* Move util tests inside /helpers/utils/

* Renameand move confirm-transaction/util.js to helpers/utils/

* Move higher-order-components to helpers/higher-order-components/

* Move infura-conversion.json to helpers/constants/

* Move all utility functions to helpers/utils/

* Move pages directory to top-level

* Move all constants to helpers/constants/

* Move metametrics inside helpers/

* Move app and root inside pages/

* Move routes inside helpers/

* Re-organize ducks/

* Move reducers to ducks/

* Move selectors inside selectors/

* Move test out of test folder

* Move action, reducer, store inside store/

* Move ui components inside ui/

* Move UI components inside ui/

* Move connected components inside components/app/

* Move i18n-helper inside helpers/

* Fix unit tests

* Fix unit test

* Move pages components

* Rename routes component

* Move reducers to ducks/index

* Fix bad path in unit test

5 files changed, 0 insertions, 813 deletions

diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
deleted file mode 100644
index c0eaf4852..000000000
--- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js
+++ /dev/null
@@ -1,108 +0,0 @@
-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, this.context.t)
-    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>
-    )
-  }
-}
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
deleted file mode 100644
index f19dafcc1..000000000
--- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js
+++ /dev/null
@@ -1,354 +0,0 @@
-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
-}
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.js b/ui/app/components/gas-customization/gas-price-chart/index.js
deleted file mode 100644
index 9895acb62..000000000
--- a/ui/app/components/gas-customization/gas-price-chart/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './gas-price-chart.component'
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss
deleted file mode 100644
index 097543104..000000000
--- a/ui/app/components/gas-customization/gas-price-chart/index.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-.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
-}
diff --git a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
deleted file mode 100644
index 74eddae42..000000000
--- a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
+++ /dev/null
@@ -1,218 +0,0 @@
-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 },
-      }])
-    })
-  })
-})