fix: fix transaction list message on token detail page

MetaMask · Nov 27, 2024 · c93ae60 · c93ae60
1 parent f711459
commit c93ae60
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 2 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git 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
@@ -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
@@ -430,7 +430,7 @@ const AssetPage = ({
             {type === AssetType.native ? (
               <TransactionList hideTokenTransactions />
             ) : (
-              <TransactionList tokenAddress={address} />
+              <TransactionList tokenAddress={address} tokenChainId={chainId} />
             )}
           </Box>
         </Box>