E2E tests for payment portal

.github/workflows/cypress-testing.yml

@@ -0,0 +1,66 @@
+name: test
+
+on:
+  push:
+    branches:
+      - main
+      - development
+  pull_request:
+    branches:
+      - main
+      - development
+
+env:
+  FOUNDRY_PROFILE: ci
+
+jobs:
+  tests:
+    name: Cypress tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.10.0
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Install Foundry
+        uses: foundry-rs/foundry-toolchain@v1
+        with:
+          version: nightly
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Start Anvil
+        run: yarn test:anvil &
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: yarn run build
+          start: yarn test:fund, yarn start
+
+        env:
+          SUPABASE_URL: "https://wfzpewmlyiozupulbuur.supabase.co"
+          SUPABASE_ANON_KEY: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndmenBld21seWlvenVwdWxidXVyIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTU2NzQzMzksImV4cCI6MjAxMTI1MDMzOX0.SKIL3Q0NOBaMehH0ekFspwgcu3afp3Dl9EDzPqs1nKs"
+          AMOUNT_IN_ETH: "0.1"
+          BENEFICIARY_ADDRESS: "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
+          CHAIN_ID: "31337"
+          FRONTEND_URL: "http://localhost:8080"
+          PAYMENT_TOKEN_ADDRESS: "0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d"
+          RPC_PROVIDER_URL: "http://localhost:8545"
+          UBIQUIBOT_PRIVATE_KEY: "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+          if-no-files-found: ignore
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-videos
+          path: cypress/videos
+          if-no-files-found: ignore

.github/workflows/deploy.yml

@@ -58,7 +58,7 @@ jobs:
           script: |
             const { owner, repo } = context.repo;
             const sha = "${{ github.event.workflow_run.head_sha }}";
-            
+
             const response = await github.rest.search.issuesAndPullRequests({
               q: `repo:${owner}/${repo} is:pr sha:${sha}`,
               per_page: 1,
@@ -82,11 +82,11 @@ jobs:
               repo,
               issue_number,
             });
-      
+
             // Find the comment to update or create a new one if not found
             let existingComment = comments.data.find(comment => comment.user.login === 'github-actions[bot]');
             let body = '| Preview Deployment |\n| ------------------ |\n';
-            
+
             // If the comment exists, update its body
             if (existingComment) {
               // Check if the SHA already exists in the comment body to avoid duplicates

.gitignore

@@ -10,4 +10,7 @@ commit.txt
 # yarn2
 .pnp.cjs
 .pnp.loader.mjs
-static/dist
+static/dist
+
+cypress/screenshots
+cypress/videos

.knip.jsonc

@@ -1,5 +1,5 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "entry": ["static/scripts/rewards/init.ts"],
-  "ignore": ["lib/**"]
+  "ignore": ["lib/**"],
 }

cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+import { config } from "dotenv";
+
+config();
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents() {},
+    baseUrl: "http://localhost:8080",
+    experimentalStudio: true,
+  },
+  viewportHeight: 900,
+  viewportWidth: 1440,
+  watchForFileChanges: false,
+  video: true,
+});

cypress/e2e/claim-portal-failure.cy.ts

@@ -0,0 +1,186 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { JsonRpcProvider, JsonRpcSigner } from "@ethersproject/providers";
+
+const beneficiary = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266";
+
+describe("Claims Portal Failures", () => {
+  describe("No connection to wallet provider", () => {
+    beforeEach(() => {
+      cy.clearAllCookies();
+      cy.clearAllLocalStorage();
+      cy.clearAllSessionStorage();
+
+      setupIntercepts();
+      stubEthereum(beneficiary);
+
+      cy.visit(`/${claimUrl}`);
+      cy.wait(2000);
+    });
+
+    it("should handle no connected signer", () => {
+      /**
+       * This covers a user declining to connect their wallet
+       */
+      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+
+      cy.get("button[id='make-claim']").should("be.visible").click();
+      cy.get("#invalidator").should("not.be.visible");
+      cy.get("#claim-loader").should("not.be.visible");
+      cy.get("#view-claim").should("not.be.visible").and("include.text", "View Claim");
+
+      cy.get("body").should("contain.text", "This reward is not for you");
+    });
+  });
+
+  describe("Failed transactions", () => {
+    const provider = new JsonRpcProvider("http://127.0.0.1:8545");
+    const signer = provider.getSigner();
+
+    beforeEach(() => {
+      cy.clearAllCookies();
+      cy.clearAllLocalStorage();
+      cy.clearAllSessionStorage();
+
+      setupIntercepts();
+      stubEthereum(beneficiary, signer);
+
+      cy.visit(`/${claimUrl}`);
+      cy.wait(2000);
+    });
+
+    it("should handle feedback for a failed wallet provider transaction", () => {
+      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+
+      cy.get("button[id='make-claim']").should("be.visible").click();
+      cy.get("#claim-loader").should("be.visible");
+      cy.get("#invalidator").should("not.be.visible");
+      // cy.get("#claim-loader").should("not.be.visible"); // gets stuck here
+    });
+  });
+});
+
+function setupIntercepts() {
+  cy.intercept("POST", "*", (req) => {
+    // return a 404 for rpc optimization meaning no successful RPC
+    // to return our balanceOf and allowance calls
+    if (req.body.method == "eth_getBlockByNumber") {
+      req.reply({
+        statusCode: 404,
+        body: {
+          jsonrpc: "2.0",
+          error: {
+            code: -32601,
+            message: "Method not found",
+          },
+          id: 1,
+        },
+      });
+    }
+
+    if (req.body.method == "eth_sendTransaction") {
+      req.reply({
+        statusCode: 404,
+        body: {
+          jsonrpc: "2.0",
+          id: 44,
+          result: "0x",
+        },
+      });
+    }
+
+    if (req.body.method == "eth_call") {
+      const selector = req.body.params[0].data.slice(0, 10);
+
+      // balanceOf
+      if (selector == "0x70a08231") {
+        req.reply({
+          statusCode: 200,
+          body: {
+            jsonrpc: "2.0",
+            id: 45,
+            result: "0x00000000000000000000000000000000000000000000478cf7610f95b9e70000",
+          },
+        });
+      } else if (selector == "0xdd62ed3e") {
+        //  allowance
+
+        req.reply({
+          statusCode: 200,
+          body: {
+            jsonrpc: "2.0",
+            id: 46,
+            result: "0x0000000000000000000000000000000000c097ce7bc906e58377f59a8306ffff",
+          },
+        });
+      }
+    }
+  });
+
+  cy.intercept("POST", "https://wfzpewmlyiozupulbuur.supabase.co/rest/v1/*", {
+    statusCode: 200,
+    body: {},
+  });
+  cy.intercept("PATCH", "https://wfzpewmlyiozupulbuur.supabase.co/rest/v1/*", {
+    statusCode: 200,
+    body: {},
+  });
+  cy.intercept("GET", "https://wfzpewmlyiozupulbuur.supabase.co/rest/v1/*", {
+    statusCode: 200,
+    body: {},
+  });
+}
+
+function stubEthereum(address?: string, signer?: JsonRpcSigner) {
+  cy.on("window:before:load", (win) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((win as any).ethereum = {
+      isMetaMask: true,
+      enable: cy.stub().resolves([address]),
+      request: cy.stub().callsFake(async (method) => providerFunctions(method)),
+      on: cy.stub().callsFake((event, cb) => {
+        if (event == "accountsChanged") {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (win as any).ethereum.onAccountsChanged = cb;
+        }
+      }),
+      autoRefreshOnNetworkChange: false,
+      chainId: "0x7a69",
+      selectedAddress: address,
+      requestAccounts: cy.stub().resolves([address]),
+      send: cy.stub().callsFake(async (method) => providerFunctions(method)),
+    }),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      signer ? ((win as any).signer = signer) : null;
+  });
+}
+
+function providerFunctions(method: string) {
+  switch (method) {
+    case "eth_requestAccounts":
+      return [beneficiary];
+    case "wallet_sendDomainMetadata":
+      return true;
+    case "wallet_addEthereumChain":
+      return true;
+    case "wallet_switchEthereumChain":
+      return true;
+    case "wallet_watchAsset":
+      return true;
+    case "eth_chainId":
+      return "0x7a69";
+    case "eth_accounts":
+      return [beneficiary];
+    case "eth_signTypedData_v4":
+      return "address";
+    case "eth_estimateGas":
+      return "0x00";
+    case "eth_sendTransaction":
+      return "0x";
+    case "eth_call":
+      return "0x";
+  }
+}
+
+// placed here due to length
+const claimUrl =
+  "?claim=W3sidHlwZSI6ImVyYzIwLXBlcm1pdCIsInBlcm1pdCI6eyJwZXJtaXR0ZWQiOnsidG9rZW4iOiIweGU5MUQxNTNFMGI0MTUxOEEyQ2U4RGQzRDc5NDRGYTg2MzQ2M2E5N2QiLCJhbW91bnQiOiIwIn0sIm5vbmNlIjoiNTM2ODA1OTA4ODcxOTE5NzkzMTM3NDczMTk1MTc3NTIyOTQ0ODQ1MTkwNDE4NjUxMzY5Mjk1Mjg3OTQyNjA5NzI3NDg5MzU2MDY1NTAiLCJkZWFkbGluZSI6IjExNTc5MjA4OTIzNzMxNjE5NTQyMzU3MDk4NTAwODY4NzkwNzg1MzI2OTk4NDY2NTY0MDU2NDAzOTQ1NzU4NDAwNzkxMzEyOTYzOTkzNSJ9LCJ0cmFuc2ZlckRldGFpbHMiOnsidG8iOiIweGYzOUZkNmU1MWFhZDg4RjZGNGNlNmFCODgyNzI3OWNmZkZiOTIyNjYiLCJyZXF1ZXN0ZWRBbW91bnQiOiIwIn0sIm93bmVyIjoiMHg3MDk5Nzk3MEM1MTgxMmRjM0EwMTBDN2QwMWI1MGUwZDE3ZGM3OUM4Iiwic2lnbmF0dXJlIjoiMHgzMTBkOGFmYWRkY2VlYTZmNWNhNGRkMmMzNGM5ZDBhNmVlMDQzYTJhMjExZDU4Y2E4ZDMxM2I4MmViZDc0YWU4MGJiYzc5ODE4Mjc2MmU1N2M3ODE2MTljZjlhYmE3Y2ZmYTJlZjJmNTBlYzk5ZThjMjY2YWEzMzA1NjdkZTI5MjFiIiwibmV0d29ya0lkIjozMTMzN30seyJ0eXBlIjoiZXJjMjAtcGVybWl0IiwicGVybWl0Ijp7InBlcm1pdHRlZCI6eyJ0b2tlbiI6IjB4ZTkxRDE1M0UwYjQxNTE4QTJDZThEZDNENzk0NEZhODYzNDYzYTk3ZCIsImFtb3VudCI6IjkwMDAwMDAwMDAwMDAwMDAwMDAifSwibm9uY2UiOiI2Nzk4MzU5OTA4NDY0NDc4MDExODU5ODU4ODIyOTc2NDQ5NTk4MzkwNzA2MDYxMTIzODM2Nzg3NzUyMzAxNjk0NzQ5MzcyNjY4NjU5OCIsImRlYWRsaW5lIjoiMTE1NzkyMDg5MjM3MzE2MTk1NDIzNTcwOTg1MDA4Njg3OTA3ODUzMjY5OTg0NjY1NjQwNTY0MDM5NDU3NTg0MDA3OTEzMTI5NjM5OTM1In0sInRyYW5zZmVyRGV0YWlscyI6eyJ0byI6IjB4ZjM5RmQ2ZTUxYWFkODhGNkY0Y2U2YUI4ODI3Mjc5Y2ZmRmI5MjI2NiIsInJlcXVlc3RlZEFtb3VudCI6IjkwMDAwMDAwMDAwMDAwMDAwMDAifSwib3duZXIiOiIweDcwOTk3OTcwQzUxODEyZGMzQTAxMEM3ZDAxYjUwZTBkMTdkYzc5QzgiLCJzaWduYXR1cmUiOiIweDMxMGQ4YWZhZGRjZWVhNmY1Y2E0ZGQyYzM0YzlkMGE2ZWUwNDNhMmEyMTFkNThjYThkMzEzYjgyZWJkNzRhZTgwYmJjNzk4MTgyNzYyZTU3Yzc4MTYxOWNmOWFiYTdjZmZhMmVmMmY1MGVjOTllOGMyNjZhYTMzMDU2N2RlMjkyMWIiLCJuZXR3b3JrSWQiOjMxMzM3fV0=";

cypress/e2e/claim-portal-non-web3.cy.ts

@@ -0,0 +1,75 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+describe("Claims Portal Non-Web3", () => {
+  beforeEach(() => {
+    cy.clearAllCookies();
+    cy.clearAllLocalStorage();
+    cy.clearAllSessionStorage();
+
+    setupIntercepts();
+
+    cy.visit(`/${claimUrl}`);
+    cy.wait(2000);
+  });
+
+  describe("No window.ethereum", () => {
+    it("Should toast and hide buttons in a non-web3 env", () => {
+      cy.get("#invalidator").should("not.be.visible");
+      cy.get("#claim-loader").should("not.be.visible");
+      cy.get("#view-claim").should("not.be.visible");
+
+      cy.get("body", { timeout: 3000 }).should("contain.text", "Please use a web3 enabled browser to collect this reward.");
+    });
+  });
+
+  describe("Mobile: No window.ethereum", () => {
+    beforeEach(() => {
+      cy.viewport("iphone-6");
+      cy.reload();
+    });
+
+    it("Should toast and hide buttons in a non-web3 env", () => {
+      cy.get("#invalidator").should("not.be.visible");
+      cy.get("#claim-loader").should("not.be.visible");
+      cy.get("#view-claim").should("not.be.visible");
+
+      cy.get("body", { timeout: 3000 }).should("contain.text", "Please use a web3 enabled browser to collect this reward.");
+    });
+  });
+});
+
+function setupIntercepts() {
+  cy.intercept("POST", "*", (req) => {
+    // return a 404 for rpc optimization meaning no successful RPC
+    // to return our balanceOf and allowance calls
+    if (req.body.method === "eth_getBlockByNumber") {
+      req.reply({
+        statusCode: 404,
+        body: {
+          jsonrpc: "2.0",
+          error: {
+            code: -32601,
+            message: "Method not found",
+          },
+          id: 1,
+        },
+      });
+    }
+  });
+
+  cy.intercept("POST", "https://wfzpewmlyiozupulbuur.supabase.co/rest/v1/*", {
+    statusCode: 200,
+    body: {},
+  });
+  cy.intercept("PATCH", "https://wfzpewmlyiozupulbuur.supabase.co/rest/v1/*", {
+    statusCode: 200,
+    body: {},
+  });
+  cy.intercept("GET", "https://wfzpewmlyiozupulbuur.supabase.co/rest/v1/*", {
+    statusCode: 200,
+    body: {},
+  });
+}
+
+// placed here due to length
+const claimUrl =
+  "?claim=W3sidHlwZSI6ImVyYzIwLXBlcm1pdCIsInBlcm1pdCI6eyJwZXJtaXR0ZWQiOnsidG9rZW4iOiIweGU5MUQxNTNFMGI0MTUxOEEyQ2U4RGQzRDc5NDRGYTg2MzQ2M2E5N2QiLCJhbW91bnQiOiIxMDAwMDAwMDAwMDAwMDAwMCJ9LCJub25jZSI6IjEwODc2OTM3ODM4MTQ4OTY1NTIxMDM2ODQ4NzgzNzgzMDA2MDU0MjAwMzcxOTM0NTY0MzYzMjQ5MDIzMTQ1MTcyOTczMTgzNDgwMTM5MiIsImRlYWRsaW5lIjoiMTE1NzkyMDg5MjM3MzE2MTk1NDIzNTcwOTg1MDA4Njg3OTA3ODUzMjY5OTg0NjY1NjQwNTY0MDM5NDU3NTg0MDA3OTEzMTI5NjM5OTM1In0sInRyYW5zZmVyRGV0YWlscyI6eyJ0byI6IjB4ZjM5RmQ2ZTUxYWFkODhGNkY0Y2U2YUI4ODI3Mjc5Y2ZmRmI5MjI2NiIsInJlcXVlc3RlZEFtb3VudCI6IjEwMDAwMDAwMDAwMDAwMDAwIn0sIm93bmVyIjoiMHg3MDk5Nzk3MEM1MTgxMmRjM0EwMTBDN2QwMWI1MGUwZDE3ZGM3OUM4Iiwic2lnbmF0dXJlIjoiMHg4YWZmYWU1ZTA5YTkyN2QwYjUzNDQ1M2Y4NTE5ZWVlZDE5MzY5MTBkZWFhOGY5YTA0OTM1ODQzNDMzNDA5NmExMTg5ZmVkM2MxNzgyZmU0ZGI5ZTNhMDg2NWVkYjc3ZDczYzliMDliOTgxMTBmN2Q0ZWEyY2Y5ZDBhM2Q1YjhjYzFjIiwibmV0d29ya0lkIjozMTMzN30seyJ0eXBlIjoiZXJjMjAtcGVybWl0IiwicGVybWl0Ijp7InBlcm1pdHRlZCI6eyJ0b2tlbiI6IjB4ZTkxRDE1M0UwYjQxNTE4QTJDZThEZDNENzk0NEZhODYzNDYzYTk3ZCIsImFtb3VudCI6IjkwMDAwMDAwMDAwMDAwMDAwMDAifSwibm9uY2UiOiI1NjQzNjc4ODI2MzUwOTQ3NTY2NzAwNzA4MDA5ODQ5MDM0MDE1OTExMzYxMjM5NTUyMTA3Mjk3NDkxNzcyNDA2Mzg0NDY2Mjc0NDEzMiIsImRlYWRsaW5lIjoiMTE1NzkyMDg5MjM3MzE2MTk1NDIzNTcwOTg1MDA4Njg3OTA3ODUzMjY5OTg0NjY1NjQwNTY0MDM5NDU3NTg0MDA3OTEzMTI5NjM5OTM1In0sInRyYW5zZmVyRGV0YWlscyI6eyJ0byI6IjB4ZjM5RmQ2ZTUxYWFkODhGNkY0Y2U2YUI4ODI3Mjc5Y2ZmRmI5MjI2NiIsInJlcXVlc3RlZEFtb3VudCI6IjkwMDAwMDAwMDAwMDAwMDAwMDAifSwib3duZXIiOiIweDcwOTk3OTcwQzUxODEyZGMzQTAxMEM3ZDAxYjUwZTBkMTdkYzc5QzgiLCJzaWduYXR1cmUiOiIweDhhZmZhZTVlMDlhOTI3ZDBiNTM0NDUzZjg1MTllZWVkMTkzNjkxMGRlYWE4ZjlhMDQ5MzU4NDM0MzM0MDk2YTExODlmZWQzYzE3ODJmZTRkYjllM2EwODY1ZWRiNzdkNzNjOWIwOWI5ODExMGY3ZDRlYTJjZjlkMGEzZDViOGNjMWMiLCJuZXR3b3JrSWQiOjMxMzM3fV0=";