Merge pull request #769 from ambrosus/AMB-4992

hotfix: add additional case for transaction type label & icon
ambrosus · Nov 21, 2024 · 23eb6d7 · 23eb6d7
2 parents 1a0d6d9 + d672b67
commit 23eb6d7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/components/templates/TransactionDetails/index.tsx b/src/components/templates/TransactionDetails/index.tsx
@@ -17,7 +17,7 @@ import { AddressRowWithAction } from '../ExplorerAccount/components/address-row-
 interface TransactionDetailsProps {
   transaction: Transaction;
   isShareable?: boolean;
-  transactionTokenInfo: TransactionTokenInfo;
+  transactionTokenInfo?: TransactionTokenInfo;
 }
 
 const JustifiedRow = ({ children }: { children: React.ReactNode }) => (
@@ -36,9 +36,10 @@ export const TransactionDetails = ({
   const currentStatus = t(`common.transaction.status.${transaction.status}`);
 
   const isTransfer = transaction.type === 'Transfer';
-  const isERC1155 = transactionTokenInfo.type === 'ERC-1155';
+  const isERC1155 = transactionTokenInfo?.type === 'ERC-1155';
   const isContractCall = transaction.type.includes('ContractCall');
   const isTokenTransfer = transaction.type === 'TokenTransfer';
+  const isBlockReward = transaction.type === 'BlockReward';
   const isSuccessTransaction = transaction.status === 'SUCCESS';
   const isPendingTransaction = transaction.status === 'PENDING';
 
@@ -49,18 +50,24 @@ export const TransactionDetails = ({
         return 'AirDAO';
       case isTokenTransfer:
         return transaction?.token?.name;
+      case isBlockReward:
       case isContractCall:
         return transaction?.value?.symbol;
-      default:
+      default: {
+        if (transaction.value && transaction.value.symbol) {
+          return transaction?.value?.symbol;
+        }
         return 'unknown';
+      }
     }
   }, [
+    isBlockReward,
     isContractCall,
     isERC1155,
     isTokenTransfer,
     isTransfer,
     transaction?.token?.name,
-    transaction?.value?.symbol
+    transaction.value
   ]);
 
   // Render Tx Status
@@ -96,11 +103,11 @@ export const TransactionDetails = ({
 
   const amountWithSymbolValue = useMemo(() => {
     const amount = NumberUtils.numberToTransformedLocale(
-      transactionTokenInfo.cryptoAmount
+      transactionTokenInfo?.cryptoAmount ?? 0
     );
 
     return transaction.isSent ? `-${amount}` : amount;
-  }, [transaction, transactionTokenInfo.cryptoAmount]);
+  }, [transaction, transactionTokenInfo]);
 
   return (
     <View testID="Transaction_Details">

diff --git a/src/features/explorer/utils/tx-status.tsx b/src/features/explorer/utils/tx-status.tsx
@@ -7,6 +7,7 @@ import {
   FailedIcon
 } from '@components/svg/icons/v2/transactions';
 import { Transaction } from '@models';
+import { COLORS } from '@constants/colors';
 
 export const _txStatusLabel = (tx: Transaction) => {
   const { type, status } = tx;
@@ -16,14 +17,17 @@ export const _txStatusLabel = (tx: Transaction) => {
   const typeLabels: Record<string, string> = {
     [TransactionType.TokenTransfer]: 'Transfer',
     [TransactionType.Transfer]: 'Transfer',
-    [TransactionType.ContractCall]: 'Contract call'
+    [TransactionType.ContractCall]: 'Contract call',
+    [TransactionType.BlockReward]: 'Block reward'
   };
 
-  const statusLabel = type.includes('ContractCall')
+  const statusLabel = type.includes('ValidatorSet')
+    ? 'Validator Set'
+    : type.includes('ContractCall')
     ? 'Contract call'
     : typeLabels[type];
 
-  return statusLabel || (!isTxSuccess ? 'Failed Transaction' : undefined);
+  return statusLabel || (!isTxSuccess ? 'Failed Transaction' : ' ');
 };
 
 export const _txStatusThumbnail = (tx: Transaction) => {
@@ -32,14 +36,11 @@ export const _txStatusThumbnail = (tx: Transaction) => {
 
   // Simplified logic for returning the appropriate icon
   const iconMap: Record<string, JSX.Element> = {
-    [TransactionType.Transfer]: isSent ? (
-      <TransferSentIcon />
-    ) : (
-      <TransferReceivedIcon />
-    ),
-    [TransactionType.ContractCall]: <ContractCallIcon />,
-    default: <FailedIcon />
+    'Transfer': isSent ? <TransferSentIcon /> : <TransferReceivedIcon />,
+    'Contract call': <ContractCallIcon />,
+    'Validator Set': <TransferSentIcon />,
+    'default': <FailedIcon color={COLORS.error400} />
   };
 
-  return iconMap[label as string] || iconMap['default'];
+  return iconMap[label as string] || iconMap.default;
 };