feat: vertically stacked permits

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

@@ -18,12 +18,12 @@ describe("Claims Portal Failures", () => {
     });
 
     it("should handle no connected signer", () => {
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().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("button.make-claim").first().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", "Please connect your wallet to claim this reward.");
     });
@@ -46,11 +46,11 @@ describe("Claims Portal Failures", () => {
     });
 
     it("should handle feedback for a failed wallet provider transaction", () => {
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().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("button.make-claim").first().should("be.visible").click();
+      cy.get(".claim-loader").first().should("be.visible");
+      cy.get(".invalidator").first().should("not.be.visible");
       // cy.get("#claim-loader").should("not.be.visible"); // gets stuck here
     });
   });

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

@@ -14,9 +14,9 @@ describe("Claims Portal Non-Web3", () => {
       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");
+      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.");
     });
@@ -79,9 +79,9 @@ function testUserAgent(userAgent: string) {
   });
 
   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(".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");
 }

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

@@ -17,21 +17,21 @@ describe("Claims Portal Success", () => {
   });
   describe("Success", () => {
     it("should successfully claim a permit", () => {
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]').should("exist").and("include.text", "337888.4 WXDAI");
+      cy.get('table[data-make-claim="ok"]').first().should("exist").and("include.text", "337888.4 WXDAI");
 
-      cy.get("button[id='make-claim']").invoke("click");
+      cy.get("button[class='make-claim']").first().invoke("click");
 
-      cy.get("#invalidator").should("not.be.visible");
+      cy.get(".invalidator").first().should("not.be.visible");
 
-      cy.get("#claim-loader").should("be.visible").as("loader");
+      cy.get(".claim-loader").first().should("be.visible").as("loader");
 
       cy.wait(5000); // required for the action to complete
 
-      cy.get("@loader").should("not.be.visible");
+      cy.get("@loader").first().should("not.be.visible");
 
-      cy.get("#view-claim").should("be.visible").and("include.text", "View Claim");
+      cy.get(".view-claim").first().should("be.visible").and("include.text", "View Claim");
 
       // anvil confirms it instantly so there is two notifications
       cy.get("body", { timeout: 15000 }).should("contain.text", "Transaction sent");
@@ -41,10 +41,13 @@ describe("Claims Portal Success", () => {
         win.open = cy.stub().as("open");
       });
 
-      cy.get("#view-claim")
+      cy.get(".view-claim")
+        .first()
         .invoke("click")
         .then(() => {
-          cy.get("@open").should("be.calledWithMatch", /https:\/\/blockscan.com\/tx/);
+          cy.get("@open")
+            .first()
+            .should("be.calledWithMatch", /https:\/\/blockscan.com\/tx/);
         });
     });
   });
@@ -54,17 +57,17 @@ describe("Claims Portal Success", () => {
       cy.visit(`/${notMeantForYouPermit}`).then(() => {
         cy.wait(2000);
       });
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]').should("exist");
+      cy.get('table[data-make-claim="ok"]').first().should("exist");
 
-      cy.get("button[id='make-claim']").invoke("click");
+      cy.get("button[class='make-claim']").first().invoke("click");
 
-      cy.get("#invalidator").should("not.be.visible");
+      cy.get(".invalidator").first().should("not.be.visible");
 
-      cy.get("#claim-loader").should("be.visible");
+      cy.get(".claim-loader").first().should("be.visible");
 
-      cy.get("#view-claim").should("not.be.visible");
+      cy.get(".view-claim").first().should("not.be.visible");
 
       cy.get("body", { timeout: 15000 }).should("contain.text", "This reward is not for you");
     });
@@ -79,16 +82,16 @@ describe("Claims Portal Success", () => {
       cy.visit(`/${notMeantForYouPermit}`).then(() => {
         cy.wait(2000);
       });
-      cy.get("#additionalDetails", { timeout: 15000 }).should("be.visible").invoke("click");
+      cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]').should("exist");
+      cy.get('table[data-make-claim="ok"]').first().should("exist");
 
-      cy.get("#invalidator").should("be.visible").invoke("click");
+      cy.get(".invalidator").should("be.visible").first().invoke("click");
 
-      cy.get("#claim-loader").should("not.be.visible");
-      cy.get("#view-claim").should("not.be.visible");
+      cy.get(".claim-loader").first().should("not.be.visible");
+      cy.get(".view-claim").first().should("not.be.visible");
 
-      cy.get("body", { timeout: 15000 }).should("contain.text", "Nonce invalidation transaction sent");
+      cy.get("body", { timeout: 15000 }).first().should("contain.text", "Nonce invalidation transaction sent");
     });
   });
 });

static/index.html

@@ -30,6 +30,7 @@
     <title>Ubiquity Rewards | Ubiquity DAO</title>
     <!-- icons from: https://fonts.google.com/icons weight: 300 optical-size: 24 -->
   </head>
+
   <body>
     <background>
       <div class="gradient"></div>
@@ -67,19 +68,19 @@
             </tr>
           </thead>
           <tbody>
-            <tr id="Amount">
+            <tr class="amount detail">
               <th>
                 <div>Amount</div>
               </th>
-              <td id="rewardAmount">
+              <td class="reward-amount">
                 <div class="loading-message">Loading</div>
               </td>
             </tr>
-            <tr id="Token">
+            <tr class="token detail">
               <th>
                 <div>Token</div>
               </th>
-              <td id="rewardToken">
+              <td class="reward-token">
                 <span class="full">
                   <div></div>
                 </span>
@@ -88,11 +89,11 @@
                 </span>
               </td>
             </tr>
-            <tr id="To">
+            <tr class="to detail">
               <th>
                 <div>For</div>
               </th>
-              <td id="rewardRecipient">
+              <td class="reward-recipient">
                 <span class="full">
                   <div></div>
                 </span>
@@ -104,10 +105,10 @@
                 </span>
               </td>
             </tr>
-            <tr id="additional-details-border">
+            <tr class="additional-details-border">
               <th>
                 <div>
-                  <button id="additionalDetails">
+                  <button class="additional-details">
                     <div>Details</div>
                     <svg class="opener" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                       <path
@@ -123,8 +124,8 @@
                 </div>
               </th>
               <td>
-                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
-                  <button id="claim-loader">
+                <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                  <button class="claim-loader">
                     <svg
                       version="1.1"
                       id="L9"
@@ -138,9 +139,9 @@
                     >
                       <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"></path>
                     </svg>
-                    <div id="claiming-message">Claiming</div>
+                    <div class="claiming-message">Claiming</div>
                   </button>
-                  <button id="make-claim">
+                  <button class="make-claim">
                     <div class="claim-title">Collect</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="claim-icon">
                       <path
@@ -149,7 +150,7 @@
                     </svg>
                   </button>
 
-                  <button id="view-claim">
+                  <button class="view-claim">
                     <div class="claim-title">View Claim</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="link-icon">
                       <path
@@ -158,7 +159,7 @@
                     </svg>
                   </button>
 
-                  <button id="invalidator">
+                  <button class="invalidator">
                     <div>Void</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                       <path
@@ -170,28 +171,20 @@
               </td>
             </tr>
           </tbody>
-          <tbody id="additionalDetailsTable"></tbody>
         </table>
       </div>
-      <footer
-        ><figure id="carousel">
-          <div id="prevTx"></div>
-          <div id="rewardsCount"></div>
-          <div id="nextTx"></div>
-        </figure>
-        <div class="footer">
-          <div id="build">
-            <a target="_blank" rel="noopener noreferrer"></a>
-          </div>
-          <div id="faq-icon">
-            <a href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-                <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>
-            </a>
-          </div>
+      <footer>
+        <div id="build">
+          <a target="_blank" rel="noopener noreferrer"></a>
+        </div>
+        <div id="faq-icon">
+          <a href="https://github.com/ubiquity/work.ubq.fi/discussions/53" target="_blank">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+              <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>
+          </a>
         </div>
       </footer>
     </main>

static/scripts/rewards/app-state.ts

@@ -17,10 +17,6 @@ export class AppState {
     this._signer = value;
   }
 
-  get networkId(): number | null {
-    return this.reward?.networkId || null;
-  }
-
   get provider(): JsonRpcProvider {
     return this._provider;
   }
@@ -33,29 +29,11 @@ export class AppState {
     return this._currentIndex;
   }
 
-  get reward(): Permit {
-    return this.rewardIndex < this.claims.length ? this.claims[this.rewardIndex] : this.claims[0];
-  }
-
-  get permitNetworkId() {
-    return this.reward?.networkId;
-  }
-
-  get currentExplorerUrl(): string {
-    if (!this.reward) {
+  getCurrentExplorerUrl(claim: Permit): string {
+    if (!claim) {
       return "https://blockscan.com";
     }
-    return networkExplorers[this.reward.networkId] || "https://blockscan.com";
-  }
-
-  nextPermit(): Permit | null {
-    this._currentIndex = Math.min(this.claims.length - 1, this.rewardIndex + 1);
-    return this.reward;
-  }
-
-  previousPermit(): Permit | null {
-    this._currentIndex = Math.max(0, this._currentIndex - 1);
-    return this.reward;
+    return networkExplorers[claim.networkId] || "https://blockscan.com";
   }
 }
 

static/scripts/rewards/init.ts

@@ -7,7 +7,7 @@ displayCommitHash();
 grid(document.getElementById("grid") as HTMLElement, gridLoadedCallback); // @DEV: display grid background
 readClaimDataFromUrl(app).catch(console.error); // @DEV: read claim data from URL
 
-const footer = document.querySelector(".footer") as Element;
+const footer = document.querySelector("footer") as Element;
 footer.classList.add("ready");
 
 // cSpell:ignore llback