mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-13 21:27:12 +01:00
74fa6fa187
* 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
262 lines
8.4 KiB
JavaScript
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>
|
|
);
|
|
}
|
|
}
|