metamask-extension/ui/components/app/transaction-status-label/transaction-status-label.js

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
import { useSelector } from 'react-redux';
///: END:ONLY_INCLUDE_IN
import Tooltip from '../../ui/tooltip';

import { useI18nContext } from '../../../hooks/useI18nContext';
import {
  TransactionGroupStatus,
  TransactionStatus,
} from '../../../../shared/constants/transaction';

///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
import { getTransactionStatusMap } from '../../../selectors/institutional/selectors';
import { getCurrentKeyring } from '../../../selectors';
///: END:ONLY_INCLUDE_IN

const QUEUED_PSEUDO_STATUS = 'queued';
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
const CUSTODIAN_PSEUDO_STATUS = 'inCustody';
///: END:ONLY_INCLUDE_IN

/**
 * 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 = {
  [TransactionStatus.submitted]: TransactionGroupStatus.pending,
  [TransactionStatus.approved]: TransactionGroupStatus.pending,
  [TransactionStatus.signed]: TransactionGroupStatus.pending,
};

const statusToClassNameHash = {
  [TransactionStatus.unapproved]: 'transaction-status-label--unapproved',
  [TransactionStatus.rejected]: 'transaction-status-label--rejected',
  [TransactionStatus.failed]: 'transaction-status-label--failed',
  [TransactionStatus.dropped]: 'transaction-status-label--dropped',
  [TransactionGroupStatus.cancelled]: 'transaction-status-label--cancelled',
  [QUEUED_PSEUDO_STATUS]: 'transaction-status-label--queued',
  [TransactionGroupStatus.pending]: 'transaction-status-label--pending',
  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
  [CUSTODIAN_PSEUDO_STATUS]: 'transaction-status--custodian',
  ///: END:ONLY_INCLUDE_IN
};

export default function TransactionStatusLabel({
  status,
  date,
  error,
  isEarliestNonce,
  className,
  statusOnly,
  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
  custodyStatus,
  custodyStatusDisplayText,
  ///: END:ONLY_INCLUDE_IN
}) {
  const t = useI18nContext();
  let tooltipText = error?.rpc?.message || error?.message;
  let statusKey = status;
  if (pendingStatusHash[status]) {
    statusKey = isEarliestNonce
      ? TransactionGroupStatus.pending
      : QUEUED_PSEUDO_STATUS;
  }

  let statusText = statusKey && t(statusKey);

  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
  statusText = custodyStatusDisplayText || t(statusKey);
  ///: END:ONLY_INCLUDE_IN

  if (statusKey === TransactionStatus.confirmed && !statusOnly) {
    statusText = date;
  }

  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
  const transactionStatusMap = useSelector(getTransactionStatusMap);
  const currentKeyring = useSelector(getCurrentKeyring);
  const custodyType = currentKeyring?.type.split(' - ')[1]?.toLowerCase();

  if (
    custodyStatus &&
    transactionStatusMap &&
    transactionStatusMap[custodyType]
  ) {
    const custodyStatusInfo = transactionStatusMap[custodyType][custodyStatus];
    const shortText = custodyStatusInfo?.shortText || custodyStatus;
    const longText = custodyStatusInfo?.longText;

    if (error) {
      tooltipText = error.message;
      statusText =
        custodyStatus === 'aborted'
          ? custodyStatusDisplayText
          : t('snapResultError');
    } else {
      tooltipText = custodyStatusDisplayText || longText || custodyStatus;
      statusText = custodyStatusDisplayText || shortText;
    }
  }

  ///: END:ONLY_INCLUDE_IN

  return (
    <Tooltip
      position="top"
      title={tooltipText}
      wrapperClassName={classnames(
        'transaction-status-label',
        `transaction-status-label--${statusKey}`,
        className,
        statusToClassNameHash[statusKey],
      )}
    >
      {statusText}
    </Tooltip>
  );
}

TransactionStatusLabel.propTypes = {
  status: PropTypes.string,
  className: PropTypes.string,
  date: PropTypes.string,
  error: PropTypes.object,
  isEarliestNonce: PropTypes.bool,
  statusOnly: PropTypes.bool,
  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
  custodyStatus: PropTypes.string,
  custodyStatusDisplayText: PropTypes.string,
  ///: END:ONLY_INCLUDE_IN
};