@deeeed/metamask-harness 0.19.1 → 0.21.0

package/library/actions/extension/ui/navigate.mjs

@@ -1,31 +1,249 @@
-import { runAdapter, withExtensionPage } from '../platform/cdp.mjs';
+import { pathToFileURL } from 'node:url';
 
-const PAGE_HASHES = {
-  home: '#/',
-  perps: '#/perps-home',
-};
+import {
+  dataTestId,
+  normalizeMarketSymbol,
+  runAdapter,
+  withExtensionPage,
+} from '../platform/cdp.mjs';
+
+const BACK_CONTROLS = [
+  'perps-order-entry-back-button',
+  'perps-market-detail-back-button',
+  'perps-activity-back-button',
+  'perps-withdraw-back-button',
+  'back-button',
+].map(dataTestId);
 
 function text(value) {
   return typeof value === 'string' && value.length > 0 ? value : undefined;
 }
 
-function pageHash(node) {
+function pageIntent(node) {
   const page = text(node?.page);
   if (!page) return undefined;
-  if (PAGE_HASHES[page]) return { page, hash: PAGE_HASHES[page] };
+  if (page === 'home' || page === 'perps') return { page };
   if (page === 'perps-market') {
     const market = text(node.market) ?? text(node.symbol);
     if (!market) throw new Error('extension ui.navigate page=perps-market requires market or symbol.');
-    return { page, hash: `#/perps/market/${encodeURIComponent(market)}` };
+    return { page, market };
   }
-  throw new Error('extension ui.navigate supported page aliases: home, perps, perps-market.');
+  throw new Error('extension ui.navigate supported page intents: home, perps, perps-market.');
+}
+
+async function hasVisibleSelector(page, selector) {
+  return page.evaluate(`(() => {
+    const element = document.querySelector(${JSON.stringify(selector)});
+    if (!element) return false;
+    const style = getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    return style.display !== 'none' && style.visibility !== 'hidden' && rect.width > 0 && rect.height > 0;
+  })()`);
+}
+
+async function pauseForUi(page) {
+  await page.evaluate('new Promise((resolve) => setTimeout(resolve, 200))');
 }
 
-runAdapter((input) => withExtensionPage(input, async (page) => {
-  const alias = pageHash(input.node);
-  if (alias) {
-    const navigation = await page.navigateHash(alias.hash);
-    return { action: input.action, ...alias, navigation, proofPath: 'ui-navigation' };
+async function waitForFirstVisible(page, selectors, deadline) {
+  while (Date.now() < deadline) {
+    for (const selector of selectors) {
+      if (await hasVisibleSelector(page, selector)) return selector;
+    }
+    await pauseForUi(page);
+  }
+  return undefined;
+}
+
+async function currentHref(page) {
+  return page.evaluate('location.href');
+}
+
+async function activateSemanticControl(page, selector) {
+  return {
+    activation: 'trusted-pointer',
+    interaction: await page.click(selector),
+  };
+}
+
+export async function openHome(page, timeoutMs) {
+  const home = dataTestId('bottom-nav-home');
+  const selectedHome = `${home}[aria-current="page"]`;
+  const deadline = Date.now() + timeoutMs;
+  const steps = [];
+  let pendingActivation;
+
+  while (Date.now() < deadline) {
+    if (await hasVisibleSelector(page, selectedHome)) {
+      return { method: 'visible-ui', href: await currentHref(page), steps };
+    }
+    const href = await currentHref(page);
+    if (pendingActivation && pendingActivation.href !== href) {
+      pendingActivation = undefined;
+      await pauseForUi(page);
+      continue;
+    }
+    if (await hasVisibleSelector(page, home)) {
+      if (pendingActivation?.selector !== home) pendingActivation = undefined;
+      if (!pendingActivation) {
+        await activateSemanticControl(page, home);
+        steps.push(home);
+        pendingActivation = { selector: home, href };
+      }
+      await pauseForUi(page);
+      continue;
+    }
+    let backControl;
+    for (const selector of BACK_CONTROLS) {
+      if (await hasVisibleSelector(page, selector)) {
+        backControl = selector;
+        break;
+      }
+    }
+    if (backControl) {
+      if (pendingActivation?.selector !== backControl) pendingActivation = undefined;
+      if (!pendingActivation || pendingActivation.selector !== backControl) {
+        await activateSemanticControl(page, backControl);
+        steps.push(backControl);
+        pendingActivation = { selector: backControl, href };
+      }
+    }
+    await pauseForUi(page);
+  }
+
+  throw new Error(
+    `extension ui.navigate page=home could not resolve Home through visible controls; observed href ${JSON.stringify(await currentHref(page))}.`,
+  );
+}
+
+export async function openPerpsHome(page, timeoutMs) {
+  const bottomNav = dataTestId('bottom-nav-perps');
+  const legacyTab = dataTestId('account-overview__perps-tab');
+  const perpsHome = dataTestId('perps-home-page');
+  const steps = [];
+  const deadline = Date.now() + timeoutMs;
+  let pendingActivation;
+  let perpsActivation;
+
+  while (Date.now() < deadline) {
+    if (await hasVisibleSelector(page, perpsHome)) {
+      return {
+        ...(perpsActivation ? { navigation: perpsActivation, selector: bottomNav } : {}),
+        method: 'visible-ui',
+        href: await currentHref(page),
+        steps,
+      };
+    }
+    if (await hasVisibleSelector(page, bottomNav)) {
+      if (!perpsActivation) {
+        perpsActivation = await activateSemanticControl(page, bottomNav);
+        steps.push(bottomNav);
+      }
+      await pauseForUi(page);
+      continue;
+    }
+    if (await hasVisibleSelector(page, legacyTab)) {
+      const navigation = await activateSemanticControl(page, legacyTab);
+      await page.waitForSelector(dataTestId('perps-view'), {
+        timeoutMs: Math.max(1, deadline - Date.now()),
+      });
+      return {
+        navigation,
+        method: 'visible-ui',
+        href: await currentHref(page),
+        selector: legacyTab,
+        steps,
+      };
+    }
+
+    let backControl;
+    for (const selector of BACK_CONTROLS) {
+      if (await hasVisibleSelector(page, selector)) {
+        backControl = selector;
+        break;
+      }
+    }
+    if (backControl) {
+      const href = await currentHref(page);
+      if (pendingActivation && pendingActivation.href !== href) {
+        pendingActivation = undefined;
+      }
+      if (!pendingActivation || pendingActivation.selector !== backControl) {
+        await activateSemanticControl(page, backControl);
+        steps.push(backControl);
+        pendingActivation = { selector: backControl, href };
+      }
+    }
+    await pauseForUi(page);
+  }
+
+  const state = await page.evaluate(`({
+    href: location.href,
+    title: document.title,
+    visibleTestIds: [...document.querySelectorAll('[data-testid]')]
+      .filter((element) => {
+        const style = getComputedStyle(element);
+        const rect = element.getBoundingClientRect();
+        return style.display !== 'none' && style.visibility !== 'hidden' && rect.width > 0 && rect.height > 0;
+      })
+      .map((element) => element.getAttribute('data-testid'))
+      .filter(Boolean)
+      .slice(0, 30),
+  })`);
+  throw new Error(
+    `extension ui.navigate page=perps could not resolve the Perps home through visible UI; observed ${JSON.stringify(state)}. Capture the current UI with mm-harness call ui.screenshot, then use a verified visible control or raw hash/path.`,
+  );
+}
+
+export async function openPerpsMarket(page, market, timeoutMs) {
+  const deadline = Date.now() + timeoutMs;
+  const home = await openPerpsHome(page, Math.max(1, deadline - Date.now()));
+  const normalizedMarket = normalizeMarketSymbol(market.trim());
+  const selectors = [
+    dataTestId(`perps-watchlist-${normalizedMarket}`),
+    dataTestId(`explore-markets-${normalizedMarket.replaceAll(':', '-')}`),
+  ];
+  const marketControl = await waitForFirstVisible(page, selectors, deadline);
+  if (!marketControl) {
+    const visibleMarketControls = await page.evaluate(`[
+      ...document.querySelectorAll('[data-testid^="perps-watchlist-"], [data-testid^="explore-markets-"]')
+    ].filter((element) => {
+      const style = getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+      return style.display !== 'none' && style.visibility !== 'hidden' && rect.width > 0 && rect.height > 0;
+    }).map((element) => element.getAttribute('data-testid')).filter(Boolean)`);
+    throw new Error(
+      `extension ui.navigate page=perps-market could not find ${JSON.stringify(normalizedMarket)} in the current visible market controls ${JSON.stringify(visibleMarketControls)}.`,
+    );
+  }
+  const navigation = await activateSemanticControl(page, marketControl);
+  await page.waitForSelector(dataTestId('perps-market-detail-page'), {
+    timeoutMs: Math.max(1, deadline - Date.now()),
+  });
+  return {
+    navigation,
+    method: 'visible-ui',
+    href: await currentHref(page),
+    selector: marketControl,
+    steps: [...home.steps, marketControl],
+  };
+}
+
+export async function navigateExtensionUi(input) {
+  return withExtensionPage(input, async (page) => {
+  const intent = pageIntent(input.node);
+  if (intent) {
+    const timeoutMs = Number(input.node?.timeout_ms ?? 20000);
+    if (intent.page === 'home') {
+      const result = await openHome(page, timeoutMs);
+      return { action: input.action, ...intent, ...result, proofPath: 'ui-navigation' };
+    }
+    if (intent.page === 'perps') {
+      const result = await openPerpsHome(page, timeoutMs);
+      return { action: input.action, ...intent, ...result, proofPath: 'ui-navigation' };
+    }
+    const result = await openPerpsMarket(page, intent.market, timeoutMs);
+    return { action: input.action, ...intent, ...result, proofPath: 'ui-navigation' };
   }
 
   const url = input.node?.url;
@@ -40,5 +258,10 @@ runAdapter((input) => withExtensionPage(input, async (page) => {
     return { action: input.action, hash, navigation, proofPath: 'ui-navigation' };
   }
 
-  throw new Error('extension ui.navigate requires page, raw extension url, hash, or path.');
-}));
+    throw new Error('extension ui.navigate requires page, raw extension url, hash, or path.');
+  });
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  runAdapter(navigateExtensionUi);
+}

package/library/actions/mobile/ui/navigate.mjs

@@ -18,7 +18,7 @@ function pageRoute(node) {
     if (!market) throw new Error('mobile ui.navigate page=perps-market requires market or symbol.');
     return { page, route: 'PerpsMarketDetails', params: { market: { symbol: market } } };
   }
-  throw new Error('mobile ui.navigate supported page aliases: home, perps, perps-market.');
+  throw new Error('mobile ui.navigate supported page intents: home, perps, perps-market.');
 }
 
 runAdapter(async (input) => {