1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-13 05:07:12 +01:00
metamask-extension/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
Erik Marks 76a2a9bb8b
@metamask/eslint config@5.0.0 (#10358)
* @metamask/eslint-config@5.0.0
* Update eslintrc and prettierrc
* yarn lint:fix
2021-02-04 10:15:23 -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}
</>
);
}
}