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

ui/app/components/app/app-components.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';

ui/app/components/app/transaction-icon/transaction-icon.js

@@ -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,
 };

ui/components/app/transaction-icon/transaction-icon.scss

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