From d3540d58b4ab01b1aa2a0b5f844c858309e7ab30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 04:59:46 +0900
Subject: [PATCH 01/13] feat: initialize new buttons controller

---
 static/index.html                             | 238 ++++++++----------
 static/scripts/rewards/ButtonController.ts    |  79 ++++++
 .../scripts/rewards/invalidate-component.ts   |  12 -
 .../claim-rewards-pagination.ts               |   6 +-
 .../render-transaction/render-transaction.ts  |  25 +-
 static/scripts/rewards/toaster.ts             |  48 +---
 static/scripts/rewards/web3/connect-wallet.ts |   5 +-
 static/scripts/rewards/web3/erc20-permit.ts   |  10 +-
 static/scripts/rewards/web3/erc721-permit.ts  |   8 +-
 .../web3/handle-if-on-correct-network.ts      |   9 +-
 .../rewards/web3/verify-current-network.ts    |   6 +-
 static/styles/rewards/claim-table.css         |  34 ++-
 12 files changed, 242 insertions(+), 238 deletions(-)
 create mode 100644 static/scripts/rewards/ButtonController.ts
 delete mode 100644 static/scripts/rewards/invalidate-component.ts
diff --git a/static/index.html b/static/index.html
index 2f324f2b..51507d96 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,111 +1,86 @@
 <!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/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">
+<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/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>
-          </div>
-        </a>
-      </header>
-      <div>
-        <table>
-          <thead>
-            <tr>
-              <th><div>Notice</div></th>
-              <td><div>Loading...</div></td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr id="Amount">
-              <th><div>Amount</div></th>
-              <td id="rewardAmount"><div>Loading...</div></td>
-            </tr>
-            <tr id="Token">
-              <th><div>Token</div></th>
-              <td id="rewardToken">
-                <span class="full"><div></div></span>
-                <span class="short"><div>Loading...</div></span>
-              </td>
-            </tr>
-            <tr id="To">
-              <th><div>For</div></th>
-              <td id="rewardRecipient">
-                <span class="full"><div></div></span>
-                <span class="short"><div>Loading...</div></span>
-              </td>
-            </tr>
-            <tr id="additional-details-border">
-              <th
-                ><div>
-                  <button id="additionalDetails">
-                    <div>Details</div>
-                    <svg class="opener" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                ></path></svg></div
+            ><div id="logo-text"><span>Ubiquity</span><span>Rewards</span></div></div
+          ></a
+        ></header
+      ><div
+        ><table
+          ><thead
+            ><tr
+              ><th><div>Notice</div></th
+              ><td><div>Loading...</div></td></tr
+            ></thead
+          ><tbody
+            ><tr id="Amount"
+              ><th><div>Amount</div></th
+              ><td id="rewardAmount"><div>Loading...</div></td></tr
+            ><tr id="Token"
+              ><th><div>Token</div></th
+              ><td id="rewardToken"
+                ><span class="full"><div></div></span><span class="short"><div>Loading...</div></span></td
+              ></tr
+            ><tr id="To"
+              ><th><div>For</div></th
+              ><td id="rewardRecipient"
+                ><span class="full"><div></div></span><span class="short"><div>Loading...</div></span></td
+              ></tr
+            ><tr id="additional-details-border"
+              ><th
+                ><div
+                  ><button id="additionalDetails"
+                    ><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">
+                      /></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 id="controls">
-                  <button id="claimButton" class="hide-cl">
-                    <svg
-                      class="claim-loader"
+                      /></svg></button></div></th
+              ><td
+                ><div id="controls" data-loader="false" data-claim="false" data-view-claim="false">
+                  <button id="claim"
+                    ><svg
+                      id="claim-loader"
                       version="1.1"
                       id="L9"
                       xmlns="http://www.w3.org/2000/svg"
@@ -126,46 +101,37 @@
                           to="360 50 50"
                           repeatCount="indefinite"
                         />
-                      </path>
-                    </svg>
-                    <div class="claim-title">Collect</div>
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="claim-icon">
+                      </path></svg
+                    ><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 id="viewClaimButton" class="hide-cl">
-                    <div class="claim-title">View Claim</div>
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="link-icon">
+                      /></svg
+                  ></button>
+
+                  <button id="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 id="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>
-          <tbody id="additionalDetailsTable"></tbody>
-        </table>
-
-        <figure id="carousel">
-          <div id="prevTx"></div>
-          <div id="rewardsCount"></div>
-          <div id="nextTx"></div>
-        </figure>
-      </div>
-      <footer>
-        <div id="build">
-          <a target="_blank" rel="noopener noreferrer"></a>
-        </div>
-      </footer>
-    </main>
 
-    <ul class="notifications"></ul>
-    <script src="out/init.js" type="application/javascript"></script>
-    <link href="styles/proxima.css" rel="stylesheet" />
-    <link href="styles/toast.css" rel="stylesheet" />
-  </body>
-</html>
+                </div></td></tr></tbody
+          ><tbody id="additionalDetailsTable"></tbody></table
+        ><figure id="carousel"><div id="prevTx"></div><div id="rewardsCount"></div><div id="nextTx"></div></figure></div
+      ><footer
+        ><div id="build"><a target="_blank" rel="noopener noreferrer"></a></div></footer></main
+    ><ul class="notifications"></ul
+    ><script src="out/init.js" type="application/javascript"></script
+    ><link href="styles/proxima.css" rel="stylesheet" /><link href="styles/toast.css" rel="stylesheet" /></body
+></html>
diff --git a/static/scripts/rewards/ButtonController.ts b/static/scripts/rewards/ButtonController.ts
new file mode 100644
index 00000000..63955410
--- /dev/null
+++ b/static/scripts/rewards/ButtonController.ts
@@ -0,0 +1,79 @@
+const LOADER = "data-loader";
+const MAKE_CLAIM = "data-claim";
+const VIEW_CLAIM = "data-view-claim";
+const INVALIDATOR = "data-invalidator";
+export class ButtonController {
+  private _controls: HTMLDivElement;
+
+  constructor(controls: HTMLDivElement) {
+    this._controls = controls;
+  }
+
+  public showLoader(): void {
+    this._controls.setAttribute(LOADER, "true");
+  }
+
+  public hideLoader(): void {
+    this._controls.setAttribute(LOADER, "false");
+  }
+
+  public hideMakeClaim(): void {
+    this._controls.setAttribute(MAKE_CLAIM, "false");
+  }
+
+  public showMakeClaim(): void {
+    console.trace();
+    this._controls.setAttribute(MAKE_CLAIM, "true");
+  }
+
+  public hideViewClaim(): void {
+    this._controls.setAttribute(VIEW_CLAIM, "false");
+  }
+
+  public showViewClaim(): void {
+    this._controls.setAttribute(VIEW_CLAIM, "true");
+  }
+
+  public hideInvalidator(): void {
+    this._controls.setAttribute(INVALIDATOR, "false");
+  }
+
+  public showInvalidator(): void {
+    this._controls.setAttribute(INVALIDATOR, "true");
+  }
+
+  public onlyShowLoader(): void {
+    this.hideMakeClaim();
+    this.hideViewClaim();
+    this.hideInvalidator();
+    this.showLoader();
+  }
+
+  public onlyShowMakeClaim(): void {
+    this.hideLoader();
+    this.showMakeClaim();
+    this.hideViewClaim();
+    this.hideInvalidator();
+  }
+
+  public onlyShowViewClaim(): void {
+    this.hideLoader();
+    this.hideMakeClaim();
+    this.showViewClaim();
+    this.hideInvalidator();
+  }
+
+  public onlyShowInvalidator(): void {
+    this.hideLoader();
+    this.hideMakeClaim();
+    this.hideViewClaim();
+    this.showInvalidator();
+  }
+
+  public hideAll(): void {
+    this.hideLoader();
+    this.hideMakeClaim();
+    this.hideViewClaim();
+    this.hideInvalidator();
+  }
+}
diff --git a/static/scripts/rewards/invalidate-component.ts b/static/scripts/rewards/invalidate-component.ts
deleted file mode 100644
index 8687d329..00000000
--- a/static/scripts/rewards/invalidate-component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-const invalidateBtnInnerHTML = `<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>`;
-
-// parse string and turn into an html entity
-function parseHtml(html: string) {
-  const button = document.createElement("button");
-  button.id = "invalidateBtn";
-  button.innerHTML = html;
-  return button.cloneNode(true) as HTMLButtonElement;
-}
-
-export default parseHtml(invalidateBtnInnerHTML);
diff --git a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
index 5fdccbd0..31de4712 100644
--- a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
+++ b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
@@ -1,5 +1,5 @@
 import { app } from "../app-state";
-import { claimButton } from "../toaster";
+import { claim } from "../toaster";
 import { table } from "./read-claim-data-from-url";
 import { renderTransaction } from "./render-transaction";
 import { removeAllEventListeners } from "./utils";
@@ -12,7 +12,7 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
 
   if (nextTxButton) {
     nextTxButton.addEventListener("click", () => {
-      claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
+      removeAllEventListeners(claim) as HTMLButtonElement;
       app.nextPermit();
       rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
       table.setAttribute(`data-claim`, "error");
@@ -22,7 +22,7 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
 
   if (prevTxButton) {
     prevTxButton.addEventListener("click", () => {
-      claimButton.element = removeAllEventListeners(claimButton.element) as HTMLButtonElement;
+      removeAllEventListeners(claim) as HTMLButtonElement;
       app.previousPermit();
       rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
       table.setAttribute(`data-claim`, "error");
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 4192caa0..579c60bd 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -1,6 +1,6 @@
 import { app } from "../app-state";
 import { networkExplorers } from "../constants";
-import { claimButton, hideClaimButton, hideLoader, hideViewClaimButton, showClaimButton, showViewClaimButton, viewClaimButton } from "../toaster";
+import { buttonController, claim, viewClaimButton } from "../toaster";
 import { claimErc20PermitHandlerWrapper, fetchTreasury, generateInvalidatePermitAdminControl } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
@@ -16,12 +16,9 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
   const table = document.getElementsByTagName(`table`)[0];
 
   if (app.claims && app.claims.length > 1) {
-    console.trace("displaying carousel");
     carousel.className = "display-carousel";
     const rewardsCount = document.getElementById("rewardsCount") as Element;
     rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-  } else {
-    console.trace("not displaying carousel");
   }
 
   if (nextTx) {
@@ -29,7 +26,7 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
   }
 
   if (!app.reward) {
-    hideLoader();
+    buttonController.hideAll();
     console.log("No reward found");
     return false;
   }
@@ -54,20 +51,20 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
     const toElement = document.getElementById(`rewardRecipient`) as Element;
     renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
 
-    generateInvalidatePermitAdminControl(app).catch(console.error);
+    if (app.provider) {
+      generateInvalidatePermitAdminControl(app).catch(console.error);
+    }
 
     if (app.claimTxs[app.reward.permit.nonce.toString()] !== undefined) {
-      hideClaimButton();
-      showViewClaimButton();
-      viewClaimButton.element.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
+      buttonController.onlyShowViewClaim();
+      viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
     } else {
-      hideViewClaimButton();
-      showClaimButton();
-      claimButton.element.addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      buttonController.onlyShowMakeClaim();
+      claim.addEventListener("click", claimErc20PermitHandlerWrapper(app));
     }
     table.setAttribute(`data-claim`, "ok");
 
-    claimButton.element.addEventListener("click", claimErc20PermitHandlerWrapper(app));
+    claim.addEventListener("click", claimErc20PermitHandlerWrapper(app));
   } else {
     const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
     table.setAttribute(`data-claim`, "ok");
@@ -82,7 +79,7 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
     const toElement = document.getElementById(`rewardRecipient`) as Element;
     renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
 
-    claimButton.element.addEventListener("click", claimErc721PermitHandler(app.reward));
+    claim.addEventListener("click", claimErc721PermitHandler(app.reward));
   }
 
   return true;
diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index 4c2462f8..1484c257 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -1,3 +1,5 @@
+import { ButtonController } from "./ButtonController";
+
 export const toaster = {
   create: createToast,
   error: errorToast,
@@ -9,22 +11,14 @@ export const toaster = {
   },
 };
 
-export const claimButton = {
-  // loading: loadingClaimButton,
-  // reset: resetClaimButton,
-  element: document.getElementById("claimButton") as HTMLButtonElement,
-};
-
-export const viewClaimButton = {
-  // loading: loadingClaimButton,
-  // reset: resetClaimButton,
-  element: document.getElementById("viewClaimButton") as HTMLButtonElement,
-};
-
-const notifications = document.querySelector(".notifications") as HTMLUListElement;
+export const controls = document.getElementById("controls") as HTMLDivElement;
+export const claim = document.getElementById("claim") as HTMLButtonElement;
+export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
+export const notifications = document.querySelector(".notifications") as HTMLUListElement;
+export const buttonController = new ButtonController(controls);
 
 export function createToast(meaning: keyof typeof toaster.icons, text: string) {
-  hideLoader();
+  buttonController.hideLoader();
   const toastDetails = {
     timer: 5000,
   } as {
@@ -59,32 +53,6 @@ function removeToast(toast: HTMLElement, timeoutId?: NodeJS.Timeout) {
   setTimeout(() => toast.remove(), 500); // Removing the toast after 500ms
 }
 
-export function showLoader() {
-  claimButton.element.disabled = true;
-  claimButton.element.className = "show-cl";
-}
-
-export function hideLoader() {
-  claimButton.element.disabled = false;
-  claimButton.element.className = "hide-cl";
-}
-
-export function hideClaimButton() {
-  claimButton.element.classList.add("hide");
-}
-
-export function showClaimButton() {
-  claimButton.element.classList.remove("hide");
-}
-
-export function hideViewClaimButton() {
-  viewClaimButton.element.classList.add("hide");
-}
-
-export function showViewClaimButton() {
-  viewClaimButton.element.classList.remove("hide");
-}
-
 export function errorToast(error: MetaMaskError, errorMessage?: string) {
   // If a custom error message is provided, use it
   if (errorMessage) {
diff --git a/static/scripts/rewards/web3/connect-wallet.ts b/static/scripts/rewards/web3/connect-wallet.ts
index 4c949c33..81a29cb7 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 { claimButton, toaster } from "../toaster";
+import { buttonController, toaster } from "../toaster";
 
 export async function connectWallet(): Promise<JsonRpcSigner | null> {
   try {
@@ -13,6 +13,7 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
     const address = await signer.getAddress();
 
     if (!address) {
+      buttonController.hideAll();
       console.error("Wallet not connected");
       return null;
     }
@@ -23,10 +24,8 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
       console.error(error);
       if (error?.message?.includes("missing provider")) {
         toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
-        claimButton.element.disabled = true;
       } else {
         toaster.create("info", "Please connect your wallet to collect this reward.");
-        claimButton.element.disabled = true;
       }
     }
     return null;
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index c732d6ef..ca38d690 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -3,11 +3,10 @@ import { BigNumber, BigNumberish, Contract, ethers } from "ethers";
 import { erc20Abi, permit2Abi } from "../abis";
 import { AppState, app } from "../app-state";
 import { permit2Address } from "../constants";
-import invalidateButton from "../invalidate-component";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
 import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc20Permit, Erc721Permit } from "../render-transaction/tx-type";
-import { MetaMaskError, claimButton, errorToast, showLoader, toaster } from "../toaster";
+import { MetaMaskError, buttonController, claim, errorToast, toaster } from "../toaster";
 
 export async function fetchTreasury(
   permit: Erc20Permit | Erc721Permit
@@ -113,7 +112,7 @@ async function renderTx(app: AppState) {
 
 export function claimErc20PermitHandlerWrapper(app: AppState) {
   return async function claimErc20PermitHandler() {
-    showLoader();
+    buttonController.showLoader();
 
     const isPermitClaimable = await checkPermitClaimability(app);
     if (!isPermitClaimable) return;
@@ -130,7 +129,7 @@ export function claimErc20PermitHandlerWrapper(app: AppState) {
     const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
     if (!isHashUpdated) return;
 
-    claimButton.element.removeEventListener("click", claimErc20PermitHandler);
+    claim.removeEventListener("click", claimErc20PermitHandler);
 
     await renderTx(app);
   };
@@ -206,8 +205,7 @@ export async function generateInvalidatePermitAdminControl(app: AppState) {
     console.error(error);
   }
 
-  const controls = document.getElementById("controls") as HTMLDivElement;
-  controls.appendChild(invalidateButton);
+  const invalidateButton = document.getElementById("invalidator") as HTMLDivElement;
 
   invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
     try {
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index 2d196986..f3543a36 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -4,11 +4,11 @@ import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
 import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc721Permit } from "../render-transaction/tx-type";
-import { claimButton, showLoader, toaster } from "../toaster";
+import { buttonController, claim, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
 export function claimErc721PermitHandler(reward: Erc721Permit) {
-  return async function claimButtonHandler() {
+  return async function claimHandler() {
     const signer = await connectWallet();
     if (!signer) {
       return;
@@ -30,7 +30,7 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
       return;
     }
 
-    showLoader();
+    buttonController.showLoader();
     try {
       const nftContract = new ethers.Contract(reward.permit.permitted.token, nftRewardAbi, signer);
 
@@ -40,7 +40,7 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
       toaster.create("success", `Claim Complete.`);
       console.log(receipt.transactionHash); // @TODO: post to database
 
-      claimButton.element.removeEventListener("click", claimButtonHandler);
+      claim.removeEventListener("click", claimHandler);
 
       renderTransaction(true).catch((error) => {
         console.error(error);
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 eaffaa43..aabc7267 100644
--- a/static/scripts/rewards/web3/handle-if-on-correct-network.ts
+++ b/static/scripts/rewards/web3/handle-if-on-correct-network.ts
@@ -1,12 +1,9 @@
-import invalidateButton from "../invalidate-component";
-import { showLoader } from "../toaster";
+import { buttonController } from "../toaster";
 
 export function handleIfOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number) {
   if (desiredNetworkId === currentNetworkId) {
-    // enable the button once on the correct network
-    invalidateButton.disabled = false;
+    buttonController.showInvalidator();
   } else {
-    showLoader();
-    invalidateButton.disabled = true;
+    buttonController.hideInvalidator();
   }
 }
diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts
index bc658e1a..0c12484a 100644
--- a/static/scripts/rewards/web3/verify-current-network.ts
+++ b/static/scripts/rewards/web3/verify-current-network.ts
@@ -1,6 +1,5 @@
 import { ethers } from "ethers";
-import invalidateButton from "../invalidate-component";
-import { showLoader, toaster } from "../toaster";
+import { buttonController, toaster } from "../toaster";
 import { handleIfOnCorrectNetwork } from "./handle-if-on-correct-network";
 import { notOnCorrectNetwork } from "./not-on-correct-network";
 
@@ -8,9 +7,8 @@ import { notOnCorrectNetwork } from "./not-on-correct-network";
 export async function verifyCurrentNetwork(desiredNetworkId: number) {
   const web3provider = new ethers.providers.Web3Provider(window.ethereum);
   if (!web3provider || !web3provider.provider.isMetaMask) {
-    showLoader();
     toaster.create("info", "Please connect to MetaMask.");
-    invalidateButton.disabled = true;
+    buttonController.hideAll();
   }
 
   const network = await web3provider.getNetwork();
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 7c09b143..03726b51 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -9,7 +9,7 @@
   --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1);
   --border-color: hsl(225 25% var(--border-brightness) / 1);
 }
-#claimButton {
+#claim {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -150,7 +150,7 @@ table[data-claim-rendered] button:hover {
 table[data-claim-rendered] button > div {
   display: none;
 }
-table[data-claim-rendered] button:disabled > svg.claim-icon {
+table[data-claim-rendered] button:disabled > svg#claim-icon {
   display: none;
 }
 table[data-claim-rendered] button:hover > div {
@@ -162,24 +162,33 @@ table[data-claim-rendered] button:hover > svg {
   display: none !important;
 }
 
-.show-cl {
+.show {
   display: block;
 }
 
-table[data-claim-rendered] button.hide-cl > svg.claim-loader {
+table[data-claim-rendered] button.hide > svg#claim-loader {
   display: none;
 }
-table[data-claim-rendered] button.show-cl > svg.claim-icon {
-  display: none;
+table[data-claim-rendered] button.show > svg#claim-icon {
+  display: unset;
 }
-
-table[data-claim-rendered] button.show-cl > svg.claim-loader {
+table[data-claim-rendered] button.show > svg#claim-loader {
   display: unset;
 }
-table[data-claim-rendered] button.hide-cl > svg.claim-icon {
+table[data-claim-rendered] button.hide > svg#claim-icon {
   display: unset;
 }
 
+table #controls {
+  opacity: 0;
+  transition: 1s ease-in-out opacity;
+  pointer-events: none;
+}
+table[data-claim-rendered="true"][data-contract-loaded="true"][data-claim="ok"] #controls {
+  opacity: 1;
+  pointer-events: unset;
+}
+
 table[data-claim-rendered] button#additionalDetails {
   width: 100%;
   color: #fff;
@@ -291,7 +300,6 @@ table[data-claim="ok"] tbody {
   color: #fff;
 }
 
-
 #additionalDetails svg {
   /* display: none; */
 }
@@ -323,3 +331,9 @@ table td {
 table th {
   padding-left: 16px;
 }
+
+
+[data-loader="false"]  #claim-loader{ display: none;}
+[data-claim="false"]  #claim{ display: none;}
+[data-view-claim="false"] #view-claim{ display: none;}
+[data-invalidator="false"] #invalidator{ display: none;}
\ No newline at end of file

From 45f515d9f03eef1a0d9f72d7d4ef5ba05eaa3cbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 05:13:57 +0900
Subject: [PATCH 02/13] fix: button view controller

---
 static/index.html                             |  4 +-
 static/scripts/rewards/ButtonController.ts    |  3 +-
 .../claim-rewards-pagination.ts               |  4 +-
 .../render-transaction/insert-table-data.ts   |  4 +-
 .../read-claim-data-from-url.ts               | 22 ++++----
 .../render-transaction/render-transaction.ts  |  8 +--
 static/scripts/rewards/toaster.ts             |  2 +-
 static/styles/rewards/claim-table.css         | 50 +++++++++----------
 static/styles/rewards/light-mode.css          |  6 +--
 9 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/static/index.html b/static/index.html
index 51507d96..f8accdfc 100644
--- a/static/index.html
+++ b/static/index.html
@@ -77,8 +77,8 @@
                         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 id="controls" data-loader="false" data-claim="false" data-view-claim="false">
-                  <button id="claim"
+                ><div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                  <button id="make-claim"
                     ><svg
                       id="claim-loader"
                       version="1.1"
diff --git a/static/scripts/rewards/ButtonController.ts b/static/scripts/rewards/ButtonController.ts
index 63955410..41b18c52 100644
--- a/static/scripts/rewards/ButtonController.ts
+++ b/static/scripts/rewards/ButtonController.ts
@@ -1,5 +1,5 @@
 const LOADER = "data-loader";
-const MAKE_CLAIM = "data-claim";
+const MAKE_CLAIM = "data-make-claim";
 const VIEW_CLAIM = "data-view-claim";
 const INVALIDATOR = "data-invalidator";
 export class ButtonController {
@@ -7,6 +7,7 @@ export class ButtonController {
 
   constructor(controls: HTMLDivElement) {
     this._controls = controls;
+    this.hideAll();
   }
 
   public showLoader(): void {
diff --git a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
index 31de4712..b9e66b3d 100644
--- a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
+++ b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
@@ -15,7 +15,7 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
       removeAllEventListeners(claim) as HTMLButtonElement;
       app.nextPermit();
       rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-      table.setAttribute(`data-claim`, "error");
+      table.setAttribute(`data-make-claim`, "error");
       renderTransaction().catch(console.error);
     });
   }
@@ -25,7 +25,7 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
       removeAllEventListeners(claim) as HTMLButtonElement;
       app.previousPermit();
       rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-      table.setAttribute(`data-claim`, "error");
+      table.setAttribute(`data-make-claim`, "error");
       renderTransaction().catch(console.error);
     });
   }
diff --git a/static/scripts/rewards/render-transaction/insert-table-data.ts b/static/scripts/rewards/render-transaction/insert-table-data.ts
index c8485b20..5c9e8e24 100644
--- a/static/scripts/rewards/render-transaction/insert-table-data.ts
+++ b/static/scripts/rewards/render-transaction/insert-table-data.ts
@@ -27,7 +27,7 @@ export function insertErc20PermitTableData(
     { 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.setAttribute(`data-claim-rendered`, "true");
+  table.setAttribute(`data-make-claim-rendered`, "true");
   return requestedAmountElement;
 }
 
@@ -63,7 +63,7 @@ export function insertErc721PermitTableData(reward: Erc721Permit, table: Element
     },
     { name: "Contribution Type", value: GITHUB_CONTRIBUTION_TYPE.split(",").join(", ") },
   ]);
-  table.setAttribute(`data-claim-rendered`, "true");
+  table.setAttribute(`data-make-claim-rendered`, "true");
   return requestedAmountElement;
 }
 
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 e295d0c2..d424b164 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
@@ -1,4 +1,6 @@
+import { Type } from "@sinclair/typebox";
 import { Value } from "@sinclair/typebox/value";
+import { createClient } from "@supabase/supabase-js";
 import { AppState, app } from "../app-state";
 import { useFastestRpc } from "../rpc-optimization/get-optimal-provider";
 import { connectWallet } from "../web3/connect-wallet";
@@ -7,8 +9,7 @@ import { claimRewardsPagination } from "./claim-rewards-pagination";
 import { renderTransaction } from "./render-transaction";
 import { setClaimMessage } from "./set-claim-message";
 import { RewardPermit, claimTxT } from "./tx-type";
-import { Type } from "@sinclair/typebox";
-import { createClient } from "@supabase/supabase-js";
+import { buttonController, toaster } from "../toaster";
 
 declare const SUPABASE_URL: string;
 declare const SUPABASE_ANON_KEY: string;
@@ -23,21 +24,24 @@ export async function readClaimDataFromUrl(app: AppState) {
   if (!base64encodedTxData) {
     // No claim data found
     setClaimMessage({ type: "Notice", message: `No claim data found.` });
-    table.setAttribute(`data-claim`, "error");
+    table.setAttribute(`data-make-claim`, "error");
     return;
   }
 
   app.claims = decodeClaimData(base64encodedTxData).flat();
   app.claimTxs = await getClaimedTxs(app);
   app.provider = await useFastestRpc(app);
-  const networkId = app.reward?.networkId || app.networkId;
-  app.signer = await connectWallet().catch(console.error);
-
+  if (window.ethereum) {
+    app.signer = await connectWallet().catch(console.error);
+  } else {
+    buttonController.hideAll();
+    toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
+  }
   displayRewardDetails();
   displayRewardPagination();
 
   renderTransaction()
-    .then(() => verifyCurrentNetwork(networkId as number))
+    .then(() => verifyCurrentNetwork(app.networkId))
     .catch(console.error);
 }
 
@@ -61,7 +65,7 @@ function decodeClaimData(base64encodedTxData: string): RewardPermit[] {
   } catch (error) {
     console.error(error);
     setClaimMessage({ type: "Error", message: `1. Invalid claim data passed in URL` });
-    table.setAttribute(`data-claim`, "error");
+    table.setAttribute(`data-make-claim`, "error");
     throw error;
   }
   try {
@@ -69,7 +73,7 @@ function decodeClaimData(base64encodedTxData: string): RewardPermit[] {
   } catch (error) {
     console.error(error);
     setClaimMessage({ type: "Error", message: `2. Invalid claim data passed in URL` });
-    table.setAttribute(`data-claim`, "error");
+    table.setAttribute(`data-make-claim`, "error");
     throw error;
   }
 }
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 579c60bd..6c5b38e5 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -56,18 +56,18 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
     }
 
     if (app.claimTxs[app.reward.permit.nonce.toString()] !== undefined) {
-      buttonController.onlyShowViewClaim();
+      buttonController.showViewClaim();
       viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
     } else {
-      buttonController.onlyShowMakeClaim();
+      buttonController.showMakeClaim();
       claim.addEventListener("click", claimErc20PermitHandlerWrapper(app));
     }
-    table.setAttribute(`data-claim`, "ok");
+    table.setAttribute(`data-make-claim`, "ok");
 
     claim.addEventListener("click", claimErc20PermitHandlerWrapper(app));
   } else {
     const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
-    table.setAttribute(`data-claim`, "ok");
+    table.setAttribute(`data-make-claim`, "ok");
 
     renderNftSymbol({
       tokenAddress: app.reward.permit.permitted.token,
diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index 1484c257..cc3c4138 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -12,7 +12,7 @@ export const toaster = {
 };
 
 export const controls = document.getElementById("controls") as HTMLDivElement;
-export const claim = document.getElementById("claim") as HTMLButtonElement;
+export const claim = document.getElementById("make-claim") as HTMLButtonElement;
 export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
 export const notifications = document.querySelector(".notifications") as HTMLUListElement;
 export const buttonController = new ButtonController(controls);
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 03726b51..8c9cd86d 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -125,40 +125,40 @@ table tr#additional-details-border > * {
   padding: 0;
   margin: 0;
 }
-table[data-claim-rendered] {
+table[data-make-claim-rendered] {
   /* border: 1px solid #80808020; */
   /* border-right: 0; */
   /* border-left: 0; */
 }
-table[data-claim-rendered] #controls {
+table[data-make-claim-rendered] #controls {
   display: flex;
 }
-table[data-claim-rendered] button {
+table[data-make-claim-rendered] button {
   opacity: 0.5;
 }
-table[data-claim-rendered] button.hide {
+table[data-make-claim-rendered] button.hide {
   display: none !important;
 }
-table[data-claim-rendered] button:disabled {
+table[data-make-claim-rendered] button:disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-table[data-claim-rendered] button:hover {
+table[data-make-claim-rendered] button:hover {
   background-color: #80808020;
   opacity: 1;
 }
-table[data-claim-rendered] button > div {
+table[data-make-claim-rendered] button > div {
   display: none;
 }
-table[data-claim-rendered] button:disabled > svg#claim-icon {
+table[data-make-claim-rendered] button:disabled > svg#claim-icon {
   display: none;
 }
-table[data-claim-rendered] button:hover > div {
+table[data-make-claim-rendered] button:hover > div {
   display: unset;
   color: #fff;
 }
 
-table[data-claim-rendered] button:hover > svg {
+table[data-make-claim-rendered] button:hover > svg {
   display: none !important;
 }
 
@@ -166,16 +166,16 @@ table[data-claim-rendered] button:hover > svg {
   display: block;
 }
 
-table[data-claim-rendered] button.hide > svg#claim-loader {
+table[data-make-claim-rendered] button.hide > svg#claim-loader {
   display: none;
 }
-table[data-claim-rendered] button.show > svg#claim-icon {
+table[data-make-claim-rendered] button.show > svg#claim-icon {
   display: unset;
 }
-table[data-claim-rendered] button.show > svg#claim-loader {
+table[data-make-claim-rendered] button.show > svg#claim-loader {
   display: unset;
 }
-table[data-claim-rendered] button.hide > svg#claim-icon {
+table[data-make-claim-rendered] button.hide > svg#claim-icon {
   display: unset;
 }
 
@@ -184,24 +184,24 @@ table #controls {
   transition: 1s ease-in-out opacity;
   pointer-events: none;
 }
-table[data-claim-rendered="true"][data-contract-loaded="true"][data-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-claim-rendered] button#additionalDetails {
+table[data-make-claim-rendered] button#additionalDetails {
   width: 100%;
   color: #fff;
   /* opacity: 0.25; */
 }
-table[data-claim-rendered] button#additionalDetails:hover {
+table[data-make-claim-rendered] button#additionalDetails:hover {
   /* opacity: 1; */
 }
-table[data-claim-rendered] tr {
+table[data-make-claim-rendered] tr {
   background-color: #80808000;
   transition: 125ms ease-in-out opacity;
 }
-table[data-claim-rendered] tr#additional-details-border {
+table[data-make-claim-rendered] tr#additional-details-border {
   /* background-color: #80808010; */
   /* background-color: var(--background-color-light); */
   /* -webkit-backdrop-filter: blur(4px); */
@@ -210,7 +210,7 @@ table[data-claim-rendered] tr#additional-details-border {
   /* border-left: 0; */
   /* border-right: 0; */
 }
-table[data-claim-rendered] tr#additional-details-border + tr > * {
+table[data-make-claim-rendered] tr#additional-details-border + tr > * {
   padding-top: 24px;
 }
 table #additionalDetailsTable tr,
@@ -277,16 +277,16 @@ table tbody {
   /* box-shadow: inset 0 0 96px #00000008; */
   box-shadow: inset 0 0 96px #00bfff10;
 }
-table[data-claim="error"] thead {
+table[data-make-claim="error"] thead {
   display: table-row-group;
 }
-table[data-claim="ok"] thead {
+table[data-make-claim="ok"] thead {
   display: none;
 }
-table[data-claim="error"] tbody {
+table[data-make-claim="error"] tbody {
   display: none;
 }
-table[data-claim="ok"] tbody {
+table[data-make-claim="ok"] tbody {
   display: table-row-group;
 }
 
@@ -334,6 +334,6 @@ table th {
 
 
 [data-loader="false"]  #claim-loader{ display: none;}
-[data-claim="false"]  #claim{ display: none;}
+[data-make-claim="false"]  #make-claim{ display: none;}
 [data-view-claim="false"] #view-claim{ display: none;}
 [data-invalidator="false"] #invalidator{ display: none;}
\ No newline at end of file
diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
index f357c435..c630299a 100644
--- a/static/styles/rewards/light-mode.css
+++ b/static/styles/rewards/light-mode.css
@@ -37,10 +37,10 @@
   table button div {
     color: #000;
   }
-  table[data-claim-rendered] button:hover > div {
+  table[data-make-claim-rendered] button:hover > div {
     color: #000;
   }
-  table[data-claim-rendered] button:hover{
+  table[data-make-claim-rendered] button:hover{
     background-color: #80808018;
   }
   table a:hover,
@@ -80,7 +80,7 @@
     box-shadow: inset 0 0 96px #00000008;
   }
 
-  table[data-claim-rendered] tr#additional-details-border {
+  table[data-make-claim-rendered] tr#additional-details-border {
     /* background-color: var(--light-mode-background-color-dark); */
   }
   table[data-details-visible="true"] #additional-details-border ~ tr {

From 7e6e719e779827ffcf3f0f9d8ea90c97b765d449 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 05:31:55 +0900
Subject: [PATCH 03/13] feat: claiming indicator

---
 static/index.html                             | 11 +++---
 static/scripts/rewards/ButtonController.ts    |  1 -
 .../claim-rewards-pagination.ts               |  6 +--
 .../render-transaction/render-transaction.ts  |  8 ++--
 static/scripts/rewards/toaster.ts             |  2 +-
 static/scripts/rewards/web3/erc20-permit.ts   | 17 ++++++---
 static/scripts/rewards/web3/erc721-permit.ts  |  6 +--
 static/styles/rewards/claim-table.css         | 38 +++++++++++++++++--
 8 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/static/index.html b/static/index.html
index f8accdfc..51aaec5f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -78,8 +78,8 @@
                       /></svg></button></div></th
               ><td
                 ><div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
-                  <button id="make-claim"
-                    ><svg
+                  <button id="claim-loader">
+                    <svg
                       id="claim-loader"
                       version="1.1"
                       id="L9"
@@ -102,6 +102,9 @@
                           repeatCount="indefinite"
                         />
                       </path></svg
+                    ><div id="claiming-message">Claiming</div>
+                  </button>
+                  <button id="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
@@ -124,9 +127,7 @@
                         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
+                  </button> </div></td></tr></tbody
           ><tbody id="additionalDetailsTable"></tbody></table
         ><figure id="carousel"><div id="prevTx"></div><div id="rewardsCount"></div><div id="nextTx"></div></figure></div
       ><footer
diff --git a/static/scripts/rewards/ButtonController.ts b/static/scripts/rewards/ButtonController.ts
index 41b18c52..af9bf439 100644
--- a/static/scripts/rewards/ButtonController.ts
+++ b/static/scripts/rewards/ButtonController.ts
@@ -23,7 +23,6 @@ export class ButtonController {
   }
 
   public showMakeClaim(): void {
-    console.trace();
     this._controls.setAttribute(MAKE_CLAIM, "true");
   }
 
diff --git a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
index b9e66b3d..cbe70e75 100644
--- a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
+++ b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
@@ -1,5 +1,5 @@
 import { app } from "../app-state";
-import { claim } from "../toaster";
+import { makeClaimButton } from "../toaster";
 import { table } from "./read-claim-data-from-url";
 import { renderTransaction } from "./render-transaction";
 import { removeAllEventListeners } from "./utils";
@@ -12,7 +12,7 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
 
   if (nextTxButton) {
     nextTxButton.addEventListener("click", () => {
-      removeAllEventListeners(claim) as HTMLButtonElement;
+      removeAllEventListeners(makeClaimButton) as HTMLButtonElement;
       app.nextPermit();
       rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
       table.setAttribute(`data-make-claim`, "error");
@@ -22,7 +22,7 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
 
   if (prevTxButton) {
     prevTxButton.addEventListener("click", () => {
-      removeAllEventListeners(claim) as HTMLButtonElement;
+      removeAllEventListeners(makeClaimButton) as HTMLButtonElement;
       app.previousPermit();
       rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
       table.setAttribute(`data-make-claim`, "error");
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 6c5b38e5..70521088 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -1,6 +1,6 @@
 import { app } from "../app-state";
 import { networkExplorers } from "../constants";
-import { buttonController, claim, viewClaimButton } from "../toaster";
+import { buttonController, makeClaimButton, viewClaimButton } from "../toaster";
 import { claimErc20PermitHandlerWrapper, fetchTreasury, generateInvalidatePermitAdminControl } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
@@ -60,11 +60,9 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
       viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
     } else {
       buttonController.showMakeClaim();
-      claim.addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      makeClaimButton.addEventListener("click", claimErc20PermitHandlerWrapper(app));
     }
     table.setAttribute(`data-make-claim`, "ok");
-
-    claim.addEventListener("click", claimErc20PermitHandlerWrapper(app));
   } else {
     const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
     table.setAttribute(`data-make-claim`, "ok");
@@ -79,7 +77,7 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
     const toElement = document.getElementById(`rewardRecipient`) as Element;
     renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
 
-    claim.addEventListener("click", claimErc721PermitHandler(app.reward));
+    makeClaimButton.addEventListener("click", claimErc721PermitHandler(app.reward));
   }
 
   return true;
diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index cc3c4138..6efa9f6c 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -12,7 +12,7 @@ export const toaster = {
 };
 
 export const controls = document.getElementById("controls") as HTMLDivElement;
-export const claim = document.getElementById("make-claim") as HTMLButtonElement;
+export const makeClaimButton = document.getElementById("make-claim") as HTMLButtonElement;
 export const viewClaimButton = document.getElementById("view-claim") as HTMLButtonElement;
 export const notifications = document.querySelector(".notifications") as HTMLUListElement;
 export const buttonController = new ButtonController(controls);
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index ca38d690..1372b19e 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -6,7 +6,7 @@ import { permit2Address } from "../constants";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
 import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc20Permit, Erc721Permit } from "../render-transaction/tx-type";
-import { MetaMaskError, buttonController, claim, errorToast, toaster } from "../toaster";
+import { MetaMaskError, buttonController, errorToast, makeClaimButton, toaster } from "../toaster";
 
 export async function fetchTreasury(
   permit: Erc20Permit | Erc721Permit
@@ -46,9 +46,8 @@ export async function fetchTreasury(
 }
 
 async function checkPermitClaimability(app: AppState): Promise<boolean> {
-  let isPermitClaimable = false;
   try {
-    isPermitClaimable = await checkPermitClaimable(app);
+    return await checkPermitClaimable(app);
   } catch (error: unknown) {
     if (error instanceof Error) {
       const e = error as unknown as MetaMaskError;
@@ -56,7 +55,8 @@ async function checkPermitClaimability(app: AppState): Promise<boolean> {
       errorToast(e, e.reason);
     }
   }
-  return isPermitClaimable;
+  buttonController.hideMakeClaim();
+  return false;
 }
 
 async function transferFromPermit(permit2Contract: Contract, app: AppState) {
@@ -72,6 +72,7 @@ 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.showMakeClaim();
       } else {
         // Handle other errors
         console.error("Error in permitTransferFrom: ", e);
@@ -112,7 +113,7 @@ async function renderTx(app: AppState) {
 
 export function claimErc20PermitHandlerWrapper(app: AppState) {
   return async function claimErc20PermitHandler() {
-    buttonController.showLoader();
+    buttonController.onlyShowLoader();
 
     const isPermitClaimable = await checkPermitClaimability(app);
     if (!isPermitClaimable) return;
@@ -129,7 +130,7 @@ export function claimErc20PermitHandlerWrapper(app: AppState) {
     const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
     if (!isHashUpdated) return;
 
-    claim.removeEventListener("click", claimErc20PermitHandler);
+    makeClaimButton.removeEventListener("click", claimErc20PermitHandler);
 
     await renderTx(app);
   };
@@ -146,6 +147,7 @@ export async function checkPermitClaimable(app: AppState): Promise<boolean> {
 
   if (isClaimed) {
     toaster.create("error", `Your reward for this task has already been claimed or invalidated.`);
+    buttonController.showViewClaim();
     return false;
   }
 
@@ -165,10 +167,12 @@ export 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();
     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();
     return false;
   }
 
@@ -183,6 +187,7 @@ export async function checkPermitClaimable(app: AppState): Promise<boolean> {
   const beneficiary = reward.transferDetails.to.toLowerCase();
   if (beneficiary !== user) {
     toaster.create("warning", `This reward is not for you.`);
+    buttonController.hideMakeClaim();
     return false;
   }
 
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index f3543a36..b5cf9bdd 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -4,7 +4,7 @@ import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
 import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc721Permit } from "../render-transaction/tx-type";
-import { buttonController, claim, toaster } from "../toaster";
+import { buttonController, makeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
 export function claimErc721PermitHandler(reward: Erc721Permit) {
@@ -30,7 +30,7 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
       return;
     }
 
-    buttonController.showLoader();
+    buttonController.onlyShowLoader();
     try {
       const nftContract = new ethers.Contract(reward.permit.permitted.token, nftRewardAbi, signer);
 
@@ -40,7 +40,7 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
       toaster.create("success", `Claim Complete.`);
       console.log(receipt.transactionHash); // @TODO: post to database
 
-      claim.removeEventListener("click", claimHandler);
+      makeClaimButton.removeEventListener("click", claimHandler);
 
       renderTransaction(true).catch((error) => {
         console.error(error);
diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 8c9cd86d..86930dd3 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -332,8 +332,38 @@ table th {
   padding-left: 16px;
 }
 
+[data-loader="false"] #claim-loader {
+  display: none;
+}
+[data-make-claim="false"] #make-claim {
+  display: none;
+}
+[data-view-claim="false"] #view-claim {
+  display: none;
+}
+[data-invalidator="false"] #invalidator {
+  display: none;
+}
+#claiming-message::after {
+  content: "";
+  animation: ellipsis 1s infinite;
+  position: absolute;
+}
 
-[data-loader="false"]  #claim-loader{ display: none;}
-[data-make-claim="false"]  #make-claim{ display: none;}
-[data-view-claim="false"] #view-claim{ display: none;}
-[data-invalidator="false"] #invalidator{ display: none;}
\ No newline at end of file
+@keyframes ellipsis {
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
+  }
+}

From 54187ff4c88457f331c453cb9cd07553f1c3f403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 05:39:13 +0900
Subject: [PATCH 04/13] fix: requires web3 browser to use claim or invalidate
 button

---
 static/scripts/rewards/ButtonController.ts     | 18 +++++++++++++++---
 .../render-transaction/render-transaction.ts   |  4 +++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/static/scripts/rewards/ButtonController.ts b/static/scripts/rewards/ButtonController.ts
index af9bf439..5f7372ef 100644
--- a/static/scripts/rewards/ButtonController.ts
+++ b/static/scripts/rewards/ButtonController.ts
@@ -11,7 +11,11 @@ export class ButtonController {
   }
 
   public showLoader(): void {
-    this._controls.setAttribute(LOADER, "true");
+    if (window.ethereum) {
+      this._controls.setAttribute(LOADER, "true");
+    } else {
+      throw new Error("Can not show loader without `window.ethereum`");
+    }
   }
 
   public hideLoader(): void {
@@ -23,7 +27,11 @@ export class ButtonController {
   }
 
   public showMakeClaim(): void {
-    this._controls.setAttribute(MAKE_CLAIM, "true");
+    if (window.ethereum) {
+      this._controls.setAttribute(MAKE_CLAIM, "true");
+    } else {
+      throw new Error("Can not show make claim button without `window.ethereum`");
+    }
   }
 
   public hideViewClaim(): void {
@@ -39,7 +47,11 @@ export class ButtonController {
   }
 
   public showInvalidator(): void {
-    this._controls.setAttribute(INVALIDATOR, "true");
+    if (window.ethereum) {
+      this._controls.setAttribute(INVALIDATOR, "true");
+    } else {
+      throw new Error("Can not show invalidator button without `window.ethereum`");
+    }
   }
 
   public onlyShowLoader(): void {
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 70521088..fe21ef00 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -58,10 +58,12 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
     if (app.claimTxs[app.reward.permit.nonce.toString()] !== undefined) {
       buttonController.showViewClaim();
       viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
-    } else {
+    } else if (window.ethereum) {
+      // requires wallet connection to claim
       buttonController.showMakeClaim();
       makeClaimButton.addEventListener("click", claimErc20PermitHandlerWrapper(app));
     }
+
     table.setAttribute(`data-make-claim`, "ok");
   } else {
     const requestedAmountElement = insertErc721PermitTableData(app.reward, table);

From a478a1efc4ab888780e7d0a8e9cc8dcb29fc9838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 05:46:19 +0900
Subject: [PATCH 05/13] style: refinements on table

---
 static/styles/rewards/claim-table.css |  9 ++++-----
 static/styles/rewards/pay.css         | 25 +++++++++++++++++++------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/static/styles/rewards/claim-table.css b/static/styles/rewards/claim-table.css
index 86930dd3..b090f2d7 100644
--- a/static/styles/rewards/claim-table.css
+++ b/static/styles/rewards/claim-table.css
@@ -1,10 +1,8 @@
 :root {
   --left-table-column-width: 120px;
-
-  --background-color-default-brightness: 1%;
+  --background-color-default-brightness: 2%;
   --background-color-light-brightness: 6%;
   --border-brightness: 5%;
-
   --background-color-default: hsl(225 50% var(--background-color-default-brightness) / 1);
   --background-color-light: hsl(225 50% var(--background-color-light-brightness) / 1);
   --border-color: hsl(225 25% var(--border-brightness) / 1);
@@ -246,8 +244,9 @@ table[data-contract-loaded] #Token {
 }
 #nextTx,
 #previousTx {
-  fill: #fff;
-  border-radius: 3px;
+  /* fill: #fff; */
+  /* border-radius: 3px; */
+  /* padding: 8px; */
 }
 table[data-details-visible="false"] #rewardToken .full,
 table[data-details-visible="true"] #rewardToken .short {
diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index af7d1b48..0da5bc40 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -147,24 +147,37 @@ footer {
   align-items: center;
   align-self: center;
   margin: 12px auto;
-  opacity: 0.5;
+  /* opacity: 0.5; */
   display: none;
 }
+#carousel > div {
+  color: #808080;
+}
+#carousel > div:hover {
+  color: #fff;
+}
 #carousel.display-carousel {
   display: flex;
 }
-
+#carousel > #rewardsCount {
+pointer-events: none;
+}
 #prevTx,
 #nextTx {
   padding: 3px;
-  margin: 8px;
-  border: 3px solid #fff;
+  margin: 3px;
+  border: 2px solid;
   cursor: pointer;
   transform: rotate(45deg);
+  border-radius: 3px;
 }
 #prevTx {
-  border-color: transparent transparent #fff #fff;
+  /* border-color: transparent transparent #fff #fff; */
+  border-top-color: transparent;
+  border-right-color: transparent;
 }
 #nextTx {
-  border-color: #fff #fff transparent transparent;
+  /* border-color: #fff #fff transparent transparent; */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
 }

From 7cf67f788a0ffa98a889332ac4f8bb19cc55d3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 05:47:28 +0900
Subject: [PATCH 06/13] style: light mode fix on arrows

---
 static/styles/rewards/light-mode.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/static/styles/rewards/light-mode.css b/static/styles/rewards/light-mode.css
index c630299a..f8b7817f 100644
--- a/static/styles/rewards/light-mode.css
+++ b/static/styles/rewards/light-mode.css
@@ -40,7 +40,7 @@
   table[data-make-claim-rendered] button:hover > div {
     color: #000;
   }
-  table[data-make-claim-rendered] button:hover{
+  table[data-make-claim-rendered] button:hover {
     background-color: #80808018;
   }
   table a:hover,
@@ -76,7 +76,7 @@
     /* box-shadow: inset 0 0 96px #00000010; */
   }
 
-  table tbody{
+  table tbody {
     box-shadow: inset 0 0 96px #00000008;
   }
 
@@ -94,4 +94,7 @@
     opacity: 0;
     animation: none;
   }
+  #carousel > div:hover {
+    color: #000;
+  }
 }

From e6268ce7a449c665f13ca1a3a289212783190d31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 05:52:39 +0900
Subject: [PATCH 07/13] style(carousel): fades in

---
 .../render-transaction/render-transaction.ts     |  2 +-
 static/styles/rewards/pay.css                    | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index fe21ef00..17e6d3c0 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -16,7 +16,7 @@ export async function renderTransaction(nextTx?: boolean): Promise<Success> {
   const table = document.getElementsByTagName(`table`)[0];
 
   if (app.claims && app.claims.length > 1) {
-    carousel.className = "display-carousel";
+    carousel.className = "flex";
     const rewardsCount = document.getElementById("rewardsCount") as Element;
     rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
   }
diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index 0da5bc40..103c1394 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -148,20 +148,22 @@ footer {
   align-self: center;
   margin: 12px auto;
   /* opacity: 0.5; */
-  display: none;
+  /* display: none; */
+  opacity: 0;
+  transition: opacity 1s;
 }
 #carousel > div {
   color: #808080;
+  vertical-align: middle;
 }
 #carousel > div:hover {
   color: #fff;
 }
-#carousel.display-carousel {
-  display: flex;
-}
-#carousel > #rewardsCount {
-pointer-events: none;
+#carousel.flex {
+  /* display: flex; */
+  opacity: 1;
 }
+#carousel > #rewardsCount {pointer-events: none;display: inline-block;/* vertical-align: middle; */}
 #prevTx,
 #nextTx {
   padding: 3px;
@@ -170,6 +172,8 @@ pointer-events: none;
   cursor: pointer;
   transform: rotate(45deg);
   border-radius: 3px;
+  width: 0px;
+  display: inline-block;
 }
 #prevTx {
   /* border-color: transparent transparent #fff #fff; */

From 17545d521ea6cc1c947a2fea657fa033241aa432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 06:06:19 +0900
Subject: [PATCH 08/13] fix: show invalidator button

---
 .../claim-rewards-pagination.ts               | 27 ++++++-------------
 .../render-transaction/render-transaction.ts  |  9 ++-----
 static/scripts/rewards/web3/erc20-permit.ts   |  7 +++--
 static/scripts/rewards/web3/erc721-permit.ts  |  3 ++-
 .../rewards/web3/verify-current-network.ts    |  8 +++---
 5 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
index cbe70e75..163fa8c0 100644
--- a/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
+++ b/static/scripts/rewards/render-transaction/claim-rewards-pagination.ts
@@ -9,24 +9,13 @@ 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"));
+}
 
-  if (nextTxButton) {
-    nextTxButton.addEventListener("click", () => {
-      removeAllEventListeners(makeClaimButton) as HTMLButtonElement;
-      app.nextPermit();
-      rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-      table.setAttribute(`data-make-claim`, "error");
-      renderTransaction().catch(console.error);
-    });
-  }
-
-  if (prevTxButton) {
-    prevTxButton.addEventListener("click", () => {
-      removeAllEventListeners(makeClaimButton) as HTMLButtonElement;
-      app.previousPermit();
-      rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-      table.setAttribute(`data-make-claim`, "error");
-      renderTransaction().catch(console.error);
-    });
-  }
+export function transactionHandler(direction: "next" | "previous") {
+  removeAllEventListeners(makeClaimButton) as HTMLButtonElement;
+  direction === "next" ? app.nextPermit() : app.previousPermit();
+  table.setAttribute(`data-make-claim`, "error");
+  renderTransaction().catch(console.error);
 }
diff --git a/static/scripts/rewards/render-transaction/render-transaction.ts b/static/scripts/rewards/render-transaction/render-transaction.ts
index 17e6d3c0..cddb2ea3 100644
--- a/static/scripts/rewards/render-transaction/render-transaction.ts
+++ b/static/scripts/rewards/render-transaction/render-transaction.ts
@@ -10,21 +10,16 @@ import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
 import { Erc20Permit, RewardPermit } from "./tx-type";
 
 const carousel = document.getElementById("carousel") as Element;
-
+const table = document.querySelector(`table`) as HTMLTableElement;
 type Success = boolean;
-export async function renderTransaction(nextTx?: boolean): Promise<Success> {
-  const table = document.getElementsByTagName(`table`)[0];
 
+export async function renderTransaction(): Promise<Success> {
   if (app.claims && app.claims.length > 1) {
     carousel.className = "flex";
     const rewardsCount = document.getElementById("rewardsCount") as Element;
     rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
   }
 
-  if (nextTx) {
-    app.nextPermit();
-  }
-
   if (!app.reward) {
     buttonController.hideAll();
     console.log("No reward found");
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 1372b19e..371eab2d 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -101,7 +101,8 @@ async function waitForTransaction(tx: TransactionResponse) {
 async function renderTx(app: AppState) {
   try {
     app.claims.slice(0, 1);
-    await renderTransaction(true);
+    app.nextPermit();
+    await renderTransaction();
   } catch (error: unknown) {
     if (error instanceof Error) {
       const e = error as unknown as MetaMaskError;
@@ -211,12 +212,13 @@ export async function generateInvalidatePermitAdminControl(app: AppState) {
   }
 
   const invalidateButton = document.getElementById("invalidator") as HTMLDivElement;
-
+  buttonController.showInvalidator();
   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;
       }
       await invalidateNonce(app.signer, app.reward.permit.nonce);
@@ -229,6 +231,7 @@ export async function generateInvalidatePermitAdminControl(app: AppState) {
       }
     }
     toaster.create("info", "Nonce invalidation transaction sent");
+    buttonController.hideInvalidator();
   });
 }
 
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index b5cf9bdd..3830493c 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -42,7 +42,8 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
 
       makeClaimButton.removeEventListener("click", claimHandler);
 
-      renderTransaction(true).catch((error) => {
+      app.nextPermit();
+      renderTransaction().catch((error) => {
         console.error(error);
         toaster.create("error", `Error rendering transaction: ${error.message}`);
       });
diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts
index 0c12484a..b8a5c022 100644
--- a/static/scripts/rewards/web3/verify-current-network.ts
+++ b/static/scripts/rewards/web3/verify-current-network.ts
@@ -5,12 +5,14 @@ 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) {
-  const web3provider = new ethers.providers.Web3Provider(window.ethereum);
-  if (!web3provider || !web3provider.provider.isMetaMask) {
-    toaster.create("info", "Please connect to MetaMask.");
+  if (!window.ethereum) {
+    toaster.create("error", "MetaMask not detected. Please install MetaMask.");
     buttonController.hideAll();
+    return;
   }
 
+  const web3provider = new ethers.providers.Web3Provider(window.ethereum);
+
   const network = await web3provider.getNetwork();
   const currentNetworkId = network.chainId;
 

From c1a591bbd253e772ce2f5c4c15b19a65a1d66722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 06:14:51 +0900
Subject: [PATCH 09/13] style: header has space

---
 static/styles/rewards/pay.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css
index 103c1394..ec76f153 100644
--- a/static/styles/rewards/pay.css
+++ b/static/styles/rewards/pay.css
@@ -87,13 +87,18 @@ a {
   display: inline-block;
   vertical-align: middle;
 }
-
+#logo > div#logo-text > span::after {
+  content: " ";
+  display: inline-block;
+  width: 8px;
+}
 #logo > div#logo-text > span {
   font-size: 20px;
   letter-spacing: 5px;
   text-transform: uppercase;
   text-rendering: geometricPrecision;
   color: #fff;
+  /* margin-right: 8px; */
   /* font-weight: 400; */
 }
 
@@ -163,7 +168,10 @@ footer {
   /* display: flex; */
   opacity: 1;
 }
-#carousel > #rewardsCount {pointer-events: none;display: inline-block;/* vertical-align: middle; */}
+#carousel > #rewardsCount {
+  pointer-events: none;
+  display: inline-block; /* vertical-align: middle; */
+}
 #prevTx,
 #nextTx {
   padding: 3px;

From 8697cf1d832b85c0ff02078880c3d8b17d075006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 06:23:22 +0900
Subject: [PATCH 10/13] fix: metamask not detected modals

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

diff --git a/static/scripts/rewards/web3/verify-current-network.ts b/static/scripts/rewards/web3/verify-current-network.ts
index b8a5c022..8d1e530d 100644
--- a/static/scripts/rewards/web3/verify-current-network.ts
+++ b/static/scripts/rewards/web3/verify-current-network.ts
@@ -1,12 +1,11 @@
 import { ethers } from "ethers";
-import { buttonController, toaster } from "../toaster";
+import { buttonController } 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) {
-    toaster.create("error", "MetaMask not detected. Please install MetaMask.");
     buttonController.hideAll();
     return;
   }

From bc12a983efd22adfb542b18c9c48558d62dfc4f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 06:52:41 +0900
Subject: [PATCH 11/13] style: refinements around loader indicator

---
 .../read-claim-data-from-url.ts               |  6 ++---
 static/scripts/rewards/toaster.ts             |  2 +-
 static/scripts/rewards/web3/erc20-permit.ts   | 26 ++++++-------------
 static/scripts/rewards/web3/erc721-permit.ts  | 16 +++++++-----
 .../rewards/web3/not-on-correct-network.ts    |  6 ++---
 static/scripts/rewards/web3/switch-network.ts |  2 ++
 6 files changed, 25 insertions(+), 33 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 d424b164..72846e7d 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
@@ -33,6 +33,7 @@ export async function readClaimDataFromUrl(app: AppState) {
   app.provider = await useFastestRpc(app);
   if (window.ethereum) {
     app.signer = await connectWallet().catch(console.error);
+    window.ethereum.on("accountsChanged", () => buttonController.showMakeClaim());
   } else {
     buttonController.hideAll();
     toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
@@ -40,9 +41,8 @@ export async function readClaimDataFromUrl(app: AppState) {
   displayRewardDetails();
   displayRewardPagination();
 
-  renderTransaction()
-    .then(() => verifyCurrentNetwork(app.networkId))
-    .catch(console.error);
+  await renderTransaction();
+  await verifyCurrentNetwork(app.networkId);
 }
 
 async function getClaimedTxs(app: AppState): Promise<Record<string, string>> {
diff --git a/static/scripts/rewards/toaster.ts b/static/scripts/rewards/toaster.ts
index 6efa9f6c..717c152e 100644
--- a/static/scripts/rewards/toaster.ts
+++ b/static/scripts/rewards/toaster.ts
@@ -18,7 +18,7 @@ export const notifications = document.querySelector(".notifications") as HTMLULi
 export const buttonController = new ButtonController(controls);
 
 export function createToast(meaning: keyof typeof toaster.icons, text: string) {
-  buttonController.hideLoader();
+  if (meaning != "info") buttonController.hideLoader();
   const toastDetails = {
     timer: 5000,
   } as {
diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index 371eab2d..eb7064db 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -4,7 +4,6 @@ import { erc20Abi, permit2Abi } from "../abis";
 import { AppState, app } from "../app-state";
 import { permit2Address } from "../constants";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
-import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc20Permit, Erc721Permit } from "../render-transaction/tx-type";
 import { MetaMaskError, buttonController, errorToast, makeClaimButton, toaster } from "../toaster";
 
@@ -87,6 +86,9 @@ async function waitForTransaction(tx: TransactionResponse) {
   try {
     const receipt = await tx.wait();
     toaster.create("success", `Claim Complete.`);
+    buttonController.showViewClaim();
+    buttonController.hideLoader();
+    buttonController.hideMakeClaim();
     console.log(receipt.transactionHash);
     return receipt;
   } catch (error: unknown) {
@@ -98,23 +100,10 @@ async function waitForTransaction(tx: TransactionResponse) {
   }
 }
 
-async function renderTx(app: AppState) {
-  try {
-    app.claims.slice(0, 1);
-    app.nextPermit();
-    await renderTransaction();
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      const e = error as unknown as MetaMaskError;
-      console.error("Error in renderTransaction: ", e);
-      errorToast(e, e.reason);
-    }
-  }
-}
-
 export function claimErc20PermitHandlerWrapper(app: AppState) {
   return async function claimErc20PermitHandler() {
-    buttonController.onlyShowLoader();
+    buttonController.hideMakeClaim();
+    buttonController.showLoader();
 
     const isPermitClaimable = await checkPermitClaimability(app);
     if (!isPermitClaimable) return;
@@ -125,6 +114,9 @@ export function claimErc20PermitHandlerWrapper(app: AppState) {
     const tx = await transferFromPermit(permit2Contract, app);
     if (!tx) return;
 
+    // buttonController.showLoader();
+    // buttonController.hideMakeClaim();
+
     const receipt = await waitForTransaction(tx);
     if (!receipt) return;
 
@@ -132,8 +124,6 @@ export function claimErc20PermitHandlerWrapper(app: AppState) {
     if (!isHashUpdated) return;
 
     makeClaimButton.removeEventListener("click", claimErc20PermitHandler);
-
-    await renderTx(app);
   };
 }
 
diff --git a/static/scripts/rewards/web3/erc721-permit.ts b/static/scripts/rewards/web3/erc721-permit.ts
index 3830493c..110989c6 100644
--- a/static/scripts/rewards/web3/erc721-permit.ts
+++ b/static/scripts/rewards/web3/erc721-permit.ts
@@ -2,7 +2,6 @@ import { JsonRpcProvider, TransactionResponse } from "@ethersproject/providers";
 import { ethers } from "ethers";
 import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
-import { renderTransaction } from "../render-transaction/render-transaction";
 import { Erc721Permit } from "../render-transaction/tx-type";
 import { buttonController, makeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
@@ -30,23 +29,26 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
       return;
     }
 
-    buttonController.onlyShowLoader();
+    buttonController.showLoader();
     try {
       const nftContract = new ethers.Contract(reward.permit.permitted.token, nftRewardAbi, signer);
 
       const tx: TransactionResponse = await nftContract.safeMint(reward.request, reward.signature);
       toaster.create("info", `Transaction sent. Waiting for confirmation...`);
       const receipt = await tx.wait();
+      buttonController.hideLoader();
       toaster.create("success", `Claim Complete.`);
+      buttonController.showViewClaim();
+      buttonController.hideMakeClaim();
       console.log(receipt.transactionHash); // @TODO: post to database
 
       makeClaimButton.removeEventListener("click", claimHandler);
 
-      app.nextPermit();
-      renderTransaction().catch((error) => {
-        console.error(error);
-        toaster.create("error", `Error rendering transaction: ${error.message}`);
-      });
+      // app.nextPermit();
+      // renderTransaction().catch((error) => {
+      //   console.error(error);
+      //   toaster.create("error", `Error rendering transaction: ${error.message}`);
+      // });
     } catch (error: unknown) {
       console.error(error);
       if (error instanceof Error) {
diff --git a/static/scripts/rewards/web3/not-on-correct-network.ts b/static/scripts/rewards/web3/not-on-correct-network.ts
index aff4c909..595525c9 100644
--- a/static/scripts/rewards/web3/not-on-correct-network.ts
+++ b/static/scripts/rewards/web3/not-on-correct-network.ts
@@ -1,13 +1,10 @@
 import { ethers } from "ethers";
 import { getNetworkName } from "../constants";
-import { toaster } from "../toaster";
+import { buttonController, toaster } from "../toaster";
 import { switchNetwork } from "./switch-network";
 
 export function notOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number, web3provider: ethers.providers.Web3Provider) {
   if (currentNetworkId !== desiredNetworkId) {
-    if (desiredNetworkId == void 0) {
-      console.error(`You must pass in an EVM network ID in the URL query parameters using the key 'network' e.g. '?network=1'`);
-    }
     const networkName = getNetworkName(desiredNetworkId);
     if (!networkName) {
       toaster.create("error", `This dApp currently does not support payouts for network ID ${desiredNetworkId}`);
@@ -15,6 +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();
     });
   }
 }
diff --git a/static/scripts/rewards/web3/switch-network.ts b/static/scripts/rewards/web3/switch-network.ts
index 51ddae7c..98266c2f 100644
--- a/static/scripts/rewards/web3/switch-network.ts
+++ b/static/scripts/rewards/web3/switch-network.ts
@@ -1,9 +1,11 @@
 import { ethers } from "ethers";
 import { addNetwork } from "./add-network";
+import { buttonController } 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();
     return true;
   } catch (error: unknown) {
     // Add network if it doesn't exist.

From 8d3fba5a67cc7751f02c7bac6a808365eb6fbb53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 14:25:26 +0900
Subject: [PATCH 12/13] fix: button loader on rejection

---
 static/scripts/rewards/web3/erc20-permit.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/scripts/rewards/web3/erc20-permit.ts b/static/scripts/rewards/web3/erc20-permit.ts
index eb7064db..9e248bd8 100644
--- a/static/scripts/rewards/web3/erc20-permit.ts
+++ b/static/scripts/rewards/web3/erc20-permit.ts
@@ -71,6 +71,7 @@ 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();
       } else {
         // Handle other errors

From 777671ec8fdcffb837e75152053c11de625fd65e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 10 Mar 2024 14:25:49 +0900
Subject: [PATCH 13/13] refactor: normal formatting on html

---
 static/index.html | 253 ++++++++++++++++++++++++++++------------------
 1 file changed, 157 insertions(+), 96 deletions(-)

diff --git a/static/index.html b/static/index.html
index 51aaec5f..fc4ede08 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,83 +1,125 @@
 <!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/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">
+<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/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></div
-          ></a
-        ></header
-      ><div
-        ><table
-          ><thead
-            ><tr
-              ><th><div>Notice</div></th
-              ><td><div>Loading...</div></td></tr
-            ></thead
-          ><tbody
-            ><tr id="Amount"
-              ><th><div>Amount</div></th
-              ><td id="rewardAmount"><div>Loading...</div></td></tr
-            ><tr id="Token"
-              ><th><div>Token</div></th
-              ><td id="rewardToken"
-                ><span class="full"><div></div></span><span class="short"><div>Loading...</div></span></td
-              ></tr
-            ><tr id="To"
-              ><th><div>For</div></th
-              ><td id="rewardRecipient"
-                ><span class="full"><div></div></span><span class="short"><div>Loading...</div></span></td
-              ></tr
-            ><tr id="additional-details-border"
-              ><th
-                ><div
-                  ><button id="additionalDetails"
-                    ><div>Details</div
-                    ><svg class="opener" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                ></path>
+              </svg>
+            </div>
+            <div id="logo-text">
+              <span>Ubiquity</span>
+              <span>Rewards</span>
+            </div>
+          </div>
+        </a>
+      </header>
+      <div>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <div>Notice</div>
+              </th>
+              <td>
+                <div>Loading...</div>
+              </td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr id="Amount">
+              <th>
+                <div>Amount</div>
+              </th>
+              <td id="rewardAmount">
+                <div>Loading...</div>
+              </td>
+            </tr>
+            <tr id="Token">
+              <th>
+                <div>Token</div>
+              </th>
+              <td id="rewardToken">
+                <span class="full">
+                  <div></div>
+                </span>
+                <span class="short">
+                  <div>Loading...</div>
+                </span>
+              </td>
+            </tr>
+            <tr id="To">
+              <th>
+                <div>For</div>
+              </th>
+              <td id="rewardRecipient">
+                <span class="full">
+                  <div></div>
+                </span>
+                <span class="short">
+                  <div>Loading...</div>
+                </span>
+              </td>
+            </tr>
+            <tr id="additional-details-border">
+              <th>
+                <div>
+                  <button id="additionalDetails">
+                    <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">
+                      />
+                    </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 id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </th>
+              <td>
+                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
                   <button id="claim-loader">
                     <svg
                       id="claim-loader"
@@ -101,38 +143,57 @@
                           to="360 50 50"
                           repeatCount="indefinite"
                         />
-                      </path></svg
-                    ><div id="claiming-message">Claiming</div>
+                      </path>
+                    </svg>
+                    <div id="claiming-message">Claiming</div>
                   </button>
-                  <button id="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">
+                  <button id="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>
+                      />
+                    </svg>
+                  </button>
 
-                  <button id="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">
+                  <button id="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>
+                      />
+                    </svg>
+                  </button>
 
                   <button id="invalidator">
-                    <div>Void</div
-                    ><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                    <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
-          ><tbody id="additionalDetailsTable"></tbody></table
-        ><figure id="carousel"><div id="prevTx"></div><div id="rewardsCount"></div><div id="nextTx"></div></figure></div
-      ><footer
-        ><div id="build"><a target="_blank" rel="noopener noreferrer"></a></div></footer></main
-    ><ul class="notifications"></ul
-    ><script src="out/init.js" type="application/javascript"></script
-    ><link href="styles/proxima.css" rel="stylesheet" /><link href="styles/toast.css" rel="stylesheet" /></body
-></html>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+          <tbody id="additionalDetailsTable"></tbody>
+        </table>
+        <figure id="carousel">
+          <div id="prevTx"></div>
+          <div id="rewardsCount"></div>
+          <div id="nextTx"></div>
+        </figure>
+      </div>
+      <footer>
+        <div id="build">
+          <a target="_blank" rel="noopener noreferrer"></a>
+        </div>
+      </footer>
+    </main>
+    <ul class="notifications"></ul>
+    <script src="out/init.js" type="application/javascript"></script>
+    <link href="styles/proxima.css" rel="stylesheet" />
+    <link href="styles/toast.css" rel="stylesheet" />
+  </body>
+</html>
