diff options
Diffstat (limited to 'ui/app/components/modals/customize-gas')
5 files changed, 0 insertions, 329 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 deleted file mode 100644 index 4e2e20660..000000000 --- a/ui/app/components/modals/customize-gas/customize-gas.component.js +++ /dev/null @@ -1,162 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import BigNumber from 'bignumber.js' -import GasModalCard from '../../customize-gas-modal/gas-modal-card' -import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants' -import Button from '../../button' - -import { - getDecimalGasLimit, - getDecimalGasPrice, - getPrefixedHexGasLimit, - getPrefixedHexGasPrice, -} from './customize-gas.util' - -export default class CustomizeGas extends Component { - static contextTypes = { - t: PropTypes.func, - metricsEvent: 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, metricsEvent } = this.context - const { hideModal } = this.props - const { gasPrice, gasLimit, originalGasPrice, originalGasLimit } = this.state - const { valid, errorKey } = 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">{ t(errorKey) }</div> } - <div - className="customize-gas__revert" - onClick={() => this.handleRevert()} - > - { t('revert') } - </div> - <div className="customize-gas__buttons"> - <Button - type="default" - className="customize-gas__cancel" - onClick={() => hideModal()} - style={{ marginRight: '10px' }} - > - { t('cancel') } - </Button> - <Button - type="primary" - className="customize-gas__save" - onClick={() => { - metricsEvent({ - eventOpts: { - category: 'Activation', - action: 'userCloses', - name: 'closeCustomizeGas', - }, - pageOpts: { - section: 'customizeGasModal', - component: 'customizeGasSaveButton', - }, - customVariables: { - gasPriceChange: (new BigNumber(gasPrice)).minus(new BigNumber(originalGasPrice)).toString(10), - gasLimitChange: (new BigNumber(gasLimit)).minus(new BigNumber(originalGasLimit)).toString(10), - }, - }) - 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 deleted file mode 100644 index 46a799795..000000000 --- a/ui/app/components/modals/customize-gas/customize-gas.container.js +++ /dev/null @@ -1,22 +0,0 @@ -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 deleted file mode 100644 index 6ba4a7705..000000000 --- a/ui/app/components/modals/customize-gas/customize-gas.util.js +++ /dev/null @@ -1,34 +0,0 @@ -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 deleted file mode 100644 index 3a0ab7edc..000000000 --- a/ui/app/components/modals/customize-gas/index.js +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index e10452691..000000000 --- a/ui/app/components/modals/customize-gas/index.scss +++ /dev/null @@ -1,110 +0,0 @@ -.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; - } -} |