Merge pull request #30863 from MetaMask/cherry-pick-ff15246-v12.13.1

chore(cherr-pick): a new prep-deps workflow with caching (#29979)

Author: danjm

.github/CONTRIBUTING.md

@@ -11,6 +11,7 @@ There are also plenty of open issues we'd love help with. Search the [`good firs
 If you're picking up a bounty or an existing issue, feel free to ask clarifying questions on the issue as you go about your work.
 
 ### Submitting a pull request
+
 When you're done with your project / bugfix / feature and ready to submit a PR, there are a couple guidelines we ask you to follow:
 
 - [ ] **Make sure you followed our [`coding guidelines`](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md)**: These guidelines aim to maintain consistency and readability across the codebase. They help ensure that the code is easy to understand, maintain, and modify, which is particularly important when working with multiple contributors.

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,138 +1,138 @@
 name: Bug Report
 description: Using MetaMask, but it's not working as you expect?
-title: "[Bug]: "
-labels: ["type-bug"]
+title: '[Bug]: '
+labels: ['type-bug']
 body:
- - type: markdown
-   attributes:
-     value: |
-       Thanks for taking the time to fill out this bug report!
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
 
-       ## **Before Submitting:**
+        ## **Before Submitting:**
 
-       * Please search to make sure this issue has not been opened already.
-       * If this is a question about how to integrate MetaMask with your project, please ask in our [Community forum](https://community.metamask.io/c/developer-questions/) instead. This will get your question answered more quickly and make it easier for other devs to find the answer in the future.
- - type: textarea
-   id: what-happened
-   attributes:
-     label: Describe the bug
-     description: What happened?
-     placeholder: A clear and concise description of what the bug is
-   validations:
-     required: true
- - type: textarea
-   id: expected-behavior
-   attributes:
-     label: Expected behavior
-     description: What did you expect to happen?
- - type: textarea
-   id: screenshot-recording
-   attributes:
-     label: Screenshots/Recordings
-     description: Please include screenshots/recordings if applicable!
- - type: textarea
-   id: reproduce
-   attributes:
-     label: Steps to reproduce
-     description: "List all steps needed to reproduce the problem:"
-     placeholder: |
-       1. Go to '...'
-       2. Click on '...'
-       3. Scroll down to '...'
-       4. See error
-   validations:
-     required: true
- - type: textarea
-   id: error
-   attributes:
-     label: Error messages or log output
-     description: Please copy and paste any relevant error messages or log output. This will be automatically formatted, so there is no need for backticks.
-     render: shell
- - type: dropdown
-   id: stage
-   attributes:
-     label: Detection stage
-     description: At what stage was the bug detected?
-     options:
-       - In production (default)
-       - In beta
-       - During release testing
-       - On main branch
-       - On a feature branch
-   validations:
-     required: true
- - type: input
-   id: version
-   attributes:
-     label: Version
-     description: What version of MetaMask are you running? You can find the version in "Settings" > "About"
-     placeholder: "7.1.0"
-   validations:
-     required: true
- - type: dropdown
-   id: build
-   attributes:
-     label: Build type
-     description: Are you using a testing or development build of MetaMask? If so, please select the type of build you are using.
-     options:
-       - Beta
-       - Flask
-       - Other (please specify exactly where you obtained this build in "Additional Context" section)
- - type: dropdown
-   id: browsers
-   attributes:
-     label: Browser
-     description: Which browsers have you seen the problem on?
-     multiple: true
-     options:
-       - Chrome
-       - Firefox
-       - Microsoft Edge
-       - Brave
-       - Other (please elaborate in the "Additional Context" section)
-   validations:
-     required: true
- - type: dropdown
-   id: os
-   attributes:
-     label: Operating system
-     description: Which operating systems have you seen the problem on?
-     multiple: true
-     options:
-       - Windows
-       - MacOS
-       - Linux
-       - Other (please elaborate in the "Additional Context" section)
-   validations:
-     required: true
- - type: dropdown
-   id: hardware-wallet
-   attributes:
-     label: Hardware wallet
-     description: Are you using any of these hardware wallets? Please include the firmware version in the "Additional context" section below for any that you select here.
-     multiple: true
-     options:
-       - Ledger
-       - Trezor
-       - Keystone
-       - GridPlus Lattice1
-       - AirGap Vault
-       - imToken
-       - OneKey
-       - Other (please elaborate in the "Additional Context" section)
- - type: textarea
-   id: additional
-   attributes:
-     label: Additional context
-     description: Add any other context about the problem here, e.g. related issues, additional error messages or logs, or any potentially relevant details about the environment or situation the bug occurred in.
- - type: textarea
-   id: severity
-   attributes:
-     label: Severity
-     description: |
-       To be added after bug submission by internal support / PM:
-     placeholder: |
-       - How critical is the impact of this bug on a user?
-       - Add stats if available on % of customers impacted
-       - Is this visible to all users?
-       - Is this tech debt?
+        * Please search to make sure this issue has not been opened already.
+        * If this is a question about how to integrate MetaMask with your project, please ask in our [Community forum](https://community.metamask.io/c/developer-questions/) instead. This will get your question answered more quickly and make it easier for other devs to find the answer in the future.
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: Describe the bug
+      description: What happened?
+      placeholder: A clear and concise description of what the bug is
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: What did you expect to happen?
+  - type: textarea
+    id: screenshot-recording
+    attributes:
+      label: Screenshots/Recordings
+      description: Please include screenshots/recordings if applicable!
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: 'List all steps needed to reproduce the problem:'
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: error
+    attributes:
+      label: Error messages or log output
+      description: Please copy and paste any relevant error messages or log output. This will be automatically formatted, so there is no need for backticks.
+      render: shell
+  - type: dropdown
+    id: stage
+    attributes:
+      label: Detection stage
+      description: At what stage was the bug detected?
+      options:
+        - In production (default)
+        - In beta
+        - During release testing
+        - On main branch
+        - On a feature branch
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      description: What version of MetaMask are you running? You can find the version in "Settings" > "About"
+      placeholder: '7.1.0'
+    validations:
+      required: true
+  - type: dropdown
+    id: build
+    attributes:
+      label: Build type
+      description: Are you using a testing or development build of MetaMask? If so, please select the type of build you are using.
+      options:
+        - Beta
+        - Flask
+        - Other (please specify exactly where you obtained this build in "Additional Context" section)
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: Browser
+      description: Which browsers have you seen the problem on?
+      multiple: true
+      options:
+        - Chrome
+        - Firefox
+        - Microsoft Edge
+        - Brave
+        - Other (please elaborate in the "Additional Context" section)
+    validations:
+      required: true
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating system
+      description: Which operating systems have you seen the problem on?
+      multiple: true
+      options:
+        - Windows
+        - MacOS
+        - Linux
+        - Other (please elaborate in the "Additional Context" section)
+    validations:
+      required: true
+  - type: dropdown
+    id: hardware-wallet
+    attributes:
+      label: Hardware wallet
+      description: Are you using any of these hardware wallets? Please include the firmware version in the "Additional context" section below for any that you select here.
+      multiple: true
+      options:
+        - Ledger
+        - Trezor
+        - Keystone
+        - GridPlus Lattice1
+        - AirGap Vault
+        - imToken
+        - OneKey
+        - Other (please elaborate in the "Additional Context" section)
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here, e.g. related issues, additional error messages or logs, or any potentially relevant details about the environment or situation the bug occurred in.
+  - type: textarea
+    id: severity
+    attributes:
+      label: Severity
+      description: |
+        To be added after bug submission by internal support / PM:
+      placeholder: |
+        - How critical is the impact of this bug on a user?
+        - Add stats if available on % of customers impacted
+        - Is this visible to all users?
+        - Is this tech debt?

.github/dependabot.yml

@@ -3,10 +3,10 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "daily"
+      interval: 'daily'
     allow:
-      - dependency-name: "@metamask/*"
-    versioning-strategy: "lockfile-only"
+      - dependency-name: '@metamask/*'
+    versioning-strategy: 'lockfile-only'

.github/guidelines/CODING_GUIDELINES.md

@@ -1,14 +1,17 @@
 # MetaMask Coding Guidelines
 
 ### 1. New Code Should be TypeScript
+
 - New components and utilities should be written in TypeScript and enforce typing.
 - Existing code should be refactored into TypeScript where time allows. If you are replacing a component, use TypeScript.
 - Follow contributor doc [TypeScript Guidelines](https://github.com/MetaMask/contributor-docs/blob/main/docs/typescript.md).
 
 ### 2. Using Functional Components and Hooks Instead of Classes
+
 - Use functional components and hooks as they result in more concise and readable code compared to classes.
 
 ### 3. Organize Files Related to the Same Component in One Folder
+
 - An example of a component file structure:
 
 ```.tsx
@@ -25,39 +28,45 @@ avatar-account
 ```
 
 ### 4. Follow Naming Conventions
-- You should always use PascalCase when naming components. For example: *TextField*, *NavMenu*, and *SuccessButton*.
-- Use camelCase for functions declared inside components like *handleInput()* or *showElement()*.
-- When creating hooks use *withHookName()*.
+
+- You should always use PascalCase when naming components. For example: _TextField_, _NavMenu_, and _SuccessButton_.
+- Use camelCase for functions declared inside components like _handleInput()_ or _showElement()_.
+- When creating hooks use _withHookName()_.
 
 ### 5. Avoid Repetitive Code
+
 - If you notice you are writing duplicated code or components, convert it into a component, utility functions or hooks that can be reused. Do this with [scalable intention](https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction).
 
 ### 6. Component Optimization
+
 - For functional components, instead of having large return statements, breaking the component down into smaller sub-components.
 - Use memoizing techniques where possible. Utilize the `useMemo` hook for values and `useCallback` for functions. Follow recommended React guidance.
 - Use the useEffect hook for performing side effects like data fetching or DOM manipulation after the component has rendered. However, use it judiciously as unnecessary effects can complicate code and affect performance. For a deeper understanding, we recommend reading [this article](https://react.dev/learn/you-might-not-need-an-effect).
 
 ### 7. Use Object Destructuring For Props
+
 - Instead of passing the props object, use object destructuring to pass the prop name. This discards the need to refer to the props object each time you need to use it.
 
 ```tsx
 import React from 'react';
 const MyComponent = ({ id }) => {
   return <div id={id} />;
 };
-
 ```
 
 ### 8. Document Each Component/Utility
+
 - New utility functions should be documented [TSDoc](https://tsdoc.org) commenting format.
 - Referencing our component docs.
 - If applicable add URL to online resources if they are meaningful for the component/method.
 
 ### 9. Write Tests for Each Component/Utility
+
 - Write tests for the components you create as it reduces the possibilities of errors. Testing ensures that the components are behaving as you would expect. In this project Jest is used, and it provides an environment where you can execute your tests.
 - Follow the contributor docs [Unit Testing Guidelines](https://github.com/MetaMask/contributor-docs/blob/main/docs/unit-testing.md).
 
 ### 10. External packages should be well maintained
+
 - New packages should only be integrated if the application doesn’t have the existing functionality and it cannot be added by implementing a small utility function. Use the https://snyk.io/advisor/ to assess the popularity, maintainability and security analysis. The package must be in good standing to be added to the project.
 - Update existing dependencies when you notice they are out of date.
 

.github/guidelines/LABELING_GUIDELINES.md

@@ -1,24 +1,29 @@
 # PR Labeling Guidelines
+
 To maintain a consistent and efficient development workflow, we have set specific label guidelines for all pull requests (PRs). Please ensure you adhere to the following instructions:
 
 ### Mandatory team labels:
+
 - **Internal Developers**: Every PR raised by an internal developer must include a label prefixed with `team-` (e.g., `team-extension-ux`, `team-extension-platform`, etc.). This indicates the respective internal team responsible for the PR.
 
 - **External Contributors**: PRs submitted by contributors who are not part of the organization will be automatically labeled with `external-contributor`.
 
 It's essential to ensure that PRs have the appropriate labels before they are considered for merging.
 
 ### Mandatory release version labels:
+
 - **release-x.y.z**: This label is automatically added to a PR and its linked issues upon the PR's merge. The `x.y.z` in the label represents the version in which the changes from the PR will be included. This label is auto-generated by a [GitHub action](../workflows/add-release-label.yml), which determines the version by incrementing the minor version number from the most recent release. Manual intervention is only required in specific cases. For instance, if a merged PR is cherry-picked into a release branch, typically done to address Release Candidate (RC) bugs, the label would need to be manually updated to reflect the correct version.
 - **regression-prod-x.y.z**: This label is automatically added to a bug report issue at the time of its creation. The `x.y.z` in the label represents the version in which the bug first appeared. This label is auto-generated by a [GitHub action](../workflows/check-template-and-add-labels.yml), which determines the `x.y.z` value based on the version information provided in the bug report issue form. Manual intervention is only necessary under certain circumstances. For example, if a user submits a bug report and specifies the version they are currently using, but the bug was actually introduced in a prior version, the label would need to be manually updated to accurately reflect the version where the bug originated.
 - **regression-RC-x.y.z**: This label is manually added to a bug report issue by release engineers when a bug is found during release regerssion testing phase. The `x.y.z` in the label represents the release candidate (RC) version in which the bug's been discovered.
 
 ### Optional labels:
+
 - **regression-main**: This label can manually be added to a bug report issue at the time of its creation if the bug is present on the development branch, i.e., `main`, but is not yet released in production.
 - **feature-branch-bug**: This label can manually be added to a bug report issue at the time of its creation if the bug is present on a feature branch, i.e., before merging to `main`.
 - **needs-qa**: If the PR includes a new features, complex testing steps, or large refactors, this label must be added to indicated PR requires a full manual QA prior being merged and added to a release.
 
 ### Labels prohibited when PR needs to be merged:
+
 Any PR that includes one of the following labels can not be merged:
 
 - **needs-qa**: The PR requires a full manual QA prior to being merged and added to a release.

.github/pull-request-template.md

@@ -1,4 +1,3 @@
-
 <!--
 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.