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

shared/constants/transaction.js

@@ -49,23 +49,23 @@ import { MESSAGE_TYPE } from './app';
  */
 export const TRANSACTION_TYPES = {
   CANCEL: 'cancel',
-  RETRY: 'retry',
-  TOKEN_METHOD_TRANSFER: 'transfer',
-  TOKEN_METHOD_TRANSFER_FROM: 'transferfrom',
-  TOKEN_METHOD_SAFE_TRANSFER_FROM: 'safetransferfrom',
-  TOKEN_METHOD_APPROVE: 'approve',
-  INCOMING: 'incoming',
-  SIMPLE_SEND: 'simpleSend',
   CONTRACT_INTERACTION: 'contractInteraction',
   DEPLOY_CONTRACT: 'contractDeployment',
-  SWAP: 'swap',
-  SWAP_APPROVAL: 'swapApproval',
-  SMART: 'smart',
-  SIGN: MESSAGE_TYPE.ETH_SIGN,
-  SIGN_TYPED_DATA: MESSAGE_TYPE.ETH_SIGN_TYPED_DATA,
-  PERSONAL_SIGN: MESSAGE_TYPE.PERSONAL_SIGN,
   ETH_DECRYPT: MESSAGE_TYPE.ETH_DECRYPT,
   ETH_GET_ENCRYPTION_PUBLIC_KEY: MESSAGE_TYPE.ETH_GET_ENCRYPTION_PUBLIC_KEY,
+  INCOMING: 'incoming',
+  PERSONAL_SIGN: MESSAGE_TYPE.PERSONAL_SIGN,
+  RETRY: 'retry',
+  SIGN: MESSAGE_TYPE.ETH_SIGN,
+  SIGN_TYPED_DATA: MESSAGE_TYPE.ETH_SIGN_TYPED_DATA,
+  SIMPLE_SEND: 'simpleSend',
+  SMART: 'smart',
+  SWAP: 'swap',
+  SWAP_APPROVAL: 'swapApproval',
+  TOKEN_METHOD_APPROVE: 'approve',
+  TOKEN_METHOD_SAFE_TRANSFER_FROM: 'safetransferfrom',
+  TOKEN_METHOD_TRANSFER: 'transfer',
+  TOKEN_METHOD_TRANSFER_FROM: 'transferfrom',
 };
 
 /**
@@ -214,10 +214,10 @@ export const SMART_TRANSACTION_STATUSES = {
  * @type {TransactionGroupCategories}
  */
 export const TRANSACTION_GROUP_CATEGORIES = {
-  SEND: 'send',
-  RECEIVE: 'receive',
-  INTERACTION: 'interaction',
   APPROVAL: 'approval',
+  INTERACTION: 'interaction',
+  RECEIVE: 'receive',
+  SEND: 'send',
   SIGNATURE_REQUEST: 'signature-request',
   SWAP: 'swap',
 };

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

@@ -17,9 +17,9 @@ 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.RECEIVE]: Receive,
   [TRANSACTION_GROUP_CATEGORIES.SWAP]: Swap,
 };
 
@@ -29,13 +29,13 @@ const OK_COLOR = 'var(--color-primary-default)';
 
 const COLOR_MAP = {
   [TRANSACTION_GROUP_STATUSES.PENDING]: PENDING_COLOR,
-  [TRANSACTION_STATUSES.UNAPPROVED]: 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_GROUP_STATUSES.CANCELLED]: FAIL_COLOR,
-  [TRANSACTION_STATUSES.DROPPED]: FAIL_COLOR,
   [TRANSACTION_STATUSES.SUBMITTED]: PENDING_COLOR,
+  [TRANSACTION_STATUSES.UNAPPROVED]: PENDING_COLOR,
 };
 
 export default function TransactionIcon({ status, category }) {
@@ -58,22 +58,22 @@ export default function TransactionIcon({ status, category }) {
 
 TransactionIcon.propTypes = {
   status: PropTypes.oneOf([
+    TRANSACTION_GROUP_STATUSES.CANCELLED,
     TRANSACTION_GROUP_STATUSES.PENDING,
-    TRANSACTION_STATUSES.UNAPPROVED,
     TRANSACTION_STATUSES.APPROVED,
+    TRANSACTION_STATUSES.CONFIRMED,
+    TRANSACTION_STATUSES.DROPPED,
     TRANSACTION_STATUSES.FAILED,
     TRANSACTION_STATUSES.REJECTED,
-    TRANSACTION_GROUP_STATUSES.CANCELLED,
-    TRANSACTION_STATUSES.DROPPED,
-    TRANSACTION_STATUSES.CONFIRMED,
     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.RECEIVE,
     TRANSACTION_GROUP_CATEGORIES.SWAP,
   ]).isRequired,
 };

ui/hooks/useTransactionDisplayData.js

@@ -37,17 +37,41 @@ import { useTokenData } from './useTokenData';
 import { useSwappedTokenValue } from './useSwappedTokenValue';
 import { useCurrentAsset } from './useCurrentAsset';
 
+/**
+ *  There are seven types of transaction entries that are currently differentiated in the design:
+ *  1. Signature request
+ *  2. Send (sendEth sendTokens)
+ *  3. Deposit
+ *  4. Site interaction
+ *  5. Approval
+ *  6. Swap
+ *  7. Swap Approval
+ */
+const signatureTypes = [
+  null,
+  undefined,
+  TRANSACTION_TYPES.SIGN,
+  TRANSACTION_TYPES.PERSONAL_SIGN,
+  TRANSACTION_TYPES.SIGN_TYPED_DATA,
+  TRANSACTION_TYPES.ETH_DECRYPT,
+  TRANSACTION_TYPES.ETH_GET_ENCRYPTION_PUBLIC_KEY,
+];
+
+/**
+ * @typedef {(import('../../selectors/transactions').TransactionGroup} TransactionGroup
+ */
+
 /**
  * @typedef {Object} TransactionDisplayData
- * @property {string} title - primary description of the transaction
- * @property {string} subtitle - supporting text describing the transaction
- * @property {bool} subtitleContainsOrigin - true if the subtitle includes the origin of the tx
- * @property {string} category - the transaction category
+ * @property {string} category - the transaction category that will be used for rendering the icon in the activity list
  * @property {string} primaryCurrency - the currency string to display in the primary position
- * @property {string} [secondaryCurrency] - the currency string to display in the secondary position
- * @property {string} status - the status of the transaction
- * @property {string} senderAddress - the Ethereum address of the sender
  * @property {string} recipientAddress - the Ethereum address of the recipient
+ * @property {string} senderAddress - the Ethereum address of the sender
+ * @property {string} status - the status of the transaction
+ * @property {string} subtitle - the supporting text describing the transaction
+ * @property {boolean} subtitleContainsOrigin - true if the subtitle includes the origin of the tx
+ * @property {string} title - the primary title of the tx that will be displayed in the activity list
+ * @property {string} [secondaryCurrency] - the currency string to display in the secondary position
  */
 
 /**
@@ -58,7 +82,7 @@ import { useCurrentAsset } from './useCurrentAsset';
  * of data that can power all views related to a transaction. Presently the main
  * case is for shared logic between transaction-list-item and transaction-detail-view
  *
- * @param {Object} transactionGroup - group of transactions
+ * @param {TransactionGroup} transactionGroup - group of transactions of the same nonce
  * @returns {TransactionDisplayData}
  */
 export function useTransactionDisplayData(transactionGroup) {
@@ -69,10 +93,10 @@ export function useTransactionDisplayData(transactionGroup) {
   const knownTokens = useSelector(getTokens);
   const knownCollectibles = useSelector(getCollectibles);
   const t = useI18nContext();
+
   const { initialTransaction, primaryTransaction } = transactionGroup;
   // initialTransaction contains the data we need to derive the primary purpose of this transaction group
   const { type } = initialTransaction;
-
   const { from: senderAddress, to } = initialTransaction.txParams || {};
 
   // for smart contract interactions, methodData can be used to derive the name of the action being taken
@@ -86,8 +110,9 @@ export function useTransactionDisplayData(transactionGroup) {
   const isSubmitted = displayedStatusKey === TRANSACTION_STATUSES.SUBMITTED;
 
   const primaryValue = primaryTransaction.txParams?.value;
-  let prefix = '-';
   const date = formatDateWithYearContext(initialTransaction.time);
+
+  let prefix = '-';
   let subtitle;
   let subtitleContainsOrigin = false;
   let recipientAddress = to;
@@ -149,9 +174,8 @@ export function useTransactionDisplayData(transactionGroup) {
   // used to display fiat amount of tx. initialized to either tokenFiatAmount or undefined
   // but can later be modified if dealing with a swap
   let secondaryDisplayValue = isTokenCategory ? tokenFiatAmount : undefined;
-  // The transaction group category that will be used for rendering the icon in the activity list
+
   let category;
-  // The primary title of the Tx that will be displayed in the activity list
   let title;
 
   const {
@@ -161,25 +185,6 @@ export function useTransactionDisplayData(transactionGroup) {
     isViewingReceivedTokenFromSwap,
   } = useSwappedTokenValue(transactionGroup, currentAsset);
 
-  // There are seven types of transaction entries that are currently differentiated in the design
-  // 1. Signature request
-  // 2. Send (sendEth sendTokens)
-  // 3. Deposit
-  // 4. Site interaction
-  // 5. Approval
-  // 6. Swap
-  // 7. Swap Approval
-
-  const signatureTypes = [
-    null,
-    undefined,
-    TRANSACTION_TYPES.SIGN,
-    TRANSACTION_TYPES.PERSONAL_SIGN,
-    TRANSACTION_TYPES.SIGN_TYPED_DATA,
-    TRANSACTION_TYPES.ETH_DECRYPT,
-    TRANSACTION_TYPES.ETH_GET_ENCRYPTION_PUBLIC_KEY,
-  ];
-
   if (signatureTypes.includes(type)) {
     category = TRANSACTION_GROUP_CATEGORIES.SIGNATURE_REQUEST;
     title = t('signatureRequest');