harb/scripts/screenshot-stake-page.mjs

#!/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);