From c93ae60f4a8bf1c4b288bad409841bd413248418 Mon Sep 17 00:00:00 2001
From: salimtb <salim.toubal@outlook.com>
Date: Wed, 27 Nov 2024 11:08:55 +0100
Subject: [PATCH] fix: fix transaction list message on token detail page

---
 app/_locales/en/messages.json                 |  7 ++
 .../transaction-list.component.js             | 17 ++++-
 .../transaction-list/transaction-list.test.js | 65 +++++++++++++++++++
 ui/pages/asset/components/asset-page.tsx      |  2 +-
 4 files changed, 89 insertions(+), 2 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index e9e9cc807ccd..3b8b2bfa9682 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3403,6 +3403,13 @@
   "noTransactions": {
     "message": "You have no transactions"
   },
+  "noTransactionsChainIdMismatch": {
+    "message": "Please switch network to view transactions"
+  },
+  "noTransactionsNetworkName": {
+    "message": "Please switch to $1 network to view transactions",
+    "description": "$1 represents the network name"
+  },
   "noWebcamFound": {
     "message": "Your computer's webcam was not found. Please try again."
   },
diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js
index 2fd7d0bc6d1a..47b422457143 100644
--- a/ui/components/app/transaction-list/transaction-list.component.js
+++ b/ui/components/app/transaction-list/transaction-list.component.js
@@ -55,6 +55,7 @@ import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
 import { getMultichainNetwork } from '../../../selectors/multichain';
 import { endTrace, TraceName } from '../../../../shared/lib/trace';
+import { getNetworkConfigurationsByChainId } from '../../../../shared/modules/selectors/networks';
 
 const PAGE_INCREMENT = 10;
 
@@ -140,6 +141,7 @@ export default function TransactionList({
   hideTokenTransactions,
   tokenAddress,
   boxProps,
+  tokenChainId,
 }) {
   const [limit, setLimit] = useState(PAGE_INCREMENT);
   const t = useI18nContext();
@@ -151,7 +153,16 @@ export default function TransactionList({
     nonceSortedCompletedTransactionsSelector,
   );
   const chainId = useSelector(getCurrentChainId);
+  const networkConfigurationsByChainId = useSelector(
+    getNetworkConfigurationsByChainId,
+  );
+  const networkName = networkConfigurationsByChainId[tokenChainId]?.name;
   const selectedAccount = useSelector(getSelectedAccount);
+  const isChainIdMismatch = tokenChainId && tokenChainId !== chainId;
+
+  const noTransactionsMessage = networkName
+    ? t('noTransactionsNetworkName', [networkName])
+    : t('noTransactionsChainIdMismatch');
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const shouldHideZeroBalanceTokens = useSelector(
@@ -383,7 +394,9 @@ export default function TransactionList({
             ) : (
               <Box className="transaction-list__empty">
                 <Box className="transaction-list__empty-text">
-                  {t('noTransactions')}
+                  {isChainIdMismatch
+                    ? noTransactionsMessage
+                    : t('noTransactions')}
                 </Box>
               </Box>
             )}
@@ -407,10 +420,12 @@ TransactionList.propTypes = {
   hideTokenTransactions: PropTypes.bool,
   tokenAddress: PropTypes.string,
   boxProps: PropTypes.object,
+  tokenChainId: PropTypes.string,
 };
 
 TransactionList.defaultProps = {
   hideTokenTransactions: false,
   tokenAddress: undefined,
   boxProps: undefined,
+  tokenChainId: null,
 };
diff --git a/ui/components/app/transaction-list/transaction-list.test.js b/ui/components/app/transaction-list/transaction-list.test.js
index e6e42ab78fc5..ca23f364166b 100644
--- a/ui/components/app/transaction-list/transaction-list.test.js
+++ b/ui/components/app/transaction-list/transaction-list.test.js
@@ -85,4 +85,69 @@ describe('TransactionList', () => {
       },
     });
   });
+
+  it('renders TransactionList component and shows Chain ID mismatch text if network name is not available', () => {
+    const store = configureStore(defaultState);
+
+    const { getByText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <TransactionList tokenChainId="0x89" />
+      </MetaMetricsContext.Provider>,
+      store,
+    );
+    expect(
+      getByText('Please switch network to view transactions'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders TransactionList component and shows network name text', () => {
+    const defaultState2 = {
+      metamask: {
+        ...mockState.metamask,
+        selectedNetworkClientId: 'mainnet',
+        networkConfigurationsByChainId: {
+          '0x1': {
+            blockExplorerUrls: [],
+            chainId: '0x1',
+            defaultRpcEndpointIndex: 0,
+            name: 'Mainnet',
+            nativeCurrency: 'ETH',
+            rpcEndpoints: [
+              {
+                networkClientId: 'mainnet',
+                type: 'infura',
+                url: 'https://mainnet.infura.io/v3/{infuraProjectId}',
+              },
+            ],
+          },
+          '0xe708': {
+            blockExplorerUrls: [],
+            chainId: '0xe708',
+            defaultRpcEndpointIndex: 0,
+            name: 'Linea Mainnet',
+            nativeCurrency: 'ETH',
+            rpcEndpoints: [
+              {
+                networkClientId: 'linea-mainnet',
+                type: 'infura',
+                url: 'https://linea-mainnet.infura.io/v3/{infuraProjectId}',
+              },
+            ],
+          },
+        },
+        transactions: [],
+      },
+    };
+    const store = configureStore(defaultState2);
+
+    const { getByText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <TransactionList tokenChainId="0xe708" />
+      </MetaMetricsContext.Provider>,
+      store,
+    );
+    expect(
+      getByText('Please switch to Linea Mainnet network to view transactions'),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/ui/pages/asset/components/asset-page.tsx b/ui/pages/asset/components/asset-page.tsx
index 9100126d54fe..480011cb36f2 100644
--- a/ui/pages/asset/components/asset-page.tsx
+++ b/ui/pages/asset/components/asset-page.tsx
@@ -430,7 +430,7 @@ const AssetPage = ({
             {type === AssetType.native ? (
               <TransactionList hideTokenTransactions />
             ) : (
-              <TransactionList tokenAddress={address} />
+              <TransactionList tokenAddress={address} tokenChainId={chainId} />
             )}
           </Box>
         </Box>