refactor gas-fee-display component

#4622

5 files changed, 109 insertions, 2 deletions

diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
new file mode 100644
index 000000000..99286a139
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -0,0 +1,51 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../../../../send/currency-display'
+
+
+export default class GasFeeDisplay extends Component {
+  render() {
+    const {
+      conversionRate,
+      gasTotal,
+      onClick,
+      primaryCurrency = 'ETH',
+      convertedCurrency,
+      gasLoadingError,
+    } = this.props
+
+    return (
+      <div className="send-v2__gas-fee-display">
+        {gasTotal
+          ? <CurrencyDisplay
+              primaryCurrency={primaryCurrency}
+              convertedCurrency={convertedCurrency}
+              value={gasTotal}
+              conversionRate={conversionRate}
+              gasLoadingError={gasLoadingError}
+              convertedPrefix={'$'}
+              readOnly
+            />
+          : gasLoadingError
+            ? <div className="currency-display.currency-display--message">
+                {this.context.t('setGasPrice')}
+              </div>
+            : <div className="currency-display">
+                {this.context.t('loading')}
+              </div>
+        }
+        <button
+          className="sliders-icon-container"
+          onClick={onClick}
+          disabled={!gasTotal && !gasLoadingError}
+        >
+          <i className="fa fa-sliders sliders-icon" />
+        </button>
+      </div>
+    )
+  }
+}
+
+GasFeeDisplay.contextTypes = {
+  t: PropTypes.func,
+}
diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js
new file mode 100644
index 000000000..dba0edb7b
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/index.js
@@ -0,0 +1 @@
+export { default } from './gas-fee-display.component'
diff --git a/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
new file mode 100644
index 000000000..630781515
--- /dev/null
+++ b/ui/app/components/send_/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import assert from 'assert'
+import {shallow} from 'enzyme'
+import GasFeeDisplay from '../gas-fee-display.component'
+import CurrencyDisplay from '../../../../../send/currency-display'
+import sinon from "sinon";
+
+
+const propsMethodSpies = {
+  showCustomizeGasModal: sinon.spy(),
+}
+
+describe.only('SendGasRow Component', function() {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<GasFeeDisplay
+      conversionRate={20}
+      gasTotal={'mockGasTotal'}
+      onClick={propsMethodSpies.showCustomizeGasModal}
+      primaryCurrency={'mockPrimaryCurrency'}
+      convertedCurrency={'mockConvertedCurrency'}
+    />, {context: {t: str => str + '_t'}})
+  })
+
+  afterEach(() => {
+    propsMethodSpies.showCustomizeGasModal.resetHistory()
+  })
+
+  describe('render', () => {
+    it('should render a CurrencyDisplay component', () => {
+      assert.equal(wrapper.find(CurrencyDisplay).length, 1)
+    })
+
+    it('should render the CurrencyDisplay with the correct props', () => {
+      const {
+        conversionRate,
+        convertedCurrency,
+        value
+      } = wrapper.find(CurrencyDisplay).props()
+      assert.equal(conversionRate, 20)
+      assert.equal(convertedCurrency, 'mockConvertedCurrency')
+      assert.equal(value, 'mockGasTotal')
+    })
+
+    it('should render the Button with the correct props', () => {
+      const {
+        onClick,
+      } = wrapper.find("button").props()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
+      onClick()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
index c80d8c0bb..17cea3d4e 100644
--- a/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/components/send_/send-content/send-gas-row/send-gas-row.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import SendRowWrapper from '../send-row-wrapper/'
-import GasFeeDisplay from '../../../send/gas-fee-display-v2'
+import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
 
 export default class SendGasRow extends Component {
 
diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
index e4f05d708..db37f18be 100644
--- a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
@@ -5,7 +5,7 @@ import sinon from 'sinon'
 import SendGasRow from '../send-gas-row.component.js'
 
 import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
-import GasFeeDisplay from '../../../../send/gas-fee-display-v2'
+import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component'
 
 const propsMethodSpies = {
   showCustomizeGasModal: sinon.spy(),