From 49ed14ca447fee9b871d5265e500970fb1e59663 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Tue, 6 Aug 2024 22:48:51 +0200
Subject: [PATCH 01/49] fix: use standard CSS naming

---
 static/index.html | 53 ++++++++++++++++++++++++-----------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/static/index.html b/static/index.html
index 9bbb8acc..def198c3 100644
--- a/static/index.html
+++ b/static/index.html
@@ -55,31 +55,31 @@
         </a>
       </header>
       <div>
-        <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
-          <thead>
-            <tr>
-              <th>
-                <div>Notice</div>
-              </th>
-              <td>
-                <div class="loading-message">Loading</div>
-              </td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr id="Amount">
+      <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
+        <thead>
+          <tr>
+            <th>
+              <div>Notice</div>
+            </th>
+            <td>
+              <div class="loading-message">Loading</div>
+            </td>
+          </tr>
+        </thead>
+        <tbody class="new-tbody">
+            <tr class="amount">
               <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">
               <th>
                 <div>Token</div>
               </th>
-              <td id="rewardToken">
+              <td class="reward-token">
                 <span class="full">
                   <div></div>
                 </span>
@@ -88,11 +88,11 @@
                 </span>
               </td>
             </tr>
-            <tr id="To">
+            <tr class="to">
               <th>
                 <div>For</div>
               </th>
-              <td id="rewardRecipient">
+              <td class="reward-recipient">
                 <span class="full">
                   <div></div>
                 </span>
@@ -104,10 +104,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,7 +123,7 @@
                 </div>
               </th>
               <td>
-                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
                   <button id="claim-loader">
                     <svg
                       version="1.1"
@@ -138,9 +138,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 +149,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 +158,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,7 +170,8 @@
               </td>
             </tr>
           </tbody>
-          <tbody id="additionalDetailsTable"></tbody>
+          <tbody class="additional-details-table">
+          </tbody>
         </table>
       </div>
       <footer

From 6c05a6f038d7cc125e8bc0cd52519ce8ec32aa5b Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Tue, 6 Aug 2024 23:02:58 +0200
Subject: [PATCH 02/49] fix: remove redundant class and carousel

---
 static/index.html              | 31 ++++++++++++-------------------
 static/scripts/rewards/init.ts |  2 +-
 static/styles/rewards/pay.css  |  6 +++---
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/static/index.html b/static/index.html
index def198c3..e27abf37 100644
--- a/static/index.html
+++ b/static/index.html
@@ -174,25 +174,18 @@
           </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>
diff --git a/static/scripts/rewards/init.ts b/static/scripts/rewards/init.ts
index 75c6a308..b2d599db 100644
--- a/static/scripts/rewards/init.ts
+++ b/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
diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index b87a55b2..b0047742 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -102,7 +102,7 @@ a {
   /* font-weight: 400; */
 }
 
-div.footer > div {
+footer > div {
   /* bottom: 48px; */
   padding: 48px 0;
   text-align: center;
@@ -213,7 +213,7 @@ footer {
   opacity: 1;
 }
 
-.footer {
+footer {
   /* display: flex; */
   /* align-items: center; */
   opacity: 0;
@@ -221,7 +221,7 @@ footer {
   text-align: center;
 }
 
-.footer.ready {
+footer.ready {
   opacity: 1;
 }
 

From 7d2924b7c28025c55f9f33d489ac7f151be7b381 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 16:52:53 +0200
Subject: [PATCH 03/49] feat: add class names

---
 static/index.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/static/index.html b/static/index.html
index e27abf37..23b2ecd2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -66,8 +66,8 @@
             </td>
           </tr>
         </thead>
-        <tbody class="new-tbody">
-            <tr class="amount">
+        <tbody>
+            <tr class="amount detail">
               <th>
                 <div>Amount</div>
               </th>
@@ -75,7 +75,7 @@
                 <div class="loading-message">Loading</div>
               </td>
             </tr>
-            <tr class="token">
+            <tr class="token detail">
               <th>
                 <div>Token</div>
               </th>
@@ -88,7 +88,7 @@
                 </span>
               </td>
             </tr>
-            <tr class="to">
+            <tr class="to detail">
               <th>
                 <div>For</div>
               </th>
@@ -124,7 +124,7 @@
               </th>
               <td>
                 <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
-                  <button id="claim-loader">
+                  <button class="claim-loader">
                     <svg
                       version="1.1"
                       id="L9"
@@ -170,8 +170,6 @@
               </td>
             </tr>
           </tbody>
-          <tbody class="additional-details-table">
-          </tbody>
         </table>
       </div>
       <footer>

From b10957377a6f723eccb3407f1eaabb3ed087284e Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:30:51 +0200
Subject: [PATCH 04/49] fix: alignment

---
 static/styles/rewards/pay.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index b0047742..7813f302 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -36,7 +36,6 @@ main {
   max-width: 100vw;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 }
 

From 4a8eab2a20f00ad6c1d4eeeeebbbcf16b7b96de0 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:31:19 +0200
Subject: [PATCH 05/49] feat: rewrite styles

---
 static/styles/rewards/claim-table.css | 123 +++++++++++++-------------
 1 file changed, 63 insertions(+), 60 deletions(-)

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 565441f5..003a093d 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -7,28 +7,30 @@
   --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1);
   --border-color: hsl(225 25% var(--border-brightness) / 1);
 }
-#claim {
-  display: flex;
-}
 main > div {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 4rem;
 }
 table {
   border-collapse: collapse;
+  max-width: 563px;
+  width: 100%;
 }
 table a:hover,
 table a:hover > div {
   color: #fff;
 }
-table #controls {
+table .controls {
   display: none;
   color: #fff;
   width: 100%;
 }
-table #controls > button {
+table .controls > button {
   flex: 1;
   padding: 0 24px;
 }
@@ -89,7 +91,7 @@ table td div {
 table td div svg ~ div {
   width: unset;
 }
-table tr:first-of-type > * {
+table tr:first-of-type > *, table .amount > * {
   padding-top: 24px;
 }
 table tr:last-child td div > div {
@@ -100,11 +102,11 @@ table tr:last-child td div > div {
 table tr:last-of-type > * {
   padding-bottom: 24px;
 }
-table tr#additional-details-border > * {
+table tr.additional-details-border > * {
   padding: 0;
   margin: 0;
 }
-table[data-make-claim-rendered] #controls {
+table[data-make-claim-rendered] .controls {
   display: inline-flex;
 }
 table[data-make-claim-rendered] button {
@@ -124,7 +126,7 @@ table[data-make-claim-rendered] button:hover {
 table[data-make-claim-rendered] button > div {
   display: none;
 }
-table[data-make-claim-rendered] button:disabled > svg#claim-icon {
+table[data-make-claim-rendered] button:disabled > svg.claim-icon {
   display: none;
 }
 table[data-make-claim-rendered] button:hover > div {
@@ -137,113 +139,116 @@ table[data-make-claim-rendered] button:hover > svg {
 .show {
   display: block;
 }
-table[data-make-claim-rendered] button.hide > svg#claim-loader {
+table[data-make-claim-rendered] button.hide > svg.claim-loader {
   display: none;
 }
-table[data-make-claim-rendered] button.show > svg#claim-icon {
+table[data-make-claim-rendered] button.show > svg.claim-icon {
   display: unset;
 }
-table[data-make-claim-rendered] button.show > svg#claim-loader {
+table[data-make-claim-rendered] button.show > svg.claim-loader {
   display: unset;
 }
-table[data-make-claim-rendered] button.hide > svg#claim-icon {
+table[data-make-claim-rendered] button.hide > svg.claim-icon {
   display: unset;
 }
-table #controls {
+table .controls {
   opacity: 0;
   transition: 1s ease-in-out opacity;
   pointer-events: none;
 }
-table[data-make-claim-rendered="true"][data-contract-loaded="true"][data-make-claim="ok"] #controls {
+table[data-make-claim-rendered="true"][data-contract-loaded="true"][data-make-claim="ok"] .controls {
   opacity: 1;
   pointer-events: unset;
 }
-table[data-make-claim-rendered] button#additionalDetails {
+table[data-make-claim-rendered] button.additional-details {
   width: 100%;
   color: #fff;
 }
-table[data-make-claim-rendered] tr#additional-details-border + tr > * {
+table[data-make-claim-rendered] tr.additional-details-border + tr > * {
   padding-top: 24px;
 }
-table #additionalDetailsTable {
+table .additional-detail {
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, -90px);
 }
-table[data-additional-data-size="large"] #additionalDetailsTable {
+table[data-additional-data-size="large"] .additional-detail {
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, -175px);
 }
-table[data-details-visible="true"] #additionalDetailsTable {
+table[data-details-visible="true"] .additional-detail,
+table[data-details-visible="false"] .detail {
   opacity: 1;
   pointer-events: all;
 }
-table[data-contract-loaded] #Token {
+table[data-details-visible="true"] .detail,
+table[data-details-visible="false"] .additional-detail {
+  opacity: 0;
+  pointer-events: all;
+  visibility:collapse ;
+}
+table[data-contract-loaded] .token {
   display: none;
 }
-#rewardAmount a {
+.reward-amount a {
   font-size: 24px;
 }
-#rewardAmount a,
-#rewardRecipient div,
-#rewardsCount {
+.reward-amount a,
+.reward-recipient div,
+.rewards-count {
   color: #fff;
 }
-table[data-details-visible="false"] #rewardToken .full,
-table[data-details-visible="true"] #rewardToken .short {
+table[data-details-visible="false"] .reward-token .full,
+table[data-details-visible="true"] .reward-token .short {
   display: none;
 }
-table[data-details-visible="false"] #rewardToken .short,
-table[data-details-visible="true"] #rewardToken .full {
+table[data-details-visible="false"] .reward-token .short,
+table[data-details-visible="true"] .reward-token .full {
   display: initial;
 }
-table[data-details-visible="false"] #rewardRecipient .full,
-table[data-details-visible="true"] #rewardRecipient .short {
+table[data-details-visible="false"] .reward-recipient .full,
+table[data-details-visible="true"] .reward-recipient .short {
   display: none;
 }
-table[data-details-visible="false"] #rewardRecipient .short,
-table[data-details-visible="true"] #rewardRecipient .full {
+table[data-details-visible="false"] .reward-recipient .short,
+table[data-details-visible="true"] .reward-recipient .full {
   display: initial;
 }
-#To > td,
-#To > th {
+.to > td,
+.to > th {
   padding-bottom: 24px;
 }
 table[data-make-claim="ok"] thead {
-  opacity: 0;
+  visibility: collapse;
   pointer-events: none;
-  transform: translate(-50%, -50%);
   /* filter: blur(4px); */
 }
 table[data-make-claim="error"] tbody {
   opacity: 0;
   pointer-events: none;
-  transform: translate(-50%, -50%);
   filter: blur(4px);
 }
-#rewardRecipient a div {
+.reward-recipient a div {
   opacity: 0.66;
 }
-#rewardRecipient a:hover div {
+.reward-recipient a:hover div {
   opacity: 1;
 }
-#rewardRecipient div {
+.reward-recipient div {
   color: #fff;
 }
-table[data-details-visible="true"] #additionalDetails svg.opener {
+table[data-details-visible="true"] .additional-details svg.opener {
   display: none;
 }
-table[data-details-visible="false"] #additionalDetails svg.opener {
+table[data-details-visible="false"] .additional-details svg.opener {
   display: unset;
 }
-table[data-details-visible="true"] #additionalDetails svg.closer {
+table[data-details-visible="true"] .additional-details svg.closer {
   display: unset;
 }
-table[data-details-visible="false"] #additionalDetails svg.closer {
+table[data-details-visible="false"] .additional-details svg.closer {
   display: none;
 }
-td#owner > a {
+td.owner > a {
   word-break: break-all;
 }
 table td {
@@ -253,16 +258,16 @@ table td {
 table th {
   padding-left: 32px;
 }
-[data-loader="false"] #claim-loader {
+[data-loader="false"] .claim-loader {
   display: none;
 }
-[data-make-claim="false"] #make-claim {
+[data-make-claim="false"] .make-claim {
   display: none;
 }
-[data-view-claim="false"] #view-claim {
+[data-view-claim="false"] .view-claim {
   display: none;
 }
-[data-invalidator="false"] #invalidator {
+[data-invalidator="false"] .invalidator {
   display: none;
 }
 
@@ -272,7 +277,7 @@ table th {
   position: absolute;
 }
 
-#claiming-message::after {
+.claiming-message::after {
   content: "";
   animation: ellipsis 1s infinite;
   position: absolute;
@@ -302,26 +307,20 @@ table th {
     transform: rotate(360deg);
   }
 }
-#claim-loader > svg {
+.claim-loader > svg {
   animation: rotate 1s linear infinite;
 }
 tbody,
 thead {
   background-color: var(--background-color-default);
-  position: absolute;
   box-shadow: inset 0 0 96px #00bfff10;
   transition: 0.25s all ease-in-out;
-  border: 1px solid var(--border-color);
-  transform: translate(-50%, -50%);
-  width: 100%;
-  max-width: 563px;
   overflow: hidden;
   /* box-shadow: 0 12px 64px #00000010; */
 }
 table * {
   text-wrap: nowrap;
 }
-
 @keyframes thead-fade-in {
   0% {
     opacity: 0;
@@ -331,6 +330,10 @@ table * {
   }
 }
 
+tr {
+  transition: visibility 0s, opacity 0.5s linear;
+}
+
 thead {
   animation: thead-fade-in 0.5s ease-in-out;
 }

From d0a52ab6b15e0d03ac7b2e18523b423b87e7f1c8 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:43:57 +0200
Subject: [PATCH 06/49] fix: make buttons accept table

---
 static/scripts/rewards/toaster.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index 84089e42..17230600 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -11,16 +11,17 @@ export const toaster = {
   },
 };
 
-const controls = document.getElementById("controls") as HTMLDivElement;
-export function getMakeClaimButton() {
-  return document.getElementById("make-claim") as HTMLButtonElement;
+export function getMakeClaimButton(table: Element) {
+  return table.querySelector(".make-claim") as HTMLButtonElement;
+}
+export function getViewClaimButton(table: Element) {
+  return table.querySelector(".view-claim") as HTMLButtonElement;
 }
-export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
 const notifications = document.querySelector(".notifications") as HTMLUListElement;
-export const buttonController = new ButtonController(controls);
+export const buttonControllers: ButtonController[] = [];
 
 function createToast(meaning: keyof typeof toaster.icons, text: string, timeout: number = 5000) {
-  if (meaning != "info") buttonController.hideLoader();
+  if (meaning != "info" && buttonControllers.length) buttonControllers.forEach((controller) => controller.hideLoader());
   const toastDetails = {
     timer: timeout,
   } as {

From a43efe5a214bbf78b5ef4b55f75dfcc68c8d3ddf Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:44:58 +0200
Subject: [PATCH 07/49] fix: remove unused getters/setters

---
 static/scripts/rewards/app-state.ts | 28 +++-------------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/static/scripts/rewards/app-state.ts b/static/scripts/rewards/app-state.ts
index 54c0c354..1c992b68 100644
--- a/static/scripts/rewards/app-state.ts
+++ b/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";
   }
 }
 

From 61e0cc8e7ecc1a1eeaa2a8db1f0bee081077c04f Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:45:39 +0200
Subject: [PATCH 08/49] feat: render table for each reward

---
 .../read-claim-data-from-url.ts               | 61 ++++++++++++-------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
index 225475c7..2b5303a7 100644
--- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
+++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
@@ -2,14 +2,14 @@ import { createClient } from "@supabase/supabase-js";
 import { decodePermits } from "@ubiquibot/permit-generation/handlers";
 import { Permit } from "@ubiquibot/permit-generation/types";
 import { app, AppState } from "../app-state";
-import { toaster } from "../toaster";
+import { buttonControllers, toaster } from "../toaster";
 import { connectWallet } from "../web3/connect-wallet";
 import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl } from "../web3/erc20-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
-import { claimRewardsPagination } from "./claim-rewards-pagination";
-import { renderTransaction } from "./render-transaction";
 import { setClaimMessage } from "./set-claim-message";
 import { useRpcHandler } from "../web3/use-rpc-handler";
+import { renderTransaction } from "./render-transaction";
+import { ButtonController } from "../button-controller";
 
 declare const SUPABASE_URL: string;
 declare const SUPABASE_ANON_KEY: string;
@@ -23,6 +23,7 @@ const base64encodedTxData = urlParams.get("claim");
 export async function readClaimDataFromUrl(app: AppState) {
   if (!base64encodedTxData) {
     // No claim data found
+    // A single table shows the error message
     setClaimMessage({ type: "Notice", message: `No claim data found.` });
     table.setAttribute(`data-make-claim`, "error");
     return;
@@ -32,7 +33,7 @@ export async function readClaimDataFromUrl(app: AppState) {
   app.claimTxs = await getClaimedTxs(app);
 
   try {
-    app.provider = await useRpcHandler(app);
+    app.provider = await useRpcHandler(app.claims[0]);
   } catch (e) {
     if (e instanceof Error) {
       toaster.create("error", e.message);
@@ -60,12 +61,10 @@ export async function readClaimDataFromUrl(app: AppState) {
      */
   }
 
-  displayRewardDetails();
-  displayRewardPagination();
+  await displayRewardsWithDetails();
 
-  await renderTransaction();
-  if (app.networkId !== null) {
-    await verifyCurrentNetwork(app.networkId);
+  if (app.claims[0].networkId !== null) {
+    await verifyCurrentNetwork(app.claims[0].networkId);
   } else {
     throw new Error("Network ID is null");
   }
@@ -97,23 +96,41 @@ function decodeClaimData(base64encodedTxData: string): Permit[] {
   }
 }
 
-function displayRewardPagination() {
-  const rewardsCount = document.getElementById("rewardsCount");
-  if (rewardsCount) {
-    if (!app.claims || app.claims.length <= 1) {
-      // already hidden
-    } else {
-      claimRewardsPagination(rewardsCount);
-    }
-  }
-}
-
-function displayRewardDetails() {
+function displayRewardDetails(table: Element) {
   let isDetailsVisible = false;
   table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
-  const additionalDetails = document.getElementById(`additionalDetails`) as HTMLElement;
+  const additionalDetails = table.querySelector(`.additional-details`) as HTMLElement;
   additionalDetails.addEventListener("click", () => {
     isDetailsVisible = !isDetailsVisible;
     table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
   });
 }
+
+/**
+ * @summary Create a separate table element for each claim
+ */
+async function displayRewardsWithDetails() {
+  const tableEl = document.getElementsByTagName("table")[0];
+  if (!tableEl) return;
+  tableEl.id = app.claims[0].nonce;
+  const controls = tableEl.querySelector(".controls") as HTMLDivElement;
+  buttonControllers.push(new ButtonController(controls));
+
+  await Promise.all(
+    app.claims.slice(1).map(async (claim, index) => {
+      // Create a new copy of the table
+      const newTable = tableEl.cloneNode(true) as Element;
+      newTable.id = claim.nonce;
+      tableEl.parentElement?.appendChild(newTable);
+
+      const controls = newTable.querySelector(".controls") as HTMLDivElement;
+      buttonControllers.push(new ButtonController(controls));
+      await renderTransaction(claim, newTable, index + 1);
+      displayRewardDetails(newTable);
+    })
+  );
+
+  // The first claim's table is populated last
+  await renderTransaction(app.claims[0], tableEl, 0);
+  displayRewardDetails(tableEl);
+}

From 116eb58b60d140944aee8da7bbf85031a1b947dc Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:46:42 +0200
Subject: [PATCH 09/49] feat: render a transaction for each reward

---
 .../render-transaction/render-transaction.ts  | 69 +++++++++----------
 1 file changed, 32 insertions(+), 37 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index d19583d2..d786bdaf 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -1,7 +1,7 @@
 import { ERC20Permit, Permit, TokenType } from "@ubiquibot/permit-generation/types";
 import { networkExplorers } from "@ubiquity-dao/rpc-handler";
 import { app } from "../app-state";
-import { buttonController, getMakeClaimButton, viewClaimButton } from "../toaster";
+import { buttonControllers, getMakeClaimButton, getViewClaimButton } from "../toaster";
 import { checkRenderInvalidatePermitAdminControl, claimErc20PermitHandlerWrapper, fetchTreasury } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
@@ -9,73 +9,68 @@ import { insertErc20PermitTableData, insertErc721PermitTableData } from "./inser
 import { renderEnsName } from "./render-ens-name";
 import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
 
-const carousel = document.getElementById("carousel") as Element;
-const table = document.querySelector(`table`) as HTMLTableElement;
-type Success = boolean;
-
-export async function renderTransaction(): Promise<Success> {
-  if (app.claims && app.claims.length > 1) {
-    carousel.className = "ready";
-    const rewardsCount = document.getElementById("rewardsCount") as Element;
-    rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-  }
-
-  if (!app.reward) {
-    buttonController.hideAll();
+export async function renderTransaction(claim: Permit, table: Element, buttonControllsIndex: number): Promise<boolean> {
+  if (!claim) {
+    buttonControllers[buttonControllsIndex].hideAll();
     console.log("No reward found");
     return false;
   }
 
-  verifyCurrentNetwork(app.reward.networkId).catch(console.error);
+  if (!table) {
+    throw new Error("Missing transaction table");
+  }
+
+  verifyCurrentNetwork(claim.networkId).catch(console.error);
 
-  if (isErc20Permit(app.reward)) {
-    const treasury = await fetchTreasury(app.reward);
+  if (isErc20Permit(claim)) {
+    const treasury = await fetchTreasury(claim);
     table.setAttribute(`data-additional-data-size`, "small");
 
     // insert tx data into table
-    const requestedAmountElement = insertErc20PermitTableData(app, table, treasury);
+    const requestedAmountElement = insertErc20PermitTableData(claim, table, treasury, buttonControllsIndex);
 
-    renderTokenSymbol({
-      tokenAddress: app.reward.tokenAddress,
-      ownerAddress: app.reward.owner,
-      amount: app.reward.amount,
-      explorerUrl: networkExplorers[app.reward.networkId],
+    await renderTokenSymbol({
+      tokenAddress: claim.tokenAddress,
+      ownerAddress: claim.owner,
+      amount: claim.amount,
+      explorerUrl: networkExplorers[claim.networkId],
       table,
       requestedAmountElement,
-    }).catch(console.error);
+    });
 
-    const toElement = document.getElementById(`rewardRecipient`) as Element;
-    renderEnsName({ element: toElement, address: app.reward.beneficiary, networkId: app.networkId }).catch(console.error);
+    const toElement = table.querySelector(`.reward-recipient`) as Element;
+    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
     if (app.provider) {
       checkRenderInvalidatePermitAdminControl(app).catch(console.error);
     }
 
-    if (app.claimTxs[app.reward.nonce.toString()] !== undefined) {
-      buttonController.showViewClaim();
-      viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.nonce.toString()]}`));
+    if (app.claimTxs[claim.nonce.toString()] !== undefined) {
+      buttonControllers[buttonControllsIndex].showViewClaim();
+      const viewClaimButton = getViewClaimButton(table);
+      viewClaimButton.addEventListener("click", () => window.open(`${claim.currentExplorerUrl}/tx/${app.claimTxs[claim.nonce.toString()]}`));
     } else if (window.ethereum) {
       // requires wallet connection to claim
-      buttonController.showMakeClaim();
-      getMakeClaimButton().addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      buttonControllers[buttonControllsIndex].showMakeClaim();
+      getMakeClaimButton(table).addEventListener("click", claimErc20PermitHandlerWrapper(table, claim, buttonControllsIndex));
     }
 
     table.setAttribute(`data-make-claim`, "ok");
   } else {
-    const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
+    const requestedAmountElement = insertErc721PermitTableData(claim, table);
     table.setAttribute(`data-make-claim`, "ok");
     table.setAttribute(`data-additional-data-size`, "large");
     renderNftSymbol({
-      tokenAddress: app.reward.tokenAddress,
-      explorerUrl: networkExplorers[app.reward.networkId],
+      tokenAddress: claim.tokenAddress,
+      explorerUrl: networkExplorers[claim.networkId],
       table,
       requestedAmountElement,
     }).catch(console.error);
 
-    const toElement = document.getElementById(`rewardRecipient`) as Element;
-    renderEnsName({ element: toElement, address: app.reward.beneficiary, networkId: app.networkId }).catch(console.error);
+    const toElement = document.getElementById(`reward-recipient`) as Element;
+    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
-    getMakeClaimButton().addEventListener("click", claimErc721PermitHandler(app.reward));
+    getMakeClaimButton(table).addEventListener("click", claimErc721PermitHandler(table, claim, buttonControllsIndex));
   }
 
   return true;

From eb88ea185ca569f22df40220b6e8943e0e1cb8d6 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:47:55 +0200
Subject: [PATCH 10/49] fix: update all controls

---
 static/scripts/rewards/web3/verify-current-network.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts
index 8d1e530d..4ca8f00d 100644
--- a/static/scripts/rewards/web3/verify-current-network.ts
+++ b/static/scripts/rewards/web3/verify-current-network.ts
@@ -1,12 +1,12 @@
 import { ethers } from "ethers";
-import { buttonController } from "../toaster";
+import { buttonControllers } from "../toaster";
 import { handleIfOnCorrectNetwork } from "./handle-if-on-correct-network";
 import { notOnCorrectNetwork } from "./not-on-correct-network";
 
 // verifyCurrentNetwork checks if the user is on the correct network and displays an error if not
 export async function verifyCurrentNetwork(desiredNetworkId: number) {
   if (!window.ethereum) {
-    buttonController.hideAll();
+    buttonControllers.forEach((controller) => controller.hideAll());
     return;
   }
 

From dbbe8ced424050338eceb2425e0e5241a8dd0b19 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:50:01 +0200
Subject: [PATCH 11/49] chore: rewrite detailed fields to rows

---
 .../render-transaction/insert-table-data.ts   | 139 ++++++++++--------
 1 file changed, 77 insertions(+), 62 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/insert-table-data.ts b/static/scripts/rewards/render-transaction/insert-table-data.ts
index 59cf3c22..23563df3 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -1,100 +1,115 @@
 import { ERC20Permit, ERC721Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
-import { app, AppState } from "../app-state";
+import { app } from "../app-state";
+import { buttonControllers } from "../toaster";
+import { ButtonController } from "../button-controller";
 
 function shortenAddress(address: string): string {
   return `${address.slice(0, 10)}...${address.slice(-8)}`;
 }
 
 export function insertErc20PermitTableData(
-  app: AppState,
+  reward: ERC20Permit,
   table: Element,
-  treasury: { balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }
+  treasury: { balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string },
+  index: number
 ): Element {
-  const reward = app.reward as ERC20Permit;
-  const requestedAmountElement = document.getElementById("rewardAmount") as Element;
-  renderToFields(reward.beneficiary, app.currentExplorerUrl);
-  renderTokenFields(reward.tokenAddress, app.currentExplorerUrl);
-  renderDetailsFields([
-    { name: "From", value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.owner}">${reward.owner}</a>` },
-    {
-      name: "Expiry",
-      value: (() => {
-        const deadline = BigNumber.isBigNumber(reward.deadline) ? reward.deadline : BigNumber.from(reward.deadline);
-        return deadline.lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(deadline.toNumber()).toLocaleString() : undefined;
-      })(),
-    },
-    { name: "Balance", value: treasury.balance.gte(0) ? `${ethers.utils.formatUnits(treasury.balance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
-    { name: "Allowance", value: treasury.allowance.gte(0) ? `${ethers.utils.formatUnits(treasury.allowance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
-  ]);
+  renderToFields(reward.beneficiary, reward.currentExplorerUrl, table);
+  renderTokenFields(reward.tokenAddress, reward.currentExplorerUrl, table);
+  renderDetailsFields(
+    [
+      {
+        name: "From",
+        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.owner}">${reward.owner}</a>`,
+      },
+      {
+        name: "Expiry",
+        value: (() => {
+          const deadline = BigNumber.isBigNumber(reward.deadline) ? reward.deadline : BigNumber.from(reward.deadline);
+          return deadline.lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(deadline.toNumber()).toLocaleString() : undefined;
+        })(),
+      },
+      { name: "Balance", value: treasury.balance.gte(0) ? `${ethers.utils.formatUnits(treasury.balance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
+      { name: "Allowance", value: treasury.allowance.gte(0) ? `${ethers.utils.formatUnits(treasury.allowance, treasury.decimals)} ${treasury.symbol}` : "N/A" },
+    ],
+    table
+  );
+
+  // We need to update the controls after inserting the detail rows
+  const controls = table.querySelector(".controls") as HTMLDivElement;
+  buttonControllers[index] = new ButtonController(controls);
   table.setAttribute(`data-make-claim-rendered`, "true");
-  return requestedAmountElement;
+
+  return table.querySelector(".reward-amount") as Element;
 }
 
 export function insertErc721PermitTableData(reward: ERC721Permit, table: Element): Element {
-  const requestedAmountElement = document.getElementById("rewardAmount") as Element;
-  renderToFields(reward.beneficiary, app.currentExplorerUrl);
-  renderTokenFields(reward.tokenAddress, app.currentExplorerUrl);
+  const requestedAmountElement = table.querySelector(".reward-amount") as Element;
+  renderToFields(reward.beneficiary, reward.currentExplorerUrl, table);
+  renderTokenFields(reward.tokenAddress, reward.currentExplorerUrl, table);
   const { GITHUB_REPOSITORY_NAME, GITHUB_CONTRIBUTION_TYPE, GITHUB_ISSUE_ID, GITHUB_ORGANIZATION_NAME, GITHUB_USERNAME } = reward.erc721Request?.metadata || {};
-  renderDetailsFields([
-    {
-      name: "NFT address",
-      value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.tokenAddress}">${reward.tokenAddress}</a>`,
-    },
-    {
-      name: "Expiry",
-      value: BigNumber.from(reward.deadline).lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(Number(reward.deadline)).toLocaleString() : undefined,
-    },
-    {
-      name: "GitHub Organization",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}">${GITHUB_ORGANIZATION_NAME}</a>`,
-    },
-    {
-      name: "GitHub Repository",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}">${GITHUB_REPOSITORY_NAME}</a>`,
-    },
-    {
-      name: "GitHub Issue",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}/issues/${GITHUB_ISSUE_ID}">${GITHUB_ISSUE_ID}</a>`,
-    },
-    {
-      name: "GitHub Username",
-      value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_USERNAME}">${GITHUB_USERNAME}</a>`,
-    },
-    { name: "Contribution Type", value: GITHUB_CONTRIBUTION_TYPE?.split(",").join(", ") },
-  ]);
+  renderDetailsFields(
+    [
+      {
+        name: "NFT address",
+        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.tokenAddress}">${reward.tokenAddress}</a>`,
+      },
+      {
+        name: "Expiry",
+        value: BigNumber.from(reward.deadline).lte(Number.MAX_SAFE_INTEGER.toString()) ? new Date(Number(reward.deadline)).toLocaleString() : undefined,
+      },
+      {
+        name: "GitHub Organization",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}">${GITHUB_ORGANIZATION_NAME}</a>`,
+      },
+      {
+        name: "GitHub Repository",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}">${GITHUB_REPOSITORY_NAME}</a>`,
+      },
+      {
+        name: "GitHub Issue",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_ORGANIZATION_NAME}/${GITHUB_REPOSITORY_NAME}/issues/${GITHUB_ISSUE_ID}">${GITHUB_ISSUE_ID}</a>`,
+      },
+      {
+        name: "GitHub Username",
+        value: `<a target="_blank" rel="noopener noreferrer" href="https://github.com/${GITHUB_USERNAME}">${GITHUB_USERNAME}</a>`,
+      },
+      { name: "Contribution Type", value: GITHUB_CONTRIBUTION_TYPE?.split(",").join(", ") },
+    ],
+    table
+  );
   table.setAttribute(`data-make-claim-rendered`, "true");
   return requestedAmountElement;
 }
 
-function renderDetailsFields(additionalDetails: { name: string; value: string | undefined }[]) {
-  const additionalDetailsDiv = document.getElementById("additionalDetailsTable") as Element;
+function renderDetailsFields(additionalDetails: { name: string; value: string | undefined }[], table: Element) {
+  const additionalDetailsEl = table.querySelector("tbody") as Element;
   let additionalDetailsHtml = "";
   for (const { name, value } of additionalDetails) {
     if (!value) continue;
-    additionalDetailsHtml += `<tr>
+    additionalDetailsHtml += `<tr class="additional-detail">
       <th><div>${name}</div></th>
       <td><div>${value}</div></td>
     </tr>`;
   }
 
-  additionalDetailsDiv.innerHTML = additionalDetailsHtml;
+  additionalDetailsEl.innerHTML = additionalDetailsHtml + additionalDetailsEl.innerHTML;
 }
 
-function renderTokenFields(tokenAddress: string, explorerUrl: string) {
-  const tokenFull = document.querySelector("#Token .full") as Element;
-  const tokenShort = document.querySelector("#Token .short") as Element;
+function renderTokenFields(tokenAddress: string, explorerUrl: string, table: Element) {
+  const tokenFull = table.querySelector(".token .full") as Element;
+  const tokenShort = table.querySelector(".token .short") as Element;
 
   tokenFull.innerHTML = `<div>${tokenAddress}</div>`;
   tokenShort.innerHTML = `<div>${shortenAddress(tokenAddress)}</div>`;
 
-  const tokenBoth = document.getElementById(`rewardToken`) as Element;
+  const tokenBoth = table.querySelector(`.reward-token`) as Element;
   tokenBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/token/${tokenAddress}">${tokenBoth.innerHTML}</a>`;
 }
 
-function renderToFields(receiverAddress: string, explorerUrl: string) {
-  const toFull = document.querySelector("#rewardRecipient .full") as Element;
-  const toShort = document.querySelector("#rewardRecipient .short") as Element;
+function renderToFields(receiverAddress: string, explorerUrl: string, table: Element) {
+  const toFull = table.querySelector(".reward-recipient .full") as Element;
+  const toShort = table.querySelector(".reward-recipient .short") as Element;
 
   // if the for address is an ENS name neither will be found
   if (!toFull || !toShort) return;
@@ -102,6 +117,6 @@ function renderToFields(receiverAddress: string, explorerUrl: string) {
   toFull.innerHTML = `<div>${receiverAddress}</div>`;
   toShort.innerHTML = `<div>${shortenAddress(receiverAddress)}</div>`;
 
-  const toBoth = document.getElementById(`rewardRecipient`) as Element;
+  const toBoth = table.querySelector(`.reward-recipient`) as Element;
   toBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/address/${receiverAddress}">${toBoth.innerHTML}</a>`;
 }

From 4dd31db2d8c36333470ab1ae10b5b8fac6bdd250 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:51:21 +0200
Subject: [PATCH 12/49] chore: render ens for each claim

---
 .../scripts/rewards/render-transaction/render-ens-name.ts  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/render-ens-name.ts b/static/scripts/rewards/render-transaction/render-ens-name.ts
index 810df96d..da444d83 100644
--- a/static/scripts/rewards/render-transaction/render-ens-name.ts
+++ b/static/scripts/rewards/render-transaction/render-ens-name.ts
@@ -1,4 +1,5 @@
 import { app } from "../app-state";
+import { Permit } from "@ubiquibot/permit-generation/types";
 import { ensLookup } from "../cirip/ens-lookup";
 
 type EnsParams =
@@ -17,7 +18,7 @@ type EnsParams =
       networkId: number;
     };
 
-export async function renderEnsName({ element, address, tokenAddress, tokenView, networkId }: EnsParams): Promise<void> {
+export async function renderEnsName(claim: Permit, { element, address, tokenAddress, tokenView, networkId }: EnsParams): Promise<void> {
   let href: string = "";
   try {
     const resolved = await ensLookup(address, networkId);
@@ -32,9 +33,9 @@ export async function renderEnsName({ element, address, tokenAddress, tokenView,
     }
     if (ensName) {
       if (tokenView) {
-        href = `${app.currentExplorerUrl}/token/${tokenAddress}?a=${address}`;
+        href = `${app.getCurrentExplorerUrl(claim)}/token/${tokenAddress}?a=${address}`;
       } else {
-        href = `${app.currentExplorerUrl}/address/${address}"`;
+        href = `${app.getCurrentExplorerUrl(claim)}/address/${address}"`;
       }
       element.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${href}">${ensName}</a>`;
     }

From afc9e5d0074f8e317b908d42e8e758a9f66311a6 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:52:56 +0200
Subject: [PATCH 13/49] chore: rewrite logic to accept claim

---
 static/scripts/rewards/web3/erc20-permit.ts | 144 ++++++++++----------
 1 file changed, 74 insertions(+), 70 deletions(-)

diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 9e1fe826..a6d356c5 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -1,11 +1,11 @@
 import { JsonRpcSigner, TransactionResponse } from "@ethersproject/providers";
-import { Permit } from "@ubiquibot/permit-generation/types";
+import { Permit, ERC20Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, BigNumberish, Contract, ethers } from "ethers";
 import { erc20Abi, permit2Abi } from "../abis";
 import { app, AppState } from "../app-state";
 import { permit2Address } from "@ubiquity-dao/rpc-handler";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
-import { MetaMaskError, buttonController, errorToast, getMakeClaimButton, toaster, viewClaimButton } from "../toaster";
+import { MetaMaskError, buttonControllers, errorToast, getMakeClaimButton, toaster, getViewClaimButton } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
 export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
@@ -43,9 +43,9 @@ export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumbe
   }
 }
 
-async function checkPermitClaimability(app: AppState): Promise<boolean> {
+async function checkPermitClaimability(reward: Permit, index: number): Promise<boolean> {
   try {
-    return await checkPermitClaimable(app);
+    return await checkPermitClaimable(reward, index);
   } catch (error: unknown) {
     if (error instanceof Error) {
       const e = error as unknown as MetaMaskError;
@@ -53,12 +53,11 @@ async function checkPermitClaimability(app: AppState): Promise<boolean> {
       errorToast(e, e.reason);
     }
   }
-  buttonController.hideMakeClaim();
+  buttonControllers[index].hideMakeClaim();
   return false;
 }
 
-async function transferFromPermit(permit2Contract: Contract, app: AppState) {
-  const reward = app.reward;
+async function transferFromPermit(permit2Contract: Contract, reward: ERC20Permit, controlsIndex: number) {
   const signer = app.signer;
   if (!signer) return null;
 
@@ -85,8 +84,8 @@ async function transferFromPermit(permit2Contract: Contract, app: AppState) {
       if (e.code == "ACTION_REJECTED") {
         // Handle the user rejection case
         toaster.create("info", `Transaction was not sent because it was rejected by the user.`);
-        buttonController.hideLoader();
-        buttonController.showMakeClaim();
+        buttonControllers[controlsIndex].hideLoader();
+        buttonControllers[controlsIndex].showMakeClaim();
       } else {
         // Handle other errors
         console.error("Error in permitTransferFrom:", e);
@@ -97,17 +96,18 @@ async function transferFromPermit(permit2Contract: Contract, app: AppState) {
   }
 }
 
-async function waitForTransaction(tx: TransactionResponse) {
+async function waitForTransaction(tx: TransactionResponse, table: Element, controlsIndex: number) {
   try {
     const receipt = await tx.wait();
+    const viewClaimButton = getViewClaimButton(table);
     viewClaimButton.onclick = () => {
       window.open(`https://blockscan.com/tx/${receipt.transactionHash}`, "_blank");
     };
 
     toaster.create("success", `Claim Complete.`);
-    buttonController.showViewClaim();
-    buttonController.hideLoader();
-    buttonController.hideMakeClaim();
+    buttonControllers[controlsIndex].showViewClaim();
+    buttonControllers[controlsIndex].hideLoader();
+    buttonControllers[controlsIndex].hideMakeClaim();
     console.log(receipt.transactionHash);
 
     return receipt;
@@ -120,43 +120,44 @@ async function waitForTransaction(tx: TransactionResponse) {
   }
 }
 
-export function claimErc20PermitHandlerWrapper(app: AppState) {
+export function claimErc20PermitHandlerWrapper(table: Element, permit: Permit, controlsIndex: number) {
   return async function claimErc20PermitHandler() {
     const signer = await connectWallet(); // we are re-testing the in-wallet rpc at this point
     if (!signer) {
-      buttonController.hideAll();
+      // If the signer is unavailable, we will disable button for each reward
+      buttonControllers.forEach((controller) => controller.hideAll());
       toaster.create("error", `Please connect your wallet to claim this reward.`);
       return;
     }
 
     app.signer = signer; // update this here to be sure it's set if it wasn't before
 
-    buttonController.hideMakeClaim();
-    buttonController.showLoader();
+    buttonControllers[controlsIndex].hideMakeClaim();
+    buttonControllers[controlsIndex].showLoader();
 
-    const isPermitClaimable = await checkPermitClaimability(app);
+    const isPermitClaimable = await checkPermitClaimability(permit, controlsIndex);
     if (!isPermitClaimable) return;
 
     const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, signer);
     if (!permit2Contract) return;
 
-    const tx = await transferFromPermit(permit2Contract, app);
+    const tx = await transferFromPermit(permit2Contract, app, controlsIndex);
     if (!tx) return;
 
-    const receipt = await waitForTransaction(tx);
+    const receipt = await waitForTransaction(tx, table, controlsIndex);
     if (!receipt) return;
 
     const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
     if (!isHashUpdated) return;
 
-    getMakeClaimButton().removeEventListener("click", claimErc20PermitHandler);
+    getMakeClaimButton(table).removeEventListener("click", claimErc20PermitHandler);
   };
 }
 
-async function checkPermitClaimable(app: AppState): Promise<boolean> {
+async function checkPermitClaimable(reward: Permit, index: number): Promise<boolean> {
   let isClaimed: boolean;
   try {
-    isClaimed = await isNonceClaimed(app);
+    isClaimed = await isNonceClaimed(reward);
   } catch (error: unknown) {
     console.error("Error in isNonceClaimed: ", error);
     return false;
@@ -164,12 +165,10 @@ async function checkPermitClaimable(app: AppState): Promise<boolean> {
 
   if (isClaimed) {
     toaster.create("error", `Your reward for this task has already been claimed.`);
-    buttonController.showViewClaim();
+    buttonControllers[index].showViewClaim();
     return false;
   }
 
-  const reward = app.reward;
-
   if (BigNumber.from(reward.deadline).lt(Math.floor(Date.now() / 1000))) {
     toaster.create("error", `This reward has expired.`);
     return false;
@@ -183,12 +182,12 @@ async function checkPermitClaimable(app: AppState): Promise<boolean> {
 
   if (!isSolvent) {
     toaster.create("error", `Not enough funds on funding wallet to collect this reward. Please let the financier know.`);
-    buttonController.hideMakeClaim();
+    buttonControllers[index].hideMakeClaim();
     return false;
   }
   if (!isAllowed) {
     toaster.create("error", `Not enough allowance on the funding wallet to collect this reward. Please let the financier know.`);
-    buttonController.hideMakeClaim();
+    buttonControllers[index].hideMakeClaim();
     return false;
   }
 
@@ -204,7 +203,7 @@ async function checkPermitClaimable(app: AppState): Promise<boolean> {
   const beneficiary = reward.beneficiary.toLowerCase();
   if (beneficiary !== user) {
     toaster.create("warning", `This reward is not for you.`);
-    buttonController.hideMakeClaim();
+    buttonControllers[index].hideMakeClaim();
     return false;
   }
 
@@ -216,18 +215,20 @@ export async function checkRenderMakeClaimControl(app: AppState) {
     const address = await app.signer?.getAddress();
     const user = address?.toLowerCase();
 
-    if (app.reward) {
-      const beneficiary = app.reward.beneficiary.toLowerCase();
-      if (beneficiary !== user) {
-        buttonController.hideMakeClaim();
-        return;
+    app.claims.forEach((claim, index) => {
+      if (claim) {
+        const beneficiary = claim.beneficiary.toLowerCase();
+        if (beneficiary !== user) {
+          buttonControllers[index].hideMakeClaim();
+          return;
+        }
       }
-    }
+    });
   } catch (error) {
     console.error("Error getting address from signer");
     console.error(error);
   }
-  buttonController.showMakeClaim();
+  buttonControllers.forEach((controller) => controller.showMakeClaim());
 }
 
 export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
@@ -235,54 +236,57 @@ export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
     const address = await app.signer?.getAddress();
     const user = address?.toLowerCase();
 
-    if (app.reward) {
-      const owner = app.reward.owner.toLowerCase();
-      if (owner !== user) {
-        buttonController.hideInvalidator();
-        return;
+    app.claims.forEach((claim, index) => {
+      if (claim) {
+        const owner = claim.owner.toLowerCase();
+        if (owner !== user) {
+          buttonControllers[index].hideInvalidator();
+          return;
+        }
+        buttonControllers[index].showInvalidator();
       }
-    }
+    });
   } catch (error) {
     console.error("Error getting address from signer");
     console.error(error);
   }
-  buttonController.showInvalidator();
 }
 
-const invalidateButton = document.getElementById("invalidator") as HTMLDivElement;
-
-invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
-  try {
-    const isClaimed = await isNonceClaimed(app);
-    if (isClaimed) {
-      toaster.create("error", `This reward has already been claimed or invalidated.`);
-      buttonController.hideInvalidator();
-      return;
-    }
+const invalidateButtons = document.getElementsByClassName("invalidator") as HTMLCollectionOf<Element>;
+for (let i = 0; i < invalidateButtons.length; i++) {
+  invalidateButtons[i].addEventListener("click", async function invalidateButtonClickHandler() {
+    try {
+      const isClaimed = await isNonceClaimed(app);
+      if (isClaimed) {
+        toaster.create("error", `This reward has already been claimed or invalidated.`);
+        buttonControllers[i].hideInvalidator();
+        return;
+      }
 
-    if (!app.signer) return;
-    await invalidateNonce(app.signer, app.reward.nonce);
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      const e = error as unknown as MetaMaskError;
-      console.error(e);
-      errorToast(e, e.reason);
-      return;
+      if (!app.signer) return;
+      await invalidateNonce(app.signer, app.claims[i].nonce);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        const e = error as unknown as MetaMaskError;
+        console.error(e);
+        errorToast(e, e.reason);
+        return;
+      }
     }
-  }
-  toaster.create("info", "Nonce invalidation transaction sent");
-  buttonController.hideInvalidator();
-});
+    toaster.create("info", "Nonce invalidation transaction sent");
+    buttonControllers[i].hideInvalidator();
+  });
+}
 
 //mimics https://github.com/Uniswap/permit2/blob/a7cd186948b44f9096a35035226d7d70b9e24eaf/src/SignatureTransfer.sol#L150
-async function isNonceClaimed(app: AppState): Promise<boolean> {
+async function isNonceClaimed(reward: Permit): Promise<boolean> {
   const provider = app.provider;
 
   const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, provider);
 
-  const { wordPos, bitPos } = nonceBitmap(BigNumber.from(app.reward.nonce));
+  const { wordPos, bitPos } = nonceBitmap(BigNumber.from(reward.nonce));
 
-  const bitmap = await permit2Contract.nonceBitmap(app.reward.owner, wordPos).catch((error: MetaMaskError) => {
+  const bitmap = await permit2Contract.nonceBitmap(reward.owner, wordPos).catch((error: MetaMaskError) => {
     console.error("Error in nonceBitmap method: ", error);
     throw error;
   });
@@ -312,12 +316,12 @@ function nonceBitmap(nonce: BigNumberish): { wordPos: BigNumber; bitPos: number
   return { wordPos, bitPos };
 }
 
-async function updatePermitTxHash(app: AppState, hash: string): Promise<boolean> {
+async function updatePermitTxHash(reward: ERC20Permit, hash: string): Promise<boolean> {
   const { error } = await supabase
     .from("permits")
     .update({ transaction: hash })
     // using only nonce in the condition as it's defined unique on db
-    .eq("nonce", app.reward.nonce.toString());
+    .eq("nonce", reward.nonce.toString());
 
   if (error !== null) {
     console.error(error);

From e1fe787d4f151392b22aa8abcb5a52fef172d255 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:54:17 +0200
Subject: [PATCH 14/49] chore: rewrite logic to accept reward

---
 static/scripts/rewards/web3/erc721-permit.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index d36658c6..4ba19eb4 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -3,10 +3,10 @@ import { ERC721Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
 import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
-import { buttonController, getMakeClaimButton, toaster } from "../toaster";
+import { buttonControllers, getMakeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
-export function claimErc721PermitHandler(reward: ERC721Permit) {
+export function claimErc721PermitHandler(table: Element, reward: ERC721Permit, controlsIndex: number) {
   return async function claimHandler() {
     const signer = await connectWallet();
     if (!signer) {
@@ -29,7 +29,7 @@ export function claimErc721PermitHandler(reward: ERC721Permit) {
       return;
     }
 
-    buttonController.showLoader();
+    buttonControllers[controlsIndex].showLoader();
     try {
       const nftContract = new ethers.Contract(reward.tokenAddress, nftRewardAbi, signer);
 
@@ -45,13 +45,13 @@ export function claimErc721PermitHandler(reward: ERC721Permit) {
       );
       toaster.create("info", `Transaction sent. Waiting for confirmation...`);
       const receipt = await tx.wait();
-      buttonController.hideLoader();
+      buttonControllers[controlsIndex].hideLoader();
       toaster.create("success", `Claim Complete.`);
-      buttonController.showViewClaim();
-      buttonController.hideMakeClaim();
+      buttonControllers[controlsIndex].showViewClaim();
+      buttonControllers[controlsIndex].hideMakeClaim();
       console.log(receipt.transactionHash); // @TODO: post to database
 
-      getMakeClaimButton().removeEventListener("click", claimHandler);
+      getMakeClaimButton(table).removeEventListener("click", claimHandler);
 
       // app.nextPermit();
       // renderTransaction().catch((error) => {

From bfbe6efb6819aa3aeef32114fcac8076401d12c4 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:56:15 +0200
Subject: [PATCH 15/49] chore: rewrite logic to multiple buttons

---
 static/scripts/rewards/web3/connect-wallet.ts               | 6 +++---
 static/scripts/rewards/web3/handle-if-on-correct-network.ts | 6 +++---
 static/scripts/rewards/web3/not-on-correct-network.ts       | 4 ++--
 static/scripts/rewards/web3/switch-network.ts               | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts
index 77b43623..c61f09e7 100644
--- a/static/scripts/rewards/web3/connect-wallet.ts
+++ b/static/scripts/rewards/web3/connect-wallet.ts
@@ -1,6 +1,6 @@
 import { JsonRpcSigner } from "@ethersproject/providers";
 import { ethers } from "ethers";
-import { buttonController, toaster } from "../toaster";
+import { buttonControllers, toaster } from "../toaster";
 import { app } from "../app-state";
 import { useHandler } from "../web3/use-rpc-handler";
 
@@ -40,7 +40,7 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
     const address = await signer.getAddress();
 
     if (!address) {
-      buttonController.hideAll();
+      buttonControllers.forEach((controller) => controller.hideAll());
       console.error("Wallet not connected");
       return null;
     }
@@ -192,7 +192,7 @@ function connectErrorHandler(error: unknown) {
         toaster.create("warning", "Please use a mobile-friendly Web3 browser such as MetaMask to collect this reward", Infinity);
       } else if (!window.ethereum) {
         toaster.create("warning", "Please use a web3 enabled browser to collect this reward.", Infinity);
-        buttonController.hideAll();
+        buttonControllers.forEach((controller) => controller.hideAll());
       }
     } else {
       toaster.create("error", error.message);
diff --git a/static/scripts/rewards/web3/handle-if-on-correct-network.ts b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
index a9d17400..b2d5e135 100644
--- a/static/scripts/rewards/web3/handle-if-on-correct-network.ts
+++ b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
@@ -1,9 +1,9 @@
-import { buttonController } from "../toaster";
+import { buttonControllers } from "../toaster";
 
 export function handleIfOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number) {
   if (desiredNetworkId === currentNetworkId) {
-    buttonController.showMakeClaim();
+    buttonControllers.forEach((controller) => controller.showMakeClaim());
   } else {
-    buttonController.hideMakeClaim();
+    buttonControllers.forEach((controller) => controller.hideMakeClaim());
   }
 }
diff --git a/static/scripts/rewards/web3/not-on-correct-network.ts b/static/scripts/rewards/web3/not-on-correct-network.ts
index d04a6334..d94b98fa 100644
--- a/static/scripts/rewards/web3/not-on-correct-network.ts
+++ b/static/scripts/rewards/web3/not-on-correct-network.ts
@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
 import { getNetworkName } from "@ubiquity-dao/rpc-handler";
-import { buttonController, toaster } from "../toaster";
+import { buttonControllers, toaster } from "../toaster";
 import { switchNetwork } from "./switch-network";
 
 export function notOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number, web3provider: ethers.providers.Web3Provider) {
@@ -12,7 +12,7 @@ export function notOnCorrectNetwork(currentNetworkId: number, desiredNetworkId:
     switchNetwork(web3provider, desiredNetworkId).catch((error) => {
       console.error(error);
       toaster.create("error", `Please switch to the ${networkName} network to claim this reward.`);
-      buttonController.hideAll();
+      buttonControllers.forEach((controller) => controller.hideAll());
     });
   }
 }
diff --git a/static/scripts/rewards/web3/switch-network.ts b/static/scripts/rewards/web3/switch-network.ts
index 98266c2f..1f22fe0a 100644
--- a/static/scripts/rewards/web3/switch-network.ts
+++ b/static/scripts/rewards/web3/switch-network.ts
@@ -1,11 +1,11 @@
 import { ethers } from "ethers";
 import { addNetwork } from "./add-network";
-import { buttonController } from "../toaster";
+import { buttonControllers } from "../toaster";
 
 export async function switchNetwork(provider: ethers.providers.Web3Provider, networkId: number): Promise<boolean> {
   try {
     await provider.send("wallet_switchEthereumChain", [{ chainId: "0x" + networkId.toString(16) }]);
-    buttonController.showMakeClaim();
+    buttonControllers.forEach((controller) => controller.showMakeClaim());
     return true;
   } catch (error: unknown) {
     // Add network if it doesn't exist.

From 105fdb5ea5e470710e4137d28b8c14e0ab4e8f71 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:56:30 +0200
Subject: [PATCH 16/49] chore: accept claim

---
 static/scripts/rewards/web3/use-rpc-handler.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/scripts/rewards/web3/use-rpc-handler.ts b/static/scripts/rewards/web3/use-rpc-handler.ts
index 97d3c2fe..d6bf7601 100644
--- a/static/scripts/rewards/web3/use-rpc-handler.ts
+++ b/static/scripts/rewards/web3/use-rpc-handler.ts
@@ -1,5 +1,5 @@
 import { RPCHandler } from "@ubiquity-dao/rpc-handler";
-import { AppState } from "../app-state";
+import { Permit } from "@ubiquibot/permit-generation/types";
 
 export function useHandler(networkId: number) {
   const config = {
@@ -16,8 +16,8 @@ export function useHandler(networkId: number) {
   return new RPCHandler(config);
 }
 
-export async function useRpcHandler(app: AppState) {
-  const networkId = app.networkId;
+export async function useRpcHandler(claim: Permit) {
+  const networkId = claim.networkId;
   if (!networkId) {
     throw new Error("Network ID not set");
   }

From 77ed6e879d5447c921ab667aaea587ee1567879d Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 8 Aug 2024 18:56:47 +0200
Subject: [PATCH 17/49] chore: remove pagination

---
 .../claim-rewards-pagination.ts               | 21 -------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 static/scripts/rewards/render-transaction/claim-rewards-pagination.ts

diff --git a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
deleted file mode 100644
index 37735ba5..00000000
--- a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { app } from "../app-state";
-import { getMakeClaimButton } from "../toaster";
-import { table } from "./read-claim-data-from-url";
-import { renderTransaction } from "./render-transaction";
-import { removeAllEventListeners } from "./utils";
-
-const nextTxButton = document.getElementById("nextTx");
-const prevTxButton = document.getElementById("prevTx");
-
-export function claimRewardsPagination(rewardsCount: HTMLElement) {
-  rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-  if (nextTxButton) nextTxButton.addEventListener("click", () => transactionHandler("next"));
-  if (prevTxButton) prevTxButton.addEventListener("click", () => transactionHandler("previous"));
-}
-
-function transactionHandler(direction: "next" | "previous") {
-  removeAllEventListeners(getMakeClaimButton()) as HTMLButtonElement;
-  direction === "next" ? app.nextPermit() : app.previousPermit();
-  table.setAttribute(`data-make-claim`, "error");
-  renderTransaction().catch(console.error);
-}

From 649b7560a030812fda4e6da27408176392e7857b Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 9 Aug 2024 12:50:12 +0200
Subject: [PATCH 18/49] fix: tests

---
 cypress/e2e/claim-portal-failure.cy.ts  | 18 +++++-----
 cypress/e2e/claim-portal-non-web3.cy.ts | 12 +++----
 cypress/e2e/claim-portal-success.cy.ts  | 45 +++++++++++++------------
 3 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/cypress/e2e/claim-portal-failure.cy.ts b/cypress/e2e/claim-portal-failure.cy.ts
index 96ab8dd4..ca3a7c0b 100644
--- a/cypress/e2e/claim-portal-failure.cy.ts
+++ b/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[class='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[class='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
     });
   });
diff --git a/cypress/e2e/claim-portal-non-web3.cy.ts b/cypress/e2e/claim-portal-non-web3.cy.ts
index c1a51c50..e5cd9bf0 100644
--- a/cypress/e2e/claim-portal-non-web3.cy.ts
+++ b/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");
 }
diff --git a/cypress/e2e/claim-portal-success.cy.ts b/cypress/e2e/claim-portal-success.cy.ts
index 1f715b3e..5f7850bf 100644
--- a/cypress/e2e/claim-portal-success.cy.ts
+++ b/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", " 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");
     });
   });
 });

From 6acaca072d7d2b479edeb594ce59a98055720580 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 9 Aug 2024 12:57:56 +0200
Subject: [PATCH 19/49] fix: accept any amount

---
 cypress/e2e/claim-portal-success.cy.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/claim-portal-success.cy.ts b/cypress/e2e/claim-portal-success.cy.ts
index 5f7850bf..362ce6f6 100644
--- a/cypress/e2e/claim-portal-success.cy.ts
+++ b/cypress/e2e/claim-portal-success.cy.ts
@@ -19,7 +19,10 @@ describe("Claims Portal Success", () => {
     it("should successfully claim a permit", () => {
       cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]').first().should("exist").and("include.text", " WXDAI");
+      cy.get('table[data-make-claim="ok"]')
+        .first()
+        .should("exist")
+        .and("match", /^[0-9]+(\.[0-9]+)? WXDAI$/);
 
       cy.get("button[class='make-claim']").first().invoke("click");
 

From b432f0d7cba074d5fd6e7ede824de1d26e340701 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Wed, 14 Aug 2024 20:21:10 +0200
Subject: [PATCH 20/49] fix: async bug

---
 .../render-transaction/insert-table-data.ts   |  7 +-
 .../read-claim-data-from-url.ts               | 12 ++--
 .../render-transaction/render-transaction.ts  | 23 ++++---
 static/scripts/rewards/toaster.ts             |  4 +-
 static/scripts/rewards/web3/add-network.ts    |  2 +
 static/scripts/rewards/web3/erc20-permit.ts   | 68 ++++++++++---------
 static/scripts/rewards/web3/erc721-permit.ts  | 10 +--
 .../web3/handle-if-on-correct-network.ts      |  5 +-
 .../rewards/web3/not-on-correct-network.ts    |  3 +-
 static/scripts/rewards/web3/switch-network.ts |  3 +-
 10 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/insert-table-data.ts b/static/scripts/rewards/render-transaction/insert-table-data.ts
index 23563df3..ef23e076 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -1,8 +1,8 @@
 import { ERC20Permit, ERC721Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
 import { app } from "../app-state";
-import { buttonControllers } from "../toaster";
 import { ButtonController } from "../button-controller";
+import { buttonControllers } from "../toaster";
 
 function shortenAddress(address: string): string {
   return `${address.slice(0, 10)}...${address.slice(-8)}`;
@@ -11,8 +11,7 @@ function shortenAddress(address: string): string {
 export function insertErc20PermitTableData(
   reward: ERC20Permit,
   table: Element,
-  treasury: { balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string },
-  index: number
+  treasury: { balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }
 ): Element {
   renderToFields(reward.beneficiary, reward.currentExplorerUrl, table);
   renderTokenFields(reward.tokenAddress, reward.currentExplorerUrl, table);
@@ -37,7 +36,7 @@ export function insertErc20PermitTableData(
 
   // We need to update the controls after inserting the detail rows
   const controls = table.querySelector(".controls") as HTMLDivElement;
-  buttonControllers[index] = new ButtonController(controls);
+  buttonControllers[table.id] = new ButtonController(controls);
   table.setAttribute(`data-make-claim-rendered`, "true");
 
   return table.querySelector(".reward-amount") as Element;
diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
index 2b5303a7..77e7e95f 100644
--- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
+++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
@@ -114,23 +114,25 @@ async function displayRewardsWithDetails() {
   if (!tableEl) return;
   tableEl.id = app.claims[0].nonce;
   const controls = tableEl.querySelector(".controls") as HTMLDivElement;
-  buttonControllers.push(new ButtonController(controls));
+  const buttonController = new ButtonController(controls);
+  buttonControllers[app.claims[0].nonce] = buttonController;
 
   await Promise.all(
-    app.claims.slice(1).map(async (claim, index) => {
+    app.claims.slice(1).map(async (claim) => {
       // Create a new copy of the table
       const newTable = tableEl.cloneNode(true) as Element;
       newTable.id = claim.nonce;
       tableEl.parentElement?.appendChild(newTable);
 
       const controls = newTable.querySelector(".controls") as HTMLDivElement;
-      buttonControllers.push(new ButtonController(controls));
-      await renderTransaction(claim, newTable, index + 1);
+      const buttonController = new ButtonController(controls);
+      buttonControllers[claim.nonce] = buttonController;
+      await renderTransaction(claim, newTable);
       displayRewardDetails(newTable);
     })
   );
 
   // The first claim's table is populated last
-  await renderTransaction(app.claims[0], tableEl, 0);
+  await renderTransaction(app.claims[0], tableEl);
   displayRewardDetails(tableEl);
 }
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index d786bdaf..89fc8d20 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -8,10 +8,11 @@ import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
 import { renderEnsName } from "./render-ens-name";
 import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
+import { ButtonController } from "../button-controller";
 
-export async function renderTransaction(claim: Permit, table: Element, buttonControllsIndex: number): Promise<boolean> {
+export async function renderTransaction(claim: Permit, table: Element): Promise<boolean> {
   if (!claim) {
-    buttonControllers[buttonControllsIndex].hideAll();
+    buttonControllers[claim.nonce].hideAll();
     console.log("No reward found");
     return false;
   }
@@ -27,7 +28,7 @@ export async function renderTransaction(claim: Permit, table: Element, buttonCon
     table.setAttribute(`data-additional-data-size`, "small");
 
     // insert tx data into table
-    const requestedAmountElement = insertErc20PermitTableData(claim, table, treasury, buttonControllsIndex);
+    const requestedAmountElement = insertErc20PermitTableData(claim, table, treasury);
 
     await renderTokenSymbol({
       tokenAddress: claim.tokenAddress,
@@ -38,21 +39,21 @@ export async function renderTransaction(claim: Permit, table: Element, buttonCon
       requestedAmountElement,
     });
 
-    const toElement = table.querySelector(`.reward-recipient`) as Element;
-    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
+    // const toElement = table.querySelector(`.reward-recipient`) as Element;
+    // renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
     if (app.provider) {
       checkRenderInvalidatePermitAdminControl(app).catch(console.error);
     }
 
     if (app.claimTxs[claim.nonce.toString()] !== undefined) {
-      buttonControllers[buttonControllsIndex].showViewClaim();
+      buttonControllers[claim.nonce].showViewClaim();
       const viewClaimButton = getViewClaimButton(table);
       viewClaimButton.addEventListener("click", () => window.open(`${claim.currentExplorerUrl}/tx/${app.claimTxs[claim.nonce.toString()]}`));
     } else if (window.ethereum) {
       // requires wallet connection to claim
-      buttonControllers[buttonControllsIndex].showMakeClaim();
-      getMakeClaimButton(table).addEventListener("click", claimErc20PermitHandlerWrapper(table, claim, buttonControllsIndex));
+      buttonControllers[claim.nonce].showMakeClaim();
+      getMakeClaimButton(table).addEventListener("click", claimErc20PermitHandlerWrapper(table, claim));
     }
 
     table.setAttribute(`data-make-claim`, "ok");
@@ -67,10 +68,10 @@ export async function renderTransaction(claim: Permit, table: Element, buttonCon
       requestedAmountElement,
     }).catch(console.error);
 
-    const toElement = document.getElementById(`reward-recipient`) as Element;
-    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
+    // const toElement = document.getElementById(`reward-recipient`) as Element;
+    // renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
-    getMakeClaimButton(table).addEventListener("click", claimErc721PermitHandler(table, claim, buttonControllsIndex));
+    getMakeClaimButton(table).addEventListener("click", claimErc721PermitHandler(table, claim, buttonControllers[claim.nonce]));
   }
 
   return true;
diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index 17230600..39cb813a 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -18,10 +18,10 @@ export function getViewClaimButton(table: Element) {
   return table.querySelector(".view-claim") as HTMLButtonElement;
 }
 const notifications = document.querySelector(".notifications") as HTMLUListElement;
-export const buttonControllers: ButtonController[] = [];
+export const buttonControllers: { [key: string]: ButtonController } = {};
 
 function createToast(meaning: keyof typeof toaster.icons, text: string, timeout: number = 5000) {
-  if (meaning != "info" && buttonControllers.length) buttonControllers.forEach((controller) => controller.hideLoader());
+  if (meaning != "info" && buttonControllers.length) Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideLoader());
   const toastDetails = {
     timer: timeout,
   } as {
diff --git a/static/scripts/rewards/web3/add-network.ts b/static/scripts/rewards/web3/add-network.ts
index c132f38c..ed9e6396 100644
--- a/static/scripts/rewards/web3/add-network.ts
+++ b/static/scripts/rewards/web3/add-network.ts
@@ -12,8 +12,10 @@ export async function addNetwork(provider: ethers.providers.Web3Provider, networ
         nativeCurrency: networkCurrencies[networkId],
       },
     ]);
+    console.log("here");
     return true;
   } catch (error: unknown) {
+    console.log(error);
     return false;
   }
 }
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index a6d356c5..ad88abc5 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -43,9 +43,9 @@ export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumbe
   }
 }
 
-async function checkPermitClaimability(reward: Permit, index: number): Promise<boolean> {
+async function checkPermitClaimability(reward: Permit): Promise<boolean> {
   try {
-    return await checkPermitClaimable(reward, index);
+    return await checkPermitClaimable(reward);
   } catch (error: unknown) {
     if (error instanceof Error) {
       const e = error as unknown as MetaMaskError;
@@ -53,11 +53,11 @@ async function checkPermitClaimability(reward: Permit, index: number): Promise<b
       errorToast(e, e.reason);
     }
   }
-  buttonControllers[index].hideMakeClaim();
+  buttonControllers[reward.nonce].hideMakeClaim();
   return false;
 }
 
-async function transferFromPermit(permit2Contract: Contract, reward: ERC20Permit, controlsIndex: number) {
+async function transferFromPermit(permit2Contract: Contract, reward: ERC20Permit) {
   const signer = app.signer;
   if (!signer) return null;
 
@@ -84,8 +84,8 @@ async function transferFromPermit(permit2Contract: Contract, reward: ERC20Permit
       if (e.code == "ACTION_REJECTED") {
         // Handle the user rejection case
         toaster.create("info", `Transaction was not sent because it was rejected by the user.`);
-        buttonControllers[controlsIndex].hideLoader();
-        buttonControllers[controlsIndex].showMakeClaim();
+        buttonControllers[reward.nonce].hideLoader();
+        buttonControllers[reward.nonce].showMakeClaim();
       } else {
         // Handle other errors
         console.error("Error in permitTransferFrom:", e);
@@ -96,7 +96,7 @@ async function transferFromPermit(permit2Contract: Contract, reward: ERC20Permit
   }
 }
 
-async function waitForTransaction(tx: TransactionResponse, table: Element, controlsIndex: number) {
+async function waitForTransaction(tx: TransactionResponse, table: Element) {
   try {
     const receipt = await tx.wait();
     const viewClaimButton = getViewClaimButton(table);
@@ -105,10 +105,9 @@ async function waitForTransaction(tx: TransactionResponse, table: Element, contr
     };
 
     toaster.create("success", `Claim Complete.`);
-    buttonControllers[controlsIndex].showViewClaim();
-    buttonControllers[controlsIndex].hideLoader();
-    buttonControllers[controlsIndex].hideMakeClaim();
-    console.log(receipt.transactionHash);
+    buttonControllers[table.id].showViewClaim();
+    buttonControllers[table.id].hideLoader();
+    buttonControllers[table.id].hideMakeClaim();
 
     return receipt;
   } catch (error: unknown) {
@@ -120,31 +119,37 @@ async function waitForTransaction(tx: TransactionResponse, table: Element, contr
   }
 }
 
-export function claimErc20PermitHandlerWrapper(table: Element, permit: Permit, controlsIndex: number) {
+export function claimErc20PermitHandlerWrapper(table: Element, permit: Permit) {
   return async function claimErc20PermitHandler() {
     const signer = await connectWallet(); // we are re-testing the in-wallet rpc at this point
     if (!signer) {
       // If the signer is unavailable, we will disable button for each reward
-      buttonControllers.forEach((controller) => controller.hideAll());
+      Object.keys(buttonControllers[table.id]).forEach((key) => buttonControllers[key].hideAll());
       toaster.create("error", `Please connect your wallet to claim this reward.`);
       return;
     }
 
     app.signer = signer; // update this here to be sure it's set if it wasn't before
 
-    buttonControllers[controlsIndex].hideMakeClaim();
-    buttonControllers[controlsIndex].showLoader();
+    buttonControllers[table.id].hideMakeClaim();
+    buttonControllers[table.id].showLoader();
 
-    const isPermitClaimable = await checkPermitClaimability(permit, controlsIndex);
-    if (!isPermitClaimable) return;
+    const isPermitClaimable = await checkPermitClaimability(permit);
+    if (!isPermitClaimable) {
+      buttonControllers[table.id].hideLoader();
+      return;
+    }
 
     const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, signer);
-    if (!permit2Contract) return;
+    if (!permit2Contract) {
+      buttonControllers[table.id].hideLoader();
+      return;
+    }
 
-    const tx = await transferFromPermit(permit2Contract, app, controlsIndex);
+    const tx = await transferFromPermit(permit2Contract, permit);
     if (!tx) return;
 
-    const receipt = await waitForTransaction(tx, table, controlsIndex);
+    const receipt = await waitForTransaction(tx, table);
     if (!receipt) return;
 
     const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
@@ -154,7 +159,7 @@ export function claimErc20PermitHandlerWrapper(table: Element, permit: Permit, c
   };
 }
 
-async function checkPermitClaimable(reward: Permit, index: number): Promise<boolean> {
+async function checkPermitClaimable(reward: Permit): Promise<boolean> {
   let isClaimed: boolean;
   try {
     isClaimed = await isNonceClaimed(reward);
@@ -165,7 +170,7 @@ async function checkPermitClaimable(reward: Permit, index: number): Promise<bool
 
   if (isClaimed) {
     toaster.create("error", `Your reward for this task has already been claimed.`);
-    buttonControllers[index].showViewClaim();
+    buttonControllers[reward.nonce].showViewClaim();
     return false;
   }
 
@@ -176,18 +181,17 @@ async function checkPermitClaimable(reward: Permit, index: number): Promise<bool
 
   const { balance, allowance } = await fetchTreasury(reward);
   const permitted = BigNumber.from(reward.amount);
-
   const isSolvent = balance.gte(permitted);
   const isAllowed = allowance.gte(permitted);
 
   if (!isSolvent) {
     toaster.create("error", `Not enough funds on funding wallet to collect this reward. Please let the financier know.`);
-    buttonControllers[index].hideMakeClaim();
+    buttonControllers[reward.nonce].hideMakeClaim();
     return false;
   }
   if (!isAllowed) {
     toaster.create("error", `Not enough allowance on the funding wallet to collect this reward. Please let the financier know.`);
-    buttonControllers[index].hideMakeClaim();
+    buttonControllers[reward.nonce].hideMakeClaim();
     return false;
   }
 
@@ -203,7 +207,7 @@ async function checkPermitClaimable(reward: Permit, index: number): Promise<bool
   const beneficiary = reward.beneficiary.toLowerCase();
   if (beneficiary !== user) {
     toaster.create("warning", `This reward is not for you.`);
-    buttonControllers[index].hideMakeClaim();
+    buttonControllers[reward.nonce].hideMakeClaim();
     return false;
   }
 
@@ -215,11 +219,11 @@ export async function checkRenderMakeClaimControl(app: AppState) {
     const address = await app.signer?.getAddress();
     const user = address?.toLowerCase();
 
-    app.claims.forEach((claim, index) => {
+    app.claims.forEach((claim) => {
       if (claim) {
         const beneficiary = claim.beneficiary.toLowerCase();
         if (beneficiary !== user) {
-          buttonControllers[index].hideMakeClaim();
+          buttonControllers[claim.nonce].hideMakeClaim();
           return;
         }
       }
@@ -228,7 +232,7 @@ export async function checkRenderMakeClaimControl(app: AppState) {
     console.error("Error getting address from signer");
     console.error(error);
   }
-  buttonControllers.forEach((controller) => controller.showMakeClaim());
+  Object.keys(buttonControllers).forEach((key) => buttonControllers[key].showMakeClaim());
 }
 
 export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
@@ -236,14 +240,14 @@ export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
     const address = await app.signer?.getAddress();
     const user = address?.toLowerCase();
 
-    app.claims.forEach((claim, index) => {
+    app.claims.forEach((claim) => {
       if (claim) {
         const owner = claim.owner.toLowerCase();
         if (owner !== user) {
-          buttonControllers[index].hideInvalidator();
+          buttonControllers[claim.nonce].hideInvalidator();
           return;
         }
-        buttonControllers[index].showInvalidator();
+        buttonControllers[claim.nonce].showInvalidator();
       }
     });
   } catch (error) {
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index 4ba19eb4..59c7d29d 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -6,7 +6,7 @@ import { app } from "../app-state";
 import { buttonControllers, getMakeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
-export function claimErc721PermitHandler(table: Element, reward: ERC721Permit, controlsIndex: number) {
+export function claimErc721PermitHandler(table: Element, reward: ERC721Permit) {
   return async function claimHandler() {
     const signer = await connectWallet();
     if (!signer) {
@@ -29,7 +29,7 @@ export function claimErc721PermitHandler(table: Element, reward: ERC721Permit, c
       return;
     }
 
-    buttonControllers[controlsIndex].showLoader();
+    buttonControllers[table.id].showLoader();
     try {
       const nftContract = new ethers.Contract(reward.tokenAddress, nftRewardAbi, signer);
 
@@ -45,10 +45,10 @@ export function claimErc721PermitHandler(table: Element, reward: ERC721Permit, c
       );
       toaster.create("info", `Transaction sent. Waiting for confirmation...`);
       const receipt = await tx.wait();
-      buttonControllers[controlsIndex].hideLoader();
+      buttonControllers[table.id].hideLoader();
       toaster.create("success", `Claim Complete.`);
-      buttonControllers[controlsIndex].showViewClaim();
-      buttonControllers[controlsIndex].hideMakeClaim();
+      buttonControllers[table.id].showViewClaim();
+      buttonControllers[table.id].hideMakeClaim();
       console.log(receipt.transactionHash); // @TODO: post to database
 
       getMakeClaimButton(table).removeEventListener("click", claimHandler);
diff --git a/static/scripts/rewards/web3/handle-if-on-correct-network.ts b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
index b2d5e135..170ee336 100644
--- a/static/scripts/rewards/web3/handle-if-on-correct-network.ts
+++ b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
@@ -1,9 +1,10 @@
 import { buttonControllers } from "../toaster";
 
 export function handleIfOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number) {
+  // Show or hide claim action for each permit
   if (desiredNetworkId === currentNetworkId) {
-    buttonControllers.forEach((controller) => controller.showMakeClaim());
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].showMakeClaim());
   } else {
-    buttonControllers.forEach((controller) => controller.hideMakeClaim());
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideMakeClaim());
   }
 }
diff --git a/static/scripts/rewards/web3/not-on-correct-network.ts b/static/scripts/rewards/web3/not-on-correct-network.ts
index d94b98fa..7f396060 100644
--- a/static/scripts/rewards/web3/not-on-correct-network.ts
+++ b/static/scripts/rewards/web3/not-on-correct-network.ts
@@ -12,7 +12,8 @@ export function notOnCorrectNetwork(currentNetworkId: number, desiredNetworkId:
     switchNetwork(web3provider, desiredNetworkId).catch((error) => {
       console.error(error);
       toaster.create("error", `Please switch to the ${networkName} network to claim this reward.`);
-      buttonControllers.forEach((controller) => controller.hideAll());
+      // Display error for each permit
+      Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
     });
   }
 }
diff --git a/static/scripts/rewards/web3/switch-network.ts b/static/scripts/rewards/web3/switch-network.ts
index 1f22fe0a..7e64c09f 100644
--- a/static/scripts/rewards/web3/switch-network.ts
+++ b/static/scripts/rewards/web3/switch-network.ts
@@ -5,7 +5,8 @@ import { buttonControllers } from "../toaster";
 export async function switchNetwork(provider: ethers.providers.Web3Provider, networkId: number): Promise<boolean> {
   try {
     await provider.send("wallet_switchEthereumChain", [{ chainId: "0x" + networkId.toString(16) }]);
-    buttonControllers.forEach((controller) => controller.showMakeClaim());
+    // Display make claim for each permit
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].showMakeClaim());
     return true;
   } catch (error: unknown) {
     // Add network if it doesn't exist.

From ec339478a877f87790c82015d2f0c38717f17b2c Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Wed, 14 Aug 2024 20:22:09 +0200
Subject: [PATCH 21/49] fix: iterate over keys

---
 static/scripts/rewards/web3/verify-current-network.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts
index 4ca8f00d..50a7620f 100644
--- a/static/scripts/rewards/web3/verify-current-network.ts
+++ b/static/scripts/rewards/web3/verify-current-network.ts
@@ -6,7 +6,8 @@ import { notOnCorrectNetwork } from "./not-on-correct-network";
 // verifyCurrentNetwork checks if the user is on the correct network and displays an error if not
 export async function verifyCurrentNetwork(desiredNetworkId: number) {
   if (!window.ethereum) {
-    buttonControllers.forEach((controller) => controller.hideAll());
+    // Display error for each permit
+    Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
     return;
   }
 

From c9c4f351c5b5c07adf6e2f7b7dcbab4da3d89090 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Wed, 14 Aug 2024 20:24:27 +0200
Subject: [PATCH 22/49] chore: remove log

---
 static/scripts/rewards/web3/add-network.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/static/scripts/rewards/web3/add-network.ts b/static/scripts/rewards/web3/add-network.ts
index ed9e6396..c132f38c 100644
--- a/static/scripts/rewards/web3/add-network.ts
+++ b/static/scripts/rewards/web3/add-network.ts
@@ -12,10 +12,8 @@ export async function addNetwork(provider: ethers.providers.Web3Provider, networ
         nativeCurrency: networkCurrencies[networkId],
       },
     ]);
-    console.log("here");
     return true;
   } catch (error: unknown) {
-    console.log(error);
     return false;
   }
 }

From ad020d3d12437cb8beca57e6ff7b7970d0ba33aa Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Wed, 14 Aug 2024 20:25:48 +0200
Subject: [PATCH 23/49] fix: uncomment code

---
 .../rewards/render-transaction/render-transaction.ts   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 89fc8d20..d7429b46 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -39,8 +39,8 @@ export async function renderTransaction(claim: Permit, table: Element): Promise<
       requestedAmountElement,
     });
 
-    // const toElement = table.querySelector(`.reward-recipient`) as Element;
-    // renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
+    const toElement = table.querySelector(`.reward-recipient`) as Element;
+    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
     if (app.provider) {
       checkRenderInvalidatePermitAdminControl(app).catch(console.error);
@@ -68,10 +68,10 @@ export async function renderTransaction(claim: Permit, table: Element): Promise<
       requestedAmountElement,
     }).catch(console.error);
 
-    // const toElement = document.getElementById(`reward-recipient`) as Element;
-    // renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
+    const toElement = document.getElementById(`reward-recipient`) as Element;
+    renderEnsName(claim, { element: toElement, address: claim.beneficiary, networkId: claim.networkId as number }).catch(console.error);
 
-    getMakeClaimButton(table).addEventListener("click", claimErc721PermitHandler(table, claim, buttonControllers[claim.nonce]));
+    getMakeClaimButton(table).addEventListener("click", claimErc721PermitHandler(table, claim));
   }
 
   return true;

From a4fc803dd5e5030491e39dc412e1dc1fbd1d9c9c Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Wed, 14 Aug 2024 20:35:33 +0200
Subject: [PATCH 24/49] fix: iteration bugs

---
 static/scripts/rewards/web3/connect-wallet.ts | 4 ++--
 static/scripts/rewards/web3/erc20-permit.ts   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts
index c61f09e7..0c988aba 100644
--- a/static/scripts/rewards/web3/connect-wallet.ts
+++ b/static/scripts/rewards/web3/connect-wallet.ts
@@ -40,7 +40,7 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
     const address = await signer.getAddress();
 
     if (!address) {
-      buttonControllers.forEach((controller) => controller.hideAll());
+      Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
       console.error("Wallet not connected");
       return null;
     }
@@ -192,7 +192,7 @@ function connectErrorHandler(error: unknown) {
         toaster.create("warning", "Please use a mobile-friendly Web3 browser such as MetaMask to collect this reward", Infinity);
       } else if (!window.ethereum) {
         toaster.create("warning", "Please use a web3 enabled browser to collect this reward.", Infinity);
-        buttonControllers.forEach((controller) => controller.hideAll());
+        Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
       }
     } else {
       toaster.create("error", error.message);
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index ad88abc5..4cb2226b 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -124,7 +124,7 @@ export function claimErc20PermitHandlerWrapper(table: Element, permit: Permit) {
     const signer = await connectWallet(); // we are re-testing the in-wallet rpc at this point
     if (!signer) {
       // If the signer is unavailable, we will disable button for each reward
-      Object.keys(buttonControllers[table.id]).forEach((key) => buttonControllers[key].hideAll());
+      Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
       toaster.create("error", `Please connect your wallet to claim this reward.`);
       return;
     }

From 15f04b3ea980969b2bc33b7061bfe6a1418ef38e Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Wed, 14 Aug 2024 20:41:30 +0200
Subject: [PATCH 25/49] revert: test

---
 cypress/e2e/claim-portal-success.cy.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/cypress/e2e/claim-portal-success.cy.ts b/cypress/e2e/claim-portal-success.cy.ts
index 362ce6f6..b9cb6263 100644
--- a/cypress/e2e/claim-portal-success.cy.ts
+++ b/cypress/e2e/claim-portal-success.cy.ts
@@ -19,10 +19,7 @@ describe("Claims Portal Success", () => {
     it("should successfully claim a permit", () => {
       cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get('table[data-make-claim="ok"]')
-        .first()
-        .should("exist")
-        .and("match", /^[0-9]+(\.[0-9]+)? WXDAI$/);
+      cy.get('table[data-make-claim="ok"]').first().should("exist").and("include.text", "337888.4 WXDAI");
 
       cy.get("button[class='make-claim']").first().invoke("click");
 

From 3e4b66bf92424ef51a2c1dde110203d0c173b611 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Wed, 14 Aug 2024 20:57:05 +0200
Subject: [PATCH 26/49] fix: invalidator initialization

---
 static/scripts/rewards/web3/erc20-permit.ts | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 4cb2226b..c3b82fca 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -256,19 +256,25 @@ export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
   }
 }
 
-const invalidateButtons = document.getElementsByClassName("invalidator") as HTMLCollectionOf<Element>;
-for (let i = 0; i < invalidateButtons.length; i++) {
-  invalidateButtons[i].addEventListener("click", async function invalidateButtonClickHandler() {
+for (let i = 0; i < app.claims.length; i++) {
+  const claim = app.claims[i];
+  const table = document.getElementById(claim.nonce) as HTMLElement;
+  const invalidateButton = table.querySelector(".invalidateButton");
+  if (!invalidateButton) {
+    console.log("Error initializing invalidator");
+    break;
+  }
+  invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
     try {
-      const isClaimed = await isNonceClaimed(app);
+      const isClaimed = await isNonceClaimed(claim);
       if (isClaimed) {
         toaster.create("error", `This reward has already been claimed or invalidated.`);
-        buttonControllers[i].hideInvalidator();
+        buttonControllers[claim.nonce].hideInvalidator();
         return;
       }
 
       if (!app.signer) return;
-      await invalidateNonce(app.signer, app.claims[i].nonce);
+      await invalidateNonce(app.signer, claim.nonce);
     } catch (error: unknown) {
       if (error instanceof Error) {
         const e = error as unknown as MetaMaskError;
@@ -278,7 +284,7 @@ for (let i = 0; i < invalidateButtons.length; i++) {
       }
     }
     toaster.create("info", "Nonce invalidation transaction sent");
-    buttonControllers[i].hideInvalidator();
+    buttonControllers[claim.nonce].hideInvalidator();
   });
 }
 

From 78b28aadc8806b2e02f4b1a6dc0e639cba811160 Mon Sep 17 00:00:00 2001
From: pbkompasz <47194071+pbkompasz@users.noreply.github.com>
Date: Fri, 16 Aug 2024 13:41:36 +0200
Subject: [PATCH 27/49] Update cypress/e2e/claim-portal-failure.cy.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: アレクサンダー.eth <4975670+0x4007@users.noreply.github.com>
---
 cypress/e2e/claim-portal-failure.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/claim-portal-failure.cy.ts b/cypress/e2e/claim-portal-failure.cy.ts
index ca3a7c0b..159e8053 100644
--- a/cypress/e2e/claim-portal-failure.cy.ts
+++ b/cypress/e2e/claim-portal-failure.cy.ts
@@ -20,7 +20,7 @@ describe("Claims Portal Failures", () => {
     it("should handle no connected signer", () => {
       cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get("button[class='make-claim']").first().should("be.visible").click();
+      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");

From d6c182eddac3304d802f7d6ad88111695456f85e Mon Sep 17 00:00:00 2001
From: pbkompasz <47194071+pbkompasz@users.noreply.github.com>
Date: Fri, 16 Aug 2024 13:41:52 +0200
Subject: [PATCH 28/49] Update cypress/e2e/claim-portal-failure.cy.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: アレクサンダー.eth <4975670+0x4007@users.noreply.github.com>
---
 cypress/e2e/claim-portal-failure.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/claim-portal-failure.cy.ts b/cypress/e2e/claim-portal-failure.cy.ts
index 159e8053..d20cd09e 100644
--- a/cypress/e2e/claim-portal-failure.cy.ts
+++ b/cypress/e2e/claim-portal-failure.cy.ts
@@ -48,7 +48,7 @@ describe("Claims Portal Failures", () => {
     it("should handle feedback for a failed wallet provider transaction", () => {
       cy.get(".additional-details", { timeout: 15000 }).first().should("be.visible").invoke("click");
 
-      cy.get("button[class='make-claim']").first().should("be.visible").click();
+      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

From f36cb7002cc77baccb449c151d9e08d9f2bb6a33 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 16 Aug 2024 13:47:54 +0200
Subject: [PATCH 29/49] chore: format html

---
 static/index.html | 349 +++++++++++++++++++++++-----------------------
 1 file changed, 173 insertions(+), 176 deletions(-)

diff --git a/static/index.html b/static/index.html
index 23b2ecd2..a62749d2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,61 +1,65 @@
 <!doctype html>
 <html>
-  <head>
-    <link rel="icon" href="favicon.svg" type="image/x-icon" />
-    <link href="styles/rewards/pay.css" rel="stylesheet" />
-    <link href="styles/rewards/background.css" rel="stylesheet" />
-    <link href="styles/toast.css" rel="stylesheet" />
-    <link href="styles/rewards/claim-table.css" rel="stylesheet" />
-    <link href="styles/rewards/media-queries.css" rel="stylesheet" />
-    <link href="styles/rewards/light-mode.css" rel="stylesheet" />
-    <link rel="canonical" href="https://pay.ubq.fi" />
-    <meta charset="utf-8" />
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="description" content="Ubiquity Rewards" />
-    <meta name="robots" content="index,follow" />
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:creator" content="@UbiquityDAO" />
-    <meta name="twitter:description" content="Ubiquity Rewards" />
-    <meta name="twitter:title" content="Ubiquity Rewards" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
-    <meta property="og:description" content="Ubiquity Rewards" />
-    <meta property="og:site_name" content="Ubiquity Rewards" />
-    <meta property="og:title" content="Ubiquity Rewards" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://dao.ubq.fi" />
-    <meta property="twitter:domain" content="dao.ubq.fi" />
-    <meta property="twitter:url" content="https://dao.ubq.fi" />
-    <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>
-      <div class="gradient"></div>
-      <div id="grid"></div>
-    </background>
-    <main>
-      <header>
-        <a href="https://ubq.fi/">
-          <div id="logo">
-            <div id="logo-icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
-                <path
-                  d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
-                ></path>
-              </svg>
-            </div>
-            <div id="logo-text">
-              <span>Ubiquity</span>
-              <span>Rewards</span>
-            </div>
+
+<head>
+  <link rel="icon" href="favicon.svg" type="image/x-icon" />
+  <link href="styles/rewards/pay.css" rel="stylesheet" />
+  <link href="styles/rewards/background.css" rel="stylesheet" />
+  <link href="styles/toast.css" rel="stylesheet" />
+  <link href="styles/rewards/claim-table.css" rel="stylesheet" />
+  <link href="styles/rewards/media-queries.css" rel="stylesheet" />
+  <link href="styles/rewards/light-mode.css" rel="stylesheet" />
+  <link rel="canonical" href="https://pay.ubq.fi" />
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="description" content="Ubiquity Rewards" />
+  <meta name="robots" content="index,follow" />
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:creator" content="@UbiquityDAO" />
+  <meta name="twitter:description" content="Ubiquity Rewards" />
+  <meta name="twitter:title" content="Ubiquity Rewards" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
+  <meta property="og:description" content="Ubiquity Rewards" />
+  <meta property="og:site_name" content="Ubiquity Rewards" />
+  <meta property="og:title" content="Ubiquity Rewards" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://dao.ubq.fi" />
+  <meta property="twitter:domain" content="dao.ubq.fi" />
+  <meta property="twitter:url" content="https://dao.ubq.fi" />
+  <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>
+    <div class="gradient"></div>
+    <div id="grid"></div>
+  </background>
+  <main>
+    <header>
+      <a href="https://ubq.fi/">
+        <div id="logo">
+          <div id="logo-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
+              <path
+                d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z">
+              </path>
+            </svg>
           </div>
-        </a>
-      </header>
-      <div>
-      <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
+          <div id="logo-text">
+            <span>Ubiquity</span>
+            <span>Rewards</span>
+          </div>
+        </div>
+      </a>
+    </header>
+    <div>
+      <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false"
+        data-make-claim="error">
         <thead>
           <tr>
             <th>
@@ -67,128 +71,121 @@
           </tr>
         </thead>
         <tbody>
-            <tr class="amount detail">
-              <th>
-                <div>Amount</div>
-              </th>
-              <td class="reward-amount">
+          <tr class="amount detail">
+            <th>
+              <div>Amount</div>
+            </th>
+            <td class="reward-amount">
+              <div class="loading-message">Loading</div>
+            </td>
+          </tr>
+          <tr class="token detail">
+            <th>
+              <div>Token</div>
+            </th>
+            <td class="reward-token">
+              <span class="full">
+                <div></div>
+              </span>
+              <span class="short">
                 <div class="loading-message">Loading</div>
-              </td>
-            </tr>
-            <tr class="token detail">
-              <th>
-                <div>Token</div>
-              </th>
-              <td class="reward-token">
-                <span class="full">
-                  <div></div>
-                </span>
-                <span class="short">
-                  <div class="loading-message">Loading</div>
-                </span>
-              </td>
-            </tr>
-            <tr class="to detail">
-              <th>
-                <div>For</div>
-              </th>
-              <td class="reward-recipient">
-                <span class="full">
-                  <div></div>
-                </span>
-                <span class="short">
-                  <div class="loading-message">Loading</div>
-                </span>
-                <span class="ens">
-                  <div></div>
-                </span>
-              </td>
-            </tr>
-            <tr class="additional-details-border">
-              <th>
-                <div>
-                  <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
-                        d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z"
-                      />
-                    </svg>
-                    <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                      <path
-                        d="M356-173.847 313.847-216 480-382.153 646.153-216 604-173.847l-124-124-124 124Zm124-404L313.847-744 356-786.153l124 124 124-124L646.153-744 480-577.847Z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </th>
-              <td>
-                <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
-                  <button class="claim-loader">
-                    <svg
-                      version="1.1"
-                      id="L9"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                      width="33.33"
-                      height="33.33"
-                      viewBox="0 0 100 100"
-                      enable-background="new 0 0 0 0"
-                      xml:space="preserve"
-                    >
-                      <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 class="claiming-message">Claiming</div>
-                  </button>
-                  <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
-                        d="M252.309-180.001q-30.308 0-51.308-21t-21-51.308V-360H240v107.691q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h455.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463V-360h59.999v107.691q0 30.308-21 51.308t-51.308 21H252.309ZM480-335.386 309.233-506.153l42.153-43.383 98.615 98.615v-336.001h59.998v336.001l98.615-98.615 42.153 43.383L480-335.386Z"
-                      />
-                    </svg>
-                  </button>
+              </span>
+            </td>
+          </tr>
+          <tr class="to detail">
+            <th>
+              <div>For</div>
+            </th>
+            <td class="reward-recipient">
+              <span class="full">
+                <div></div>
+              </span>
+              <span class="short">
+                <div class="loading-message">Loading</div>
+              </span>
+              <span class="ens">
+                <div></div>
+              </span>
+            </td>
+          </tr>
+          <tr class="additional-details-border">
+            <th>
+              <div>
+                <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
+                      d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z" />
+                  </svg>
+                  <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
+                    width="24">
+                    <path
+                      d="M356-173.847 313.847-216 480-382.153 646.153-216 604-173.847l-124-124-124 124Zm124-404L313.847-744 356-786.153l124 124 124-124L646.153-744 480-577.847Z" />
+                  </svg>
+                </button>
+              </div>
+            </th>
+            <td>
+              <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                <button class="claim-loader">
+                  <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink" width="33.33" height="33.33" viewBox="0 0 100 100"
+                    enable-background="new 0 0 0 0" xml:space="preserve">
+                    <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 class="claiming-message">Claiming</div>
+                </button>
+                <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
+                      d="M252.309-180.001q-30.308 0-51.308-21t-21-51.308V-360H240v107.691q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h455.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463V-360h59.999v107.691q0 30.308-21 51.308t-51.308 21H252.309ZM480-335.386 309.233-506.153l42.153-43.383 98.615 98.615v-336.001h59.998v336.001l98.615-98.615 42.153 43.383L480-335.386Z" />
+                  </svg>
+                </button>
 
-                  <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
-                        d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h252.305V-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h535.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-252.305h59.999v252.305q0 30.308-21 51.308t-51.308 21H212.309Zm176.46-206.615-42.153-42.153L717.847-760H560v-59.999h259.999V-560H760v-157.847L388.769-346.616Z"
-                      />
-                    </svg>
-                  </button>
+                <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
+                      d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h252.305V-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h535.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-252.305h59.999v252.305q0 30.308-21 51.308t-51.308 21H212.309Zm176.46-206.615-42.153-42.153L717.847-760H560v-59.999h259.999V-560H760v-157.847L388.769-346.616Z" />
+                  </svg>
+                </button>
 
-                  <button class="invalidator">
-                    <div>Void</div>
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                      <path
-                        d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <button class="invalidator">
+                  <div>Void</div>
+                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                    <path
+                      d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z" />
+                  </svg>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <footer>
+      <div id="build">
+        <a target="_blank" rel="noopener noreferrer"></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>
-    <ul class="notifications"></ul>
-    <script src="out/init.js" type="application/javascript"></script>
-    <link href="styles/proxima.css" rel="stylesheet" />
-  </body>
-</html>
+      <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>
+  <ul class="notifications"></ul>
+  <script src="out/init.js" type="application/javascript"></script>
+  <link href="styles/proxima.css" rel="stylesheet" />
+</body>
+
+</html>
\ No newline at end of file

From 6780445fa9ff1f18726d41683eb514e3826a367e Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 16 Aug 2024 13:48:19 +0200
Subject: [PATCH 30/49] chore: cleanup imports

---
 static/scripts/rewards/render-transaction/render-ens-name.ts    | 2 +-
 .../scripts/rewards/render-transaction/render-token-symbol.ts   | 1 +
 static/scripts/rewards/render-transaction/render-transaction.ts | 1 -
 static/scripts/rewards/web3/erc20-permit.ts                     | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/render-ens-name.ts b/static/scripts/rewards/render-transaction/render-ens-name.ts
index da444d83..97440420 100644
--- a/static/scripts/rewards/render-transaction/render-ens-name.ts
+++ b/static/scripts/rewards/render-transaction/render-ens-name.ts
@@ -1,5 +1,5 @@
-import { app } from "../app-state";
 import { Permit } from "@ubiquibot/permit-generation/types";
+import { app } from "../app-state";
 import { ensLookup } from "../cirip/ens-lookup";
 
 type EnsParams =
diff --git a/static/scripts/rewards/render-transaction/render-token-symbol.ts b/static/scripts/rewards/render-transaction/render-token-symbol.ts
index f4ab43c7..52ce5cce 100644
--- a/static/scripts/rewards/render-transaction/render-token-symbol.ts
+++ b/static/scripts/rewards/render-transaction/render-token-symbol.ts
@@ -1,6 +1,7 @@
 import { BigNumberish, ethers, utils } from "ethers";
 import { erc20Abi } from "../abis/erc20-abi";
 import { app } from "../app-state";
+
 export async function renderTokenSymbol({
   table,
   requestedAmountElement,
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index d7429b46..d8aa9619 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -8,7 +8,6 @@ import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
 import { renderEnsName } from "./render-ens-name";
 import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
-import { ButtonController } from "../button-controller";
 
 export async function renderTransaction(claim: Permit, table: Element): Promise<boolean> {
   if (!claim) {
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index c3b82fca..295a6873 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -1,9 +1,9 @@
 import { JsonRpcSigner, TransactionResponse } from "@ethersproject/providers";
 import { Permit, ERC20Permit } from "@ubiquibot/permit-generation/types";
+import { permit2Address } from "@ubiquity-dao/rpc-handler";
 import { BigNumber, BigNumberish, Contract, ethers } from "ethers";
 import { erc20Abi, permit2Abi } from "../abis";
 import { app, AppState } from "../app-state";
-import { permit2Address } from "@ubiquity-dao/rpc-handler";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
 import { MetaMaskError, buttonControllers, errorToast, getMakeClaimButton, toaster, getViewClaimButton } from "../toaster";
 import { connectWallet } from "./connect-wallet";

From 33511b1007691e132aef99122450454daecf0517 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 16 Aug 2024 14:27:17 +0200
Subject: [PATCH 31/49] fix: mobile styling

---
 static/styles/rewards/claim-table.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 003a093d..533ef25e 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -21,6 +21,11 @@ table {
   max-width: 563px;
   width: 100%;
 }
+@media only screen and (max-width: 600px) {
+  table {
+    max-width: 90%;
+  }
+}
 table a:hover,
 table a:hover > div {
   color: #fff;
@@ -318,9 +323,6 @@ thead {
   overflow: hidden;
   /* box-shadow: 0 12px 64px #00000010; */
 }
-table * {
-  text-wrap: nowrap;
-}
 @keyframes thead-fade-in {
   0% {
     opacity: 0;

From 5429e2b137c252be0e6a5c7c64909fd62a3752f4 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 16 Aug 2024 14:28:26 +0200
Subject: [PATCH 32/49] chore: format

---
 static/index.html                     | 368 +++++++++++++-------------
 static/styles/rewards/claim-table.css |   9 +-
 2 files changed, 192 insertions(+), 185 deletions(-)

diff --git a/static/index.html b/static/index.html
index a62749d2..6c63ef1c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,191 +1,195 @@
 <!doctype html>
 <html>
+  <head>
+    <link rel="icon" href="favicon.svg" type="image/x-icon" />
+    <link href="styles/rewards/pay.css" rel="stylesheet" />
+    <link href="styles/rewards/background.css" rel="stylesheet" />
+    <link href="styles/toast.css" rel="stylesheet" />
+    <link href="styles/rewards/claim-table.css" rel="stylesheet" />
+    <link href="styles/rewards/media-queries.css" rel="stylesheet" />
+    <link href="styles/rewards/light-mode.css" rel="stylesheet" />
+    <link rel="canonical" href="https://pay.ubq.fi" />
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="description" content="Ubiquity Rewards" />
+    <meta name="robots" content="index,follow" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:creator" content="@UbiquityDAO" />
+    <meta name="twitter:description" content="Ubiquity Rewards" />
+    <meta name="twitter:title" content="Ubiquity Rewards" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
+    <meta property="og:description" content="Ubiquity Rewards" />
+    <meta property="og:site_name" content="Ubiquity Rewards" />
+    <meta property="og:title" content="Ubiquity Rewards" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://dao.ubq.fi" />
+    <meta property="twitter:domain" content="dao.ubq.fi" />
+    <meta property="twitter:url" content="https://dao.ubq.fi" />
+    <title>Ubiquity Rewards | Ubiquity DAO</title>
+    <!-- icons from: https://fonts.google.com/icons weight: 300 optical-size: 24 -->
+  </head>
 
-<head>
-  <link rel="icon" href="favicon.svg" type="image/x-icon" />
-  <link href="styles/rewards/pay.css" rel="stylesheet" />
-  <link href="styles/rewards/background.css" rel="stylesheet" />
-  <link href="styles/toast.css" rel="stylesheet" />
-  <link href="styles/rewards/claim-table.css" rel="stylesheet" />
-  <link href="styles/rewards/media-queries.css" rel="stylesheet" />
-  <link href="styles/rewards/light-mode.css" rel="stylesheet" />
-  <link rel="canonical" href="https://pay.ubq.fi" />
-  <meta charset="utf-8" />
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <meta name="description" content="Ubiquity Rewards" />
-  <meta name="robots" content="index,follow" />
-  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
-  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:creator" content="@UbiquityDAO" />
-  <meta name="twitter:description" content="Ubiquity Rewards" />
-  <meta name="twitter:title" content="Ubiquity Rewards" />
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
-  <meta property="og:description" content="Ubiquity Rewards" />
-  <meta property="og:site_name" content="Ubiquity Rewards" />
-  <meta property="og:title" content="Ubiquity Rewards" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://dao.ubq.fi" />
-  <meta property="twitter:domain" content="dao.ubq.fi" />
-  <meta property="twitter:url" content="https://dao.ubq.fi" />
-  <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>
-    <div class="gradient"></div>
-    <div id="grid"></div>
-  </background>
-  <main>
-    <header>
-      <a href="https://ubq.fi/">
-        <div id="logo">
-          <div id="logo-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
-              <path
-                d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z">
-              </path>
-            </svg>
-          </div>
-          <div id="logo-text">
-            <span>Ubiquity</span>
-            <span>Rewards</span>
+  <body>
+    <background>
+      <div class="gradient"></div>
+      <div class="gradient"></div>
+      <div id="grid"></div>
+    </background>
+    <main>
+      <header>
+        <a href="https://ubq.fi/">
+          <div id="logo">
+            <div id="logo-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
+                <path
+                  d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
+                ></path>
+              </svg>
+            </div>
+            <div id="logo-text">
+              <span>Ubiquity</span>
+              <span>Rewards</span>
+            </div>
           </div>
-        </div>
-      </a>
-    </header>
-    <div>
-      <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false"
-        data-make-claim="error">
-        <thead>
-          <tr>
-            <th>
-              <div>Notice</div>
-            </th>
-            <td>
-              <div class="loading-message">Loading</div>
-            </td>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="amount detail">
-            <th>
-              <div>Amount</div>
-            </th>
-            <td class="reward-amount">
-              <div class="loading-message">Loading</div>
-            </td>
-          </tr>
-          <tr class="token detail">
-            <th>
-              <div>Token</div>
-            </th>
-            <td class="reward-token">
-              <span class="full">
-                <div></div>
-              </span>
-              <span class="short">
+        </a>
+      </header>
+      <div>
+        <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
+          <thead>
+            <tr>
+              <th>
+                <div>Notice</div>
+              </th>
+              <td>
                 <div class="loading-message">Loading</div>
-              </span>
-            </td>
-          </tr>
-          <tr class="to detail">
-            <th>
-              <div>For</div>
-            </th>
-            <td class="reward-recipient">
-              <span class="full">
-                <div></div>
-              </span>
-              <span class="short">
+              </td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="amount detail">
+              <th>
+                <div>Amount</div>
+              </th>
+              <td class="reward-amount">
                 <div class="loading-message">Loading</div>
-              </span>
-              <span class="ens">
-                <div></div>
-              </span>
-            </td>
-          </tr>
-          <tr class="additional-details-border">
-            <th>
-              <div>
-                <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
-                      d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z" />
-                  </svg>
-                  <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960"
-                    width="24">
-                    <path
-                      d="M356-173.847 313.847-216 480-382.153 646.153-216 604-173.847l-124-124-124 124Zm124-404L313.847-744 356-786.153l124 124 124-124L646.153-744 480-577.847Z" />
-                  </svg>
-                </button>
-              </div>
-            </th>
-            <td>
-              <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
-                <button class="claim-loader">
-                  <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink" width="33.33" height="33.33" viewBox="0 0 100 100"
-                    enable-background="new 0 0 0 0" xml:space="preserve">
-                    <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 class="claiming-message">Claiming</div>
-                </button>
-                <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
-                      d="M252.309-180.001q-30.308 0-51.308-21t-21-51.308V-360H240v107.691q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h455.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463V-360h59.999v107.691q0 30.308-21 51.308t-51.308 21H252.309ZM480-335.386 309.233-506.153l42.153-43.383 98.615 98.615v-336.001h59.998v336.001l98.615-98.615 42.153 43.383L480-335.386Z" />
-                  </svg>
-                </button>
+              </td>
+            </tr>
+            <tr class="token detail">
+              <th>
+                <div>Token</div>
+              </th>
+              <td class="reward-token">
+                <span class="full">
+                  <div></div>
+                </span>
+                <span class="short">
+                  <div class="loading-message">Loading</div>
+                </span>
+              </td>
+            </tr>
+            <tr class="to detail">
+              <th>
+                <div>For</div>
+              </th>
+              <td class="reward-recipient">
+                <span class="full">
+                  <div></div>
+                </span>
+                <span class="short">
+                  <div class="loading-message">Loading</div>
+                </span>
+                <span class="ens">
+                  <div></div>
+                </span>
+              </td>
+            </tr>
+            <tr class="additional-details-border">
+              <th>
+                <div>
+                  <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
+                        d="M480-134.616 313.078-301.539l43.383-43.383L480-221.384l123.539-123.538 43.383 43.383L480-134.616Zm-123.539-478L313.078-656 480-822.922 646.922-656l-43.383 43.384L480-736.155 356.461-612.616Z"
+                      />
+                    </svg>
+                    <svg class="closer" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                      <path
+                        d="M356-173.847 313.847-216 480-382.153 646.153-216 604-173.847l-124-124-124 124Zm124-404L313.847-744 356-786.153l124 124 124-124L646.153-744 480-577.847Z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </th>
+              <td>
+                <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                  <button class="claim-loader">
+                    <svg
+                      version="1.1"
+                      id="L9"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      width="33.33"
+                      height="33.33"
+                      viewBox="0 0 100 100"
+                      enable-background="new 0 0 0 0"
+                      xml:space="preserve"
+                    >
+                      <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 class="claiming-message">Claiming</div>
+                  </button>
+                  <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
+                        d="M252.309-180.001q-30.308 0-51.308-21t-21-51.308V-360H240v107.691q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h455.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463V-360h59.999v107.691q0 30.308-21 51.308t-51.308 21H252.309ZM480-335.386 309.233-506.153l42.153-43.383 98.615 98.615v-336.001h59.998v336.001l98.615-98.615 42.153 43.383L480-335.386Z"
+                      />
+                    </svg>
+                  </button>
 
-                <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
-                      d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h252.305V-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h535.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-252.305h59.999v252.305q0 30.308-21 51.308t-51.308 21H212.309Zm176.46-206.615-42.153-42.153L717.847-760H560v-59.999h259.999V-560H760v-157.847L388.769-346.616Z" />
-                  </svg>
-                </button>
+                  <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
+                        d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h252.305V-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h535.382q4.616 0 8.463-3.846 3.846-3.847 3.846-8.463v-252.305h59.999v252.305q0 30.308-21 51.308t-51.308 21H212.309Zm176.46-206.615-42.153-42.153L717.847-760H560v-59.999h259.999V-560H760v-157.847L388.769-346.616Z"
+                      />
+                    </svg>
+                  </button>
 
-                <button class="invalidator">
-                  <div>Void</div>
-                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-                    <path
-                      d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z" />
-                  </svg>
-                </button>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <footer>
-      <div id="build">
-        <a target="_blank" rel="noopener noreferrer"></a>
+                  <button class="invalidator">
+                    <div>Void</div>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                      <path
+                        d="M256-213.847 213.847-256l224-224-224-224L256-746.153l224 224 224-224L746.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </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>
-  <ul class="notifications"></ul>
-  <script src="out/init.js" type="application/javascript"></script>
-  <link href="styles/proxima.css" rel="stylesheet" />
-</body>
-
-</html>
\ No newline at end of file
+      <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>
+    <ul class="notifications"></ul>
+    <script src="out/init.js" type="application/javascript"></script>
+    <link href="styles/proxima.css" rel="stylesheet" />
+  </body>
+</html>
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 533ef25e..afc66882 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -96,7 +96,8 @@ table td div {
 table td div svg ~ div {
   width: unset;
 }
-table tr:first-of-type > *, table .amount > * {
+table tr:first-of-type > *,
+table .amount > * {
   padding-top: 24px;
 }
 table tr:last-child td div > div {
@@ -189,7 +190,7 @@ table[data-details-visible="true"] .detail,
 table[data-details-visible="false"] .additional-detail {
   opacity: 0;
   pointer-events: all;
-  visibility:collapse ;
+  visibility: collapse;
 }
 table[data-contract-loaded] .token {
   display: none;
@@ -333,7 +334,9 @@ thead {
 }
 
 tr {
-  transition: visibility 0s, opacity 0.5s linear;
+  transition:
+    visibility 0s,
+    opacity 0.5s linear;
 }
 
 thead {

From 3476e49fd1c678cd3d31e2fb53f7c51e5bad02a3 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Fri, 16 Aug 2024 14:29:51 +0200
Subject: [PATCH 33/49] fix: rem -> px

---
 static/styles/rewards/claim-table.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index afc66882..78044560 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -14,7 +14,7 @@ main > div {
   justify-content: center;
   align-items: center;
   width: 100%;
-  gap: 4rem;
+  gap: 64px;
 }
 table {
   border-collapse: collapse;

From 80be2e464c12060931fede05c6aa1ef1787b132f Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 19 Aug 2024 13:40:36 +0200
Subject: [PATCH 34/49] fix: use method to get current explorer

---
 .../rewards/render-transaction/insert-table-data.ts | 13 ++++++++++---
 .../render-transaction/render-transaction.ts        |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/insert-table-data.ts b/static/scripts/rewards/render-transaction/insert-table-data.ts
index ef23e076..2a539dcc 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -19,7 +19,14 @@ export function insertErc20PermitTableData(
     [
       {
         name: "From",
-        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.owner}">${reward.owner}</a>`,
+        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.owner}">
+                  <span class="full">
+                  <div>${reward.owner}</div>
+        </span>
+        <span class="short">
+                  <div>${shortenAddress(reward.owner)}</div>
+        </span>
+                </a>`,
       },
       {
         name: "Expiry",
@@ -44,8 +51,8 @@ export function insertErc20PermitTableData(
 
 export function insertErc721PermitTableData(reward: ERC721Permit, table: Element): Element {
   const requestedAmountElement = table.querySelector(".reward-amount") as Element;
-  renderToFields(reward.beneficiary, reward.currentExplorerUrl, table);
-  renderTokenFields(reward.tokenAddress, reward.currentExplorerUrl, table);
+  renderToFields(reward.beneficiary, app.getCurrentExplorerUrl(reward), table);
+  renderTokenFields(reward.tokenAddress, app.getCurrentExplorerUrl(reward), table);
   const { GITHUB_REPOSITORY_NAME, GITHUB_CONTRIBUTION_TYPE, GITHUB_ISSUE_ID, GITHUB_ORGANIZATION_NAME, GITHUB_USERNAME } = reward.erc721Request?.metadata || {};
   renderDetailsFields(
     [
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index d8aa9619..9b3ba9b6 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -48,7 +48,7 @@ export async function renderTransaction(claim: Permit, table: Element): Promise<
     if (app.claimTxs[claim.nonce.toString()] !== undefined) {
       buttonControllers[claim.nonce].showViewClaim();
       const viewClaimButton = getViewClaimButton(table);
-      viewClaimButton.addEventListener("click", () => window.open(`${claim.currentExplorerUrl}/tx/${app.claimTxs[claim.nonce.toString()]}`));
+      viewClaimButton.addEventListener("click", () => window.open(`${app.getCurrentExplorerUrl(claim)}/tx/${app.claimTxs[claim.nonce.toString()]}`));
     } else if (window.ethereum) {
       // requires wallet connection to claim
       buttonControllers[claim.nonce].showMakeClaim();

From b3dfa3db99534ff07dd8d0eae5819b9b978339a0 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 19 Aug 2024 13:41:09 +0200
Subject: [PATCH 35/49] fix: use proper types

---
 static/scripts/rewards/web3/erc20-permit.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 295a6873..835b8e70 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -1,5 +1,5 @@
 import { JsonRpcSigner, TransactionResponse } from "@ethersproject/providers";
-import { Permit, ERC20Permit } from "@ubiquibot/permit-generation/types";
+import { PermitReward, ERC20PermitReward } from "@ubiquibot/permit-generation/types";
 import { permit2Address } from "@ubiquity-dao/rpc-handler";
 import { BigNumber, BigNumberish, Contract, ethers } from "ethers";
 import { erc20Abi, permit2Abi } from "../abis";
@@ -8,7 +8,7 @@ import { supabase } from "../render-transaction/read-claim-data-from-url";
 import { MetaMaskError, buttonControllers, errorToast, getMakeClaimButton, toaster, getViewClaimButton } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
-export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
+export async function fetchTreasury(permit: PermitReward): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
   let balance: BigNumber, allowance: BigNumber, decimals: number, symbol: string;
 
   try {
@@ -43,7 +43,7 @@ export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumbe
   }
 }
 
-async function checkPermitClaimability(reward: Permit): Promise<boolean> {
+async function checkPermitClaimability(reward: PermitReward): Promise<boolean> {
   try {
     return await checkPermitClaimable(reward);
   } catch (error: unknown) {
@@ -57,7 +57,7 @@ async function checkPermitClaimability(reward: Permit): Promise<boolean> {
   return false;
 }
 
-async function transferFromPermit(permit2Contract: Contract, reward: ERC20Permit) {
+async function transferFromPermit(permit2Contract: Contract, reward: ERC20PermitReward) {
   const signer = app.signer;
   if (!signer) return null;
 
@@ -119,7 +119,7 @@ async function waitForTransaction(tx: TransactionResponse, table: Element) {
   }
 }
 
-export function claimErc20PermitHandlerWrapper(table: Element, permit: Permit) {
+export function claimErc20PermitHandlerWrapper(table: Element, permit: PermitReward) {
   return async function claimErc20PermitHandler() {
     const signer = await connectWallet(); // we are re-testing the in-wallet rpc at this point
     if (!signer) {
@@ -152,14 +152,14 @@ export function claimErc20PermitHandlerWrapper(table: Element, permit: Permit) {
     const receipt = await waitForTransaction(tx, table);
     if (!receipt) return;
 
-    const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
+    const isHashUpdated = await updatePermitTxHash(permit, receipt.transactionHash);
     if (!isHashUpdated) return;
 
     getMakeClaimButton(table).removeEventListener("click", claimErc20PermitHandler);
   };
 }
 
-async function checkPermitClaimable(reward: Permit): Promise<boolean> {
+async function checkPermitClaimable(reward: PermitReward): Promise<boolean> {
   let isClaimed: boolean;
   try {
     isClaimed = await isNonceClaimed(reward);
@@ -289,7 +289,7 @@ for (let i = 0; i < app.claims.length; i++) {
 }
 
 //mimics https://github.com/Uniswap/permit2/blob/a7cd186948b44f9096a35035226d7d70b9e24eaf/src/SignatureTransfer.sol#L150
-async function isNonceClaimed(reward: Permit): Promise<boolean> {
+async function isNonceClaimed(reward: PermitReward): Promise<boolean> {
   const provider = app.provider;
 
   const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, provider);
@@ -326,7 +326,7 @@ function nonceBitmap(nonce: BigNumberish): { wordPos: BigNumber; bitPos: number
   return { wordPos, bitPos };
 }
 
-async function updatePermitTxHash(reward: ERC20Permit, hash: string): Promise<boolean> {
+async function updatePermitTxHash(reward: ERC20PermitReward, hash: string): Promise<boolean> {
   const { error } = await supabase
     .from("permits")
     .update({ transaction: hash })

From c56f70fcf0cdfa6c90aed4be1aad8fb5a5601482 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 19 Aug 2024 14:00:40 +0200
Subject: [PATCH 36/49] fix: styling

---
 static/styles/rewards/claim-table.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 78044560..8350aab0 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -25,6 +25,11 @@ table {
   table {
     max-width: 90%;
   }
+  @media screen and (orientation: portrait) {
+    table {
+      max-width: 100%;
+    }
+  }
 }
 table a:hover,
 table a:hover > div {

From d842bb78c1072e080681251d2f305b18767c1d44 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 19 Aug 2024 22:07:56 +0200
Subject: [PATCH 37/49] chore: use correct types

---
 .../render-transaction/insert-table-data.ts       | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/insert-table-data.ts b/static/scripts/rewards/render-transaction/insert-table-data.ts
index 2a539dcc..7b96d3a1 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -1,4 +1,4 @@
-import { ERC20Permit, ERC721Permit } from "@ubiquibot/permit-generation/types";
+import { ERC20PermitReward, ERC721PermitReward } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
 import { app } from "../app-state";
 import { ButtonController } from "../button-controller";
@@ -9,7 +9,7 @@ function shortenAddress(address: string): string {
 }
 
 export function insertErc20PermitTableData(
-  reward: ERC20Permit,
+  reward: ERC20PermitReward,
   table: Element,
   treasury: { balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }
 ): Element {
@@ -19,14 +19,7 @@ export function insertErc20PermitTableData(
     [
       {
         name: "From",
-        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.owner}">
-                  <span class="full">
-                  <div>${reward.owner}</div>
-        </span>
-        <span class="short">
-                  <div>${shortenAddress(reward.owner)}</div>
-        </span>
-                </a>`,
+        value: `<a target="_blank" rel="noopener noreferrer" href="${app.getCurrentExplorerUrl(reward)}/address/${reward.owner}">${reward.owner}</a>`,
       },
       {
         name: "Expiry",
@@ -49,7 +42,7 @@ export function insertErc20PermitTableData(
   return table.querySelector(".reward-amount") as Element;
 }
 
-export function insertErc721PermitTableData(reward: ERC721Permit, table: Element): Element {
+export function insertErc721PermitTableData(reward: ERC721PermitReward, table: Element): Element {
   const requestedAmountElement = table.querySelector(".reward-amount") as Element;
   renderToFields(reward.beneficiary, app.getCurrentExplorerUrl(reward), table);
   renderTokenFields(reward.tokenAddress, app.getCurrentExplorerUrl(reward), table);

From fd5744395a5059b0857c32840a63e249348a2ee1 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 19 Aug 2024 22:09:33 +0200
Subject: [PATCH 38/49] feat: network for each permit

---
 .../read-claim-data-from-url.ts                   | 14 --------------
 .../render-transaction/render-token-symbol.ts     | 15 +++++++++++++++
 .../render-transaction/render-transaction.ts      | 11 +++++------
 static/scripts/rewards/web3/connect-wallet.ts     |  9 ++++-----
 static/scripts/rewards/web3/erc20-permit.ts       |  9 ++++++++-
 static/scripts/rewards/web3/erc721-permit.ts      |  4 +++-
 6 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
index 77e7e95f..4e4d68d6 100644
--- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
+++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
@@ -3,9 +3,7 @@ import { decodePermits } from "@ubiquibot/permit-generation/handlers";
 import { Permit } from "@ubiquibot/permit-generation/types";
 import { app, AppState } from "../app-state";
 import { buttonControllers, toaster } from "../toaster";
-import { connectWallet } from "../web3/connect-wallet";
 import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl } from "../web3/erc20-permit";
-import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { setClaimMessage } from "./set-claim-message";
 import { useRpcHandler } from "../web3/use-rpc-handler";
 import { renderTransaction } from "./render-transaction";
@@ -42,12 +40,6 @@ export async function readClaimDataFromUrl(app: AppState) {
     }
   }
 
-  try {
-    app.signer = await connectWallet();
-  } catch (error) {
-    /* empty */
-  }
-
   try {
     // this would throw on mobile browsers & non-web3 browsers
     window?.ethereum.on("accountsChanged", () => {
@@ -62,12 +54,6 @@ export async function readClaimDataFromUrl(app: AppState) {
   }
 
   await displayRewardsWithDetails();
-
-  if (app.claims[0].networkId !== null) {
-    await verifyCurrentNetwork(app.claims[0].networkId);
-  } else {
-    throw new Error("Network ID is null");
-  }
 }
 
 async function getClaimedTxs(app: AppState): Promise<Record<string, string>> {
diff --git a/static/scripts/rewards/render-transaction/render-token-symbol.ts b/static/scripts/rewards/render-transaction/render-token-symbol.ts
index 52ce5cce..9c14a966 100644
--- a/static/scripts/rewards/render-transaction/render-token-symbol.ts
+++ b/static/scripts/rewards/render-transaction/render-token-symbol.ts
@@ -1,6 +1,8 @@
 import { BigNumberish, ethers, utils } from "ethers";
+import { PermitReward } from "@ubiquibot/permit-generation/types";
 import { erc20Abi } from "../abis/erc20-abi";
 import { app } from "../app-state";
+import { useRpcHandler } from "../web3/use-rpc-handler";
 
 export async function renderTokenSymbol({
   table,
@@ -9,6 +11,7 @@ export async function renderTokenSymbol({
   ownerAddress,
   amount,
   explorerUrl,
+  claim,
 }: {
   table: Element;
   requestedAmountElement: Element;
@@ -16,7 +19,13 @@ export async function renderTokenSymbol({
   ownerAddress: string;
   amount: BigNumberish;
   explorerUrl: string;
+  claim: PermitReward;
 }): Promise<void> {
+  // If the reward is on a different chain we need a new provider
+  if (app.provider.network.chainId !== claim.networkId) {
+    console.log("Different network. Switching");
+    app.provider = await useRpcHandler(claim);
+  }
   const contract = new ethers.Contract(tokenAddress, erc20Abi, app.provider);
 
   let symbol, decimals;
@@ -58,12 +67,18 @@ export async function renderNftSymbol({
   requestedAmountElement,
   tokenAddress,
   explorerUrl,
+  claim,
 }: {
   table: Element;
   requestedAmountElement: Element;
   tokenAddress: string;
   explorerUrl: string;
+  claim: PermitReward;
 }): Promise<void> {
+  if (app.provider.network.chainId !== claim.networkId) {
+    console.log("Different network. Switching");
+    app.provider = await useRpcHandler(claim);
+  }
   const contract = new ethers.Contract(tokenAddress, erc20Abi, app.provider);
 
   let symbol: string;
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 9b3ba9b6..32f54d4b 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -1,15 +1,14 @@
-import { ERC20Permit, Permit, TokenType } from "@ubiquibot/permit-generation/types";
+import { ERC20PermitReward, PermitReward, TokenType } from "@ubiquibot/permit-generation/types";
 import { networkExplorers } from "@ubiquity-dao/rpc-handler";
 import { app } from "../app-state";
 import { buttonControllers, getMakeClaimButton, getViewClaimButton } from "../toaster";
 import { checkRenderInvalidatePermitAdminControl, claimErc20PermitHandlerWrapper, fetchTreasury } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
-import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
 import { renderEnsName } from "./render-ens-name";
 import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
 
-export async function renderTransaction(claim: Permit, table: Element): Promise<boolean> {
+export async function renderTransaction(claim: PermitReward, table: Element): Promise<boolean> {
   if (!claim) {
     buttonControllers[claim.nonce].hideAll();
     console.log("No reward found");
@@ -20,8 +19,6 @@ export async function renderTransaction(claim: Permit, table: Element): Promise<
     throw new Error("Missing transaction table");
   }
 
-  verifyCurrentNetwork(claim.networkId).catch(console.error);
-
   if (isErc20Permit(claim)) {
     const treasury = await fetchTreasury(claim);
     table.setAttribute(`data-additional-data-size`, "small");
@@ -36,6 +33,7 @@ export async function renderTransaction(claim: Permit, table: Element): Promise<
       explorerUrl: networkExplorers[claim.networkId],
       table,
       requestedAmountElement,
+      claim,
     });
 
     const toElement = table.querySelector(`.reward-recipient`) as Element;
@@ -65,6 +63,7 @@ export async function renderTransaction(claim: Permit, table: Element): Promise<
       explorerUrl: networkExplorers[claim.networkId],
       table,
       requestedAmountElement,
+      claim,
     }).catch(console.error);
 
     const toElement = document.getElementById(`reward-recipient`) as Element;
@@ -76,6 +75,6 @@ export async function renderTransaction(claim: Permit, table: Element): Promise<
   return true;
 }
 
-function isErc20Permit(permit: Permit): permit is ERC20Permit {
+function isErc20Permit(permit: PermitReward): permit is ERC20PermitReward {
   return permit.tokenType === TokenType.ERC20;
 }
diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts
index 0c988aba..075e0c7c 100644
--- a/static/scripts/rewards/web3/connect-wallet.ts
+++ b/static/scripts/rewards/web3/connect-wallet.ts
@@ -24,7 +24,7 @@ function mobileCheck() {
   return checkMobile(navigator.userAgent || navigator.vendor || (window as unknown as { opera: string }).opera);
 }
 
-export async function connectWallet(): Promise<JsonRpcSigner | null> {
+export async function connectWallet(networkId: number): Promise<JsonRpcSigner | null> {
   try {
     const wallet = new ethers.providers.Web3Provider(window.ethereum);
 
@@ -54,7 +54,7 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
         // Their wallet provider will auto-prompt due to the call succeeding
         toaster.create("error", "We have detected potential issues with your in-wallet RPC. Accept the request to replace it with a more reliable one.");
       }
-      await addFastestHandlerNetwork(wallet);
+      await addFastestHandlerNetwork(wallet, networkId);
     }
 
     return signer;
@@ -63,9 +63,8 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
   }
 }
 
-async function addFastestHandlerNetwork(wallet: ethers.providers.Web3Provider) {
-  const networkId = app.networkId ?? (await wallet.getNetwork()).chainId;
-  const handler = useHandler(networkId);
+async function addFastestHandlerNetwork(wallet: ethers.providers.Web3Provider, networkId: number) {
+  const handler = useHandler(networkId ?? (await wallet.getNetwork()).chainId);
   let provider = await handler.getFastestRpcProvider();
   const appUrl = app.provider?.connection?.url;
 
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 835b8e70..c8d43681 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -7,11 +7,17 @@ import { app, AppState } from "../app-state";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
 import { MetaMaskError, buttonControllers, errorToast, getMakeClaimButton, toaster, getViewClaimButton } from "../toaster";
 import { connectWallet } from "./connect-wallet";
+import { verifyCurrentNetwork } from "./verify-current-network";
+import { useRpcHandler } from "./use-rpc-handler";
 
 export async function fetchTreasury(permit: PermitReward): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
   let balance: BigNumber, allowance: BigNumber, decimals: number, symbol: string;
 
   try {
+    if (app.provider.network.chainId !== permit.networkId) {
+      console.log("Different network. Switching");
+      app.provider = await useRpcHandler(permit);
+    }
     const tokenAddress = permit.tokenAddress;
     const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, app.provider);
 
@@ -121,7 +127,8 @@ async function waitForTransaction(tx: TransactionResponse, table: Element) {
 
 export function claimErc20PermitHandlerWrapper(table: Element, permit: PermitReward) {
   return async function claimErc20PermitHandler() {
-    const signer = await connectWallet(); // we are re-testing the in-wallet rpc at this point
+    verifyCurrentNetwork(permit.networkId).catch(console.error);
+    const signer = await connectWallet(permit.networkId); // we are re-testing the in-wallet rpc at this point
     if (!signer) {
       // If the signer is unavailable, we will disable button for each reward
       Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index 59c7d29d..e0fd6d0c 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -5,10 +5,12 @@ import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
 import { buttonControllers, getMakeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
+import { verifyCurrentNetwork } from "./verify-current-network";
 
 export function claimErc721PermitHandler(table: Element, reward: ERC721Permit) {
   return async function claimHandler() {
-    const signer = await connectWallet();
+    verifyCurrentNetwork(reward.networkId).catch(console.error);
+    const signer = await connectWallet(reward.networkId);
     if (!signer) {
       return;
     }

From 0aff6f897e4a51893433a4f6f497db91d2772241 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 19 Aug 2024 22:20:09 +0200
Subject: [PATCH 39/49] fix: use correct provider

---
 static/scripts/rewards/web3/erc20-permit.ts  | 4 ++++
 static/scripts/rewards/web3/erc721-permit.ts | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index c8d43681..e8e7c16b 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -128,6 +128,10 @@ async function waitForTransaction(tx: TransactionResponse, table: Element) {
 export function claimErc20PermitHandlerWrapper(table: Element, permit: PermitReward) {
   return async function claimErc20PermitHandler() {
     verifyCurrentNetwork(permit.networkId).catch(console.error);
+    if (app.provider.network.chainId !== permit.networkId) {
+      console.log("Different network. Switching");
+      app.provider = await useRpcHandler(permit);
+    }
     const signer = await connectWallet(permit.networkId); // we are re-testing the in-wallet rpc at this point
     if (!signer) {
       // If the signer is unavailable, we will disable button for each reward
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index e0fd6d0c..6e99489e 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -6,10 +6,15 @@ import { app } from "../app-state";
 import { buttonControllers, getMakeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 import { verifyCurrentNetwork } from "./verify-current-network";
+import { useRpcHandler } from "./use-rpc-handler";
 
 export function claimErc721PermitHandler(table: Element, reward: ERC721Permit) {
   return async function claimHandler() {
     verifyCurrentNetwork(reward.networkId).catch(console.error);
+    if (app.provider.network.chainId !== reward.networkId) {
+      console.log("Different network. Switching");
+      app.provider = await useRpcHandler(reward);
+    }
     const signer = await connectWallet(reward.networkId);
     if (!signer) {
       return;

From 26f6db0c15d5f946eccdf8687a6bf1cf383ca2f7 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 19 Aug 2024 22:21:49 +0200
Subject: [PATCH 40/49] fix: connect then verify

---
 static/scripts/rewards/web3/erc20-permit.ts  | 2 +-
 static/scripts/rewards/web3/erc721-permit.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index e8e7c16b..5a9cefb3 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -127,12 +127,12 @@ async function waitForTransaction(tx: TransactionResponse, table: Element) {
 
 export function claimErc20PermitHandlerWrapper(table: Element, permit: PermitReward) {
   return async function claimErc20PermitHandler() {
-    verifyCurrentNetwork(permit.networkId).catch(console.error);
     if (app.provider.network.chainId !== permit.networkId) {
       console.log("Different network. Switching");
       app.provider = await useRpcHandler(permit);
     }
     const signer = await connectWallet(permit.networkId); // we are re-testing the in-wallet rpc at this point
+    verifyCurrentNetwork(permit.networkId).catch(console.error);
     if (!signer) {
       // If the signer is unavailable, we will disable button for each reward
       Object.keys(buttonControllers).forEach((key) => buttonControllers[key].hideAll());
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index 6e99489e..4a159bbf 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -10,12 +10,12 @@ import { useRpcHandler } from "./use-rpc-handler";
 
 export function claimErc721PermitHandler(table: Element, reward: ERC721Permit) {
   return async function claimHandler() {
-    verifyCurrentNetwork(reward.networkId).catch(console.error);
     if (app.provider.network.chainId !== reward.networkId) {
       console.log("Different network. Switching");
       app.provider = await useRpcHandler(reward);
     }
     const signer = await connectWallet(reward.networkId);
+    verifyCurrentNetwork(reward.networkId).catch(console.error);
     if (!signer) {
       return;
     }

From f8869db373033331a4b11b2a47badae6222a7b13 Mon Sep 17 00:00:00 2001
From: pbkompasz <47194071+pbkompasz@users.noreply.github.com>
Date: Thu, 22 Aug 2024 19:11:58 +0200
Subject: [PATCH 41/49] Update static/scripts/rewards/web3/erc20-permit.ts

Co-authored-by: Keyrxng <106303466+Keyrxng@users.noreply.github.com>
---
 static/scripts/rewards/web3/erc20-permit.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 5a9cefb3..706dd039 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -270,7 +270,7 @@ export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
 for (let i = 0; i < app.claims.length; i++) {
   const claim = app.claims[i];
   const table = document.getElementById(claim.nonce) as HTMLElement;
-  const invalidateButton = table.querySelector(".invalidateButton");
+  const invalidateButton = table.querySelector(".invalidator");
   if (!invalidateButton) {
     console.log("Error initializing invalidator");
     break;

From c058bcf241b7ce18e04e2cad27342a8bc9a141a4 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 22 Aug 2024 19:13:19 +0200
Subject: [PATCH 42/49] fix: create signer at init

---
 .../rewards/render-transaction/read-claim-data-from-url.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
index 4e4d68d6..c921a34b 100644
--- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
+++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
@@ -8,6 +8,7 @@ import { setClaimMessage } from "./set-claim-message";
 import { useRpcHandler } from "../web3/use-rpc-handler";
 import { renderTransaction } from "./render-transaction";
 import { ButtonController } from "../button-controller";
+import { connectWallet } from "../web3/connect-wallet";
 
 declare const SUPABASE_URL: string;
 declare const SUPABASE_ANON_KEY: string;
@@ -40,6 +41,12 @@ export async function readClaimDataFromUrl(app: AppState) {
     }
   }
 
+  try {
+    app.signer = await connectWallet(app.claims[0].networkId);
+  } catch (error) {
+    /* empty */
+  }
+
   try {
     // this would throw on mobile browsers & non-web3 browsers
     window?.ethereum.on("accountsChanged", () => {

From 79458890c37f4368ac6e269e51d35a0a0c7208d0 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 22 Aug 2024 19:13:29 +0200
Subject: [PATCH 43/49] fix: remove app.networkId

---
 static/scripts/rewards/web3/connect-wallet.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts
index 075e0c7c..0fcc0d36 100644
--- a/static/scripts/rewards/web3/connect-wallet.ts
+++ b/static/scripts/rewards/web3/connect-wallet.ts
@@ -96,16 +96,16 @@ async function addFastestHandlerNetwork(wallet: ethers.providers.Web3Provider, n
   }
 
   try {
-    await addHandlerSuggested(wallet, toSuggest.url);
+    await addHandlerSuggested(wallet, toSuggest.url, networkId);
   } catch (error) {
     toaster.create("info", `${toSuggest.url}`, Infinity);
   }
 }
 
-async function addHandlerSuggested(provider: ethers.providers.Web3Provider, url: string) {
-  const symbol = app.networkId === 1 ? "ETH" : "XDAI";
-  const altSymbol = app.networkId === 1 ? "eth" : "xdai";
-  const altSymbol2 = app.networkId === 1 ? "Eth" : "xDai";
+async function addHandlerSuggested(provider: ethers.providers.Web3Provider, url: string, networkId: number) {
+  const symbol = networkId === 1 ? "ETH" : "XDAI";
+  const altSymbol = networkId === 1 ? "eth" : "xdai";
+  const altSymbol2 = networkId === 1 ? "Eth" : "xDai";
 
   if (mobileCheck()) {
     /**
@@ -122,7 +122,7 @@ async function addHandlerSuggested(provider: ethers.providers.Web3Provider, url:
   // It will not work unless the symbols match, so we try them all
   for (const _symbol of [symbol, altSymbol, altSymbol2]) {
     // this does not work on mobile yet
-    await addProvider(provider, url, _symbol, app.networkId);
+    await addProvider(provider, url, _symbol, networkId);
   }
 }
 

From b34821f6a95f9568d9b846c6e92e723ae35967b8 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 22 Aug 2024 19:19:00 +0200
Subject: [PATCH 44/49] fix: create invalidator actions after render

---
 .../read-claim-data-from-url.ts               |  3 +-
 static/scripts/rewards/web3/erc20-permit.ts   | 58 ++++++++++---------
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
index c921a34b..f3f527f0 100644
--- a/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
+++ b/static/scripts/rewards/render-transaction/read-claim-data-from-url.ts
@@ -3,7 +3,7 @@ import { decodePermits } from "@ubiquibot/permit-generation/handlers";
 import { Permit } from "@ubiquibot/permit-generation/types";
 import { app, AppState } from "../app-state";
 import { buttonControllers, toaster } from "../toaster";
-import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl } from "../web3/erc20-permit";
+import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl, createInvalidatorActions } from "../web3/erc20-permit";
 import { setClaimMessage } from "./set-claim-message";
 import { useRpcHandler } from "../web3/use-rpc-handler";
 import { renderTransaction } from "./render-transaction";
@@ -128,4 +128,5 @@ async function displayRewardsWithDetails() {
   // The first claim's table is populated last
   await renderTransaction(app.claims[0], tableEl);
   displayRewardDetails(tableEl);
+  createInvalidatorActions();
 }
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 706dd039..abdc1f4e 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -267,36 +267,38 @@ export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
   }
 }
 
-for (let i = 0; i < app.claims.length; i++) {
-  const claim = app.claims[i];
-  const table = document.getElementById(claim.nonce) as HTMLElement;
-  const invalidateButton = table.querySelector(".invalidator");
-  if (!invalidateButton) {
-    console.log("Error initializing invalidator");
-    break;
-  }
-  invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
-    try {
-      const isClaimed = await isNonceClaimed(claim);
-      if (isClaimed) {
-        toaster.create("error", `This reward has already been claimed or invalidated.`);
-        buttonControllers[claim.nonce].hideInvalidator();
-        return;
-      }
+export function createInvalidatorActions() {
+  for (let i = 0; i < app.claims.length; i++) {
+    const claim = app.claims[i];
+    const table = document.getElementById(claim.nonce) as HTMLElement;
+    const invalidateButton = table.querySelector(".invalidator");
+    if (!invalidateButton) {
+      console.log("Error initializing invalidator");
+      break;
+    }
+    invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
+      try {
+        const isClaimed = await isNonceClaimed(claim);
+        if (isClaimed) {
+          toaster.create("error", `This reward has already been claimed or invalidated.`);
+          buttonControllers[claim.nonce].hideInvalidator();
+          return;
+        }
 
-      if (!app.signer) return;
-      await invalidateNonce(app.signer, claim.nonce);
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        const e = error as unknown as MetaMaskError;
-        console.error(e);
-        errorToast(e, e.reason);
-        return;
+        if (!app.signer) return;
+        await invalidateNonce(app.signer, claim.nonce);
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          const e = error as unknown as MetaMaskError;
+          console.error(e);
+          errorToast(e, e.reason);
+          return;
+        }
       }
-    }
-    toaster.create("info", "Nonce invalidation transaction sent");
-    buttonControllers[claim.nonce].hideInvalidator();
-  });
+      toaster.create("info", "Nonce invalidation transaction sent");
+      buttonControllers[claim.nonce].hideInvalidator();
+    });
+  }
 }
 
 //mimics https://github.com/Uniswap/permit2/blob/a7cd186948b44f9096a35035226d7d70b9e24eaf/src/SignatureTransfer.sol#L150

From e6871f5347475137026762b93e1442bb72370c81 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Thu, 29 Aug 2024 21:01:44 +0200
Subject: [PATCH 45/49] fix: knip

---
 static/scripts/rewards/render-transaction/utils.ts | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 static/scripts/rewards/render-transaction/utils.ts

diff --git a/static/scripts/rewards/render-transaction/utils.ts b/static/scripts/rewards/render-transaction/utils.ts
deleted file mode 100644
index 80281a64..00000000
--- a/static/scripts/rewards/render-transaction/utils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function removeAllEventListeners(element: Element): Element {
-  const clone = element.cloneNode(true) as Element;
-  element.replaceWith(clone);
-  return clone;
-}

From 4d0e633165298a5337c4ff711242e4765b460532 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 2 Sep 2024 14:21:30 +0200
Subject: [PATCH 46/49] fix: use classes

---
 static/styles/rewards/light-mode.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
index 5ceb56a8..06474a8c 100644
--- a/static/styles/rewards/light-mode.css
+++ b/static/styles/rewards/light-mode.css
@@ -13,7 +13,7 @@
   table a:hover > div {
     color: #000;
   }
-  #rewardAmount > a {
+  .reward-amount > a {
     color: #000;
   }
   svg path {
@@ -41,9 +41,9 @@
   div#build > a {
     color: #000;
   }
-  #rewardAmount div,
-  #rewardRecipient div,
-  #rewardsCount {
+  .reward-amount div,
+  .reward-recipient div,
+  .rewards-count {
     color: #000;
   }
   #nextTx,

From de077ad0e55380141640b6599cfa9dd3891b1acd Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 2 Sep 2024 14:22:10 +0200
Subject: [PATCH 47/49] fix: hide table

---
 static/styles/rewards/claim-table.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 8350aab0..a69fe109 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -237,6 +237,7 @@ table[data-make-claim="error"] tbody {
   opacity: 0;
   pointer-events: none;
   filter: blur(4px);
+  display: none;
 }
 .reward-recipient a div {
   opacity: 0.66;

From 66acd7d853c5911a78d549a76b0ed24e39668e69 Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 2 Sep 2024 14:24:48 +0200
Subject: [PATCH 48/49] chore: remove unused styles

---
 static/styles/rewards/claim-table.css | 10 ----------
 static/styles/rewards/light-mode.css  |  7 -------
 2 files changed, 17 deletions(-)

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index a69fe109..0b91f04e 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -21,16 +21,6 @@ table {
   max-width: 563px;
   width: 100%;
 }
-@media only screen and (max-width: 600px) {
-  table {
-    max-width: 90%;
-  }
-  @media screen and (orientation: portrait) {
-    table {
-      max-width: 100%;
-    }
-  }
-}
 table a:hover,
 table a:hover > div {
   color: #fff;
diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
index 06474a8c..3860e1fa 100644
--- a/static/styles/rewards/light-mode.css
+++ b/static/styles/rewards/light-mode.css
@@ -46,10 +46,6 @@
   .rewards-count {
     color: #000;
   }
-  #nextTx,
-  #previousTx {
-    fill: #000;
-  }
   html {
     background-color: #fff;
   }
@@ -69,9 +65,6 @@
     animation: none;
   }
 
-  #carousel > div:hover {
-    color: #000;
-  }
   tbody,
   thead {
     background-color: #fff;

From 16d652b43d760a0cf535374d8ebf348c353b2a5a Mon Sep 17 00:00:00 2001
From: Peter Kompasz <kompaszbence@gmail.com>
Date: Mon, 2 Sep 2024 14:25:28 +0200
Subject: [PATCH 49/49] chore: remove await

---
 static/scripts/rewards/web3/use-rpc-handler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/scripts/rewards/web3/use-rpc-handler.ts b/static/scripts/rewards/web3/use-rpc-handler.ts
index d6bf7601..f9eb4838 100644
--- a/static/scripts/rewards/web3/use-rpc-handler.ts
+++ b/static/scripts/rewards/web3/use-rpc-handler.ts
@@ -22,7 +22,7 @@ export async function useRpcHandler(claim: Permit) {
     throw new Error("Network ID not set");
   }
 
-  const handler = await useHandler(networkId);
+  const handler = useHandler(networkId);
   const provider = await handler.getFastestRpcProvider();
   const url = provider.connection.url;
   if (!url) {