updated anchored display

multiversx · Dec 6, 2024 · 2534783 · 2534783
1 parent afe8190
commit 2534783
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git a/src/components/DataDecode/DataDecode.tsx b/src/components/DataDecode/DataDecode.tsx
@@ -12,22 +12,25 @@ import { Anchor, Dropdown } from 'react-bootstrap';
 import { MAX_DECODE_TX_DATA_LENGTH } from 'appConstants';
 import { CopyButton } from 'components';
 import { faExclamationTriangle } from 'icons/regular';
+import { WithClassnameType } from 'types';
+
+export interface DataDecodeUIType extends WithClassnameType {
+  value: string;
+  className?: string;
+  initialDecodeMethod?: DecodeMethodEnum;
+  setDecodeMethod?: Dispatch<SetStateAction<DecodeMethodEnum>>;
+  identifier?: string;
+  anchoredContent?: ReactNode;
+}
 
 export const DataDecode = ({
   value,
   className,
   initialDecodeMethod,
   setDecodeMethod,
   identifier,
-  children
-}: {
-  value: string;
-  className?: string;
-  initialDecodeMethod?: DecodeMethodEnum;
-  setDecodeMethod?: Dispatch<SetStateAction<DecodeMethodEnum>>;
-  identifier?: string;
-  children?: ReactNode;
-}) => {
+  anchoredContent
+}: DataDecodeUIType) => {
   const defaultDecodeMethod =
     initialDecodeMethod &&
     Object.values<string>(DecodeMethodEnum).includes(initialDecodeMethod)
@@ -76,7 +79,7 @@ export const DataDecode = ({
       }`}
     >
       <div className={`form-control textarea ${className ? className : ''}`}>
-        {children ? children : displayValue}
+        {anchoredContent ? anchoredContent : displayValue}
       </div>
       {value && value !== 'N/A' && (
         <div className='d-flex button-holder'>

diff --git a/src/pages/TransactionDetails/components/DataField/DataField.tsx b/src/pages/TransactionDetails/components/DataField/DataField.tsx
@@ -64,7 +64,10 @@ export const DataField = ({
   }, [decodeMethod, pathname]);
 
   const showRawLinks =
-    decodeMethod === DecodeMethodEnum.raw && (showData || skipDataScamCheck);
+    decodeMethod === DecodeMethodEnum.raw &&
+    stringWithLinks &&
+    (showData || skipDataScamCheck);
+
   const value = truncate(
     skipDataScamCheck ? dataString : output,
     MAX_DISPLAY_TX_DATA_LENGTH
@@ -76,17 +79,20 @@ export const DataField = ({
         value={value}
         initialDecodeMethod={!id ? dataDecode : DecodeMethodEnum.raw}
         setDecodeMethod={setDecodeMethod}
-      >
-        {showRawLinks && (
-          <Anchorme
-            linkComponent={ModalLink}
-            target='_blank'
-            rel='noreferrer nofollow noopener'
-          >
-            {stringWithLinks}
-          </Anchorme>
-        )}
-      </DataDecode>
+        {...(showRawLinks
+          ? {
+              anchoredContent: (
+                <Anchorme
+                  linkComponent={ModalLink}
+                  target='_blank'
+                  rel='noreferrer nofollow noopener'
+                >
+                  {stringWithLinks || output}
+                </Anchorme>
+              )
+            }
+          : {})}
+      />
       {found && !skipDataScamCheck && (
         <a href='/#' onClick={show} className='small-font text-muted'>
           {!showData ? 'Show' : 'Hide'} original message