feat: converts viewHelper and all POMs + selectors to ts (#17376)

<!--
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**
This PR refactors the `viewHelper` to typescript along with all Page
Objects + selectors used by it.

### Improvement details
- all `TestHelpers.delay()` removed from viewHelper functions which
results in a reduction of 134 files having hardcoded delays 🚀
- 21 Page Objects refactored to typescript
- 19 selectors renamed to typescript
- More consistent imports
 
<!--
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?
-->

## **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:

## **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**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **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.

Author: christopherferreira9

e2e/framework/Assertions.ts

@@ -11,7 +11,7 @@ export default class Assertions {
    * Assert element is visible with auto-retry
    */
   static async expectElementToBeVisible(
-    detoxElement: DetoxElement | WebElement,
+    detoxElement: DetoxElement | WebElement | DetoxMatcher,
     options: AssertionOptions = {},
   ): Promise<void> {
     const {

e2e/pages/Common/ForgotPasswordModalView.ts

@@ -4,7 +4,7 @@ import {
 } from '../../selectors/Common/ForgotPasswordModal.selectors';
 import Matchers from '../../framework/Matchers.ts';
 import Gestures from '../../framework/Gestures.ts';
-import { OnboardingSelectorText } from '../../selectors/Onboarding/Onboarding.selectors.js';
+import { OnboardingSelectorText } from '../../selectors/Onboarding/Onboarding.selectors';
 
 class ForgotPasswordModalView {
   get container(): DetoxElement {

e2e/pages/Network/NetworkEducationModal.js renamed to e2e/pages/Network/NetworkEducationModal.ts

@@ -2,41 +2,41 @@ import {
   NetworkEducationModalSelectorsIDs,
   NetworkEducationModalSelectorsText,
 } from '../../selectors/Network/NetworkEducationModal.selectors';
-import Matchers from '../../framework/Matchers.ts';
-import Gestures from '../../framework/Gestures.ts';
+import Matchers from '../../framework/Matchers';
+import Gestures from '../../framework/Gestures';
 
 class NetworkEducationModal {
-  get container() {
+  get container(): DetoxElement {
     return Matchers.getElementByID(NetworkEducationModalSelectorsIDs.CONTAINER);
   }
 
-  get closeButton() {
+  get closeButton(): DetoxElement {
     return device.getPlatform() === 'ios'
       ? Matchers.getElementByID(NetworkEducationModalSelectorsIDs.CLOSE_BUTTON)
       : Matchers.getElementByLabel(
           NetworkEducationModalSelectorsIDs.CLOSE_BUTTON,
         );
   }
 
-  get addToken() {
+  get addToken(): DetoxElement {
     return Matchers.getElementByText(
       NetworkEducationModalSelectorsText.ADD_TOKEN,
     );
   }
 
-  get networkName() {
+  get networkName(): DetoxElement {
     return Matchers.getElementByID(
       NetworkEducationModalSelectorsIDs.NETWORK_NAME,
     );
   }
 
-  async tapGotItButton() {
+  async tapGotItButton(): Promise<void> {
     await Gestures.waitAndTap(this.closeButton, {
       elemDescription: 'Got it button',
     });
   }
 
-  async tapNetworkName() {
+  async tapNetworkName(): Promise<void> {
     await Gestures.waitAndTap(this.networkName);
     await Gestures.waitAndTap(this.networkName);
   }

e2e/pages/Network/NetworkListModal.js renamed to e2e/pages/Network/NetworkListModal.ts

@@ -2,55 +2,57 @@ import {
   NetworkListModalSelectorsIDs,
   NetworkListModalSelectorsText,
 } from '../../selectors/Network/NetworkListModal.selectors';
-import Matchers from '../../utils/Matchers';
-import Gestures from '../../utils/Gestures';
-import TestHelpers from '../../helpers';
 import { NetworksViewSelectorsIDs } from '../../selectors/Settings/NetworksView.selectors';
+import Matchers from '../../framework/Matchers';
+import Gestures from '../../framework/Gestures';
 
 class NetworkListModal {
-  get networkScroll() {
+  get networkScroll(): DetoxElement {
     return Matchers.getElementByID(NetworkListModalSelectorsIDs.SCROLL);
   }
 
-  get closeIcon() {
+  get closeIcon(): DetoxElement {
     return Matchers.getElementByID(NetworksViewSelectorsIDs.CLOSE_ICON);
   }
 
-  get deleteNetworkButton() {
+  get deleteNetworkButton(): DetoxElement {
     return Matchers.getElementByText(
       NetworkListModalSelectorsText.DELETE_NETWORK,
     );
   }
 
-  get addPopularNetworkButton() {
+  get addPopularNetworkButton(): DetoxElement {
     return Matchers.getElementByText(
       NetworkListModalSelectorsText.ADD_POPULAR_NETWORK_BUTTON,
     );
   }
 
-  get networkSearchInput() {
+  get networkSearchInput(): DetoxElement {
     return Matchers.getElementByID(
       NetworksViewSelectorsIDs.SEARCH_NETWORK_INPUT_BOX_ID,
     );
   }
 
-  get selectNetwork() {
+  get selectNetwork(): DetoxElement {
     return Matchers.getElementByText(
       NetworkListModalSelectorsText.SELECT_NETWORK,
     );
   }
 
-  get testNetToggle() {
+  get testNetToggle(): DetoxElement {
     return Matchers.getElementByID(
       NetworkListModalSelectorsIDs.TEST_NET_TOGGLE,
     );
   }
 
-  get deleteButton() {
+  get deleteButton(): DetoxElement {
     return Matchers.getElementByID('delete-network-button');
   }
 
-  async getCustomNetwork(network, custom = false) {
+  async getCustomNetwork(
+    network: string,
+    custom = false,
+  ): Promise<DetoxElement> {
     if (device.getPlatform() === 'android' || !custom) {
       return Matchers.getElementByText(network);
     }
@@ -60,54 +62,57 @@ class NetworkListModal {
     );
   }
 
-  async tapDeleteButton() {
+  async tapDeleteButton(): Promise<void> {
     await Gestures.waitAndTap(this.deleteNetworkButton);
   }
 
-  async scrollToTopOfNetworkList() {
-    await Gestures.swipe(this.networkScroll, 'down', 'fast');
+  async scrollToTopOfNetworkList(): Promise<void> {
+    await Gestures.swipe(this.networkScroll, 'down', {
+      speed: 'fast',
+    });
   }
 
-  async changeNetworkTo(networkName, custom) {
+  async changeNetworkTo(networkName: string, custom = false): Promise<void> {
     const elem = this.getCustomNetwork(networkName, custom);
-    await Gestures.waitAndTap(elem, { delayBeforeTap: 2500 });
-    await TestHelpers.delay(3000);
+    await Gestures.waitAndTap(elem);
   }
 
-  async scrollToBottomOfNetworkList() {
-    await Gestures.swipe(this.networkScroll, 'up', 'fast');
+  async scrollToBottomOfNetworkList(): Promise<void> {
+    await Gestures.swipe(this.networkScroll, 'up', {
+      speed: 'fast',
+    });
   }
 
-  async swipeToDismissModal() {
-    await Gestures.swipe(this.selectNetwork, 'down', 'slow', 0.9);
+  async swipeToDismissModal(): Promise<void> {
+    await Gestures.swipe(this.selectNetwork, 'down', {
+      speed: 'slow',
+      percentage: 0.9,
+    });
   }
 
-  async tapTestNetworkSwitch() {
-    await Gestures.waitAndTap(this.testNetToggle, { delayBeforeTap: 2500 });
+  async tapTestNetworkSwitch(): Promise<void> {
+    await Gestures.waitAndTap(this.testNetToggle);
   }
 
-  async longPressOnNetwork(networkName) {
+  async longPressOnNetwork(networkName: string): Promise<void> {
     const network = Matchers.getElementByText(networkName);
     await Gestures.tapAndLongPress(network);
   }
 
-  async SearchNetworkName(networkName) {
-    await Gestures.typeTextAndHideKeyboard(
-      this.networkSearchInput,
-      networkName,
-    );
+  async SearchNetworkName(networkName: string): Promise<void> {
+    await Gestures.typeText(this.networkSearchInput, networkName, {
+      hideKeyboard: true,
+    });
   }
 
-  async tapClearSearch() {
+  async tapClearSearch(): Promise<void> {
     await Gestures.waitAndTap(this.closeIcon);
   }
 
-  async tapAddNetworkButton() {
-    await Gestures.waitAndTap(this.addPopularNetworkButton, {
-      delayBeforeTap: 2500,
-    });
+  async tapAddNetworkButton(): Promise<void> {
+    await Gestures.waitAndTap(this.addPopularNetworkButton);
   }
-  async deleteNetwork() {
+  async deleteNetwork(): Promise<void> {
     await Gestures.waitAndTap(this.deleteButton);
   }
 }

e2e/pages/Onboarding/CreatePasswordView.js renamed to e2e/pages/Onboarding/CreatePasswordView.ts

@@ -1,71 +1,75 @@
 import { ChoosePasswordSelectorsIDs } from '../../selectors/Onboarding/ChoosePassword.selectors';
-import Matchers from '../../framework/Matchers.ts';
-import Gestures from '../../framework/Gestures.ts';
+import Matchers from '../../framework/Matchers';
+import Gestures from '../../framework/Gestures';
 import enContent from '../../../locales/languages/en.json';
 
 class CreatePasswordView {
-  get container() {
+  get container(): DetoxElement {
     return Matchers.getElementByID(ChoosePasswordSelectorsIDs.CONTAINER_ID);
   }
 
-  get newPasswordInput() {
+  get newPasswordInput(): DetoxElement {
     return Matchers.getElementByID(
       ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID,
     );
   }
 
-  get confirmPasswordInput() {
+  get confirmPasswordInput(): DetoxElement {
     return Matchers.getElementByID(
       ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID,
     );
   }
 
-  get iUnderstandCheckbox() {
+  get iUnderstandCheckbox(): DetoxElement {
     return Matchers.getElementByID(
       ChoosePasswordSelectorsIDs.I_UNDERSTAND_CHECKBOX_ID,
     );
   }
 
-  get iUnderstandCheckboxNewWallet() {
+  get iUnderstandCheckboxNewWallet(): DetoxElement {
     return Matchers.getElementByID(
       ChoosePasswordSelectorsIDs.I_UNDERSTAND_CHECKBOX_ID,
     );
   }
 
-  get submitButton() {
+  get submitButton(): DetoxElement {
     return Matchers.getElementByID(ChoosePasswordSelectorsIDs.SUBMIT_BUTTON_ID);
   }
 
-  get passwordError() {
+  get passwordError(): DetoxElement {
     return Matchers.getElementByText(enContent.import_from_seed.password_error);
   }
 
-  async resetPasswordInputs() {
-    await Gestures.clearField(this.newPasswordInput);
-    await Gestures.clearField(this.confirmPasswordInput);
+  async resetPasswordInputs(): Promise<void> {
+    await Gestures.typeText(this.newPasswordInput, '', {
+      hideKeyboard: true,
+    });
+    await Gestures.typeText(this.confirmPasswordInput, '', {
+      hideKeyboard: true,
+    });
   }
 
-  async enterPassword(password) {
+  async enterPassword(password: string): Promise<void> {
     await Gestures.typeText(this.newPasswordInput, password, {
       elemDescription: 'Create Password New Password Input',
       hideKeyboard: true,
     });
   }
 
-  async reEnterPassword(password) {
+  async reEnterPassword(password: string): Promise<void> {
     await Gestures.typeText(this.confirmPasswordInput, password, {
       elemDescription: 'Create Password Confirm Password Input',
       hideKeyboard: true,
     });
   }
 
-  async tapIUnderstandCheckBox() {
+  async tapIUnderstandCheckBox(): Promise<void> {
     await Gestures.tap(this.iUnderstandCheckbox, {
       elemDescription: 'Create Password - I Understand Checkbox',
     });
   }
 
-  async tapCreatePasswordButton() {
+  async tapCreatePasswordButton(): Promise<void> {
     await Gestures.waitAndTap(this.submitButton, {
       elemDescription: 'Create Password Submit Button',
     });

e2e/pages/Onboarding/EnableDeviceNotificationsAlert.js renamed to e2e/pages/Onboarding/EnableDeviceNotificationsAlert.ts

@@ -1,23 +1,25 @@
-import Gestures from '../../utils/Gestures';
-import Matchers from '../../utils/Matchers';
+import Gestures from '../../framework/Gestures';
+import Matchers from '../../framework/Matchers';
 
 import { EnableDeviceNotificationsAlertSelectorText } from '../../selectors/Onboarding/EnableDeviceNotificationsAlert.selectors';
 
 class EnableDeviceNotificationsAlert {
-  get stepOneContainer() {
+  get stepOneContainer(): DetoxElement {
     return Matchers.getSystemElementByText(
       EnableDeviceNotificationsAlertSelectorText.CONTAINER,
     );
   }
 
-  get getEnableDeviceNotificationsButton() {
+  get getEnableDeviceNotificationsButton(): DetoxElement {
     return Matchers.getSystemElementByText(
       EnableDeviceNotificationsAlertSelectorText.YES_BUTTON,
     );
   }
 
-  async tapOnEnableDeviceNotificationsButton() {
-    await Gestures.waitAndTap(this.getEnableDeviceNotificationsButton);
+  async tapOnEnableDeviceNotificationsButton(): Promise<void> {
+    await Gestures.waitAndTap(this.getEnableDeviceNotificationsButton, {
+      elemDescription: 'Enable Device Notifications Button',
+    });
   }
 }