Skip to content

feat: convert optinmetrics code to typescript#23519

Merged
grvgoel81 merged 3 commits intomainfrom
feat-convert-optionmetrics-to-tsx
Jan 6, 2026
Merged

feat: convert optinmetrics code to typescript#23519
grvgoel81 merged 3 commits intomainfrom
feat-convert-optionmetrics-to-tsx

Conversation

@grvgoel81
Copy link
Copy Markdown
Contributor

@grvgoel81 grvgoel81 commented Dec 2, 2025 •
edited
Loading

Description

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Screen.Recording.2025-12-01.at.4.42.04.PM.mov

Pre-merge author checklist

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

Migrates OptinMetrics from class-based JS to a typed functional component, extracting styles/types and updating tests accordingly.

  • UI (React Native):
    • Reimplements app/components/UI/OptinMetrics/index.js as index.tsx using hooks (useState, useEffect, useCallback), Redux hooks, and React Navigation hooks with typed route params.
    • Maintains analytics consent flow: enables/disables metrics, updates Sentry/trace buffering, tracks ANALYTICS_PREFERENCE_SELECTED, and adds device/user traits; preserves navigation reset and webview "Learn more" link handling.
    • Preserves scroll/end-reached logic and back-press alert handling.
    • Extracts styles to OptinMetrics.styles.ts and adds OptinMetrics.types.ts for route/link params.
  • Tests:
    • Updates index.test.tsx to import index.tsx; tests cover checkbox interdependency, feature flag text, scroll/layout handlers, and analytics event emissions.

Written by Cursor Bugbot for commit 42ee375. Configure here.

@grvgoel81 grvgoel81 self-assigned this Dec 2, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Dec 2, 2025

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 grvgoel81 requested a review from a team December 2, 2025 09:28
ieow
ieow reviewed Jan 5, 2026
View reviewed changes
app/components/UI/OptinMetrics/index.tsx Outdated
const onPressLink = useCallback(
(linkParams: { url: string; title: string }) => {
(
navigation as unknown as {
Copy link
Copy Markdown
Contributor

@ieow ieow Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need to cast?

@ieow
Copy link
Copy Markdown
Contributor

ieow commented Jan 5, 2026

Screenshot 2026-01-05 at 10 28 06 PM

padding top and bottom for android seems a bit smaller than iOS
is this expected?

@grvgoel81
Copy link
Copy Markdown
Contributor Author

grvgoel81 commented Jan 5, 2026

Screenshot 2026-01-05 at 10 28 06 PM padding top and bottom for android seems a bit smaller than iOS is this expected?

Didn't change anything wrt design in this PR.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 5, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeAnalytics, SmokeCore
  • Risk Level: medium
  • AI Confidence: 82%
click to see 🤖 AI reasoning details

This PR refactors the OptinMetrics component from a class-based React component to a functional component using hooks. The changes include:

  1. Conversion to functional component: The 585-line class component is now a 446-line functional component using useState, useCallback, useEffect, useSelector, and useDispatch hooks.

  2. Style extraction: Styles moved to a separate OptinMetrics.styles.ts file.

  3. TypeScript types: New type definitions in OptinMetrics.types.ts.

  4. Preserved functionality: All test IDs (METAMETRICS_OPT_IN_CONTAINER_ID, OPTIN_METRICS_CONTINUE_BUTTON_ID, OPTIN_METRICS_METRICS_CHECKBOX, etc.) remain unchanged, ensuring E2E test compatibility.

  5. Same UI structure: The JSX structure and user-facing behavior remain identical.

Why SmokeAnalytics: This component is the MetaMetrics opt-in screen that handles user consent for analytics tracking. It directly relates to analytics functionality.

Why SmokeCore: The OptinMetrics component is part of the core onboarding flow, used in navigation from ManualBackupStep2, AccountBackupStep1, ImportFromSecretRecoveryPhrase, and NetworkSettings. It affects core app state and navigation.

Risk Assessment: Medium risk because:

  • It's a refactor (not new functionality) with preserved test IDs
  • The component is critical to onboarding flow
  • Functional changes could affect analytics consent tracking
  • The unit tests have been updated and should catch most issues

The E2E tests using withMetaMetricsOptIn() fixture and MetaMetricsOptInView page object should validate the component works correctly after the refactor.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Jan 5, 2026

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

ieow
ieow approved these changes Jan 6, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@ieow ieow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@grvgoel81 grvgoel81 added this pull request to the merge queue Jan 6, 2026
Merged via the queue into main with commit d45af4f Jan 6, 2026
160 of 163 checks passed
@grvgoel81 grvgoel81 deleted the feat-convert-optionmetrics-to-tsx branch January 6, 2026 12:30
@github-actions github-actions bot locked and limited conversation to collaborators Jan 6, 2026
@metamaskbot metamaskbot added the release-7.62.0 Issue or pull request that will be included in release 7.62.0 label Jan 6, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@ieow ieow ieow approved these changes

Assignees

@grvgoel81 grvgoel81

Labels

area-onboarding release-7.62.0 Issue or pull request that will be included in release 7.62.0 size-XL team-onboarding Onboarding team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@grvgoel81 @ieow @metamaskbot