Merge branch 'develop' into account-tracker-network-change

4 files changed, 74 insertions, 0 deletions

diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
new file mode 100644
index 000000000..b082db1d0
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../../../currency-display'
+import { ETH } from '../../../../constants/common'
+
+export default class CancelTransaction extends PureComponent {
+  static propTypes = {
+    value: PropTypes.string,
+  }
+
+  render () {
+    const { value } = this.props
+
+    return (
+      <div className="cancel-transaction-gas-fee">
+        <CurrencyDisplay
+          className="cancel-transaction-gas-fee__eth"
+          currency={ETH}
+          value={value}
+          numberOfDecimals={6}
+        />
+        <CurrencyDisplay
+          className="cancel-transaction-gas-fee__fiat"
+          value={value}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
new file mode 100644
index 000000000..1a9ae2e07
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
@@ -0,0 +1 @@
+export { default } from './cancel-transaction-gas-fee.component'
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
new file mode 100644
index 000000000..ce81dd448
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
@@ -0,0 +1,17 @@
+.cancel-transaction-gas-fee {
+  background: #F1F4F9;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+
+  &__eth {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+
+  &__fiat {
+    font-size: .75rem;
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
new file mode 100644
index 000000000..994c2a577
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import CancelTransactionGasFee from '../cancel-transaction-gas-fee.component'
+import CurrencyDisplay from '../../../../currency-display'
+
+describe('CancelTransactionGasFee Component', () => {
+  it('should render', () => {
+    const wrapper = shallow(
+      <CancelTransactionGasFee
+        value="0x3b9aca00"
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(CurrencyDisplay).length, 2)
+    const ethDisplay = wrapper.find(CurrencyDisplay).at(0)
+    const fiatDisplay = wrapper.find(CurrencyDisplay).at(1)
+
+    assert.equal(ethDisplay.props().value, '0x3b9aca00')
+    assert.equal(ethDisplay.props().currency, 'ETH')
+    assert.equal(ethDisplay.props().className, 'cancel-transaction-gas-fee__eth')
+
+    assert.equal(fiatDisplay.props().value, '0x3b9aca00')
+    assert.equal(fiatDisplay.props().className, 'cancel-transaction-gas-fee__fiat')
+  })
+})