Description

To prevent further tech debt and inconsistencies Alert can be deprecated in favor of BannerAlert

Alert (old): app/components/Base/Alert.tsx
BannerAlert (new): app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.tsx

Add the deprecation JSDoc format below to the deprecated code

/**
 * @deprecated The `<Alert />` component has been deprecated in favor of the new `<BannerAlert>` component from the component-library.
 * Please update your code to use the new `<BannerAlert>` component instead, which can be found at app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.tsx.
 * You can find documentation for the new BannerAlert component in the README:
 * {@link https://github.com/MetaMask/metamask-mobile/tree/main/app/component-library/components/Banners/Banner/variants/BannerAlert}
 * If you would like to help with the replacement of the old Alert component, please submit a pull request against this GitHub issue:
 * {@link https://github.com/MetaMask/metamask-mobile/issues/6889}
 */

Technical Details

• Add deprecation message above old component function or class
• Create good first issue to replace all old components with new Replace old Alert component with new BannerAlert component

Acceptance Criteria

• Old component has been deprecated (deprecation indicator shows up in VS Code)
• Good first issue has been created for the community to contribute to reducing tech debt and improving the UI consistency of MetaMask

If the acceptance criteria is not met, PRs may be closed.

Difficulty: Intermediate

Good first issue for: External contributors who are able to run the extension locally, familiar with React Native, component props and proficient at searching a codebase