From 2293e1a2e5a5430e612e49cc5406255b4480fc8f Mon Sep 17 00:00:00 2001
From: matstyler <mat.franczuk@gmail.com>
Date: Tue, 15 Oct 2024 11:10:47 +0200
Subject: [PATCH] fix: switch networks

---
 .../test/playwright/addNetwork.spec.ts        | 19 +++++++++++++++++++
 .../popups/closeNetworkAddedPopover.ts        |  8 ++++++++
 .../actions/toggleShowTestNetworks.ts         |  2 ++
 .../src/selectors/pages/HomePage/index.ts     |  7 +++++--
 .../e2e/toggleShowTestNetworks.spec.ts        |  2 ++
 5 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 examples/metamask/test/playwright/addNetwork.spec.ts

diff --git a/examples/metamask/test/playwright/addNetwork.spec.ts b/examples/metamask/test/playwright/addNetwork.spec.ts
new file mode 100644
index 000000000..51e9e907c
--- /dev/null
+++ b/examples/metamask/test/playwright/addNetwork.spec.ts
@@ -0,0 +1,19 @@
+import { testWithSynpress } from '@synthetixio/synpress'
+import { metaMaskFixtures } from '@synthetixio/synpress/playwright'
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(metaMaskFixtures(basicSetup))
+
+const { expect } = test
+
+test('should add a custom network to MetaMask', async ({ metamask, page }) => {
+  // Add the custom network
+  await metamask.addNetwork({
+    name: 'Optimism',
+    rpcUrl: 'https://mainnet.optimism.io',
+    chainId: 10,
+    symbol: 'ETH'
+  })
+
+  await expect(page.locator('#chainId')).toHaveText('0xa')
+})
diff --git a/wallets/metamask/src/playwright/pages/HomePage/actions/popups/closeNetworkAddedPopover.ts b/wallets/metamask/src/playwright/pages/HomePage/actions/popups/closeNetworkAddedPopover.ts
index b107b411c..1ceb46d61 100644
--- a/wallets/metamask/src/playwright/pages/HomePage/actions/popups/closeNetworkAddedPopover.ts
+++ b/wallets/metamask/src/playwright/pages/HomePage/actions/popups/closeNetworkAddedPopover.ts
@@ -8,4 +8,12 @@ export async function closeNetworkAddedPopover(page: Page) {
 
   // TODO: Extract & make configurable
   await clickLocatorIfCondition(switchNetworkButtonLocator, () => switchNetworkButtonLocator.isVisible(), 1_000)
+
+  const switchCompleteCloseButtonLocator = page.locator(Selectors.networkAddedPopover.switchCompleteCloseButton)
+
+  await clickLocatorIfCondition(
+    switchCompleteCloseButtonLocator,
+    () => switchCompleteCloseButtonLocator.isVisible(),
+    1_000
+  )
 }
diff --git a/wallets/metamask/src/playwright/pages/HomePage/actions/toggleShowTestNetworks.ts b/wallets/metamask/src/playwright/pages/HomePage/actions/toggleShowTestNetworks.ts
index 9e48c1527..b6bde5537 100644
--- a/wallets/metamask/src/playwright/pages/HomePage/actions/toggleShowTestNetworks.ts
+++ b/wallets/metamask/src/playwright/pages/HomePage/actions/toggleShowTestNetworks.ts
@@ -8,4 +8,6 @@ export async function toggleShowTestNetworks(page: Page) {
   await page.locator(Selectors.networkDropdown.dropdownButton).click()
 
   await toggle(page.locator(Selectors.networkDropdown.showTestNetworksToggle))
+
+  await page.locator(Selectors.networkDropdown.closeNetworkPopupButton).click()
 }
diff --git a/wallets/metamask/src/selectors/pages/HomePage/index.ts b/wallets/metamask/src/selectors/pages/HomePage/index.ts
index 61e04cf29..8149bd735 100644
--- a/wallets/metamask/src/selectors/pages/HomePage/index.ts
+++ b/wallets/metamask/src/selectors/pages/HomePage/index.ts
@@ -55,7 +55,8 @@ const popover = {
 
 const networkAddedPopover = {
   switchToNetworkButton: '.home__new-network-added__switch-to-button',
-  dismissButton: '.home__new-network-added button.btn-secondary'
+  dismissButton: '.home__new-network-added button.btn-secondary',
+  switchCompleteCloseButton: '.popover-header .box.popover-header__title button.mm-box.mm-button-icon'
 }
 
 const newNetworkInfoPopover = {
@@ -75,7 +76,9 @@ const networkDropdown = {
   showTestNetworksToggle: `${networkDropdownContainer} > section > div > label.toggle-button`,
   addNetworkButton: `${networkDropdownContainer} div.mm-box.mm-box--padding-4 > button`,
   toggleOff: `${networkDropdownContainer} label.toggle-button.toggle-button--off`,
-  toggleOn: `${networkDropdownContainer} label.toggle-button.toggle-button--on`
+  toggleOn: `${networkDropdownContainer} label.toggle-button.toggle-button--on`,
+  closeNetworkPopupButton:
+    '.mm-modal-header button.mm-button-icon.mm-box--color-icon-default.mm-box--background-color-transparent.mm-box--rounded-lg'
 }
 
 const tabContainer = '.tabs__content'
diff --git a/wallets/metamask/test/playwright/e2e/toggleShowTestNetworks.spec.ts b/wallets/metamask/test/playwright/e2e/toggleShowTestNetworks.spec.ts
index 6361fbaf4..5140a5109 100644
--- a/wallets/metamask/test/playwright/e2e/toggleShowTestNetworks.spec.ts
+++ b/wallets/metamask/test/playwright/e2e/toggleShowTestNetworks.spec.ts
@@ -19,6 +19,8 @@ test('should toggle the "Show test networks" option from the networks dropdown',
 
   await metamask.toggleShowTestNetworks()
 
+  await metamaskPage.locator(Selectors.networkDropdown.dropdownButton).click()
+
   // We have to wait for the toggle to be "toggled". This is a hacky workaround, unfortunately.
   await expect(metamaskPage.locator(Selectors.networkDropdown.showTestNetworksToggle)).toHaveClass(/toggle-button--on/)