feat: migrate TooltipModal to design system components

[GeorgeGkas]

Description

TooltipModal was using legacy component-library patterns (StyleSheet.create, raw View, deprecated BottomSheetFooter, and component-library Text) that are no longer consistent with the current UI development standards.

This PR migrates TooltipModal to fully conform to the new standards:

• Replaces View with Box from @metamask/design-system-react-native
• Replaces component-library Text/TextVariant/TextColor with the design system equivalents (TextVariant.BodyMd, TextColor.TextAlternative)
• Replaces the deprecated component-library BottomSheetFooter (which used a broken Object.assign + StyleSheet.create approach for style overrides) with the design system BottomSheetFooter, which applies styles via a style array and twClassName correctly
• Removes StyleSheet.create and the companion ToolTipModal.styles.ts file
• Adds useSafeAreaInsets for device-aware bottom padding on the footer
• Adds useTailwind for all Tailwind-based styling
• Updates tests to match the new component structure

The deprecated BottomSheetFooter had a bug where passing paddingHorizontal via its style prop did not apply correctly — the internal Object.assign + StyleSheet.create merge caused the shorthand paddingHorizontal to be overridden by already-resolved longhand values. The design system component resolves this by applying styles as a proper array where the last entry wins.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-4249

Manual testing steps

Feature: TooltipModal rendering and interaction

  Background:
    Given I am logged into MetaMask Mobile

  Scenario: user opens a tooltip and reads content
    Given I am on a screen that displays a tooltip icon (e.g. Swaps confirmation — Slippage row)

    When user taps the info icon next to a label
    Then a bottom sheet should appear with the correct title in the header
    And the tooltip content text should be visible below the header
    And the "Got it" button should be visible in the footer with 16px horizontal padding
    And on devices with a home indicator (iPhone X+) the button should sit above the home bar

  Scenario: user dismisses tooltip via "Got it" button
    Given the tooltip bottom sheet is open

    When user taps the "Got it" button
    Then the bottom sheet should close

  Scenario: user dismisses tooltip via close icon
    Given the tooltip bottom sheet is open

    When user taps the X icon in the header
    Then the bottom sheet should close

  Scenario: tooltip with optional footer text
    Given a tooltip is configured with additional footer text

    When user opens the tooltip
    Then the footer text should appear below the "Got it" button
    And the footer text should respect the safe area bottom inset

Screenshots/Recordings

Before

N/A

After

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
• 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.

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.

---

Note

Medium Risk
Moderate risk because it changes TooltipModal’s component implementation and removes the bottomPadding navigation/typing option, which could affect any callers relying on that param or footer spacing behavior.

Overview
Migrates TooltipModal to the MetaMask design system by replacing legacy View/StyleSheet styling and the deprecated component-library footer with Box, design-system Text, and design-system BottomSheetFooter using Tailwind (useTailwind).

Updates footer spacing to use useSafeAreaInsets for bottom padding and removes the custom bottomPadding route param/options plumbing end-to-end (ToolTipModal.types.ts, useTooltipModal, KeyValueRow tooltip types/usage, and related tests), deleting ToolTipModal.styles.ts and adjusting snapshots/mocks accordingly.

^{Written by Cursor Bugbot for commit 66dbdb8. This will update automatically on new commits. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmations, SmokeTrade, SmokePerps, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes refactor the TooltipModal component and its associated hook/types:

1. TooltipModal UI refactor: Switched from custom StyleSheet to design-system components (Box, Text from @metamask/design-system-react-native) and Tailwind styling. Removed bottomPadding parameter, now uses useSafeAreaInsets for proper safe area handling.

2. Removed bottomPadding option: Removed from useTooltipModal hook, TooltipModalRouteParams, and KeyValueRowTooltip interface.

3. KeyValueLabel.tsx: Updated to call openTooltipModal without the removed bottomPadding option.

Affected areas:

• SmokeConfirmations: The info-row component in confirmations imports TooltipModal. The RewardsCard (staking confirmation) uses useTooltipModal via KeyValueLabel. Staking deposit confirmations show tooltips for reward rate and reward frequency.
• SmokeTrade: Bridge's QuoteDetailsCard uses KeyValueLabel which uses the tooltip system. Bridge quote details show tooltips for various fee/rate fields.
• SmokePerps: PerpsOrderView directly uses useTooltipModal for showing tooltips in the perps order flow.
• SmokeWalletPlatform: Required by SmokePerps per tag dependency rules.

The changes are primarily cosmetic/styling refactors with no functional logic changes, but the tooltip display in these flows should be validated to ensure the safe area insets work correctly on both iOS and Android, and that the design system components render properly.

Performance Test Selection:
The changes are UI refactoring of the TooltipModal component - switching from custom StyleSheet to design system components and Tailwind. This is a modal/overlay component that appears on user interaction, not a core rendering path that would impact measurable performance metrics like app launch, account list rendering, or asset loading. No performance tests are warranted.

View GitHub Actions results

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud