refactor: migrate onboarding flow to TypeScript (#38253)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38253?quickstart=1)

In this PR, we migrate all JavaScript files to TypeScript in the
onboarding flow to improve type safety and code maintainability. This
conversion encompasses all components within the
ui/pages/onboarding-flow directory, including:

- Main onboarding flow orchestration and routing
- Onboarding flow switch logic
- Welcome and login screens
- Create password flow
- Recovery phrase (review, reveal, and confirm) components
- Import SRP functionality
- Privacy settings
- MetaMetrics opt-in
- Creation successful screens
- Account exist/not found flows
- Download app screen
- Associated test files and stories

Removed the pin-extension folder from onboarding-flow as it’s no longer
in use.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Migrated onboarding flow to TypeScript for improved
type safety and maintainability

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Convert onboarding flow to TypeScript with prop/return type fixes, add
sidepanel open-on-completion path, and refine MetaMetrics participation
handling; update routing/selectors and tests accordingly.
> 
> - **Onboarding (TypeScript migration)**:
> - Convert core screens/components to TS (`create-password`,
`import-srp`, `recovery-phrase/*`, `welcome`, `privacy-settings`,
`metametrics`, `creation-successful`, `onboarding-flow`, header,
switch).
> - Replace PropTypes with typed props; add explicit handler/event
typings; minor UI prop/enum tweaks.
> - Update lazy imports and add `ui/pages/onboarding-flow/index.ts` for
routing.
> - **Side Panel Integration**:
> - Add `BrowserWithSidePanel` type and open sidepanel on completion
when enabled (`creation-successful`); set `useSidePanelAsDefault`; mark
onboarding completed via sidepanel; selector `getOpenedWithSidepanel`.
> - **MetaMetrics updates**:
> - Allow `participateInMetaMetrics` to be `boolean | null`; only set
uninstall URL after explicit choice; adjust action signature and
onboarding flows to respect null state.
> - Analytics iframe/query construction tightened; add/propagate
analytics properties typings.
> - **Routing/Selectors/State**:
> - Routes updated to consume new onboarding export; add Redux handling
for `COMPLETE_ONBOARDING_WITH_SIDEPANEL` and related selector.
>   - Minor UI copy/color tweaks in app header icons.
> - **Actions/Thunks typing**:
> - Ensure onboarding thunks return `Promise<string>` where they yield
SRP; add stronger param types (e.g., ENS resolution boolean).
> - **Tests & Stories**:
> - Update tests to TS types, cast elements, mock returns, and new
props; snapshot adjustments; storybook meta typing fixes.
> - **Shared Types**:
>   - Export new `sidepanel` types in `shared/types`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
71e320b. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: MetaMask Bot <[email protected]>

Author: smgv

app/scripts/controllers/metametrics-controller.ts

@@ -885,6 +885,7 @@ export default class MetaMetricsController extends BaseController<
 
   // It sets an uninstall URL ("Sorry to see you go!" page),
   // which is opened if a user uninstalls the extension.
+  // This method should only be called after the user has made a decision about MetaMetrics participation.
   updateExtensionUninstallUrl(
     participateInMetaMetrics: boolean,
     metaMetricsId: string,
@@ -920,7 +921,7 @@ export default class MetaMetricsController extends BaseController<
    * @returns The string of the new metametrics id, or null
    */
   async setParticipateInMetaMetrics(
-    participateInMetaMetrics: boolean,
+    participateInMetaMetrics: boolean | null,
   ): Promise<string | null> {
     const { metaMetricsId: existingMetaMetricsId } = this.state;
 
@@ -946,7 +947,8 @@ export default class MetaMetricsController extends BaseController<
     ///: BEGIN:ONLY_INCLUDE_IF(build-main)
     if (
       this.#environment !== ENVIRONMENT.DEVELOPMENT &&
-      metaMetricsId !== null
+      metaMetricsId !== null &&
+      participateInMetaMetrics !== null
     ) {
       this.updateExtensionUninstallUrl(participateInMetaMetrics, metaMetricsId);
     }

shared/types/index.ts

@@ -5,3 +5,4 @@ export * from './metametrics';
 export * from './origin-throttling';
 export * from './security-alerts-api';
 export * from './transaction-decode';
+export * from './sidepanel';

shared/types/sidepanel.ts

@@ -0,0 +1,6 @@
+// Type augmentation for sidePanel API (not yet in webextension-polyfill types)
+export type BrowserWithSidePanel = typeof browser & {
+  sidePanel?: {
+    open: (options: { windowId?: number }) => Promise<void>;
+  };
+};

ui/ducks/metamask/metamask.js

@@ -638,3 +638,13 @@ export function doesUserHaveALedgerAccount(state) {
 export function getCurrentCurrency(state) {
   return state.metamask.currentCurrency;
 }
+
+/**
+ * Returns a boolean indicating whether the user opened the extension with the sidepanel.
+ *
+ * @param {object} state - the redux state object
+ * @returns {boolean} true if the user opened the extension with the sidepanel, false otherwise
+ */
+export function getOpenedWithSidepanel(state) {
+  return state.metamask.openedWithSidepanel;
+}