1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 12:47:14 +01:00
metamask-extension/ui/components/app/transaction-list-item/transaction-list-item.component.js

253 lines
7.2 KiB
JavaScript
Raw Normal View History

import React, { useMemo, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useHistory } from 'react-router-dom';
import ListItem from '../../ui/list-item';
import { useTransactionDisplayData } from '../../../hooks/useTransactionDisplayData';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { useCancelTransaction } from '../../../hooks/useCancelTransaction';
import { useRetryTransaction } from '../../../hooks/useRetryTransaction';
import Button from '../../ui/button';
import Tooltip from '../../ui/tooltip';
import TransactionListItemDetails from '../transaction-list-item-details';
import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes';
import { useShouldShowSpeedUp } from '../../../hooks/useShouldShowSpeedUp';
import TransactionStatus from '../transaction-status/transaction-status.component';
import TransactionIcon from '../transaction-icon';
import {
TRANSACTION_GROUP_CATEGORIES,
TRANSACTION_STATUSES,
} from '../../../../shared/constants/transaction';
import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
import EditGasPopover from '../edit-gas-popover';
2020-11-03 00:41:28 +01:00
export default function TransactionListItem({
transactionGroup,
isEarliestNonce = false,
}) {
const t = useI18nContext();
const history = useHistory();
const { hasCancelled } = transactionGroup;
const [showDetails, setShowDetails] = useState(false);
2020-11-03 00:41:28 +01:00
const {
initialTransaction: { id },
primaryTransaction: { err, status },
} = transactionGroup;
const {
hasEnoughCancelGas,
cancelTransaction,
showCancelEditGasPopover,
closeCancelEditGasPopover,
customCancelGasSettings,
} = useCancelTransaction(transactionGroup);
const {
retryTransaction,
showRetryEditGasPopover,
closeRetryEditGasPopover,
customRetryGasSettings,
} = useRetryTransaction(transactionGroup);
2020-11-03 00:41:28 +01:00
const shouldShowSpeedUp = useShouldShowSpeedUp(
transactionGroup,
isEarliestNonce,
);
const {
title,
subtitle,
subtitleContainsOrigin,
date,
category,
primaryCurrency,
recipientAddress,
secondaryCurrency,
displayedStatusKey,
isPending,
senderAddress,
} = useTransactionDisplayData(transactionGroup);
const isSignatureReq =
category === TRANSACTION_GROUP_CATEGORIES.SIGNATURE_REQUEST;
const isApproval = category === TRANSACTION_GROUP_CATEGORIES.APPROVAL;
const isUnapproved = status === TRANSACTION_STATUSES.UNAPPROVED;
const isSwap = category === TRANSACTION_GROUP_CATEGORIES.SWAP;
const className = classnames('transaction-list-item', {
2020-11-03 00:41:28 +01:00
'transaction-list-item--unconfirmed':
isPending ||
[
TRANSACTION_STATUSES.FAILED,
TRANSACTION_STATUSES.DROPPED,
TRANSACTION_STATUSES.REJECTED,
].includes(displayedStatusKey),
});
const toggleShowDetails = useCallback(() => {
if (isUnapproved) {
history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`);
return;
}
setShowDetails((prev) => !prev);
}, [isUnapproved, history, id]);
const cancelButton = useMemo(() => {
const btn = (
<Button
onClick={cancelTransaction}
rounded
className="transaction-list-item__header-button"
disabled={!hasEnoughCancelGas}
>
2020-11-03 00:41:28 +01:00
{t('cancel')}
</Button>
);
if (hasCancelled || !isPending || isUnapproved) {
return null;
Metametrics (#6171) * Add metametrics provider and util. * Add backend api and state for participating in metametrics. * Add frontend action for participating in metametrics. * Add metametrics opt-in screen. * Add metametrics events to first time flow. * Add metametrics events for route changes * Add metametrics events for send and confirm screens * Add metametrics events to dropdowns, transactions, log in and out, settings, sig requests and main screen * Ensures each log in is measured as a new visit by metametrics. * Ensure metametrics is called with an empty string for dimensions params if specified * Adds opt in metametrics modal after unlock for existing users * Adds settings page toggle for opting in and out of MetaMetrics * Switch metametrics dimensions to page level scope * Lint, test and translation fixes for metametrics. * Update design for metametrics opt-in screen * Complete responsive styling of metametrics-opt-in modal * Use new chart image on metrics opt in screens * Incorporate the metametrics opt-in screen into the new onboarding flow * Update e2e tests to accomodate metametrics changes * Mock out metametrics network requests in integration tests * Fix tx-list integration test to support metametrics provider. * Send number of tokens and accounts data with every metametrics event. * Update metametrics event descriptor schema and add new events. * Fix import tos bug and send gas button bug due to metametrics changes. * Various small fixes on the metametrics branch. * Add origin custom variable type to metametrics.util * Fix names of onboarding complete actions (metametrics). * Fix names of Metrics Options actions (metametrics). * Clean up code related to metametrics. * Fix bad merge conflict resolution and improve promise handling in sendMetaMetrics event and confrim tx base * Don't send a second metrics event if user has gone back during first time flow. * Collect metametrics on going back from onboarding create/import. * Add missing custom variable constants for metametrics * Fix metametrics provider * Make height of opt-in modal responsive. * Adjust text content for opt-in modal. * Update metametrics event names and clean up code in opt-in-modal * Put phishing warning step next to last in onboarding flow * Link terms of service on create and import screens of first time flow * Add subtext to options on the onboarding select action screen. * Fix styling of bullet points on end of onboarding screen. * Combine phishing warning and congratulations screens. * Fix placement of users if unlocking after an incomplete onboarding import flow. * Fix capitalization in opt-in screen * Fix last onboarding screen translations * Add link to 'Learn More' on the last screen of onboarding * Code clean up: metametrics branch * Update e2e tests for phishing warning step removal * e2e tests passing on metametrics branch * Different tracking urls for metametrics on development and prod
2019-03-05 16:45:01 +01:00
}
return hasEnoughCancelGas ? (
2020-11-03 00:41:28 +01:00
btn
) : (
<Tooltip title={t('notEnoughGas')} position="bottom">
<div>{btn}</div>
</Tooltip>
);
2020-11-03 00:41:28 +01:00
}, [
isPending,
t,
isUnapproved,
hasEnoughCancelGas,
2020-11-03 00:41:28 +01:00
cancelTransaction,
hasCancelled,
]);
const speedUpButton = useMemo(() => {
if (!shouldShowSpeedUp || !isPending || isUnapproved) {
return null;
}
return (
<Button
type="secondary"
rounded
onClick={hasCancelled ? cancelTransaction : retryTransaction}
style={hasCancelled ? { width: 'auto' } : null}
>
{hasCancelled ? t('speedUpCancellation') : t('speedUp')}
</Button>
);
}, [
shouldShowSpeedUp,
isUnapproved,
t,
isPending,
retryTransaction,
hasCancelled,
cancelTransaction,
]);
return (
<>
<ListItem
onClick={toggleShowDetails}
className={className}
title={title}
2020-11-03 00:41:28 +01:00
icon={
<TransactionIcon category={category} status={displayedStatusKey} />
}
subtitle={
<h3>
<TransactionStatus
isPending={isPending}
isEarliestNonce={isEarliestNonce}
error={err}
date={date}
status={displayedStatusKey}
/>
2020-11-03 00:41:28 +01:00
<span
className={
subtitleContainsOrigin
? 'transaction-list-item__origin'
: 'transaction-list-item__address'
}
title={subtitle}
>
{subtitle}
</span>
</h3>
2020-11-03 00:41:28 +01:00
}
rightContent={
!isSignatureReq &&
!isApproval && (
<>
<h2
title={primaryCurrency}
className="transaction-list-item__primary-currency"
>
{primaryCurrency}
</h2>
<h3 className="transaction-list-item__secondary-currency">
{secondaryCurrency}
</h3>
</>
)
}
>
<div className="transaction-list-item__pending-actions">
{speedUpButton}
{cancelButton}
</div>
</ListItem>
{showDetails && (
<TransactionListItemDetails
title={title}
onClose={toggleShowDetails}
transactionGroup={transactionGroup}
primaryCurrency={primaryCurrency}
senderAddress={senderAddress}
recipientAddress={recipientAddress}
onRetry={retryTransaction}
showRetry={status === TRANSACTION_STATUSES.FAILED && !isSwap}
showSpeedUp={shouldShowSpeedUp}
isEarliestNonce={isEarliestNonce}
onCancel={cancelTransaction}
showCancel={isPending && !hasCancelled}
cancelDisabled={!hasEnoughCancelGas}
/>
)}
{showRetryEditGasPopover && (
<EditGasPopover
onClose={closeRetryEditGasPopover}
mode={EDIT_GAS_MODES.SPEED_UP}
transaction={{
...transactionGroup.primaryTransaction,
userFeeLevel: 'custom',
txParams: {
...transactionGroup.primaryTransaction?.txParams,
...customRetryGasSettings,
},
}}
/>
)}
{showCancelEditGasPopover && (
<EditGasPopover
onClose={closeCancelEditGasPopover}
mode={EDIT_GAS_MODES.CANCEL}
transaction={{
...transactionGroup.primaryTransaction,
userFeeLevel: 'custom',
txParams: {
...transactionGroup.primaryTransaction?.txParams,
...customCancelGasSettings,
},
}}
/>
)}
</>
);
}
TransactionListItem.propTypes = {
transactionGroup: PropTypes.object.isRequired,
isEarliestNonce: PropTypes.bool,
};