You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.9 KiB
64 lines
1.9 KiB
import { Tooltip } from '@material-ui/core';
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useSelector } from 'react-redux';
|
|
import classnames from 'classnames';
|
|
import Button from '../../ui/button';
|
|
import { getMaximumGasTotalInHexWei } from '../../../../shared/modules/gas.utils';
|
|
import { getConversionRate } from '../../../ducks/metamask/metamask';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import { useIncrementedGasFees } from '../../../hooks/useIncrementedGasFees';
|
|
import { isBalanceSufficient } from '../../../pages/send/send.utils';
|
|
import { getSelectedAccount } from '../../../selectors';
|
|
|
|
export default function CancelButton({
|
|
cancelTransaction,
|
|
transaction,
|
|
detailsModal,
|
|
}) {
|
|
const t = useI18nContext();
|
|
|
|
const customCancelGasSettings = useIncrementedGasFees(transaction);
|
|
|
|
const selectedAccount = useSelector(getSelectedAccount);
|
|
const conversionRate = useSelector(getConversionRate);
|
|
|
|
const hasEnoughCancelGas = isBalanceSufficient({
|
|
amount: '0x0',
|
|
gasTotal: getMaximumGasTotalInHexWei(customCancelGasSettings),
|
|
balance: selectedAccount.balance,
|
|
conversionRate,
|
|
});
|
|
|
|
const btn = (
|
|
<Button
|
|
onClick={cancelTransaction}
|
|
rounded={!detailsModal}
|
|
type={detailsModal ? 'raised' : null}
|
|
className={classnames({
|
|
'transaction-list-item__header-button': !detailsModal,
|
|
'transaction-list-item-details__header-button': detailsModal,
|
|
})}
|
|
disabled={!hasEnoughCancelGas}
|
|
>
|
|
{t('cancel')}
|
|
</Button>
|
|
);
|
|
return hasEnoughCancelGas ? (
|
|
btn
|
|
) : (
|
|
<Tooltip
|
|
title={t('notEnoughGas')}
|
|
data-testid="not-enough-gas__tooltip"
|
|
position="bottom"
|
|
>
|
|
<div>{btn}</div>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
CancelButton.propTypes = {
|
|
transaction: PropTypes.object,
|
|
cancelTransaction: PropTypes.func,
|
|
detailsModal: PropTypes.bool,
|
|
};
|
|
|