test(e2e): Solana Phantom Wallet

e2e-tests/runner/examples/connectors/PhantomSolanaConnector/PhantomSolanaConnector.test.ts

@@ -0,0 +1,47 @@
+import {
+  expect,
+  getButtonByText,
+  getByAriaLabel,
+} from '@fuels/playwright-utils';
+import type { Page } from '@playwright/test';
+import phantom from '../../../node_modules/@phantom/synpress/commands/phantom';
+import { test } from './setup';
+
+phantom.confirmTransaction = async () => {
+  const notificationPage =
+    await phantom.playwright.switchToNotification('phantom');
+  await phantom.playwright.waitAndClick(
+    'phantom',
+    phantom.transactionPageElements.buttons.confirmTransaction, // Ensure this locator exists or define it
+    notificationPage,
+    { waitForEvent: 'close' },
+  );
+  return true;
+};
+// TODO Call test Solana Connector and separate the Phantom logic
+test.describe('PhantomSolanaConnector', () => {
+  test.slow();
+
+  const connect = async (page: Page) => {
+    await page.goto('/');
+    const connectButton = getButtonByText(page, 'Connect Wallet', true);
+    await connectButton.click();
+    await getByAriaLabel(page, 'Connect to Solana Wallets', true).click();
+    await page.getByText('Proceed anyway').click();
+    await getButtonByText(page, 'Phantom').click();
+    await phantom.acceptAccess();
+    await page.waitForTimeout(3000);
+  };
+
+  test('Fuel tests', async ({ page }) => {
+    await connect(page);
+    const addressElement = await page.locator('#address');
+    let address = null;
+    if (addressElement) {
+      address = await addressElement.getAttribute('data-address');
+    }
+    test.step('Check if address is not null', () => {
+      expect(address).not.toBeNull();
+    });
+  });
+});

e2e-tests/runner/examples/connectors/PhantomSolanaConnector/mocks/index.ts

@@ -0,0 +1 @@
+export * from './mocks';

e2e-tests/runner/examples/connectors/PhantomSolanaConnector/mocks/mocks.ts

@@ -0,0 +1,3 @@
+export const ETH_MNEMONIC =
+  'test test test test test test test test test test test junk';
+export const ETH_WALLET_PASSWORD = 'Tester@1234';

e2e-tests/runner/examples/connectors/PhantomSolanaConnector/setup.ts

@@ -0,0 +1,50 @@
+// Use a test fixture to set the context so tests have access to the wallet extension.
+import { downloadFuel } from '@fuels/playwright-utils';
+import type { BrowserContext } from '@playwright/test';
+import { test as base, chromium } from '@playwright/test';
+import phantomCommands from '../../../node_modules/@phantom/synpress/commands/phantom';
+import phantomHelpers from '../../../node_modules/@phantom/synpress/helpers';
+
+import { ETH_MNEMONIC, ETH_WALLET_PASSWORD } from './mocks';
+import { getExtensionsData } from './utils/getExtensionsData';
+import { waitForExtensions } from './utils/waitForExtensions';
+
+export const test = base.extend<{
+  context: BrowserContext;
+  extensionId: string;
+}>({
+  context: async ({ context: _ }, use) => {
+    global.expect = expect;
+    const phantomPath = await phantomHelpers.prepareProvider(
+      'phantom',
+      'latest',
+    );
+    const browserArgs = [
+      `--disable-extensions-except=${phantomPath}`,
+      `--load-extension=${phantomPath}`,
+      '--remote-debugging-port=9222',
+    ];
+    const context = await chromium.launchPersistentContext('', {
+      headless: false,
+      args: browserArgs,
+    });
+    const extensions = await getExtensionsData(context);
+    await waitForExtensions(context, extensions);
+    await phantomCommands.initialSetup(chromium, {
+      secretWordsOrPrivateKey: ETH_MNEMONIC,
+      network: 'localhost',
+      password: ETH_WALLET_PASSWORD,
+      enableAdvancedSettings: true,
+      enableExperimentalSettings: false,
+    });
+    await use(context);
+  },
+  extensionId: async ({ context }, use) => {
+    let [background] = context.serviceWorkers();
+    if (!background) background = await context.waitForEvent('serviceworker');
+    const extensionId = background.url().split('/')[2];
+    await use(extensionId);
+  },
+});
+
+export const expect = test.expect;

e2e-tests/runner/examples/connectors/PhantomSolanaConnector/utils/getExtensionsData.ts

@@ -0,0 +1,52 @@
+/**
+ * This code is required to avoid synpress to start without
+ * the extensions be ready making it fail.
+ *
+ * This code was copied from the synpress codebase to be used as a standalone function.
+ * https://github.com/Synthetixio/synpress/blob/81faa920fb683b1b579fde5214f923c758877157/commands/playwright.js#L445
+ */
+
+import type { BrowserContext } from '@playwright/test';
+
+export async function getExtensionsData(context: BrowserContext) {
+  const extensionsData = {};
+  const page = await context.newPage();
+
+  await page.goto('chrome://extensions');
+  await page.waitForLoadState('load');
+  await page.waitForLoadState('domcontentloaded');
+
+  const devModeButton = page.locator('#devMode');
+  await devModeButton.waitFor();
+  await devModeButton.focus();
+  await devModeButton.click();
+
+  const extensionDataItems = await page.locator('extensions-item').all();
+  for (const extensionData of extensionDataItems) {
+    const extensionName = (
+      await extensionData
+        .locator('#name-and-version')
+        .locator('#name')
+        .textContent()
+    ).toLowerCase();
+
+    const extensionVersion = (
+      await extensionData
+        .locator('#name-and-version')
+        .locator('#version')
+        .textContent()
+    ).replace(/(\n| )/g, '');
+
+    const extensionId = (
+      await extensionData.locator('#extension-id').textContent()
+    ).replace('ID: ', '');
+
+    extensionsData[extensionName] = {
+      version: extensionVersion,
+      id: extensionId,
+    };
+  }
+  await page.close();
+
+  return extensionsData;
+}

e2e-tests/runner/examples/connectors/PhantomSolanaConnector/utils/waitForExtensions.ts

@@ -0,0 +1,40 @@
+import { setTimeout } from 'node:timers/promises';
+import type { BrowserContext } from '@playwright/test';
+
+export async function waitForExtensions(
+  context: BrowserContext,
+  extensions: Record<
+    string,
+    {
+      id: string;
+      version: string;
+    }
+  >,
+  maxAttempts = 5,
+  attempt = 0,
+): Promise<boolean> {
+  if (!context) throw new Error('BrowserContext is required.');
+  if (!extensions || typeof extensions !== 'object') {
+    throw new Error('Invalid extensions object provided.');
+  }
+  console.log(`Checking extensions (Attempt ${attempt + 1}/${maxAttempts})...`);
+  const pages = context.pages();
+  if (!pages.length) {
+    console.warn('No pages found in the context. Retrying...');
+  }
+  const phantomPage = pages.find((page) =>
+    page.url().includes(extensions.phantom?.id),
+  );
+  if (phantomPage) {
+    console.log('Phantom extension is ready!');
+    return true;
+  }
+  if (attempt >= maxAttempts - 1) {
+    throw new Error(
+      `Failed to detect extensions after ${maxAttempts} attempts.`,
+    );
+  }
+  console.log('Phantom extension not found. Retrying in 3 seconds...');
+  await setTimeout(3000);
+  return waitForExtensions(context, extensions, maxAttempts, attempt + 1);
+}

e2e-tests/runner/package.json

@@ -12,6 +12,8 @@
     "test:react-app": "pnpm test:react-app:ci -- --ui",
     "test:react-app:ci": "playwright test e2e-tests/react-app --project=react-app",
     "test:react-next": "pnpm playwright test --project=react-next",
+    "test:e2e:dev": "pnpm --workspace-root node:up && pnpm run start:servers & pnpm playwright test --ui",
+    "test:e2e:local": "pnpm run deploy:contracts && pnpm run test:e2e",
     "start:react-app": "pnpm --filter react-app dev",
     "start:react-next": "pnpm --filter @e2e-tests/react-next dev",
     "start:servers": "pnpm run start:react-app & pnpm run start:react-next",
@@ -25,6 +27,7 @@
     "@synthetixio/synpress": "4.0.3",
     "@synthetixio/synpress-cache": "0.0.4",
     "dotenv": "16.4.5",
+    "@phantom/synpress": "4.0.0-alpha.53",
     "fuels": "0.96.1"
   },
   "engines": {

package.json

@@ -57,8 +57,5 @@
       "fast-xml-parser@<4.4.1": ">=4.4.1"
     }
   },
-  "packageManager": "[email protected]",
-  "dependencies": {
-    "@synthetixio/synpress": "4.0.3"
-  }
+  "packageManager": "[email protected]"
 }