Merge pull request #197 from pavlovcik/style/general-enhancements

Style/general enhancements

static/index.html

@@ -55,14 +55,14 @@
         </a>
       </header>
       <div>
-        <table>
+        <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
           <thead>
             <tr>
               <th>
                 <div>Notice</div>
               </th>
               <td>
-                <div>Loading...</div>
+                <div class="loading-message">Loading</div>
               </td>
             </tr>
           </thead>
@@ -72,7 +72,7 @@
                 <div>Amount</div>
               </th>
               <td id="rewardAmount">
-                <div>Loading...</div>
+                <div class="loading-message">Loading</div>
               </td>
             </tr>
             <tr id="Token">
@@ -84,7 +84,7 @@
                   <div></div>
                 </span>
                 <span class="short">
-                  <div>Loading...</div>
+                  <div class="loading-message">Loading</div>
                 </span>
               </td>
             </tr>
@@ -97,7 +97,10 @@
                   <div></div>
                 </span>
                 <span class="short">
-                  <div>Loading...</div>
+                  <div class="loading-message">Loading</div>
+                </span>
+                <span class="ens">
+                  <div></div>
                 </span>
               </td>
             </tr>
@@ -169,13 +172,13 @@
           </tbody>
           <tbody id="additionalDetailsTable"></tbody>
         </table>
-        <figure id="carousel">
+      </div>
+      <footer
+        ><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>

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/proxima.css

@@ -1,8 +1,5 @@
-body {
+* {
   font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
-  background-color: #06061aff;
-  color: #fff;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC");
 }
 @font-face {
   font-family: "Ubiquity Nova";

static/styles/rewards/background.css

@@ -1,7 +1,5 @@
 background,
 background #grid {
-  width: 100%;
-  height: 100%;
   position: fixed;
   top: 0;
   left: 0;
@@ -23,8 +21,8 @@ background #grid {
 }
 
 canvas {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 
 .gradient {
@@ -33,7 +31,7 @@ canvas {
   position: absolute;
   background-image: radial-gradient(#00bfff00 0%, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%);
   opacity: 0;
-  animation: fadeIn 2s ease-in-out forwards;
+  animation: background-gradients-fade-in 2s ease-in-out forwards;
 }
 
 background > :nth-child(1) {
@@ -43,7 +41,7 @@ background > :nth-child(2) {
   transform: translateY(-50vh);
 }
 
-@keyframes fadeIn {
+@keyframes background-gradients-fade-in {
   to {
     opacity: 0.125;
   }