mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Remove unused customize-gas modal (#7185)
This modal hasn't been used since #5704, where it was replaced.
This commit is contained in:
Mark Stacey
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,8 +2,6 @@
|
|||||||
|
|
||||||
@import 'confirm-remove-account/index';
|
@import 'confirm-remove-account/index';
|
||||||
|
|
||||||
@import 'customize-gas/index';
|
|
||||||
|
|
||||||
@import 'qr-scanner/index';
|
@import 'qr-scanner/index';
|
||||||
|
|
||||||
@import 'transaction-confirmed/index';
|
@import 'transaction-confirmed/index';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user