Refactor and redesign confirm transaction views

5 files changed, 307 insertions, 0 deletions

diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
new file mode 100644
index 000000000..cfaafd2b9
--- /dev/null
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -0,0 +1,140 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import GasModalCard from '../../customize-gas-modal/gas-modal-card'
+import { MIN_GAS_PRICE_GWEI } from '../../send_/send.constants'
+
+import {
+  getDecimalGasLimit,
+  getDecimalGasPrice,
+  getPrefixedHexGasLimit,
+  getPrefixedHexGasPrice,
+} from './customize-gas.util'
+
+export default class CustomizeGas extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    txData: PropTypes.object.isRequired,
+    hideModal: PropTypes.func,
+    validate: PropTypes.func,
+    onSubmit: PropTypes.func,
+  }
+
+  state = {
+    gasPrice: 0,
+    gasLimit: 0,
+    originalGasPrice: 0,
+    originalGasLimit: 0,
+  }
+
+  componentDidMount () {
+    const { txData = {} } = this.props
+    const { txParams: { gas: hexGasLimit, gasPrice: hexGasPrice } = {} } = txData
+
+    const gasLimit = getDecimalGasLimit(hexGasLimit)
+    const gasPrice = getDecimalGasPrice(hexGasPrice)
+
+    this.setState({
+      gasPrice,
+      gasLimit,
+      originalGasPrice: gasPrice,
+      originalGasLimit: gasLimit,
+    })
+  }
+
+  handleRevert () {
+    const { originalGasPrice, originalGasLimit } = this.state
+
+    this.setState({
+      gasPrice: originalGasPrice,
+      gasLimit: originalGasLimit,
+    })
+  }
+
+  handleSave () {
+    const { onSubmit, hideModal } = this.props
+    const { gasLimit, gasPrice } = this.state
+    const prefixedHexGasPrice = getPrefixedHexGasPrice(gasPrice)
+    const prefixedHexGasLimit = getPrefixedHexGasLimit(gasLimit)
+
+    Promise.resolve(onSubmit({ gasPrice: prefixedHexGasPrice, gasLimit: prefixedHexGasLimit }))
+      .then(() => hideModal())
+  }
+
+  validate () {
+    const { gasLimit, gasPrice } = this.state
+    return this.props.validate({
+      gasPrice: getPrefixedHexGasPrice(gasPrice),
+      gasLimit: getPrefixedHexGasLimit(gasLimit),
+    })
+  }
+
+  render () {
+    const { t } = this.context
+    const { hideModal } = this.props
+    const { gasPrice, gasLimit } = this.state
+    const { valid, errorMessage } = this.validate()
+
+    return (
+      <div className="customize-gas">
+        <div className="customize-gas__content">
+          <div className="customize-gas__header">
+            <div className="customize-gas__title">
+              { this.context.t('customGas') }
+            </div>
+            <div
+              className="customize-gas__close"
+              onClick={() => hideModal()}
+            />
+          </div>
+          <div className="customize-gas__body">
+            <GasModalCard
+              value={gasPrice}
+              min={MIN_GAS_PRICE_GWEI}
+              step={1}
+              onChange={value => this.setState({ gasPrice: value })}
+              title={t('gasPrice')}
+              copy={t('gasPriceCalculation')}
+            />
+            <GasModalCard
+              value={gasLimit}
+              min={1}
+              step={1}
+              onChange={value => this.setState({ gasLimit: value })}
+              title={t('gasLimit')}
+              copy={t('gasLimitCalculation')}
+            />
+          </div>
+          <div className="customize-gas__footer">
+            { !valid && <div className="customize-gas__error-message">{ errorMessage }</div> }
+            <div
+              className="customize-gas__revert"
+              onClick={() => this.handleRevert()}
+            >
+              { t('revert') }
+            </div>
+            <div className="customize-gas__buttons">
+              <button
+                className="btn-default customize-gas__cancel"
+                onClick={() => hideModal()}
+                style={{ marginRight: '10px' }}
+              >
+                { t('cancel') }
+              </button>
+              <button
+                className="btn-primary customize-gas__save"
+                onClick={() => this.handleSave()}
+                style={{ marginRight: '10px' }}
+                disabled={!valid}
+              >
+                { t('save') }
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modals/customize-gas/customize-gas.container.js b/ui/app/components/modals/customize-gas/customize-gas.container.js
new file mode 100644
index 000000000..46a799795
--- /dev/null
+++ b/ui/app/components/modals/customize-gas/customize-gas.container.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux'
+import CustomizeGas from './customize-gas.component'
+import { hideModal } from '../../../actions'
+
+const mapStateToProps = state => {
+  const { appState: { modal: { modalState: { props } } } } = state
+  const { txData, onSubmit, validate } = props
+
+  return {
+    txData,
+    onSubmit,
+    validate,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CustomizeGas)
diff --git a/ui/app/components/modals/customize-gas/customize-gas.util.js b/ui/app/components/modals/customize-gas/customize-gas.util.js
new file mode 100644
index 000000000..6ba4a7705
--- /dev/null
+++ b/ui/app/components/modals/customize-gas/customize-gas.util.js
@@ -0,0 +1,34 @@
+import ethUtil from 'ethereumjs-util'
+import { conversionUtil } from '../../../conversion-util'
+
+export function getDecimalGasLimit (hexGasLimit) {
+  return conversionUtil(hexGasLimit, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+}
+
+export function getDecimalGasPrice (hexGasPrice) {
+  return conversionUtil(hexGasPrice, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    toDenomination: 'GWEI',
+  })
+}
+
+export function getPrefixedHexGasLimit (gasLimit) {
+  return ethUtil.addHexPrefix(conversionUtil(gasLimit, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+  }))
+}
+
+export function getPrefixedHexGasPrice (gasPrice) {
+  return ethUtil.addHexPrefix(conversionUtil(gasPrice, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    fromDenomination: 'GWEI',
+    toDenomination: 'WEI',
+  }))
+}
diff --git a/ui/app/components/modals/customize-gas/index.js b/ui/app/components/modals/customize-gas/index.js
new file mode 100644
index 000000000..3a0ab7edc
--- /dev/null
+++ b/ui/app/components/modals/customize-gas/index.js
@@ -0,0 +1 @@
+export { default } from './customize-gas.container'
diff --git a/ui/app/components/modals/customize-gas/index.scss b/ui/app/components/modals/customize-gas/index.scss
new file mode 100644
index 000000000..e10452691
--- /dev/null
+++ b/ui/app/components/modals/customize-gas/index.scss
@@ -0,0 +1,110 @@
+.customize-gas {
+  border: 1px solid #D8D8D8;
+  border-radius: 4px;
+  background-color: #FFFFFF;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
+  font-family: Roboto;
+  display: flex;
+  flex-flow: column;
+
+  @media screen and (max-width: $break-small) {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &__header {
+    height: 52px;
+    border-bottom: 1px solid $alto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 22px;
+
+    @media screen and (max-width: $break-small) {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__title {
+    margin-left: 19.25px;
+  }
+
+  &__close::after {
+    content: '\00D7';
+    font-size: 1.8em;
+    color: $dusty-gray;
+    font-family: sans-serif;
+    cursor: pointer;
+    margin-right: 19.25px;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+  }
+
+  &__body {
+    display: flex;
+    margin-bottom: 24px;
+
+    @media screen and (max-width: $break-small) {
+      flex-flow: column;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__footer {
+    height: 75px;
+    border-top: 1px solid $alto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 22px;
+    position: relative;
+
+    @media screen and (max-width: $break-small) {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-right: 21.25px;
+  }
+
+  &__revert, &__cancel, &__save, &__save__error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 3px;
+    cursor: pointer;
+  }
+
+  &__revert {
+    color: $silver-chalice;
+    font-size: 16px;
+    margin-left: 21.25px;
+  }
+
+  &__cancel, &__save, &__save__error {
+    width: 85.74px;
+    min-width: initial;
+  }
+
+  &__save__error {
+    opacity: 0.5;
+    cursor: auto;
+  }
+
+  &__error-message {
+    display: block;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    font-size: 12px;
+    line-height: 12px;
+    color: $red;
+  }
+}