feat: use account API v4 transactions (#29536)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

- Replaces confirmed EVM Activity transactions with data from accounts
v4 API via React Query
- Adds infinite pagination for confirmed EVM history
- Keep local pending EVM transactions and existing non-EVM activity
unchanged

Note: Due to the API requesting a bearer token, there is a current
bottleneck in that token retrieval, in particular in
`AuthenticationController.getPrimaryEntropySourceId`

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: feat: use accounts API v4 for transactions

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Accounts API v4 Transactions

  Scenario: user views EVM activity
    Given the wallet has EVM confirmed on-chain activity

    When user visits the Activity tab
    Then confirmed onchain transactions returned by the Accounts v4 API is displayed on screen.
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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]
> **Medium Risk**
> Moderate risk because it rewires the Activity/UnifiedTransactionsView
data source and filtering/deduping logic, which can change what
transactions appear and when pagination/refresh occurs.
> 
> **Overview**
> **Confirmed EVM Activity now comes from the Accounts v4 API** via a
new React Query `useTransactionsQuery` hook, while local pending EVM
transactions continue to come from controller state and are
merged/deduped with the API results.
> 
> Adds a small transformation layer (`helpers/adapters` +
`helpers/transformations`) to normalize API responses into
`TransactionMeta`-compatible view models, filter out unwanted items
(e.g. spam/incoming transfers/zero-value self-sends), and handle
bridge-history matching/deduping (including case-insensitive hash
matching).
> 
> Updates `UnifiedTransactionsView` to support infinite scrolling
pagination (prefetch near the end of confirmed EVM items), show
initial/next-page loading indicators, and refresh both local polling and
the query. Related selector additions (`selectLocalTransactions`,
`selectRequiredTransactionHashes/Ids`) support filtering required child
txs and nonce/hash collisions, and tests/smoke mocks were updated
accordingly.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
a3e6592. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Copilot <copilot@github.com>

Author: 3 people

app/components/UI/MultichainBridgeTransactionListItem/MultichainBridgeTransactionListItem.tsx

@@ -27,6 +27,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
 import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
 import { getNetworkImageSource } from '../../../util/networks';
 import { parseCaipAssetType } from '@metamask/utils';
 import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
@@ -102,10 +103,13 @@ const MultichainBridgeTransactionListItem = ({
     const networkImageSource = getNetworkImageSource({ chainId });
     return (
       <BadgeWrapper
+        badgePosition={{ bottom: -4, right: -4 }}
         badgeElement={
           <Badge
             variant={BadgeVariant.Network}
             imageSource={networkImageSource}
+            isScaled={false}
+            size={AvatarSize.Xs}
           />
         }
       >

app/components/UI/MultichainTransactionListItem/MultichainTransactionListItem.tsx

@@ -21,6 +21,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
 import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
 import { getNetworkImageSource } from '../../../util/networks';
 import Routes from '../../../constants/navigation/Routes';
 import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
@@ -91,10 +92,13 @@ const MultichainTransactionListItem = ({
 
     return (
       <BadgeWrapper
+        badgePosition={{ bottom: -4, right: -4 }}
         badgeElement={
           <Badge
             variant={BadgeVariant.Network}
             imageSource={networkImageSource}
+            isScaled={false}
+            size={AvatarSize.Xs}
           />
         }
       >

app/components/UI/TransactionElement/index.js

@@ -49,6 +49,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
 import Badge, {
   BadgeVariant,
 } from '../../../component-library/components/Badges/Badge';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
 import { NetworkBadgeSource } from '../AssetOverview/Balance/Balance';
 import {
   getFontFamily,
@@ -101,6 +102,10 @@ const createStyles = (colors, typography) =>
       width: 32,
       height: 32,
     },
+    iconBadgePosition: {
+      bottom: -4,
+      right: -4,
+    },
     importText: {
       color: colors.text.alternative,
       fontSize: 14,
@@ -271,13 +276,13 @@ class TransactionElement extends PureComponent {
   mounted = false;
 
   componentDidMount = async () => {
+    this.mounted = true;
     const [transactionElement, transactionDetails] = await decodeTransaction({
       ...this.props,
       swapsTransactions: this.props.swapsTransactions,
       assetSymbol: this.props.assetSymbol,
       ticker: this.props.ticker,
     });
-    this.mounted = true;
 
     this.mounted && this.setState({ transactionElement, transactionDetails });
   };
@@ -469,10 +474,13 @@ class TransactionElement extends PureComponent {
 
     return (
       <BadgeWrapper
+        badgePosition={styles.iconBadgePosition}
         badgeElement={
           <Badge
             variant={BadgeVariant.Network}
             imageSource={NetworkBadgeSource(chainId)}
+            isScaled={false}
+            size={AvatarSize.Xs}
           />
         }
       >
@@ -715,14 +723,43 @@ class TransactionElement extends PureComponent {
     );
   };
 
+  renderPendingElement = () => {
+    const { i, tx } = this.props;
+    const { colors, typography } = this.context || mockTheme;
+    const styles = createStyles(colors, typography);
+
+    return (
+      <ListItem>
+        <ListItem.Date style={styles.listItemDate}>
+          {this.renderTxTime()}
+        </ListItem.Date>
+        <ListItem.Content style={styles.listItemContent}>
+          <ListItem.Icon>
+            <View style={styles.icon} />
+          </ListItem.Icon>
+          <ListItem.Body>
+            <ListItem.Title numberOfLines={1} style={styles.listItemTitle}>
+              ...
+            </ListItem.Title>
+            <StatusText
+              testID={`transaction-status-${i}`}
+              status={tx.status}
+              style={styles.listItemStatus}
+            />
+          </ListItem.Body>
+        </ListItem.Content>
+      </ListItem>
+    );
+  };
+
   render() {
     const { tx, selectedInternalAccount } = this.props;
     const { transactionElement, transactionDetails } = this.state;
 
     const { colors, typography } = this.context || mockTheme;
     const styles = createStyles(colors, typography);
 
-    if (!transactionElement || !transactionDetails) return null;
+    const isReady = Boolean(transactionElement && transactionDetails);
 
     const accountImportTime = selectedInternalAccount?.metadata.importTime;
     const { time } = tx;
@@ -734,11 +771,13 @@ class TransactionElement extends PureComponent {
           style={
             this.props.showBottomBorder ? styles.rowWithBorder : styles.row
           }
-          onPress={this.onPressItem}
+          onPress={isReady ? this.onPressItem : undefined}
           underlayColor={colors.background.alternative}
           activeOpacity={1}
         >
-          {this.renderTxElement(transactionElement)}
+          {isReady
+            ? this.renderTxElement(transactionElement)
+            : this.renderPendingElement()}
         </TouchableHighlight>
         {accountImportTime <= time && this.renderImportTime()}
       </>