Fix

multiversx · Nov 28, 2024 · 0b389e0 · 0b389e0
1 parent e70cbd7
commit 0b389e0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 15 deletions.
diff --git a/...nsactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx b/...nsactionsModals/SignWithDeviceModal/components/components/ConfirmAmount/ConfirmAmount.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import { DECIMALS } from 'constants/index';
 import { withStyles } from 'hocs/withStyles';
 import { useGetEgldPrice, useGetTokenDetails } from 'hooks';
 import { ActiveLedgerTransactionType } from 'types';
 import { NftEnumType } from 'types/tokens.types';
 import { LoadingDots } from 'UI/LoadingDots';
 
+import { getEgldLabel } from 'utils';
 import { WithStylesImportType } from '../../../../../../hocs/useStyles';
 
 import {
@@ -43,15 +45,21 @@ const ConfirmAmountComponent = ({
     type: undefined,
     isLoading: false,
     esdtPrice: egldPrice,
-    identifier: 'EGLD-000000'
+    identifier: 'EGLD-000000',
+    tokenAvatar: '',
+    tokenDecimals: DECIMALS,
+    tokenLabel: getEgldLabel()
   };
 
+  const usedTokenDetails =
+    tokenId === egldTokenDetails.identifier ? egldTokenDetails : tokenDetails;
+
   const {
     type,
     esdtPrice,
     isLoading: isTokenDetailsLoading,
     identifier
-  } = tokenId === egldTokenDetails.identifier ? egldTokenDetails : tokenDetails;
+  } = usedTokenDetails;
 
   const isEgld = !tokenId;
   const tokenPrice = isEgld ? egldPrice : esdtPrice;
@@ -91,7 +99,7 @@ const ConfirmAmountComponent = ({
             <ConfirmAmountNftSft
               amount={amount}
               type={type}
-              tokenDetails={tokenDetails}
+              tokenDetails={usedTokenDetails}
             />
           ) : (
             <ConfirmAmountData
@@ -100,7 +108,7 @@ const ConfirmAmountComponent = ({
               amount={amount}
               handleReference={handleAmountReference}
               currentTransaction={currentTransaction}
-              tokenDetails={tokenDetails}
+              tokenDetails={usedTokenDetails}
               tokenPrice={tokenPrice}
             />
           )}

diff --git a/...al/components/components/ConfirmAmount/components/ConfirmAmountData/ConfirmAmountData.tsx b/...al/components/components/ConfirmAmount/components/ConfirmAmountData/ConfirmAmountData.tsx
@@ -47,17 +47,19 @@ const ConfirmAmountDataComponent = ({
       addCommas
     });
 
+  // TODO: Remove when EGLD-000000 is available on API
+  const usedIsEgld = isEgld || tokenDetails.identifier === 'EGLD-000000';
   const formattedAmount = getFormattedAmount({ addCommas: true });
   const rawAmount = getFormattedAmount({ addCommas: false });
 
   return (
     <div className={styles?.confirmAmountData}>
       <div className={styles?.confirmAmountDataWrapper}>
-        {!isEgld && tokenAvatar && (
+        {!usedIsEgld && tokenAvatar && (
           <img src={tokenAvatar} className={styles?.confirmAmountDataIcon} />
         )}
 
-        {!isEgld && !tokenAvatar && (
+        {!usedIsEgld && !tokenAvatar && (
           <div
             className={classNames(
               styles?.confirmAmountDataIcon,
@@ -77,11 +79,11 @@ const ConfirmAmountDataComponent = ({
         >
           <Balance
             amount={formattedAmount}
-            egldIcon={isEgld}
+            egldIcon={usedIsEgld}
             data-testid={DataTestIdsEnum.confirmAmount}
             showTokenLabel
             showTokenLabelSup
-            tokenLabel={isEgld ? network.egldLabel : identifier}
+            tokenLabel={usedIsEgld ? network.egldLabel : identifier}
             className={styles?.confirmAmountDataBalance}
           />
         </div>

diff --git a/src/UI/TransactionData/TransactionData.tsx b/src/UI/TransactionData/TransactionData.tsx
@@ -60,8 +60,10 @@ const TransactionDataComponent = ({
   const [encodedScCall, ...remainingDataFields] =
     highlight && isScCall ? highlight.split('@') : [];
 
-  const isHighlightedData = data && highlight;
-  const occurrences = isHighlightedData ? allOccurences(data, highlight) : [];
+  const isHighlightedData = decodedData && highlight;
+  const occurrences = isHighlightedData
+    ? allOccurences(decodedData, highlight)
+    : [];
   const showHighlight = isHighlightedData && occurrences.length > 0;
 
   const handleElementReference = (element: HTMLElement | null) => {
@@ -83,7 +85,7 @@ const TransactionDataComponent = ({
   if (showHighlight) {
     switch (true) {
       case decodedData.startsWith(highlight): {
-        const [, rest] = data.split(highlight);
+        const [, rest] = decodedData.split(highlight);
 
         output = (
           <>
@@ -93,8 +95,8 @@ const TransactionDataComponent = ({
         );
         break;
       }
-      case data.endsWith(highlight): {
-        const [rest] = data.split(highlight);
+      case decodedData.endsWith(highlight): {
+        const [rest] = decodedData.split(highlight);
 
         output = (
           <>
@@ -114,7 +116,7 @@ const TransactionDataComponent = ({
         const { start, end } = getUnHighlightedDataFieldParts({
           occurrences,
           transactionIndex,
-          data: data,
+          data: decodedData,
           highlight
         });
 
@@ -165,7 +167,7 @@ const TransactionDataComponent = ({
                 {decodedScCall}
               </span>
 
-              {data && (
+              {decodedData && (
                 <CopyButton
                   text={decodedScCall}
                   className={styles?.transactionDataValueCopy}