1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
2020-11-12 14:57:29 -08:00

182 lines
4.8 KiB
JavaScript

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import SendRowWrapper from '../send-row-wrapper'
import GasPriceButtonGroup from '../../../../components/app/gas-customization/gas-price-button-group'
import AdvancedGasInputs from '../../../../components/app/gas-customization/advanced-gas-inputs'
import GasFeeDisplay from './gas-fee-display/gas-fee-display.component'
export default class SendGasRow extends Component {
static propTypes = {
balance: PropTypes.string,
gasFeeError: PropTypes.bool,
gasLoadingError: PropTypes.bool,
gasTotal: PropTypes.string,
maxModeOn: PropTypes.bool,
showCustomizeGasModal: PropTypes.func,
sendToken: PropTypes.object,
setAmountToMax: PropTypes.func,
setGasPrice: PropTypes.func,
setGasLimit: PropTypes.func,
tokenBalance: PropTypes.string,
gasPriceButtonGroupProps: PropTypes.object,
gasButtonGroupShown: PropTypes.bool,
advancedInlineGasShown: PropTypes.bool,
resetGasButtons: PropTypes.func,
gasPrice: PropTypes.string,
gasLimit: PropTypes.string,
insufficientBalance: PropTypes.bool,
isMainnet: PropTypes.bool,
}
static contextTypes = {
t: PropTypes.func,
metricsEvent: PropTypes.func,
}
renderAdvancedOptionsButton() {
const { metricsEvent } = this.context
const { showCustomizeGasModal, isMainnet } = this.props
// Tests should behave in same way as mainnet, but are using Localhost
if (!isMainnet && !process.env.IN_TEST) {
return null
}
return (
<div
className="advanced-gas-options-btn"
onClick={() => {
metricsEvent({
eventOpts: {
category: 'Transactions',
action: 'Edit Screen',
name: 'Clicked "Advanced Options"',
},
})
showCustomizeGasModal()
}}
>
{this.context.t('advancedOptions')}
</div>
)
}
setMaxAmount() {
const {
balance,
gasTotal,
sendToken,
setAmountToMax,
tokenBalance,
} = this.props
setAmountToMax({
balance,
gasTotal,
sendToken,
tokenBalance,
})
}
renderContent() {
const {
gasLoadingError,
gasTotal,
showCustomizeGasModal,
gasPriceButtonGroupProps,
gasButtonGroupShown,
advancedInlineGasShown,
maxModeOn,
resetGasButtons,
setGasPrice,
setGasLimit,
gasPrice,
gasLimit,
insufficientBalance,
isMainnet,
} = this.props
const { metricsEvent } = this.context
const gasPriceButtonGroup = (
<div>
<GasPriceButtonGroup
className="gas-price-button-group--small"
showCheck={false}
{...gasPriceButtonGroupProps}
handleGasPriceSelection={async (opts) => {
metricsEvent({
eventOpts: {
category: 'Transactions',
action: 'Edit Screen',
name: 'Changed Gas Button',
},
})
await gasPriceButtonGroupProps.handleGasPriceSelection(opts)
if (maxModeOn) {
this.setMaxAmount()
}
}}
/>
</div>
)
const gasFeeDisplay = (
<GasFeeDisplay
gasLoadingError={gasLoadingError}
gasTotal={gasTotal}
onReset={() => {
resetGasButtons()
if (maxModeOn) {
this.setMaxAmount()
}
}}
onClick={() => showCustomizeGasModal()}
/>
)
const advancedGasInputs = (
<div>
<AdvancedGasInputs
updateCustomGasPrice={(newGasPrice) =>
setGasPrice({ gasPrice: newGasPrice, gasLimit })
}
updateCustomGasLimit={(newGasLimit) =>
setGasLimit(newGasLimit, gasPrice)
}
customGasPrice={gasPrice}
customGasLimit={gasLimit}
insufficientBalance={insufficientBalance}
customPriceIsSafe
isSpeedUp={false}
/>
</div>
)
// Tests should behave in same way as mainnet, but are using Localhost
if (advancedInlineGasShown || (!isMainnet && !process.env.IN_TEST)) {
return advancedGasInputs
} else if (gasButtonGroupShown) {
return gasPriceButtonGroup
}
return gasFeeDisplay
}
render() {
const {
gasFeeError,
gasButtonGroupShown,
advancedInlineGasShown,
} = this.props
return (
<>
<SendRowWrapper
label={`${this.context.t('transactionFee')}:`}
showError={gasFeeError}
errorType="gasFee"
>
{this.renderContent()}
</SendRowWrapper>
{gasButtonGroupShown || advancedInlineGasShown ? (
<SendRowWrapper>{this.renderAdvancedOptionsButton()}</SendRowWrapper>
) : null}
</>
)
}
}