18 July 2024 Card to Development Sync

.cspell.json

@@ -5,6 +5,7 @@
   "useGitignore": true,
   "language": "en",
   "words": [
+    "blockscan",
     "funder",
     "Funder",
     "binkey",

.github/workflows/build.yml

@@ -34,5 +34,8 @@ jobs:
       - name: Upload build artifact
         uses: actions/upload-artifact@v4
         with:
-          name: static
-          path: static
+          name: full-stack-app
+          path: |
+            static
+            package.json
+            yarn.lock

.github/workflows/deploy.yml

@@ -17,13 +17,14 @@ jobs:
         with:
           repository: ${{ github.repository }}
           production_branch: ${{ github.event.repository.default_branch }}
-          build_artifact_name: "static"
-          output_directory: "static"
+          build_artifact_name: "full-stack-app"
+          output_directory: "full-stack-app"
           current_branch: ${{ github.event.workflow_run.head_branch }}
           cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           commit_sha: ${{ github.event.workflow_run.head_sha }}
           workflow_run_id: ${{ github.event.workflow_run.id }}
+          statics_directory: "static"
 
       - name: Check out repository
         uses: actions/checkout@v4

README.md

@@ -6,20 +6,21 @@ A vanilla Typescript dApp for claiming Ubiquity Rewards. It also includes tools
 
 1. Install [Foundry](https://book.getfoundry.sh/getting-started/installation).
 2. Create a `.env` file in the project root with the following settings:
+
 - These are the suggested default test environment variables that allow for local setup using the supplied yarn commands. If you want to produce or invalidate real on-chain permits you must change the below values to reflect the real permit information such as address, chain ID, private key and so on.
 
-    ```env
-    # Common variables
-    CHAIN_ID="31337"
-    FRONTEND_URL="http://localhost:8080"
-    UBIQUIBOT_PRIVATE_KEY="0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
-    RPC_PROVIDER_URL="http://127.0.0.1:8545"
-    PAYMENT_TOKEN_ADDRESS="0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d"
-    
-    # Variables depending on spender (bounty hunter)
-    AMOUNT_IN_ETH="1"
-    BENEFICIARY_ADDRESS="0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
-    ```
+  ```env
+  # Common variables
+  CHAIN_ID="31337"
+  FRONTEND_URL="http://localhost:8080"
+  UBIQUIBOT_PRIVATE_KEY="0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"
+  RPC_PROVIDER_URL="http://127.0.0.1:8545"
+  PAYMENT_TOKEN_ADDRESS="0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d"
+
+  # Variables depending on spender (bounty hunter)
+  AMOUNT_IN_ETH="1"
+  BENEFICIARY_ADDRESS="0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"
+  ```
 
 ## Local Testing
 

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

@@ -1,18 +1,19 @@
 /* eslint-disable sonarjs/no-duplicate-string */
+// cspell:disable
 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.visit(`/${claimUrl}`);
+      cy.wait(2000);
+
       cy.get("#invalidator").should("not.be.visible");
       cy.get("#claim-loader").should("not.be.visible");
       cy.get("#view-claim").should("not.be.visible");
@@ -22,21 +23,69 @@ describe("Claims Portal Non-Web3", () => {
   });
 
   describe("Mobile: No window.ethereum", () => {
-    beforeEach(() => {
-      cy.viewport("iphone-6");
-      cy.reload();
+    const userAgents = [
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 16_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 WebView MetaMaskMobile",
+      "Mozilla/5.0 (Android; Mobile; rv:89.0) Gecko/89.0 Firefox/89.0 WebView MetaMaskMobile",
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
+      "Mozilla/5.0 (Windows Phone 10.0; Android 6.0.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Mobile Safari/537.36 Edge/15.14977",
+      "Mozilla/5.0 (Linux; Android 10; SM-A505FN) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Mobile Safari/537.36 WebView MetaMaskMobile",
+      "Mozilla/5.0 (Linux; U; Android 8.1.0; en-us; Redmi Note 5 Pro) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/68.0.3440.91 Mobile Safari/537.36",
+      "Mozilla/5.0 (Linux; Android 9; SM-G960F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Mobile Safari/537.36",
+      "Mozilla/5.0 (Linux; Android 11; Pixel 4 XL) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.93 Mobile Safari/537.36",
+    ];
+
+    it("UserAgent 0", () => {
+      testUserAgent(userAgents[0]);
     });
 
-    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");
+    it("UserAgent 1", () => {
+      testUserAgent(userAgents[1]);
+    });
+
+    it("UserAgent 2", () => {
+      testUserAgent(userAgents[2]);
+    });
+
+    it("UserAgent 3", () => {
+      testUserAgent(userAgents[3]);
+    });
 
-      cy.get("body", { timeout: 3000 }).should("contain.text", "Please use a mobile-friendly Web3 browser such as MetaMask to collect this reward");
+    it("UserAgent 4", () => {
+      testUserAgent(userAgents[4]);
+    });
+
+    it("UserAgent 5", () => {
+      testUserAgent(userAgents[5]);
+    });
+
+    it("UserAgent 6", () => {
+      testUserAgent(userAgents[6]);
+    });
+
+    it("UserAgent 7", () => {
+      testUserAgent(userAgents[7]);
     });
   });
 });
 
+function testUserAgent(userAgent: string) {
+  cy.visit(`/${claimUrl}`, {
+    onBeforeLoad: (win) => {
+      Object.defineProperty(win.navigator, "userAgent", {
+        value: userAgent,
+        configurable: true,
+      });
+    },
+  });
+
+  cy.wait(2000);
+  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 mobile-friendly Web3 browser such as MetaMask to collect this reward");
+}
+
 function setupIntercepts() {
   cy.intercept("POST", "*", (req) => {
     // return a 404 for rpc optimization meaning no successful RPC

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

@@ -34,14 +34,15 @@ describe("Claims Portal Success", () => {
       cy.get("#view-claim").should("be.visible").and("include.text", "View Claim");
 
       // anvil confirms it instantly so there is two notifications
-      cy.get("body").should("contain.text", "Transaction sent");
-      cy.get("body").should("contain.text", "Claim Complete");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "Transaction sent");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "Claim Complete");
 
       cy.window().then((win) => {
         win.open = cy.stub().as("open");
       });
 
-      cy.get("#view-claim").invoke("click")
+      cy.get("#view-claim")
+        .invoke("click")
         .then(() => {
           cy.get("@open").should("be.calledWithMatch", /https:\/\/blockscan.com\/tx/);
         });
@@ -65,7 +66,7 @@ describe("Claims Portal Success", () => {
 
       cy.get("#view-claim").should("not.be.visible");
 
-      cy.get("body").should("contain.text", "This reward is not for you");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "This reward is not for you");
     });
   });
 
@@ -87,7 +88,7 @@ describe("Claims Portal Success", () => {
       cy.get("#claim-loader").should("not.be.visible");
       cy.get("#view-claim").should("not.be.visible");
 
-      cy.get("body").should("contain.text", "Nonce invalidation transaction sent");
+      cy.get("body", { timeout: 15000 }).should("contain.text", "Nonce invalidation transaction sent");
     });
   });
 });

package.json

@@ -85,4 +85,4 @@
       "@commitlint/config-conventional"
     ]
   }
-}
+}

static/index.html

@@ -179,8 +179,19 @@
           <div id="rewardsCount"></div>
           <div id="nextTx"></div>
         </figure>
-        <div id="build">
-          <a target="_blank" rel="noopener noreferrer"></a>
+        <div class="footer">
+          <div id="build">
+            <a target="_blank" rel="noopener noreferrer"></a>
+          </div>
+          <a class="faq-icon" href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
+            <div>
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808080">
+                <path
+                  d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+                />
+              </svg>
+            </div>
+          </a>
         </div>
       </footer>
     </main>

static/scripts/rewards/cirip/query-reverse-ens.ts

@@ -1,11 +1,11 @@
-import { AppState } from "../app-state";
+import { app } from "../app-state";
 import { useRpcHandler } from "../web3/use-rpc-handler";
 import { reverseEnsInterface } from "./ens-lookup";
 
 export async function queryReverseEns(address: string, networkID: number) {
   // Try to get the ENS name from localStorage
   const cachedEnsName = localStorage.getItem(address);
-  const endpoint = (await useRpcHandler({ networkId: networkID } as AppState)).connection.url;
+  const endpoint = app.provider?.connection.url || (await useRpcHandler(app)).connection.url;
 
   if (!endpoint) {
     console.error("ENS lookup failed: No endpoint found for network ID", networkID);

static/scripts/rewards/init.ts

@@ -1,18 +1,14 @@
 import { app } from "./app-state";
+import { displayCommitHash } from "./render-transaction/display-commit-hash";
 import { readClaimDataFromUrl } from "./render-transaction/read-claim-data-from-url";
 import { grid } from "./the-grid";
 
-displayCommitHash(); // @DEV: display commit hash in footer
+displayCommitHash();
 grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background
 readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL
 
-declare const commitHash: string; // @DEV: passed in at build time check build/esbuild-build.ts
-function displayCommitHash() {
-  // display commit hash in footer
-  const buildElement = document.querySelector(`#build a`) as HTMLAnchorElement;
-  buildElement.innerHTML = commitHash;
-  buildElement.href = `https://github.com/ubiquity/pay.ubq.fi/commit/${commitHash}`;
-}
+const footer = document.querySelector(".footer") as Element;
+footer.classList.add("animate");
 
 // cSpell:ignore llback
 function gridLoadedCallback() {

static/scripts/rewards/render-transaction/display-commit-hash.ts

@@ -0,0 +1,7 @@
+declare const commitHash: string; // @DEV: passed in at build time check build/esbuild-build.ts
+export function displayCommitHash() {
+  // display commit hash in footer
+  const buildElement = document.querySelector(`#build a`) as HTMLAnchorElement;
+  buildElement.innerHTML = commitHash;
+  buildElement.href = `https://github.com/ubiquity/pay.ubq.fi/commit/${commitHash}`;
+}

static/scripts/rewards/render-transaction/read-claim-data-from-url.ts

@@ -34,7 +34,11 @@ export async function readClaimDataFromUrl(app: AppState) {
   try {
     app.provider = await useRpcHandler(app);
   } catch (e) {
-    toaster.create("error", `e`);
+    if (e instanceof Error) {
+      toaster.create("error", e.message);
+    } else {
+      toaster.create("error", JSON.stringify(e));
+    }
   }
 
   try {