feat: support sepolia testnet

.github/workflows/ci.yml

@@ -8,14 +8,14 @@ jobs:
   test:
     name: Lint & Test
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
-
+          node-version: '18'
       - name: Cache Node Modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-node-modules
         with:

README.md

@@ -3,11 +3,13 @@
 Administration Website v2 will be removing ledger flow. For users that continue using the hardware ledger, you could link the hardware ledgers using the Metamask chrome extension plugin and perform the functionality as per normal.
 
 See also:
-* [admin-website](https://github.com/OpenCerts/admin-website)
-* [document-store](https://github.com/Open-Attestation/document-store)
-* [open-attestation-cli](https://github.com/Open-Attestation/open-attestation-cli)
+
+- [admin-website](https://github.com/OpenCerts/admin-website)
+- [document-store](https://github.com/Open-Attestation/document-store)
+- [open-attestation-cli](https://github.com/Open-Attestation/open-attestation-cli)
 
 ## Development Setup
+
 We develop primarily on a OS / Linux environment so please lodge an issue if you are using Windows and find that you cannot successfully set up a local instance of this software.
 
 ```bash
@@ -16,6 +18,7 @@ npm run start
 ```
 
 ## Jest Test
+
 Jest test validate the common utility function.
 
 ```bash
@@ -24,18 +27,18 @@ npm run test
 
 ## Integration Dappeteer Test
 
-Dappeteer test perform e2e test on issue and revoke functionality using local blockchain running on ganache-cli. The test can be executed using the command below.
+Dappeteer test perform e2e test on issue and revoke functionality using local blockchain running on ganache. The test can be executed using the command below.
 
 ```bash
 npm run integration:dappeteer
 ```
 
 The speed of the testing can be modified using this options.
+
 - First argument : Slowing of testing speed. (higher number = slower test)
 
 ```bash
 npm run integration:dappeteer 50
 ```
 
 Note that current dappeteer integration test uses mujo-code/puppeteer-headful@master that run on v12.10 node docker. v14 node version is required to remove --experimental-modules flag from integration:transfers command.
-

integration/addNetwork.mjs

@@ -0,0 +1,27 @@
+export const addNetwork = async () => {
+  const addNetworkRequest = window.ethereum.request({
+    method: "wallet_addEthereumChain",
+    params: [
+      {
+        chainId: "0x539",
+        chainName: "Localhost 8545",
+        nativeCurrency: {
+          name: "ETH",
+          symbol: "ETH",
+          decimals: 18,
+        },
+        rpcUrls: ["http://localhost:8545"],
+      },
+    ],
+  });
+
+  return new Promise((resolve) => {
+    addNetworkRequest
+      .then(() => {
+        resolve(true);
+      })
+      .catch(() => {
+        resolve(false);
+      });
+  });
+};

integration/index.mjs

@@ -5,11 +5,15 @@ import { metamaskInit } from "./metamask-init.mjs";
 const issueAndRevoke = async () => {
   const { metamask, browser } = await metamaskInit();
 
-  await issue(metamask, browser);
-  await revoke(metamask, browser);
-
-  await browser.close();
-  process.exit(0);
+  try {
+    await issue(metamask, browser);
+    await revoke(metamask, browser);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    browser.close();
+    process.exit(0);
+  }
 };
 
 issueAndRevoke();

integration/issue.mjs

@@ -1,47 +1,44 @@
-import expect from "expect-puppeteer";
+import { expect } from "chai";
+import { sleep, waitForAndClickElement, waitForElement } from "./utils.mjs";
 
 export const issue = async (metamask, browser) => {
   try {
     const page = await browser.newPage();
-    await page.goto("http://localhost:5000/");
+    await page.goto("http://localhost:4173/", { waitUntil: "networkidle" });
 
     // START - approve application once, subsequent tests no longer need
-    await metamask.approve({ allAccounts: true });
+    await metamask.approve();
     await page.bringToFront();
     // END - approve application once, subsequent tests no longer need
-    await page.waitForSelector("[data-testid='connectToWallet']", {
-      visible: true,
-    });
-    await page.click("[data-testid='connectToWallet']");
+    await waitForAndClickElement(page, "[data-testid='connectToWallet']");
 
-    await page.waitForSelector("[aria-controls='react-autowhatever-document-store']", {
-      visible: true,
-    });
-    await page.focus("[aria-controls='react-autowhatever-document-store']");
-    await page.keyboard.type("0xC84b0719A82626417c40f3168513dFABDB6A9079");
+    await waitForAndClickElement(page, ".react-autosuggest__input");
+    await page.type(".react-autosuggest__input", "0xC84b0719A82626417c40f3168513dFABDB6A9079");
 
     // Test user successfully issue the transaction
-    await page.waitForSelector("[data-testid='issue-certificate']", {
-      visible: true,
-    });
-    await page.focus("[data-testid='issue-certificate']");
-    await page.keyboard.type("0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b");
+    await waitForElement(page, "[data-testid='issue-certificate']");
+    await page.type(
+      "[data-testid='issue-certificate']",
+      "0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b"
+    );
 
-    await page.waitForSelector("[data-testid='issue-certificate-btn']", {
-      visible: true,
-    });
-    await page.click("[data-testid='issue-certificate-btn']");
+    await waitForAndClickElement(page, "[data-testid='issue-certificate-btn']");
 
-    await page.waitFor(1500);
+    await sleep(1500);
     await metamask.confirmTransaction();
     await page.bringToFront();
-    await page.waitFor(3000);
+    await sleep(3000);
 
-    await expect(page).toMatchElement("[data-testid='issue-log']", {
-      text: `Document/Document Batch with hash 0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b has been issued to 0xC84b0719A82626417c40f3168513dFABDB6A9079.`,
-      visible: true,
+    await waitForElement(page, "[data-testid='issue-log']");
+    const issueLog = await page.evaluate(() => {
+      const el = document.querySelector("[data-testid='issue-log']");
+      return el.textContent;
     });
 
+    await expect(issueLog).to.have.string(
+      "Document/Document Batch with hash 0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b has been issued to 0xC84b0719A82626417c40f3168513dFABDB6A9079."
+    );
+
     await page.close();
     console.info("✅  Issue success");
   } catch (e) {

integration/metamask-init.mjs

@@ -1,19 +1,46 @@
-import puppeteer from "puppeteer";
-import dappeteer from "dappeteer";
+import dappeteer from "@chainsafe/dappeteer";
+import { addNetwork } from "./addNetwork.mjs";
+import { sleep } from "./utils.mjs";
 
 export const metamaskInit = async () => {
   try {
-    const browser = await dappeteer.launch(puppeteer, {
-      args: ["--no-sandbox"],
-      executablePath: process.env.PUPPETEER_EXEC_PATH,
-      headless: false, // must be false, so can test with metamask extension
-      defaultViewport: null,
-      slowMo: process.argv[2] || 0,
+    const browser = await dappeteer.launch({
+      metaMaskVersion: "v10.31.0",
+      automation: "puppeteer",
+      headless: false,
+      puppeteerOptions: {
+        args: ["--no-sandbox"],
+        executablePath: process.env.PUPPETEER_EXEC_PATH,
+        defaultViewport: null,
+        slowMo: process.argv[2] || 0,
+      },
     });
-    const metamask = await dappeteer.getMetamask(browser, {
+
+    await sleep(2000);
+    const pages = await browser.pages();
+    for (const page of pages) {
+      if (page.url().startsWith("chrome-extension")) {
+        await page.reload();
+      }
+    }
+
+    // Get metamask
+    const metamask = await dappeteer.setupMetaMask(browser, {
       seed: "indicate swing place chair flight used hammer soon photo region volume shuffle",
+      showTestNets: true,
     });
-    await metamask.switchNetwork("localhost");
+
+    // Add network
+    // https://github.com/ChainSafe/dappeteer/blob/b79ab4c74fab87747933d8f428624dcbffc3dd19/test/basic.spec.ts#L117-L119
+    const dappPage = await browser.newPage();
+    await dappPage.goto("https://github.com", { waitUntil: "networkidle" });
+    dappPage.evaluate(addNetwork);
+
+    try {
+      await metamask.acceptAddNetwork(true);
+    } catch (e) {
+      // ignore error
+    }
 
     console.info("✅ Metamask account init success");
     return { metamask, browser };

integration/revoke.mjs

@@ -1,51 +1,46 @@
-import expect from "expect-puppeteer";
+import { expect } from "chai";
+import { sleep, waitForAndClickElement, waitForElement } from "./utils.mjs";
 
 export const revoke = async (metamask, browser) => {
   try {
     const page = await browser.newPage();
-    await page.goto("http://localhost:5000/");
+    await page.goto("http://localhost:4173/");
 
-    await page.waitForSelector("[data-testid='connectToWallet']", {
-      visible: true,
-    });
-    await page.click("[data-testid='connectToWallet']");
+    await waitForAndClickElement(page, "[data-testid='connectToWallet']");
 
-    await page.waitForSelector("[aria-controls='react-autowhatever-document-store']", {
-      visible: true,
-    });
-    await page.focus("[aria-controls='react-autowhatever-document-store']");
-    await page.keyboard.type("0xC84b0719A82626417c40f3168513dFABDB6A9079");
+    await waitForAndClickElement(page, ".react-autosuggest__input");
+    await page.type(".react-autosuggest__input", "0xC84b0719A82626417c40f3168513dFABDB6A9079");
 
-    await page.waitForSelector("[data-testid='show-revoke-btn']", {
-      visible: true,
-    });
-    await page.click("[data-testid='show-revoke-btn']");
+    await waitForAndClickElement(page, "[data-testid='show-revoke-btn']");
 
-    await page.waitForSelector("[data-testid='revoke-certificate']", {
-      visible: true,
-    });
-    await page.focus("[data-testid='revoke-certificate']");
-    await page.keyboard.type("0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b");
+    await waitForElement(page, "[data-testid='revoke-certificate']");
+    await page.type(
+      "[data-testid='revoke-certificate']",
+      "0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b"
+    );
 
-    await page.waitForSelector("[data-testid='revoke-btn']", {
-      visible: true,
-    });
-    await page.click("[data-testid='revoke-btn']");
+    await waitForElement(page, "[data-testid='revoke-btn']");
 
-    await page.waitForSelector("[data-testid='confirm-revoke-btn']", {
-      visible: true,
-    });
-    await page.click("[data-testid='confirm-revoke-btn']");
-    await page.waitFor(1500);
+    await waitForAndClickElement(page, "[data-testid='revoke-btn']");
+
+    await waitForAndClickElement(page, "[data-testid='confirm-revoke-btn']");
+
+    await sleep(1500);
     await metamask.confirmTransaction();
     await page.bringToFront();
-    await page.waitFor(3000);
+    await sleep(3000);
 
-    await expect(page).toMatchElement("[data-testid='revoke-log']", {
-      text: "Document/Document Batch with hash 0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b has been revoked on 0xC84b0719A82626417c40f3168513dFABDB6A9079",
-      visible: true,
+    await waitForElement(page, "[data-testid='revoke-log']");
+
+    const revokeLog = await page.evaluate(() => {
+      const el = document.querySelector("[data-testid='revoke-log']");
+      return el.textContent;
     });
 
+    await expect(revokeLog).to.have.string(
+      "Document/Document Batch with hash 0xbabf7285760d279e6dfa9c37d97bd3f77025a0be0e74119ff24ac9ee0739c60b has been revoked on 0xC84b0719A82626417c40f3168513dFABDB6A9079"
+    );
+
     await page.close();
     console.info("✅  Revoke success");
   } catch (e) {

integration/utils.mjs

@@ -0,0 +1,13 @@
+export const waitForAndClickElement = async (page, query) => {
+  await waitForElement(page, query);
+  const element = await page.$(query);
+  await element.click();
+};
+
+export const waitForElement = async (page, query) => {
+  await page.waitForSelector(query, {
+    visible: true,
+  });
+};
+
+export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));