From c13f03ba8cc61a207c54aa71728d6a87c4329e54 Mon Sep 17 00:00:00 2001
From: Sero <69639595+Seroxdesign@users.noreply.github.com>
Date: Thu, 4 Jul 2024 12:52:23 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Wait=20for=20metamask=20fun?=
 =?UTF-8?q?ctions=20(#1160)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../metamask/src/fixtures/metaMaskFixtures.ts |  3 +-
 wallets/metamask/src/selectors/error/index.ts |  7 +++
 wallets/metamask/src/selectors/index.ts       |  1 +
 .../metamask/src/selectors/loading/index.ts   |  1 +
 .../getNotificationPageAndWaitForLoad.ts      | 18 +-----
 wallets/metamask/src/utils/waitFor.ts         | 57 +++++++++++++++++++
 6 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 wallets/metamask/src/selectors/error/index.ts

diff --git a/wallets/metamask/src/fixtures/metaMaskFixtures.ts b/wallets/metamask/src/fixtures/metaMaskFixtures.ts
index cc2019e4b..88b3cd55a 100644
--- a/wallets/metamask/src/fixtures/metaMaskFixtures.ts
+++ b/wallets/metamask/src/fixtures/metaMaskFixtures.ts
@@ -12,6 +12,7 @@ import {
 import { type Anvil, type CreateAnvilOptions, createPool } from '@viem/anvil'
 import fs from 'fs-extra'
 import { persistLocalStorage } from '../fixture-actions/persistLocalStorage'
+import { waitForMetaMaskWindowToBeStable } from '../utils/waitFor'
 
 type MetaMaskFixtures = {
   _contextPath: string
@@ -84,7 +85,7 @@ export const metaMaskFixtures = (walletSetup: ReturnType<typeof defineWalletSetu
       _metamaskPage = context.pages()[0] as Page
 
       await _metamaskPage.goto(`chrome-extension://${extensionId}/home.html`)
-
+      await waitForMetaMaskWindowToBeStable(_metamaskPage)
       await unlockForFixture(_metamaskPage, walletSetup.walletPassword)
 
       await use(context)
diff --git a/wallets/metamask/src/selectors/error/index.ts b/wallets/metamask/src/selectors/error/index.ts
new file mode 100644
index 000000000..b29b281c3
--- /dev/null
+++ b/wallets/metamask/src/selectors/error/index.ts
@@ -0,0 +1,7 @@
+export const ErrorSelectors = {
+  loadingOverlayErrorButtons: '.loading-overlay__error-buttons',
+  loadingOverlayErrorButtonsRetryButton: '.loading-overlay__error-buttons .btn-primary',
+  criticalError: '.critical-error',
+  criticalErrorRestartButton: '#critical-error-button',
+  errorPage: '.error-page'
+}
diff --git a/wallets/metamask/src/selectors/index.ts b/wallets/metamask/src/selectors/index.ts
index 0ac86beb1..bcf820533 100644
--- a/wallets/metamask/src/selectors/index.ts
+++ b/wallets/metamask/src/selectors/index.ts
@@ -1 +1,2 @@
 export * from './loading'
+export * from './error'
diff --git a/wallets/metamask/src/selectors/loading/index.ts b/wallets/metamask/src/selectors/loading/index.ts
index 62284153a..02b70db37 100644
--- a/wallets/metamask/src/selectors/loading/index.ts
+++ b/wallets/metamask/src/selectors/loading/index.ts
@@ -1,5 +1,6 @@
 export const LoadingSelectors = {
   spinner: '.spinner',
+  loadingOverlay: '.loading-overlay',
   loadingIndicators: [
     '.loading-logo',
     '.loading-spinner',
diff --git a/wallets/metamask/src/utils/getNotificationPageAndWaitForLoad.ts b/wallets/metamask/src/utils/getNotificationPageAndWaitForLoad.ts
index 2bc0f1db4..dd88d4485 100644
--- a/wallets/metamask/src/utils/getNotificationPageAndWaitForLoad.ts
+++ b/wallets/metamask/src/utils/getNotificationPageAndWaitForLoad.ts
@@ -1,7 +1,5 @@
 import type { BrowserContext, Page } from '@playwright/test'
-import { LoadingSelectors } from '../selectors'
-import { waitUntilStable } from './waitFor'
-import { waitForSelector } from './waitFor'
+import { waitForMetaMaskLoad, waitUntilStable } from './waitFor'
 
 export async function getNotificationPageAndWaitForLoad(context: BrowserContext, extensionId: string) {
   const notificationPageUrl = `chrome-extension://${extensionId}/notification.html`
@@ -25,17 +23,5 @@ export async function getNotificationPageAndWaitForLoad(context: BrowserContext,
     height: 592
   })
 
-  await Promise.all(
-    LoadingSelectors.loadingIndicators.map(async (selector) => {
-      await waitForSelector(selector, notificationPage as Page, 5000)
-    })
-  )
-    .then(() => {
-      console.log('All loading indicators are hidden')
-    })
-    .catch((error) => {
-      console.error('Error: ', error)
-    })
-
-  return notificationPage
+  return await waitForMetaMaskLoad(notificationPage)
 }
diff --git a/wallets/metamask/src/utils/waitFor.ts b/wallets/metamask/src/utils/waitFor.ts
index e33a4de68..c5680567e 100644
--- a/wallets/metamask/src/utils/waitFor.ts
+++ b/wallets/metamask/src/utils/waitFor.ts
@@ -1,5 +1,8 @@
 import type { Page } from '@playwright/test'
 import { errors } from '@playwright/test'
+import { ErrorSelectors, LoadingSelectors } from '../selectors'
+
+const DEFAULT_TIMEOUT = 2000
 
 export const waitUntilStable = async (page: Page) => {
   await page.waitForLoadState('domcontentloaded')
@@ -21,6 +24,60 @@ export const waitForSelector = async (selector: string, page: Page, timeout: num
   }
 }
 
+export const waitForMetaMaskLoad = async (page: Page) => {
+  await Promise.all(
+    LoadingSelectors.loadingIndicators.map(async (selector) => {
+      await waitForSelector(selector, page, DEFAULT_TIMEOUT)
+    })
+  )
+    .then(() => {
+      console.log('All loading indicators are hidden')
+    })
+    .catch((error) => {
+      console.error('Error: ', error)
+    })
+
+  return page
+}
+
+export const waitForMetaMaskWindowToBeStable = async (page: Page) => {
+  await waitForMetaMaskLoad(page)
+  if ((await page.locator(ErrorSelectors.loadingOverlayErrorButtons).count()) > 0) {
+    const retryButton = await page.locator(ErrorSelectors.loadingOverlayErrorButtonsRetryButton)
+    await retryButton.click()
+    await waitForSelector(LoadingSelectors.loadingOverlay, page, DEFAULT_TIMEOUT)
+  }
+  await fixCriticalError(page)
+}
+
+export const fixCriticalError = async (page: Page) => {
+  for (let times = 0; times < 5; times++) {
+    if ((await page.locator(ErrorSelectors.criticalError).count()) > 0) {
+      console.log('[fixCriticalError] Metamask crashed with critical error, refreshing..')
+      if (times <= 3) {
+        await page.reload()
+        await waitForMetaMaskWindowToBeStable(page)
+      } else if (times === 4) {
+        const restartButton = await page.locator(ErrorSelectors.criticalErrorRestartButton)
+        await restartButton.click()
+        await waitForMetaMaskWindowToBeStable(page)
+      } else {
+        throw new Error('[fixCriticalError] Max amount of retries to fix critical metamask error has been reached.')
+      }
+    } else if ((await page.locator(ErrorSelectors.errorPage).count()) > 0) {
+      console.log('[fixCriticalError] Metamask crashed with error, refreshing..')
+      if (times <= 4) {
+        await page.reload()
+        await waitForMetaMaskWindowToBeStable(page)
+      } else {
+        throw new Error('[fixCriticalError] Max amount of retries to fix critical metamask error has been reached.')
+      }
+    } else {
+      break
+    }
+  }
+}
+
 // Inlining the sleep function here cause this is one of the few places in the entire codebase where sleep should be used!
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))