Remove unused customize-gas modal (#7185)
This modal hasn't been used since #5704, where it was replaced.feature/default_network_editable
Mark Stacey
5 years ago
committed by
GitHub
parent
c007fcab1a
commit
8a08b320e5
@ -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 '../../../../pages/send/send.constants' |
||||
import Button from '../../../ui/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="secondary" |
||||
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> |
||||
) |
||||
} |
||||
} |
||||
@ -1,22 +0,0 @@ |
||||
import { connect } from 'react-redux' |
||||
import CustomizeGas from './customize-gas.component' |
||||
import { hideModal } from '../../../../store/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) |
||||
@ -1,34 +0,0 @@ |
||||
import ethUtil from 'ethereumjs-util' |
||||
import { conversionUtil } from '../../../../helpers/utils/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', |
||||
})) |
||||
} |
||||
@ -1 +0,0 @@ |
||||
export { default } from './customize-gas.container' |
||||
@ -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; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue