chore: [DSYS-616] replace single Box instance and update @deprecated JSDoc

[cursor]

Description

Upstream MMDS documentation: MetaMask/metamask-design-system#1145 (MIGRATION_DOCS_VERSION: 7fb6452a61c939c216503c4914f1f46f4d528175).

This change migrates one production Box usage in confirmations transaction details from the legacy mobile app/components/UI/Box wrapper to Box from @metamask/design-system-react-native. Horizontal padding is preserved with twClassName="px-4" (equivalent to the previous paddingInline: 16). Legacy gap={12} (raw pixels on the old wrapper) is mapped to MMDS spacing with gap={3} (12px in the design-system spacing scale).

@deprecated JSDoc on the legacy Box entry point (app/components/UI/Box/Box.tsx) now includes exactly two @see links: the MMDS Box README and the React Native migration guide #box-component anchor.

DSYS_EPIC: DSYS-616

Fixes: DSYS-629

Processed MIGRATION_DOCS_VERSION: 7fb6452a61c939c216503c4914f1f46f4d528175

Migration doc discrepancies found

• The RN migration guide’s From Mobile Component Library framing still centers on app/component-library, while this repo’s legacy Box implementation lives under app/components/UI/Box (called out in DSYS-629 docs on the upstream PR). Behavior here is unchanged aside from the MMDS Box spacing scale for gap.

Changelog

CHANGELOG entry: null

Related issues

Fixes: DSYS-629

Manual testing steps

Feature: Transaction details Box migration

  Scenario: Transaction details screen layout is unchanged
    Given the user opens a transaction details screen that shows the standard rows and optional summary section

    When TransactionDetails renders
    Then the root content uses `Box` from `@metamask/design-system-react-native`
    And horizontal inset matches the previous 16px inline padding
    And vertical spacing between stacked rows matches the previous 12px gap

  Scenario: Legacy Box deprecation docs links are present
    Given `app/components/UI/Box/Box.tsx` is opened

    When I inspect the `@deprecated` JSDoc block
    Then it contains the MMDS Box README `@see` link
    And it contains the MMDS migration guide `@see` link with the `box-component` anchor

Screenshots/Recordings

N/A (layout parity with previous Box wrapper; no intentional visual change).

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• [N/A] I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• [N/A] I've tested on Android
• [N/A] I've tested with a power user scenario
• [N/A] I've instrumented key operations with Sentry traces for production performance metrics

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build the branch, run the app, test the 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 or screenshots.

  

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmations, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
Two files changed:

1. Box.tsx - Only adds a @deprecated JSDoc comment. Zero functional change. No tests needed specifically for this.

2. transaction-details.tsx - Migrates from the local deprecated Box component to @metamask/design-system-react-native's Box. Changes:

   • Removes useStyles/styleSheet dependency
   • Replaces style={styles.container} with twClassName="px-4" (Tailwind-style padding)
   • Changes gap={12} to gap={3} (note: gap units may differ between the two Box implementations)

   This is a UI/styling change to the transaction details screen (activity view). The component is used in MainNavigator.js as a navigation screen. The gap value change (12→3) could affect visual layout of the transaction details screen.

SmokeConfirmations: The transaction-details component is part of the confirmations/activity area and covers transaction detail display after confirmations.

SmokeWalletPlatform: Tests transaction history display (incoming/outgoing ETH transactions, token transfer details) which directly uses this TransactionDetails component.

No other tags are warranted - the change is isolated to the transaction details view styling and doesn't affect core logic, controllers, navigation structure, or other feature areas.

Performance Test Selection:
The changes are purely cosmetic/styling - a deprecated comment addition and a Box component migration with updated spacing. No performance-sensitive code paths (controllers, state management, list rendering, data loading) are affected. Performance tests are not warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud