fill stake e2e

scripts/quick-screenshot.mjs

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+import { chromium } from '@playwright/test';
+
+const ACCOUNT_ADDRESS = '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266';
+const WEBAPP_URL = 'http://localhost:8081';
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext();
+
+// Set auth
+await context.addInitScript(() => {
+  window.localStorage.setItem('authentificated', 'true');
+});
+
+const page = await context.newPage();
+
+console.log('Loading stake page...');
+await page.goto(`${WEBAPP_URL}/app/#/stake`, { waitUntil: 'networkidle' });
+await page.waitForTimeout(3000);
+
+console.log('Taking screenshot...');
+await page.screenshot({ path: 'stake-page-final.png', fullPage: true });
+console.log('Screenshot saved to stake-page-final.png');
+
+await browser.close();

scripts/screenshot-stake-page.mjs

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+import { chromium } from '@playwright/test';
+import { Wallet } from 'ethers';
+
+const ACCOUNT_PRIVATE_KEY = '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80';
+const ACCOUNT_ADDRESS = new Wallet(ACCOUNT_PRIVATE_KEY).address.toLowerCase();
+const STACK_RPC_URL = 'http://127.0.0.1:8545';
+const STACK_WEBAPP_URL = 'http://localhost:8081';
+
+const chainId = 31337;
+const chainIdHex = `0x${chainId.toString(16)}`;
+
+async function takeScreenshot() {
+  const browser = await chromium.launch({ headless: true });
+
+  const context = await browser.newContext();
+
+  // Set auth flag
+  await context.addInitScript(() => {
+    window.localStorage.setItem('authentificated', 'true');
+  });
+
+  // Inject wallet provider
+  await context.addInitScript(
+    ({ account, chainIdHex: cidHex, chainId: cid, rpcEndpoint }) => {
+      const listeners = new Map();
+      let rpcRequestId = 0;
+      let connected = false;
+
+      const emit = (event, payload) => {
+        const handlers = listeners.get(event);
+        if (!handlers) return;
+        for (const handler of Array.from(handlers)) {
+          try {
+            handler(payload);
+          } catch (error) {
+            console.error(`[wallet-provider] listener for ${event} failed`, error);
+          }
+        }
+      };
+
+      const sendRpc = async (method, params) => {
+        rpcRequestId += 1;
+        const response = await fetch(rpcEndpoint, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ jsonrpc: '2.0', id: rpcRequestId, method, params }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`RPC call to ${method} failed with status ${response.status}`);
+        }
+
+        const payload = await response.json();
+        if (payload?.error) {
+          throw new Error(payload.error?.message ?? 'RPC error');
+        }
+        return payload.result;
+      };
+
+      const provider = {
+        isMetaMask: true,
+        isPlaywrightWallet: true,
+        isConnected: () => connected,
+        selectedAddress: account,
+        chainId: cidHex,
+        networkVersion: String(cid),
+        request: async ({ method, params = [] }) => {
+          const args = Array.isArray(params) ? params.slice() : [];
+
+          switch (method) {
+            case 'eth_requestAccounts':
+              connected = true;
+              provider.selectedAddress = account;
+              provider.chainId = cidHex;
+              provider.networkVersion = String(cid);
+              emit('connect', { chainId: cidHex });
+              emit('chainChanged', cidHex);
+              emit('accountsChanged', [account]);
+              return [account];
+            case 'eth_accounts':
+              return [account];
+            case 'eth_chainId':
+              return cidHex;
+            case 'net_version':
+              return String(cid);
+            case 'wallet_switchEthereumChain':
+              return null;
+            case 'wallet_addEthereumChain':
+              return null;
+            case 'eth_sendTransaction': {
+              const [tx = {}] = args;
+              const enrichedTx = { ...tx, from: account };
+              return sendRpc(method, [enrichedTx]);
+            }
+            default:
+              return sendRpc(method, args);
+          }
+        },
+        on: (event, listener) => {
+          const handlers = listeners.get(event) ?? new Set();
+          handlers.add(listener);
+          listeners.set(event, handlers);
+          if (event === 'connect' && connected) {
+            listener({ chainId: cidHex });
+          }
+          return provider;
+        },
+        removeListener: (event, listener) => {
+          const handlers = listeners.get(event);
+          if (handlers) {
+            handlers.delete(listener);
+          }
+          return provider;
+        },
+        enable: () => provider.request({ method: 'eth_requestAccounts' }),
+      };
+
+      Object.defineProperty(window, 'ethereum', {
+        configurable: true,
+        enumerable: true,
+        value: provider,
+        writable: false,
+      });
+
+      provider.providers = [provider];
+      window.dispatchEvent(new Event('ethereum#initialized'));
+    },
+    {
+      account: ACCOUNT_ADDRESS,
+      chainIdHex,
+      chainId,
+      rpcEndpoint: STACK_RPC_URL,
+    }
+  );
+
+  const page = await context.newPage();
+
+  console.log('Navigating to app...');
+  await page.goto(`${STACK_WEBAPP_URL}/app/`, { waitUntil: 'domcontentloaded' });
+
+  // Wait for wallet to initialize
+  await page.waitForTimeout(3000);
+
+  // Check if wallet is visible (connected)
+  try {
+    const walletDisplay = page.getByText(/0xf39F/i).first();
+    await walletDisplay.waitFor({ timeout: 10000 });
+    console.log('Wallet connected!');
+  } catch (e) {
+    console.log('Wallet connection not detected, continuing anyway...');
+  }
+
+  console.log('Navigating to stake page...');
+  await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`, { waitUntil: 'networkidle' });
+
+  // Wait for positions to load
+  await page.waitForTimeout(5000);
+
+  console.log('Taking screenshot...');
+  await page.screenshot({
+    path: 'test-results/stake-page-after-test.png',
+    fullPage: true
+  });
+
+  console.log('Screenshot saved to test-results/stake-page-after-test.png');
+
+  await browser.close();
+}
+
+takeScreenshot().catch(console.error);