fix(activity-redesign): populate Activity transaction-details fields in the redesign (#32191)

## **Description**

In the redesigned Activity screen, the transaction-details sheet left
**From/To** and **Amount / gas fee / total amount** blank.

The row-press handler passed a *stub* to `TransactionDetailsSheet` —
`transactionElement: { actionKey, value }` plus a `transactionDetails`
with empty from/to and no
`summaryAmount`/`summaryFee`/`summaryTotalAmount` — so the sheet had
nothing to render. The legacy list runs the tx through the shared
`decodeTransaction`, which produces all of those fields.

This change decodes the EVM transaction the same way before navigating,
and passes the real `transactionElement`/`transactionDetails`. Because
the unified list is multi-chain (can't `useSelector` per-tx-chain inside
a callback), the per-chain inputs — `ticker`, `conversionRate`,
`currencyRates`, `contractExchangeRates`, `primaryCurrency`,
`swapsTransactions`, `tokens` — are read from the redux store for that
tx's chain at press time. A `try/catch` falls back to the previous
minimal view if decoding ever throws. `normalizeTransaction` already
carries full `txParams` (incl. gas), so API-confirmed txs populate too.

## **Changelog**

CHANGELOG entry: null

<!-- Behind the Activity redesign feature flag; not yet user-facing. -->

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-933

## **Manual testing steps**

```gherkin
Feature: Activity transaction details

  Scenario: EVM transaction details are fully populated
    Given the Activity redesign is enabled
    And I have a confirmed EVM transaction (e.g. Sent ETH)
    When I tap the row to open its details
    Then I see the From/To addresses and the Amount, gas fee, and total amount
```

## **Screenshots/Recordings**

### **Before**

Details sheet showed blank From/To and "No fee" / empty Amount and Total
amount.


https://github.com/user-attachments/assets/b6f8fde8-ef04-4c61-8d68-d2f7a1ade701

### **After**

From/To addresses and Amount / gas fee / total amount are populated.


https://github.com/user-attachments/assets/dd98a320-49ef-4cd3-a840-bd1eabd34a1e


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] 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-mobile/blob/main/.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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Localized Activity UI/navigation change behind the redesign; tests
cover race and error paths with no auth or payment impact.
> 
> **Overview**
> Fixes blank **From/To** and **Amount / gas / total** on the redesigned
Activity transaction-details sheet by running each EVM row through the
shared **`decodeTransaction`** path (same as the legacy list) before
navigation, instead of passing stub `transactionElement` /
`transactionDetails`.
> 
> Per-transaction chain data (`ticker`, conversion rates, tokens, swaps,
etc.) is read from the Redux **`store`** at press time so multi-chain
rows do not depend on a single hook chain. A **press token** ref ignores
stale async decode results so rapid taps do not open the wrong tx;
**`try/catch`** still navigates with the previous minimal payload if
decoding fails.
> 
> **`ActivityList.test.tsx`** adds coverage for async navigation,
out-of-order decodes, and decode failure fallback.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
68f8d17. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: vinnyhoward

app/components/Views/ActivityList/ActivityList.test.tsx

@@ -14,6 +14,8 @@ import { useLocalActivityItems } from './hooks/useLocalActivityItems';
 import { useUnifiedTxActions } from './useUnifiedTxActions';
 import Engine from '../../../core/Engine';
 import { trackBlockExplorerLinkClicked } from '../../../util/analytics/externalLinkTracking';
+import Routes from '../../../constants/navigation/Routes';
+import decodeTransaction from '../../UI/TransactionElement/utils';
 
 jest.mock('@react-navigation/native', () => ({
   useNavigation: jest.fn(),
@@ -29,6 +31,8 @@ jest.mock('../../../selectors/accountsController', () => ({
 
 jest.mock('../../../selectors/currencyRateController', () => ({
   selectCurrentCurrency: jest.fn((state) => state.currentCurrency),
+  selectConversionRateByChainId: jest.fn(),
+  selectCurrencyRates: jest.fn(),
 }));
 
 jest.mock('../../../selectors/multichain/multichain', () => ({
@@ -50,6 +54,7 @@ jest.mock('../../../selectors/networkController', () => ({
   selectEvmNetworkConfigurationsByChainId: jest.fn((state) => state.evmConfigs),
   selectProviderType: jest.fn((state) => state.providerType),
   selectAllConfiguredEvmChainIds: jest.fn((state) => state.enabledEvm),
+  selectTickerByChainId: jest.fn(),
 }));
 
 jest.mock('../../../selectors/multichainNetworkController', () => ({
@@ -58,6 +63,31 @@ jest.mock('../../../selectors/multichainNetworkController', () => ({
 
 jest.mock('../../../selectors/transactionController', () => ({
   selectRelatedChainIdsByTransactionId: jest.fn((state) => state.related),
+  selectSwapsTransactions: jest.fn(),
+}));
+
+jest.mock('../../../selectors/tokenRatesController', () => ({
+  selectContractExchangeRatesByChainId: jest.fn(),
+}));
+
+jest.mock('../../../selectors/settings', () => ({
+  selectPrimaryCurrency: jest.fn(),
+}));
+
+jest.mock('../../../selectors/tokensController', () => ({
+  selectTokensByChainIdAndWalletAddress: jest.fn(),
+}));
+
+jest.mock('../../../store', () => ({
+  store: { getState: jest.fn(() => ({})) },
+}));
+
+jest.mock('../../UI/TransactionElement/utils', () => ({
+  __esModule: true,
+  default: jest.fn(async () => [
+    { actionKey: 'Sent ETH' },
+    { hash: '0xconfirmed', renderFrom: '0xfrom', renderTo: '0xto' },
+  ]),
 }));
 
 jest.mock('../../../selectors/bridgeStatusController', () => ({
@@ -537,17 +567,94 @@ describe('ActivityList', () => {
     );
   });
 
-  it('navigates to transaction details when a confirmed row is pressed', () => {
+  it('navigates to transaction details when a confirmed row is pressed', async () => {
+    render(<ActivityList header={<></>} onScroll={mockOnScroll} />);
+
+    fireEvent.press(screen.getByTestId('row-0xconfirmed'));
+
+    // The press handler decodes the tx (async) before navigating.
+    await waitFor(() =>
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          screen: expect.any(String),
+        }),
+      ),
+    );
+  });
+
+  it('opens only the most-recently-pressed row when decodes resolve out of order', async () => {
+    const decodeMock = jest.mocked(decodeTransaction);
+    type DecodeResult = Awaited<ReturnType<typeof decodeTransaction>>;
+    let resolveFirst: (value: DecodeResult) => void = () => undefined;
+    let resolveSecond: (value: DecodeResult) => void = () => undefined;
+    decodeMock
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveFirst = resolve;
+          }),
+      )
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveSecond = resolve;
+          }),
+      );
+
     render(<ActivityList header={<></>} onScroll={mockOnScroll} />);
 
     fireEvent.press(screen.getByTestId('row-0xconfirmed'));
+    fireEvent.press(screen.getByTestId('row-0xlocal'));
+
+    resolveSecond([{ actionKey: 'Approve' }, { hash: '0xlocal' }]);
+    resolveFirst([{ actionKey: 'Sent' }, { hash: '0xconfirmed' }]);
+
+    await waitFor(() => {
+      const detailCalls = mockNavigate.mock.calls.filter(
+        (call) => call[1]?.screen === Routes.SHEET.TRANSACTION_DETAILS,
+      );
+      expect(detailCalls).toHaveLength(1);
+    });
+
+    const detailCalls = mockNavigate.mock.calls.filter(
+      (call) => call[1]?.screen === Routes.SHEET.TRANSACTION_DETAILS,
+    );
+    expect(detailCalls[0][1].params.tx.hash).toBe('0xlocal');
+  });
+
+  it('falls back to a minimal details view when decoding throws', async () => {
+    jest
+      .mocked(decodeTransaction)
+      .mockRejectedValueOnce(new Error('decode failed'));
 
-    expect(mockNavigate).toHaveBeenCalledWith(
-      expect.any(String),
+    render(<ActivityList header={<></>} onScroll={mockOnScroll} />);
+
+    fireEvent.press(screen.getByTestId('row-0xconfirmed'));
+
+    await waitFor(() => {
+      const detailCalls = mockNavigate.mock.calls.filter(
+        (call) => call[1]?.screen === Routes.SHEET.TRANSACTION_DETAILS,
+      );
+      expect(detailCalls).toHaveLength(1);
+    });
+
+    const call = mockNavigate.mock.calls.find(
+      (c) => c[1]?.screen === Routes.SHEET.TRANSACTION_DETAILS,
+    );
+    // Minimal transactionDetails are built from the item (addresses via
+    // getActivityFromTo) rather than the decoded data.
+    expect(call?.[1].params.transactionDetails).toEqual(
       expect.objectContaining({
-        screen: expect.any(String),
+        hash: '0xconfirmed',
+        renderFrom: '0xevm',
+        renderTo: '0xto',
+        transactionType: 'contractInteraction',
       }),
     );
+    expect(call?.[1].params.transactionElement).toEqual(
+      expect.objectContaining({ actionKey: expect.any(String) }),
+    );
   });
 
   it('uses unique chain-aware fallback keys for rows without hashes', () => {

app/components/Views/ActivityList/ActivityList.tsx

@@ -28,9 +28,23 @@ import {
   selectAllConfiguredEvmChainIds,
   selectEvmNetworkConfigurationsByChainId,
   selectProviderType,
+  selectTickerByChainId,
 } from '../../../selectors/networkController';
 import { selectAllConfiguredNonEvmChainIds } from '../../../selectors/multichainNetworkController';
-import { selectRelatedChainIdsByTransactionId } from '../../../selectors/transactionController';
+import {
+  selectRelatedChainIdsByTransactionId,
+  selectSwapsTransactions,
+} from '../../../selectors/transactionController';
+import {
+  selectConversionRateByChainId,
+  selectCurrencyRates,
+  selectCurrentCurrency,
+} from '../../../selectors/currencyRateController';
+import { selectContractExchangeRatesByChainId } from '../../../selectors/tokenRatesController';
+import { selectPrimaryCurrency } from '../../../selectors/settings';
+import { selectTokensByChainIdAndWalletAddress } from '../../../selectors/tokensController';
+import { store } from '../../../store';
+import decodeTransaction from '../../UI/TransactionElement/utils';
 import { baseStyles } from '../../../styles/common';
 import { isHardwareAccount } from '../../../util/address';
 import {
@@ -579,11 +593,19 @@ const ActivityList = ({
     }
   }, [refetch]);
 
+  // Guards against out-of-order async decodes: each press claims a token, and
+  // only the most recent press is allowed to open the details sheet. Without
+  // this, tapping row A then row B before A's decode resolves could navigate to
+  // A last and show the wrong transaction.
+  const activityPressTokenRef = useRef(0);
+
   const handleActivityItemPress = useCallback(
-    (item: ActivityListItem) => {
+    async (item: ActivityListItem) => {
       const { raw } = item;
       if (!raw) return;
 
+      const pressToken = (activityPressTokenRef.current += 1);
+
       const itemBridgeHistoryItem = getBridgeHistoryItemByHash(item.hash);
       const actionKey = resolveActivityListItemTitle(
         item,
@@ -649,29 +671,72 @@ const ActivityList = ({
         return;
       }
 
-      const { from, to } = getActivityFromTo(item);
-      const value = getActivityValue(item);
+      const txChainId = tx.chainId;
+
+      // Decode the EVM transaction the same way the legacy list does, so the
+      // detail sheet's From/To and Amount/gas/total fields are populated.
+      // The unified list is multi-chain, so the per-chain rates/ticker/tokens
+      // are read from the store for this tx's chain rather than via hooks.
+      try {
+        const state = store.getState();
+        const [transactionElement, transactionDetails] =
+          await decodeTransaction({
+            tx,
+            selectedAddress: selectedEvmAddress,
+            chainId: txChainId,
+            txChainId,
+            ticker: selectTickerByChainId(state, txChainId),
+            conversionRate: selectConversionRateByChainId(state, txChainId),
+            currencyRates: selectCurrencyRates(state),
+            currentCurrency: selectCurrentCurrency(state),
+            contractExchangeRates: selectContractExchangeRatesByChainId(
+              state,
+              txChainId,
+            ),
+            primaryCurrency: selectPrimaryCurrency(state),
+            swapsTransactions: selectSwapsTransactions(state),
+            tokens: selectTokensByChainIdAndWalletAddress(
+              state,
+              txChainId,
+              selectedEvmAddress,
+            ),
+            selectedInternalAccount: selectSelectedInternalAccount(state),
+          });
+
+        if (activityPressTokenRef.current !== pressToken) return;
 
-      navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
-        screen: Routes.SHEET.TRANSACTION_DETAILS,
-        params: {
-          tx,
-          transactionElement: {
-            actionKey,
-            value,
+        navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+          screen: Routes.SHEET.TRANSACTION_DETAILS,
+          params: {
+            tx,
+            transactionElement,
+            transactionDetails,
+            showSpeedUpModal: noop,
+            showCancelModal: noop,
           },
-          transactionDetails: {
-            hash: item.hash,
-            renderFrom: from,
-            renderTo: to,
-            renderValue: value,
-            transactionType: item.type,
-            txChainId: tx.chainId,
+        });
+      } catch {
+        if (activityPressTokenRef.current !== pressToken) return;
+        const { from, to } = getActivityFromTo(item);
+        const value = getActivityValue(item);
+        navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+          screen: Routes.SHEET.TRANSACTION_DETAILS,
+          params: {
+            tx,
+            transactionElement: { actionKey, value },
+            transactionDetails: {
+              hash: item.hash,
+              renderFrom: from,
+              renderTo: to,
+              renderValue: value,
+              transactionType: item.type,
+              txChainId,
+            },
+            showSpeedUpModal: noop,
+            showCancelModal: noop,
           },
-          showSpeedUpModal: noop,
-          showCancelModal: noop,
-        },
-      });
+        });
+      }
     },
     [
       bridgeHistory,