From 99608edc00d237350ead6e198fe160c8f899009d Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 17 May 2021 12:01:00 -0230
Subject: [PATCH] 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     |  1 +
 .../app/transaction-icon/transaction-icon.js  | 30 +++++++++++++++++--
 .../transaction-icon/transaction-icon.scss    |  8 +++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 ui/components/app/transaction-icon/transaction-icon.scss

diff --git a/ui/app/components/app/app-components.scss b/ui/app/components/app/app-components.scss
index 4f407569d..8110d8341 100644
--- a/ui/app/components/app/app-components.scss
+++ b/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';
diff --git a/ui/app/components/app/transaction-icon/transaction-icon.js b/ui/app/components/app/transaction-icon/transaction-icon.js
index 5fd8a3cd7..1876e0535 100644
--- a/ui/app/components/app/transaction-icon/transaction-icon.js
+++ b/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,
 };
diff --git a/ui/components/app/transaction-icon/transaction-icon.scss b/ui/components/app/transaction-icon/transaction-icon.scss
new file mode 100644
index 000000000..743b66022
--- /dev/null
+++ b/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;
+  }
+}