fix: refinements around login switching and permit claim or invalidator buttons

Author: 0x4007

static/index.html

@@ -162,7 +162,7 @@
                     <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-table46.153-704l-224 224 224 224L704-213.847l-224-224-224 224Z"
+                        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>

static/scripts/rewards/render-transaction/read-claim-data-from-url.ts

@@ -3,13 +3,14 @@ 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 { buttonController, toaster } from "../toaster";
 import { connectWallet } from "../web3/connect-wallet";
+import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl } from "../web3/erc20-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { claimRewardsPagination } from "./claim-rewards-pagination";
 import { renderTransaction } from "./render-transaction";
 import { setClaimMessage } from "./set-claim-message";
 import { RewardPermit, claimTxT } from "./tx-type";
-import { buttonController, toaster } from "../toaster";
 
 declare const SUPABASE_URL: string;
 declare const SUPABASE_ANON_KEY: string;
@@ -33,7 +34,10 @@ 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());
+    window.ethereum.on("accountsChanged", () => {
+      checkRenderMakeClaimControl(app).catch(console.error);
+      checkRenderInvalidatePermitAdminControl(app).catch(console.error);
+    });
   } else {
     buttonController.hideAll();
     toaster.create("info", "Please use a web3 enabled browser to collect this reward.");

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

@@ -1,7 +1,7 @@
 import { app } from "../app-state";
 import { networkExplorers } from "../constants";
 import { buttonController, getMakeClaimButton, viewClaimButton } from "../toaster";
-import { claimErc20PermitHandlerWrapper, fetchTreasury, generateInvalidatePermitAdminControl } from "../web3/erc20-permit";
+import { checkRenderInvalidatePermitAdminControl, claimErc20PermitHandlerWrapper, fetchTreasury } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
@@ -47,7 +47,7 @@ export async function renderTransaction(): Promise<Success> {
     renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
 
     if (app.provider) {
-      generateInvalidatePermitAdminControl(app).catch(console.error);
+      checkRenderInvalidatePermitAdminControl(app).catch(console.error);
     }
 
     if (app.claimTxs[app.reward.permit.nonce.toString()] !== undefined) {

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

@@ -1,11 +1,11 @@
 import { JsonRpcSigner, TransactionResponse } from "@ethersproject/providers";
 import { BigNumber, BigNumberish, Contract, ethers } from "ethers";
 import { erc20Abi, permit2Abi } from "../abis";
-import { app, AppState } from "../app-state";
+import { AppState, app } from "../app-state";
 import { permit2Address } from "../constants";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
 import { Erc20Permit, Erc721Permit } from "../render-transaction/tx-type";
-import { buttonController, errorToast, getMakeClaimButton, MetaMaskError, toaster } from "../toaster";
+import { MetaMaskError, buttonController, errorToast, getMakeClaimButton, toaster } from "../toaster";
 
 export async function fetchTreasury(
   permit: Erc20Permit | Erc721Permit
@@ -138,7 +138,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.`);
+    toaster.create("error", `Your reward for this task has already been claimed.`);
     buttonController.showViewClaim();
     return false;
   }
@@ -186,46 +186,67 @@ export async function checkPermitClaimable(app: AppState): Promise<boolean> {
   return true;
 }
 
-export async function generateInvalidatePermitAdminControl(app: AppState) {
+export async function checkRenderMakeClaimControl(app: AppState) {
   try {
     const address = await app.signer.getAddress();
     const user = address.toLowerCase();
 
     if (app.reward) {
-      const owner = app.reward.owner.toLowerCase();
-      if (owner !== user) {
+      const beneficiary = app.reward.transferDetails.to.toLowerCase();
+      if (beneficiary !== user) {
+        buttonController.hideMakeClaim();
         return;
       }
     }
   } catch (error) {
     console.error("Error getting address from signer");
     console.error(error);
   }
+  buttonController.showMakeClaim();
+}
 
-  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.`);
+export async function checkRenderInvalidatePermitAdminControl(app: AppState) {
+  try {
+    const address = await app.signer.getAddress();
+    const user = address.toLowerCase();
+
+    if (app.reward) {
+      const owner = app.reward.owner.toLowerCase();
+      if (owner !== user) {
         buttonController.hideInvalidator();
         return;
       }
-      await invalidateNonce(app.signer, app.reward.permit.nonce);
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        const e = error as unknown as MetaMaskError;
-        console.error(e);
-        errorToast(e, e.reason);
-        return;
-      }
     }
-    toaster.create("info", "Nonce invalidation transaction sent");
-    buttonController.hideInvalidator();
-  });
+  } catch (error) {
+    console.error("Error getting address from signer");
+    console.error(error);
+  }
+  buttonController.showInvalidator();
 }
 
+const invalidateButton = document.getElementById("invalidator") as HTMLDivElement;
+
+invalidateButton.addEventListener("click", async function invalidateButtonClickHandler() {
+  try {
+    const isClaimed = await isNonceClaimed(app);
+    if (isClaimed) {
+      toaster.create("error", `This reward has already been claimed or invalidated.`);
+      buttonController.hideInvalidator();
+      return;
+    }
+    await invalidateNonce(app.signer, app.reward.permit.nonce);
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      const e = error as unknown as MetaMaskError;
+      console.error(e);
+      errorToast(e, e.reason);
+      return;
+    }
+  }
+  toaster.create("info", "Nonce invalidation transaction sent");
+  buttonController.hideInvalidator();
+});
+
 //mimics https://github.com/Uniswap/permit2/blob/a7cd186948b44f9096a35035226d7d70b9e24eaf/src/SignatureTransfer.sol#L150
 export async function isNonceClaimed(app: AppState): Promise<boolean> {
   const provider = app.provider;

static/scripts/rewards/web3/handle-if-on-correct-network.ts

@@ -2,8 +2,8 @@ import { buttonController } from "../toaster";
 
 export function handleIfOnCorrectNetwork(currentNetworkId: number, desiredNetworkId: number) {
   if (desiredNetworkId === currentNetworkId) {
-    buttonController.showInvalidator();
+    buttonController.showMakeClaim();
   } else {
-    buttonController.hideInvalidator();
+    buttonController.hideMakeClaim();
   }
 }

static/styles/rewards/claim-table.css

@@ -31,8 +31,6 @@ table #controls {
 table #controls > button {
   flex: 1;
   padding: 0 24px;
-  justify-content: center;
-  align-items: center;
 }
 table aside {
   text-transform: uppercase;
@@ -310,8 +308,6 @@ thead {
   transition: 0.25s all ease-in-out;
   border: 1px solid var(--border-color);
   transform: translate(-50%, -50%);
-  /* padding: 0 16px; */
-  /* border-radius: 3px; */
   width: 100%;
   max-width: 563px;
   overflow: hidden;
@@ -324,15 +320,9 @@ table * {
 @keyframes thead-fade-in {
   0% {
     opacity: 0;
-    /* transform: translate(-50%, -50%) scale(1.1); */
-    /* filter: blur(16px); */
-    /* background: #fff */
   }
   100% {
     opacity: 1;
-    /* transform: translate(-50%, -50%) scale(1); */
-    /* filter: blur(0px); */
-    /* background: unset */
   }
 }