Merge pull request #161 from ubq-testing/enhancements

fix: cosmetic enhancements

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="hide-pagination"
           >
             <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="hide-pagination"
           >
             <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

@@ -48,44 +48,66 @@ 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 (!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.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();
+        });
+      }
+
+      setPagination(nextTxButton, prevTxButton);
     }
   }
 
   renderTransaction();
 }
 
+function setPagination(nextTxButton: Element | null, prevTxButton: Element | null) {
+  if (app.claimTxs.length > 1) {
+    prevTxButton!.classList.remove("hide-pagination");
+    nextTxButton!.classList.remove("hide-pagination");
+
+    prevTxButton!.classList.add("show-pagination");
+    nextTxButton!.classList.add("show-pagination");
+  }
+}
+
 type Success = boolean;
 export async function renderTransaction(nextTx?: boolean): Promise<Success> {
   const table = document.getElementsByTagName(`table`)[0];
   resetClaimButton();
 
   if (nextTx) {
     app.nextTx();
-    const rewardsCount = document.getElementById("rewardsCount") as Element;
-    rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
-    table.setAttribute(`data-claim`, "none");
+    if (!app.claimTxs || app.claimTxs.length <= 1) {
+      // already hidden
+    } else {
+      setPagination(document.getElementById("nextTx"), document.getElementById("previousTx"));
+
+      const rewardsCount = document.getElementById("rewardsCount") as Element;
+      rewardsCount.innerHTML = `${app.currentIndex + 1}/${app.claimTxs.length} reward`;
+      table.setAttribute(`data-claim`, "none");
+    }
   }
 
   if (!app.currentTx) {

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

@@ -57,7 +57,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

@@ -288,6 +288,16 @@ table[data-claim-rendered="true"][data-claim="none"][data-contract-loaded="true"
   display: none;
 }
 
+.show-pagination {
+  display: flex;
+  cursor: pointer;
+  padding: 10px;
+}
+
+.hide-pagination {
+  display: none;
+}
+
 #additionalDetails svg {
   /* display: none; */
 }