fix: revamp transaction details title on mobile (#374)

HathorNetwork · Jan 6, 2025 · 8b8ae00 · 8b8ae00
1 parent 3bd0eef
commit 8b8ae00
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/tx/TxData.js b/src/components/tx/TxData.js
@@ -1174,10 +1174,14 @@ class TxData extends React.Component {
             {hathorLib.transactionUtils.isBlock(this.props.transaction) ? 'Block' : 'Transaction'}{' '}
             Details
           </h2>
-
           <div className="tx-id-container">
             <label className="tx-title-purple">
-              {hathorLib.transactionUtils.isBlock(this.props.transaction) ? 'Block' : 'Transaction'}{' '}
+              {(() => {
+                if (hathorLib.transactionUtils.isBlock(this.props.transaction)) {
+                  return 'Block';
+                }
+                return this.props.isMobile ? 'TX' : 'Transaction';
+              })()}{' '}
               ID:
             </label>{' '}
             <label className="tx-id-top">{this.props.transaction.hash}</label>

diff --git a/src/screens/DecodeTx.js b/src/screens/DecodeTx.js
@@ -10,7 +10,7 @@ import TxTextInput from '../components/tx/TxTextInput';
 import TxData from '../components/tx/TxData';
 import helpers from '../utils/helpers';
 import txApi from '../api/txApi';
-import { useNewUiEnabled } from '../hooks';
+import { useIsMobile, useNewUiEnabled } from '../hooks';
 import { ReactComponent as InfoIcon } from '../assets/images/icon-info.svg';
 import NewHathorAlert from '../components/NewHathorAlert';
 
@@ -37,6 +37,8 @@ function DecodeTx() {
 
   const alertNotFound = useRef(null);
 
+  const isMobile = useIsMobile();
+
   const showSuccess = () => {
     alertNotFound.current.show(3000);
   };
@@ -133,6 +135,7 @@ function DecodeTx() {
             meta={meta}
             showConflicts={false}
             newUiEnabled
+            isMobile={isMobile}
           />
         ) : null}
         <div

diff --git a/src/screens/TransactionDetail.js b/src/screens/TransactionDetail.js
@@ -12,7 +12,7 @@ import TxData from '../components/tx/TxData';
 import txApi from '../api/txApi';
 import metadataApi from '../api/metadataApi';
 import Spinner from '../components/Spinner';
-import { useNewUiEnabled } from '../hooks';
+import { useIsMobile, useNewUiEnabled } from '../hooks';
 
 /**
  * Shows the detail of a transaction or block
@@ -22,6 +22,7 @@ import { useNewUiEnabled } from '../hooks';
 function TransactionDetail() {
   const { id: txUid } = useParams();
   const newUiEnabled = useNewUiEnabled();
+  const isMobile = useIsMobile();
 
   /**
    * transaction {Object} Loaded transaction
@@ -105,6 +106,7 @@ function TransactionDetail() {
             showRaw={true}
             showConflicts={true}
             newUiEnabled={newUiEnabled}
+            isMobile={isMobile}
           />
         ) : (
           <p className="text-danger">Transaction with hash {txUid} not found</p>