1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/transaction-icon/transaction-icon.js
Ariella Vu b6ade44bc9
Slight cleanup of constants/transactions, useTransactionDisplayData, and TransactionIcon (#14784)
* TransactionIcon: alphabetize categories

* useTransactionDisplayData: rm repetitive comment

* useTransactionDisplayData: mv signatureTypes

* useTxDisplayData: import transactionGroup @typedef

* userTxDisplayData: just vertical line spacing
2022-05-26 16:26:45 -05:00

80 lines
2.7 KiB
JavaScript

import React from 'react';
import { useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import Approve from '../../ui/icon/approve-icon.component';
import Interaction from '../../ui/icon/interaction-icon.component';
import Receive from '../../ui/icon/receive-icon.component';
import Send from '../../ui/icon/send-icon.component';
import Sign from '../../ui/icon/sign-icon.component';
import Swap from '../../ui/icon/swap-icon-for-list.component';
import {
TRANSACTION_GROUP_CATEGORIES,
TRANSACTION_GROUP_STATUSES,
TRANSACTION_STATUSES,
} from '../../../../shared/constants/transaction';
import { captureSingleException } from '../../../store/actions';
const ICON_MAP = {
[TRANSACTION_GROUP_CATEGORIES.APPROVAL]: Approve,
[TRANSACTION_GROUP_CATEGORIES.INTERACTION]: Interaction,
[TRANSACTION_GROUP_CATEGORIES.RECEIVE]: Receive,
[TRANSACTION_GROUP_CATEGORIES.SEND]: Send,
[TRANSACTION_GROUP_CATEGORIES.SIGNATURE_REQUEST]: Sign,
[TRANSACTION_GROUP_CATEGORIES.SWAP]: Swap,
};
const FAIL_COLOR = 'var(--color-error-default)';
const PENDING_COLOR = 'var(--color-icon-default)';
const OK_COLOR = 'var(--color-primary-default)';
const COLOR_MAP = {
[TRANSACTION_GROUP_STATUSES.PENDING]: PENDING_COLOR,
[TRANSACTION_GROUP_STATUSES.CANCELLED]: FAIL_COLOR,
[TRANSACTION_STATUSES.APPROVED]: PENDING_COLOR,
[TRANSACTION_STATUSES.DROPPED]: FAIL_COLOR,
[TRANSACTION_STATUSES.FAILED]: FAIL_COLOR,
[TRANSACTION_STATUSES.REJECTED]: FAIL_COLOR,
[TRANSACTION_STATUSES.SUBMITTED]: PENDING_COLOR,
[TRANSACTION_STATUSES.UNAPPROVED]: PENDING_COLOR,
};
export default function TransactionIcon({ status, category }) {
const dispatch = useDispatch();
const color = COLOR_MAP[status] || OK_COLOR;
const Icon = ICON_MAP[category];
if (!Icon) {
dispatch(
captureSingleException(
`The category prop passed to TransactionIcon is not supported. The prop is: ${category}`,
),
);
return <div className="transaction-icon__grey-circle" />;
}
return <Icon color={color} size={28} />;
}
TransactionIcon.propTypes = {
status: PropTypes.oneOf([
TRANSACTION_GROUP_STATUSES.CANCELLED,
TRANSACTION_GROUP_STATUSES.PENDING,
TRANSACTION_STATUSES.APPROVED,
TRANSACTION_STATUSES.CONFIRMED,
TRANSACTION_STATUSES.DROPPED,
TRANSACTION_STATUSES.FAILED,
TRANSACTION_STATUSES.REJECTED,
TRANSACTION_STATUSES.SUBMITTED,
TRANSACTION_STATUSES.UNAPPROVED,
]).isRequired,
category: PropTypes.oneOf([
TRANSACTION_GROUP_CATEGORIES.APPROVAL,
TRANSACTION_GROUP_CATEGORIES.INTERACTION,
TRANSACTION_GROUP_CATEGORIES.RECEIVE,
TRANSACTION_GROUP_CATEGORIES.SEND,
TRANSACTION_GROUP_CATEGORIES.SIGNATURE_REQUEST,
TRANSACTION_GROUP_CATEGORIES.SWAP,
]).isRequired,
};