diff --git a/ui/app/helpers/utils/transactions.util.js b/ui/app/helpers/utils/transactions.util.js index 61f2e1f8c..06a7a269e 100644 --- a/ui/app/helpers/utils/transactions.util.js +++ b/ui/app/helpers/utils/transactions.util.js @@ -205,3 +205,45 @@ export function getBlockExplorerUrlForTx(networkId, hash, rpcPrefs = {}) { const prefix = getEtherscanNetworkPrefix(networkId); return `https://${prefix}etherscan.io/tx/${hash}`; } + +/** + * Returns a title for the given transaction category. + * + * This will throw an error if the transaction category is unrecognized and no default is provided. + * @param {function} t - The translation function + * @param {TRANSACTION_CATEGORIES[keyof TRANSACTION_CATEGORIES]} transactionCategory - The transaction category constant + * @returns {string} The transaction category title + */ +export function getTransactionCategoryTitle(t, transactionCategory) { + switch (transactionCategory) { + case TRANSACTION_CATEGORIES.TOKEN_METHOD_TRANSFER: { + return t('transfer'); + } + case TRANSACTION_CATEGORIES.TOKEN_METHOD_TRANSFER_FROM: { + return t('transferfrom'); + } + case TRANSACTION_CATEGORIES.TOKEN_METHOD_APPROVE: { + return t('approve'); + } + case TRANSACTION_CATEGORIES.SENT_ETHER: { + return t('sentEther'); + } + case TRANSACTION_CATEGORIES.CONTRACT_INTERACTION: { + return t('contractInteraction'); + } + case TRANSACTION_CATEGORIES.DEPLOY_CONTRACT: { + return t('contractDeployment'); + } + case TRANSACTION_CATEGORIES.SWAP: { + return t('swap'); + } + case TRANSACTION_CATEGORIES.SWAP_APPROVAL: { + return t('swapApproval'); + } + default: { + throw new Error( + `Unrecognized transaction category: ${transactionCategory}`, + ); + } + } +} diff --git a/ui/app/hooks/useTransactionDisplayData.js b/ui/app/hooks/useTransactionDisplayData.js index ff0b7b6c9..18b0e7c39 100644 --- a/ui/app/hooks/useTransactionDisplayData.js +++ b/ui/app/hooks/useTransactionDisplayData.js @@ -1,6 +1,9 @@ import { useSelector } from 'react-redux'; import { getKnownMethodData } from '../selectors/selectors'; -import { getStatusKey } from '../helpers/utils/transactions.util'; +import { + getStatusKey, + getTransactionCategoryTitle, +} from '../helpers/utils/transactions.util'; import { camelCaseToCapitalize } from '../helpers/utils/common.util'; import { PRIMARY, SECONDARY } from '../helpers/constants/common'; import { getTokenAddressParam } from '../helpers/utils/token-util'; @@ -186,9 +189,13 @@ export function useTransactionDisplayData(transactionGroup) { transactionCategory === TRANSACTION_CATEGORIES.CONTRACT_INTERACTION ) { category = TRANSACTION_GROUP_CATEGORIES.INTERACTION; + const transactionCategoryTitle = getTransactionCategoryTitle( + t, + transactionCategory, + ); title = (methodData?.name && camelCaseToCapitalize(methodData.name)) || - t(transactionCategory); + transactionCategoryTitle; subtitle = origin; subtitleContainsOrigin = true; } else if (transactionCategory === TRANSACTION_CATEGORIES.INCOMING) { diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js index 5d09b3198..d1b702df9 100644 --- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -22,6 +22,7 @@ import { TRANSACTION_CATEGORIES, TRANSACTION_STATUSES, } from '../../../../shared/constants/transaction'; +import { getTransactionCategoryTitle } from '../../helpers/utils/transactions.util'; export default class ConfirmTransactionBase extends Component { static contextTypes = { @@ -690,7 +691,7 @@ export default class ConfirmTransactionBase extends Component { let functionType = getMethodName(name); if (!functionType) { if (transactionCategory) { - functionType = t(transactionCategory) || transactionCategory; + functionType = getTransactionCategoryTitle(t, transactionCategory); } else { functionType = t('contractInteraction'); }