fix: fix transaction list message on token detail page (#28764)

fixes #28766 

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**


If the token chosen in the token details does not correspond to the
current network, the message displayed in the activity section should be
updated accordingly.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28764?quickstart=1)

## **Related issues**

Fixes: #28766

## **Manual testing steps**

1. run `PORTFOLIO_VIEW=true yarn start`
2. choose any token who is not part of current network and go to token
details
3. go to activity section and check the message

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**


https://github.com/user-attachments/assets/e0d379b8-dd37-4e87-a845-ff35a08deb76



<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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,
 };

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();
+  });
 });

ui/pages/asset/components/asset-page.tsx

@@ -428,9 +428,9 @@ const AssetPage = ({
               {t('yourActivity')}
             </Text>
             {type === AssetType.native ? (
-              <TransactionList hideTokenTransactions />
+              <TransactionList hideTokenTransactions tokenChainId={chainId} />
             ) : (
-              <TransactionList tokenAddress={address} />
+              <TransactionList tokenAddress={address} tokenChainId={chainId} />
             )}
           </Box>
         </Box>