refactor(toast): migrate web3auth toasts to the design system

[amandaye0h]

Description

The component-library Toast is deprecated in favor of toast() from @metamask/design-system-react-native. SRP import (onboarding and multi-SRP) and reveal-credential still used toastRef.showToast, so they rendered the old toast surface and needed ToastContext wiring.

This PR switches those call sites to the design-system toast() API (already mounted via <Toaster /> in App). Invalid SRP length uses ToastSeverity.Danger, successful wallet import uses ToastSeverity.Success, and copy-to-clipboard uses the same title-only toast as other account copy flows. Tests mock toast instead of wrapping ToastContext, and component view tests stub toast in testSetupView.js so they do not throw without a mounted Toaster.

Changelog

CHANGELOG entry: Updated SRP import and reveal toasts to the MetaMask design system

Related issues

Refs: No tracking issue; continues the design-system toast migration for SRP import and reveal flows

Manual testing steps

Feature: Design system toasts for SRP import and reveal

  Background:
    Given I am using MetaMask Mobile

  Scenario: user enters an SRP with the wrong word count during onboarding import
    Given I am on Import from Secret Recovery Phrase
    And I enter a phrase that is not 12, 15, 18, 21, or 24 words

    When user taps Continue
    Then a danger toast should explain that the Secret Recovery Phrase length is invalid
    And the toast should appear from the top of the screen using the design-system toaster

  Scenario: user imports an additional Secret Recovery Phrase
    Given I am logged in
    And I open Import a new Secret Recovery Phrase

    When user pastes a valid unused SRP and taps Import
    Then a success toast should confirm the new wallet was imported
    And I should be navigated to Wallet

  Scenario: user copies a revealed Secret Recovery Phrase
    Given I have unlocked Reveal Secret Recovery Phrase
    And the phrase is visible

    When user taps Copy to clipboard
    Then a toast should confirm the phrase was copied

Screenshots/Recordings

Before

N/A — toast copy is unchanged; only the toast surface/API migrated.

After

N/A — toast copy is unchanged; only the toast surface/API migrated.

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.

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 to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

Made with Cursor

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

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR migrates three components from the old ToastContext-based toast system to the new imperative toast() API from @metamask/design-system-react-native:

1. ImportFromSecretRecoveryPhrase: Toast shown when SRP length is invalid during wallet import onboarding.
2. ImportNewSecretRecoveryPhrase: Toast shown on successful import of an additional SRP (multi-SRP flow).
3. RevealPrivateCredential: Toast shown when SRP/private key is copied to clipboard.

The functional behavior is unchanged — only the toast implementation is swapped. However, if the new toast() API requires a <Toaster /> component to be mounted (which the testSetupView.js comment confirms: "toast() throws unless is mounted"), there's a risk that the toast won't appear in production if the Toaster isn't properly mounted in the app's component tree.

Tags selected:

• SmokeAccounts: Directly covers SRP reveal/export flows (RevealPrivateCredential) and SRP protection flows. The "copied to clipboard" toast change in RevealPrivateCredential is exercised by these tests.
• SmokeWalletPlatform: Covers multi-SRP import flows (ImportNewSecretRecoveryPhrase) — importing additional SRPs, adding accounts to different SRPs, and exporting SRP from Settings and account action menus.

Tags NOT selected:

• SmokeSeedlessOnboarding: Per tag description, this is a thin suite focused on OAuth/social login flows. The SRP import screen validation is explicitly called out as NOT requiring this tag ("do not select it solely for those screen-level changes").
• SmokeConfirmations, SmokeSwap, etc.: Not affected by these changes.

The testSetupView.js change is a test infrastructure update (adding toast mock to global setup) that doesn't affect production code or E2E tests.

Performance Test Selection:
The changes are purely a UI toast notification system migration (from ToastContext to imperative toast() API) in three components. This has no impact on app performance metrics like launch time, login speed, asset loading, or swap execution. No performance-sensitive code paths are modified.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud