Merge pull request #194 from FernandVEYRIER/fix/permit-claim

fix: callbacks are properly set on the claim button

.env.example

@@ -4,6 +4,8 @@ FRONTEND_URL=""
 UBIQUIBOT_PRIVATE_KEY=""
 RPC_PROVIDER_URL=""
 PAYMENT_TOKEN_ADDRESS="" # // DAI address, mainnet: 0x6b175474e89094c44da98b954eedeac495271d0f, goerli: 0x11fE4B6AE13d2a6055C8D9cF65c55bac32B5d844
+SUPABASE_URL=""
+SUPABASE_ANON_KEY=""
 # variables depending on spender (bounty hunter)
 AMOUNT_IN_ETH="1" # amount in ether, 1 AMOUNT_IN_ETH = 1000000000000000000 WEI
 BENEFICIARY_ADDRESS=""

README.md

@@ -46,7 +46,7 @@ http://localhost:8080?claim=eyJwZXJtaXQiOnsicGVybWl0dGVkIjp7InRva2VuIjoiMHgxMWZF
 
 ###### Using any other `--chain-id` will hit real RPC endpoints.
 
-```
+```shell
 cast rpc anvil_impersonateAccount 0xba12222222228d8ba445958a75a0704d566bf2c8 &
 cast send 0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d --unlocked --from 0xba12222222228d8ba445958a75a0704d566bf2c8 "transfer(address,uint256)(bool)" 0x70997970C51812dc3A010C7d01b50e0d17dc79C8  337888400000000000000000 &
 cast send 0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d --unlocked --from 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 "approve(address,uint256)(bool)" 0x000000000022D473030F116dDEE9F6B43aC78BA3  9999999999999991111111119999999999999999 &

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

@@ -1,5 +1,5 @@
 import { app } from "../app-state";
-import { makeClaimButton } from "../toaster";
+import { getMakeClaimButton } from "../toaster";
 import { table } from "./read-claim-data-from-url";
 import { renderTransaction } from "./render-transaction";
 import { removeAllEventListeners } from "./utils";
@@ -14,7 +14,7 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
 }
 
 export function transactionHandler(direction: "next" | "previous") {
-  removeAllEventListeners(makeClaimButton) as HTMLButtonElement;
+  removeAllEventListeners(getMakeClaimButton()) as HTMLButtonElement;
   direction === "next" ? app.nextPermit() : app.previousPermit();
   table.setAttribute(`data-make-claim`, "error");
   renderTransaction().catch(console.error);

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

@@ -1,6 +1,6 @@
 import { app } from "../app-state";
 import { networkExplorers } from "../constants";
-import { buttonController, makeClaimButton, viewClaimButton } from "../toaster";
+import { buttonController, getMakeClaimButton, viewClaimButton } from "../toaster";
 import { claimErc20PermitHandlerWrapper, fetchTreasury, generateInvalidatePermitAdminControl } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
@@ -56,14 +56,13 @@ export async function renderTransaction(): Promise<Success> {
     } else if (window.ethereum) {
       // requires wallet connection to claim
       buttonController.showMakeClaim();
-      makeClaimButton.addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      getMakeClaimButton().addEventListener("click", claimErc20PermitHandlerWrapper(app));
     }
 
     table.setAttribute(`data-make-claim`, "ok");
   } else {
     const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
     table.setAttribute(`data-make-claim`, "ok");
-
     renderNftSymbol({
       tokenAddress: app.reward.permit.permitted.token,
       explorerUrl: networkExplorers[app.reward.networkId],
@@ -74,7 +73,7 @@ export async function renderTransaction(): Promise<Success> {
     const toElement = document.getElementById(`rewardRecipient`) as Element;
     renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
 
-    makeClaimButton.addEventListener("click", claimErc721PermitHandler(app.reward));
+    getMakeClaimButton().addEventListener("click", claimErc721PermitHandler(app.reward));
   }
 
   return true;

static/scripts/rewards/toaster.ts

@@ -12,7 +12,9 @@ export const toaster = {
 };
 
 export const controls = document.getElementById("controls") as HTMLDivElement;
-export const makeClaimButton = document.getElementById("make-claim") as HTMLButtonElement;
+export function getMakeClaimButton() {
+  return 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);

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 { AppState, app } from "../app-state";
+import { app, AppState } 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 { MetaMaskError, buttonController, errorToast, makeClaimButton, toaster } from "../toaster";
+import { buttonController, errorToast, getMakeClaimButton, MetaMaskError, toaster } from "../toaster";
 
 export async function fetchTreasury(
   permit: Erc20Permit | Erc721Permit
@@ -124,7 +124,7 @@ export function claimErc20PermitHandlerWrapper(app: AppState) {
     const isHashUpdated = await updatePermitTxHash(app, receipt.transactionHash);
     if (!isHashUpdated) return;
 
-    makeClaimButton.removeEventListener("click", claimErc20PermitHandler);
+    getMakeClaimButton().removeEventListener("click", claimErc20PermitHandler);
   };
 }
 

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

@@ -3,7 +3,7 @@ import { ethers } from "ethers";
 import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
 import { Erc721Permit } from "../render-transaction/tx-type";
-import { buttonController, makeClaimButton, toaster } from "../toaster";
+import { buttonController, getMakeClaimButton, toaster } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 
 export function claimErc721PermitHandler(reward: Erc721Permit) {
@@ -42,7 +42,7 @@ export function claimErc721PermitHandler(reward: Erc721Permit) {
       buttonController.hideMakeClaim();
       console.log(receipt.transactionHash); // @TODO: post to database
 
-      makeClaimButton.removeEventListener("click", claimHandler);
+      getMakeClaimButton().removeEventListener("click", claimHandler);
 
       // app.nextPermit();
       // renderTransaction().catch((error) => {