refactor: migrate SRPInputGrid to design system components and Tailwi…

[smgv]

…nd CSS

Description

This PR migrates the SRPInputGrid view away from legacy StyleSheet.create()-based styling toward the MetaMask design system and Tailwind CSS. Also migrated to Typescript as a functional component.

Jira Link: https://consensyssoftware.atlassian.net/browse/TO-646

Changelog

CHANGELOG entry: migrate SRPInputGrid to design system components and Tailwind CSS

Related issues

Fixes:

Manual testing steps

Feature: Import SRP

  Scenario: when the user use the existing wallet SRP
    Then validate the UI

Screenshots/Recordings

Before

After

Screen.Recording.2026-03-31.at.1.14.08.PM.mov

Screen.Recording.2026-03-31.at.1.14.39.PM.mov

Screen.Recording.2026-03-31.at.1.16.04.PM.mov

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
UI-heavy refactor of the Secret Recovery Phrase input flow; while logic is mostly preserved, changes to component structure, styling, and input props/focus handling could introduce regressions in SRP entry/paste behavior.

Overview
Refactors SrpInputGrid to use MetaMask design-system primitives (Box, Button, design-system Text) and Tailwind-based styling, removing the legacy StyleSheet.create file and updating layout/style behavior accordingly.

Consolidates shared TextInput props into SHARED_INPUT_PROPS, moves word validation helper out of the component, and replaces the inline paste/clear Text action with a tertiary Button; Jest snapshots are updated to reflect the new rendered structure and styling.

^{Written by Cursor Bugbot for commit e7c1129. 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.

[grvgoel81]

there is no blurOnSubmit (old behavior was explicit blurOnSubmit={false} on each SrpInput).

[smgv]

its deprecated

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{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: SmokeWalletPlatform, SmokeAccounts, SmokeIdentity
• Selected Performance tags: @PerformanceOnboarding
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are a UI refactoring of the SrpInputGrid component - migrating from custom StyleSheet styles to the @metamask/design-system-react-native component library (Box, Button, Text) and Tailwind CSS. The styles file was deleted and replaced with inline Tailwind styles.

Key impacts:

1. SrpInputGrid is used in two critical flows:

   • ImportFromSecretRecoveryPhrase (onboarding wallet import via SRP)
   • ImportNewSecretRecoveryPhrase (multi-SRP import flow)

2. SmokeWalletPlatform is selected because:

   • tests/smoke/wallet/import-srp.spec.ts directly tests the multi-SRP import flow using ImportSrpView which interacts with the SrpInputGrid component
   • tests/smoke/multisrp/add-account.spec.ts tests adding accounts to SRPs
   • Analytics import wallet tests also exercise this flow

3. SmokeAccounts is selected because:

   • Per tag description: when changes touch multi-SRP architecture, also select SmokeAccounts
   • SRP reveal and account management tests are related to the SRP input component

4. SmokeIdentity is selected because:

   • tests/smoke/identity/account-syncing/multi-srp.spec.ts uses inputSrp() and ImportSrpView which directly interact with the changed SrpInputGrid component
   • Per tag description: when changes touch multi-SRP flows, also select SmokeIdentity

The changes are purely UI/styling (no logic changes to SRP handling), but the visual rendering of the SRP input grid changed significantly (new component library, different layout structure). This could affect E2E tests that rely on element visibility, testIDs, or interaction with the input fields. The testIDs themselves are preserved in the component, reducing risk of test breakage, but visual/layout changes warrant validation.

Performance Test Selection:
The SrpInputGrid component is used in the ImportFromSecretRecoveryPhrase onboarding flow. The refactoring from StyleSheet to Tailwind CSS and design system components could have minor performance implications during the onboarding import flow. The @PerformanceOnboarding tag covers wallet creation and SRP import flows, making it relevant to validate that the design system migration doesn't introduce rendering performance regressions.

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
96.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud