m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source 
* 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
This commit is contained in:
Dan J Miller 2021-05-17 12:01:00 -02:30 committed by ryanml
parent 8254213b9c
commit 99608edc00
3 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/components/app/app-components.scss
View File

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

30
ui/app/components/app/transaction-icon/transaction-icon.js
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { captureException } from '@sentry/browser';
import Approve from '../../ui/icon/approve-icon.component'; import Approve from '../../ui/icon/approve-icon.component';
import Interaction from '../../ui/icon/interaction-icon.component'; import Interaction from '../../ui/icon/interaction-icon.component';
import Receive from '../../ui/icon/receive-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]; 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} />; return <Icon color={color} size={28} />;
} }
TransactionIcon.propTypes = { TransactionIcon.propTypes = {
status: PropTypes.string.isRequired, status: PropTypes.oneOf([
category: PropTypes.string.isRequired, 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,
}; };

8
ui/components/app/transaction-icon/transaction-icon.scss Normal file
View File

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