1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-13 21:27:12 +01:00
metamask-extension/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
Alex Donesky 74fa6fa187
Fix gas api overcalling (#12069)
* Move gasEstimation calls onto edit-gas-popover instead of transaction list item

* delete useCancelTransaction and useRetryTransaction hooks
consolidate gasFee calls into cancel button component.

* add tests

* update component name

* addressing feedback

* fix failing e2e test

* followup fix e2e tests

* change useIncrementedGasFees to accept single transaction rather than transactionGroup as argument

* remove unnecessary change to fixture

* only ever pass primary transaction to useIncrementedGasFees

* remove unnecessary optional chaining
2021-09-15 10:59:51 -05:00

262 lines
8.4 KiB
JavaScript

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import copyToClipboard from 'copy-to-clipboard';
import { getBlockExplorerLink } from '@metamask/etherscan-link';
import SenderToRecipient from '../../ui/sender-to-recipient';
import { FLAT_VARIANT } from '../../ui/sender-to-recipient/sender-to-recipient.constants';
import TransactionActivityLog from '../transaction-activity-log';
import TransactionBreakdown from '../transaction-breakdown';
import Button from '../../ui/button';
import Tooltip from '../../ui/tooltip';
import Copy from '../../ui/icon/copy-icon.component';
import CancelButton from '../cancel-button';
import Popover from '../../ui/popover';
import { SECOND } from '../../../../shared/constants/time';
import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
import { getURLHostName } from '../../../helpers/utils/util';
export default class TransactionListItemDetails extends PureComponent {
static contextTypes = {
t: PropTypes.func,
metricsEvent: PropTypes.func,
trackEvent: PropTypes.func,
};
static defaultProps = {
recipientEns: null,
};
static propTypes = {
onCancel: PropTypes.func,
onRetry: PropTypes.func,
showCancel: PropTypes.bool,
showSpeedUp: PropTypes.bool,
showRetry: PropTypes.bool,
isEarliestNonce: PropTypes.bool,
primaryCurrency: PropTypes.string,
transactionGroup: PropTypes.object,
title: PropTypes.string.isRequired,
onClose: PropTypes.func.isRequired,
recipientEns: PropTypes.string,
recipientAddress: PropTypes.string,
rpcPrefs: PropTypes.object,
senderAddress: PropTypes.string.isRequired,
tryReverseResolveAddress: PropTypes.func.isRequired,
senderNickname: PropTypes.string.isRequired,
recipientNickname: PropTypes.string,
};
state = {
justCopied: false,
};
handleBlockExplorerClick = () => {
const {
transactionGroup: { primaryTransaction },
rpcPrefs,
} = this.props;
const blockExplorerLink = getBlockExplorerLink(
primaryTransaction,
rpcPrefs,
);
this.context.trackEvent({
category: 'Transactions',
event: 'Clicked Block Explorer Link',
properties: {
link_type: 'Transaction Block Explorer',
action: 'Transaction Details',
block_explorer_domain: getURLHostName(blockExplorerLink),
},
});
global.platform.openTab({
url: blockExplorerLink,
});
};
handleCancel = (event) => {
const { onCancel, onClose } = this.props;
onCancel(event);
onClose();
};
handleRetry = (event) => {
const { onClose, onRetry } = this.props;
onRetry(event);
onClose();
};
handleCopyTxId = () => {
const { transactionGroup } = this.props;
const { primaryTransaction: transaction } = transactionGroup;
const { hash } = transaction;
this.context.metricsEvent({
eventOpts: {
category: 'Navigation',
action: 'Activity Log',
name: 'Copied Transaction ID',
},
});
this.setState({ justCopied: true }, () => {
copyToClipboard(hash);
setTimeout(() => this.setState({ justCopied: false }), SECOND);
});
};
componentDidMount() {
const { recipientAddress, tryReverseResolveAddress } = this.props;
if (recipientAddress) {
tryReverseResolveAddress(recipientAddress);
}
}
render() {
const { t } = this.context;
const { justCopied } = this.state;
const {
transactionGroup,
primaryCurrency,
showSpeedUp,
showRetry,
recipientEns,
recipientAddress,
rpcPrefs: { blockExplorerUrl } = {},
senderAddress,
isEarliestNonce,
senderNickname,
title,
onClose,
recipientNickname,
showCancel,
} = this.props;
const {
primaryTransaction: transaction,
initialTransaction: { type },
} = transactionGroup;
const { hash } = transaction;
return (
<Popover title={title} onClose={onClose}>
<div className="transaction-list-item-details">
<div className="transaction-list-item-details__header">
<div>{t('details')}</div>
<div className="transaction-list-item-details__header-buttons">
{showSpeedUp && (
<Button
type="raised"
onClick={this.handleRetry}
className="transaction-list-item-details__header-button"
>
{t('speedUp')}
</Button>
)}
{showCancel && (
<CancelButton
transaction={transaction}
cancelTransaction={this.handleCancel}
detailsModal
/>
)}
<Tooltip
wrapperClassName="transaction-list-item-details__header-button"
containerClassName="transaction-list-item-details__header-button-tooltip-container"
title={
justCopied ? t('copiedTransactionId') : t('copyTransactionId')
}
>
<Button
type="raised"
onClick={this.handleCopyTxId}
disabled={!hash}
>
<Copy size={10} color="#3098DC" />
</Button>
</Tooltip>
<Tooltip
wrapperClassName="transaction-list-item-details__header-button"
containerClassName="transaction-list-item-details__header-button-tooltip-container"
title={
blockExplorerUrl
? t('viewOnCustomBlockExplorer', [blockExplorerUrl])
: t('viewOnEtherscan')
}
>
<Button
type="raised"
onClick={this.handleBlockExplorerClick}
disabled={!hash}
>
<img src="./images/arrow-popout.svg" alt="" />
</Button>
</Tooltip>
{showRetry && (
<Tooltip title={t('retryTransaction')}>
<Button
type="raised"
onClick={this.handleRetry}
className="transaction-list-item-details__header-button"
>
<i className="fa fa-sync"></i>
</Button>
</Tooltip>
)}
</div>
</div>
<div className="transaction-list-item-details__body">
<div className="transaction-list-item-details__sender-to-recipient-container">
<SenderToRecipient
warnUserOnAccountMismatch={false}
variant={FLAT_VARIANT}
addressOnly
recipientEns={recipientEns}
recipientAddress={recipientAddress}
recipientNickname={recipientNickname}
senderName={senderNickname}
senderAddress={senderAddress}
onRecipientClick={() => {
this.context.metricsEvent({
eventOpts: {
category: 'Navigation',
action: 'Activity Log',
name: 'Copied "To" Address',
},
});
}}
onSenderClick={() => {
this.context.metricsEvent({
eventOpts: {
category: 'Navigation',
action: 'Activity Log',
name: 'Copied "From" Address',
},
});
}}
/>
</div>
<div className="transaction-list-item-details__cards-container">
<TransactionBreakdown
nonce={transactionGroup.initialTransaction.txParams.nonce}
isTokenApprove={type === TRANSACTION_TYPES.TOKEN_METHOD_APPROVE}
transaction={transaction}
primaryCurrency={primaryCurrency}
className="transaction-list-item-details__transaction-breakdown"
/>
<TransactionActivityLog
transactionGroup={transactionGroup}
className="transaction-list-item-details__transaction-activity-log"
onCancel={this.handleCancel}
onRetry={this.handleRetry}
isEarliestNonce={isEarliestNonce}
/>
</div>
</div>
</div>
</Popover>
);
}
}