Improve type checking and handle incorrect category in transaction-icon component (#11101)

* Improve type checking and handle incorrect category in transaction-icon component

* Capture exception for sentry when transaction icon is passed an unrequired category

* Rename ui/components/app/transaction-icon/index.scss -> ui/components/app/transaction-icon/transaction-icon.scss
feature/default_network_editable
Dan J Miller 4 years ago committed by GitHub
parent b8177b22db
commit 2e11458d29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      ui/components/app/app-components.scss
  2. 30
      ui/components/app/transaction-icon/transaction-icon.js
  3. 8
      ui/components/app/transaction-icon/transaction-icon.scss

@ -31,6 +31,7 @@
@import 'token-cell/token-cell';
@import 'transaction-activity-log/index';
@import 'transaction-breakdown/index';
@import 'transaction-icon/transaction-icon';
@import 'transaction-list-item-details/index';
@import 'transaction-list-item/index';
@import 'transaction-list/index';

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { captureException } from '@sentry/browser';
import Approve from '../../ui/icon/approve-icon.component';
import Interaction from '../../ui/icon/interaction-icon.component';
import Receive from '../../ui/icon/receive-icon.component';
@ -40,10 +41,35 @@ export default function TransactionIcon({ status, category }) {
const Icon = ICON_MAP[category];
if (!Icon) {
captureException(
Error(
`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.string.isRequired,
category: PropTypes.string.isRequired,
status: PropTypes.oneOf([
TRANSACTION_GROUP_CATEGORIES.APPROVAL,
TRANSACTION_GROUP_CATEGORIES.INTERACTION,
TRANSACTION_GROUP_CATEGORIES.SEND,
TRANSACTION_GROUP_CATEGORIES.SIGNATURE_REQUEST,
TRANSACTION_GROUP_CATEGORIES.RECEIVE,
TRANSACTION_GROUP_CATEGORIES.SWAP,
]).isRequired,
category: PropTypes.oneOf([
TRANSACTION_GROUP_STATUSES.PENDING,
TRANSACTION_STATUSES.UNAPPROVED,
TRANSACTION_STATUSES.APPROVED,
TRANSACTION_STATUSES.FAILED,
TRANSACTION_STATUSES.REJECTED,
TRANSACTION_GROUP_STATUSES.CANCELLED,
TRANSACTION_STATUSES.DROPPED,
]).isRequired,
};

@ -0,0 +1,8 @@
.transaction-icon {
&__grey-circle {
height: 28px;
width: 28px;
border-radius: 14px;
background: $Grey-100;
}
}
Loading…
Cancel
Save