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.
85 lines
2.5 KiB
85 lines
2.5 KiB
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import Tooltip from '../../ui/tooltip';
|
|
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import {
|
|
TRANSACTION_GROUP_STATUSES,
|
|
TRANSACTION_STATUSES,
|
|
} from '../../../../shared/constants/transaction';
|
|
|
|
const QUEUED_PSEUDO_STATUS = 'queued';
|
|
|
|
/**
|
|
* A note about status logic for this component:
|
|
* Approved, Signed and Submitted statuses are all treated, effectively
|
|
* as pending. Transactions are only approved or signed for less than a
|
|
* second, usually, and ultimately should be rendered in the UI no
|
|
* differently than a pending transaction.
|
|
*
|
|
* Confirmed transactions are not especially highlighted except that their
|
|
* status label will be the date the transaction was finalized.
|
|
*/
|
|
const pendingStatusHash = {
|
|
[TRANSACTION_STATUSES.SUBMITTED]: TRANSACTION_GROUP_STATUSES.PENDING,
|
|
[TRANSACTION_STATUSES.APPROVED]: TRANSACTION_GROUP_STATUSES.PENDING,
|
|
[TRANSACTION_STATUSES.SIGNED]: TRANSACTION_GROUP_STATUSES.PENDING,
|
|
};
|
|
|
|
const statusToClassNameHash = {
|
|
[TRANSACTION_STATUSES.UNAPPROVED]: 'transaction-status--unapproved',
|
|
[TRANSACTION_STATUSES.REJECTED]: 'transaction-status--rejected',
|
|
[TRANSACTION_STATUSES.FAILED]: 'transaction-status--failed',
|
|
[TRANSACTION_STATUSES.DROPPED]: 'transaction-status--dropped',
|
|
[TRANSACTION_GROUP_STATUSES.CANCELLED]: 'transaction-status--cancelled',
|
|
[QUEUED_PSEUDO_STATUS]: 'transaction-status--queued',
|
|
[TRANSACTION_GROUP_STATUSES.PENDING]: 'transaction-status--pending',
|
|
};
|
|
|
|
export default function TransactionStatus({
|
|
status,
|
|
date,
|
|
error,
|
|
isEarliestNonce,
|
|
className,
|
|
statusOnly,
|
|
}) {
|
|
const t = useI18nContext();
|
|
const tooltipText = error?.rpc?.message || error?.message;
|
|
let statusKey = status;
|
|
if (pendingStatusHash[status]) {
|
|
statusKey = isEarliestNonce
|
|
? TRANSACTION_GROUP_STATUSES.PENDING
|
|
: QUEUED_PSEUDO_STATUS;
|
|
}
|
|
|
|
const statusText =
|
|
statusKey === TRANSACTION_STATUSES.CONFIRMED && !statusOnly
|
|
? date
|
|
: t(statusKey);
|
|
|
|
return (
|
|
<Tooltip
|
|
position="top"
|
|
title={tooltipText}
|
|
wrapperClassName={classnames(
|
|
'transaction-status',
|
|
`transaction-status--${statusKey}`,
|
|
className,
|
|
statusToClassNameHash[statusKey],
|
|
)}
|
|
>
|
|
{statusText}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
TransactionStatus.propTypes = {
|
|
status: PropTypes.string,
|
|
className: PropTypes.string,
|
|
date: PropTypes.string,
|
|
error: PropTypes.object,
|
|
isEarliestNonce: PropTypes.bool,
|
|
statusOnly: PropTypes.bool,
|
|
};
|
|
|