style: refinements around loader indicator

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

@@ -33,16 +33,16 @@ 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.");
   }
   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>> {

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 {

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,15 +114,16 @@ 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;
 
     const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
     if (!isHashUpdated) return;
 
     makeClaimButton.removeEventListener("click", claimErc20PermitHandler);
-
-    await renderTx(app);
   };
 }
 

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) {

static/scripts/rewards/web3/not-on-correct-network.ts

@@ -1,20 +1,18 @@
 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}`);
     }
     switchNetwork(web3provider, desiredNetworkId).catch((error) => {
       console.error(error);
       toaster.create("error", `Please switch to the ${networkName} network to claim this reward.`);
+      buttonController.hideAll();
     });
   }
 }

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.