Merge pull request #156 from ubq-testing/cosmetic-enhancement

Cosmetic enhancement

package.json

@@ -36,4 +36,4 @@
   "engines": {
     "node": ">=20.10.0"
   }
-}
+}

static/index.html

@@ -62,14 +62,14 @@
             xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 0 490 490"
             xml:space="preserve"
-            style="cursor: pointer; padding: 10px"
+            class="paginateClaims"
           >
             <g>
               <polygon points="332.668,490 82.631,244.996 332.668,0 407.369,76.493 235.402,244.996 407.369,413.507" />
             </g>
           </svg>
 
-          <div id="rewardsCount">1/x reward</div>
+          <div id="rewardsCount"></div>
 
           <svg
             id="nextTx"
@@ -80,7 +80,7 @@
             xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 0 490 490"
             xml:space="preserve"
-            style="cursor: pointer; padding: 10px"
+            class="paginateClaims"
           >
             <g transform="matrix(-1, 0.0007910000276751816, 0, 1, 490.0000305175781, -0.1938260048627818)">
               <polygon points="332.668,490 82.631,244.996 332.668,0 407.369,76.493 235.402,244.996 407.369,413.507" />

static/scripts/rewards/render-transaction/render-transaction.ts

@@ -33,6 +33,7 @@ export async function init() {
     console.error(error);
     setClaimMessage({ type: "Error", message: `Invalid claim data passed in URL` });
     table.setAttribute(`data-claim`, "error");
+
     return false;
   }
 
@@ -47,29 +48,36 @@ export async function init() {
   });
 
   const rewardsCount = document.getElementById("rewardsCount");
-  if (rewardsCount) {
-    rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
 
-    const nextTxButton = document.getElementById("nextTx");
-    if (nextTxButton) {
-      nextTxButton.addEventListener("click", () => {
-        claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
-        app.nextTx();
-        rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
-        table.setAttribute(`data-claim`, "none");
-        renderTransaction();
-      });
-    }
-
-    const prevTxButton = document.getElementById("previousTx");
-    if (prevTxButton) {
-      prevTxButton.addEventListener("click", () => {
-        claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
-        app.previousTx();
-        rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
-        table.setAttribute(`data-claim`, "none");
-        renderTransaction();
-      });
+  if (rewardsCount) {
+    if (!app.claimTxs || app.claimTxs.length <= 1) {
+      // already hidden
+    } else {
+      rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
+
+      const nextTxButton = document.getElementById("nextTx");
+      if (nextTxButton) {
+        nextTxButton.style.display = "block";
+        nextTxButton.addEventListener("click", () => {
+          claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
+          app.nextTx();
+          rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
+          table.setAttribute(`data-claim`, "none");
+          renderTransaction();
+        });
+      }
+
+      const prevTxButton = document.getElementById("previousTx");
+      if (prevTxButton) {
+        prevTxButton.style.display = "block";
+        prevTxButton.addEventListener("click", () => {
+          claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
+          app.previousTx();
+          rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
+          table.setAttribute(`data-claim`, "none");
+          renderTransaction();
+        });
+      }
     }
   }
 

static/scripts/rewards/web3/erc20-permit.ts

@@ -55,7 +55,7 @@ export function claimErc20PermitHandler(permit: Erc20Permit) {
 export async function checkPermitClaimable(permit: Erc20Permit, signer: ethers.providers.JsonRpcSigner | null) {
   const claimed = await isNonceClaimed(permit);
   if (claimed) {
-    toaster.create("error", `This reward has already been claimed or invalidated.`);
+    toaster.create("error", `Your reward for this task has already been claimed or invalidated.`);
     return false;
   }
 

static/styles/rewards/claim-table.css

@@ -271,6 +271,12 @@ table[data-claim-rendered="true"][data-claim="none"][data-contract-loaded="true"
   color: #fff;
 }
 
+.paginateClaims {
+  display: none;
+  cursor: pointer;
+  padding: 10px;
+}
+
 .show-cl {
   display: block;
 }