Redo Caroussel

static/index.html

@@ -54,8 +54,7 @@
           </div>
         </a>
       </header>
-      <div>
-        <table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
+      <template id="table-template"><table data-details-visible="false" data-make-claim-rendered="false" data-contract-loaded="false" data-make-claim="error">
           <thead>
             <tr>
               <th>
@@ -158,7 +157,7 @@
                     </svg>
                   </button>
 
-                  <button id="invalidator">
+                  <button class="invalidator">
                     <div>Void</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                       <path
@@ -171,8 +170,8 @@
             </tr>
           </tbody>
           <tbody id="additionalDetailsTable"></tbody>
-        </table>
-      </div>
+        </table></template>
+      <div id="table-target"></div>
       <footer
         ><figure id="carousel">
           <div id="prevTx"></div>

static/scripts/rewards/ButtonController.ts

@@ -1,54 +1,57 @@
-const LOADER = "data-loader";
-const MAKE_CLAIM = "data-make-claim";
-const VIEW_CLAIM = "data-view-claim";
-const INVALIDATOR = "data-invalidator";
+// const LOADER = "data-loader";
+// const MAKE_CLAIM = "data-make-claim";
+// const VIEW_CLAIM = "data-view-claim";
+// const INVALIDATOR = "data-invalidator";
 export class ButtonController {
-  private _controls: HTMLDivElement;
+  private _controls!: HTMLDivElement;
 
+  //Functionality needs to be changed to work per reward
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   constructor(controls: HTMLDivElement) {
-    this._controls = controls;
-    this.hideAll();
+    // this._controls = controls;
+    // this.hideAll();
   }
 
   public showLoader(): void {
     if (window.ethereum) {
-      this._controls.setAttribute(LOADER, "true");
+      // this._controls.setAttribute(LOADER, "true");
     } else {
       throw new Error("Can not show loader without `ethereum`");
     }
   }
 
   public hideLoader(): void {
-    this._controls.setAttribute(LOADER, "false");
+    // this._controls.setAttribute(LOADER, "false");
   }
 
   public hideMakeClaim(): void {
-    this._controls.setAttribute(MAKE_CLAIM, "false");
+    // this._controls.setAttribute(MAKE_CLAIM, "false");
   }
 
   public showMakeClaim(): void {
     if (window.ethereum) {
-      this._controls.setAttribute(MAKE_CLAIM, "true");
+      // this._controls.setAttribute(MAKE_CLAIM, "true");
     } else {
       throw new Error("Can not show make claim button without `ethereum`");
     }
   }
 
   public hideViewClaim(): void {
-    this._controls.setAttribute(VIEW_CLAIM, "false");
+    // this._controls.setAttribute(VIEW_CLAIM, "false");
   }
 
   public showViewClaim(): void {
-    this._controls.setAttribute(VIEW_CLAIM, "true");
+    // this._controls.setAttribute(VIEW_CLAIM, "true");
   }
 
   public hideInvalidator(): void {
-    this._controls.setAttribute(INVALIDATOR, "false");
+    // this._controls.setAttribute(INVALIDATOR, "false");
   }
 
   public showInvalidator(): void {
     if (window.ethereum) {
-      this._controls.setAttribute(INVALIDATOR, "true");
+      // this._controls.setAttribute(INVALIDATOR, "true");
     } else {
       throw new Error("Can not show invalidator button without `ethereum`");
     }

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

@@ -1,7 +1,7 @@
 import { app } from "../app-state";
 import { getMakeClaimButton } from "../toaster";
 import { table } from "./read-claim-data-from-url";
-import { renderTransaction } from "./render-transaction";
+import { renderTransactions } from "./render-transaction";
 import { removeAllEventListeners } from "./utils";
 
 const nextTxButton = document.getElementById("nextTx");
@@ -17,5 +17,5 @@ function transactionHandler(direction: "next" | "previous") {
   removeAllEventListeners(getMakeClaimButton()) as HTMLButtonElement;
   direction === "next" ? app.nextPermit() : app.previousPermit();
   table.setAttribute(`data-make-claim`, "error");
-  renderTransaction().catch(console.error);
+  renderTransactions().catch(console.error);
 }

static/scripts/rewards/render-transaction/insert-table-data.ts

@@ -1,21 +1,21 @@
 import { BigNumber, ethers } from "ethers";
 import { AppState, app } from "../app-state";
-import { Erc20Permit, Erc721Permit } from "./tx-type";
+import { Erc721Permit, RewardPermit } from "./tx-type";
 
 function shortenAddress(address: string): string {
   return `${address.slice(0, 10)}...${address.slice(-8)}`;
 }
 
 export function insertErc20PermitTableData(
   app: AppState,
+  reward: RewardPermit,
   table: Element,
   treasury: { balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }
 ): Element {
-  const reward = app.reward as Erc20Permit;
-  const requestedAmountElement = document.getElementById("rewardAmount") as Element;
-  renderToFields(reward.transferDetails.to, app.currentExplorerUrl);
-  renderTokenFields(reward.permit.permitted.token, app.currentExplorerUrl);
-  renderDetailsFields([
+  const requestedAmountElement = table.querySelector("#rewardAmount") as Element;
+  renderToFields(table, reward.transferDetails.to, app.currentExplorerUrl);
+  renderTokenFields(table, reward.permit.permitted.token, app.currentExplorerUrl);
+  renderDetailsFields(table, [
     { name: "From", value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.owner}">${reward.owner}</a>` },
     {
       name: "Expiry",
@@ -32,11 +32,11 @@ export function insertErc20PermitTableData(
 }
 
 export function insertErc721PermitTableData(reward: Erc721Permit, table: Element): Element {
-  const requestedAmountElement = document.getElementById("rewardAmount") as Element;
-  renderToFields(reward.transferDetails.to, app.currentExplorerUrl);
-  renderTokenFields(reward.permit.permitted.token, app.currentExplorerUrl);
+  const requestedAmountElement = table.querySelector("#rewardAmount") as Element;
+  renderToFields(table, reward.transferDetails.to, app.currentExplorerUrl);
+  renderTokenFields(table, reward.permit.permitted.token, app.currentExplorerUrl);
   const { GITHUB_REPOSITORY_NAME, GITHUB_CONTRIBUTION_TYPE, GITHUB_ISSUE_ID, GITHUB_ORGANIZATION_NAME, GITHUB_USERNAME } = reward.nftMetadata;
-  renderDetailsFields([
+  renderDetailsFields(table, [
     {
       name: "NFT address",
       value: `<a target="_blank" rel="noopener noreferrer" href="${app.currentExplorerUrl}/address/${reward.permit.permitted.token}">${reward.permit.permitted.token}</a>`,
@@ -67,8 +67,8 @@ export function insertErc721PermitTableData(reward: Erc721Permit, table: Element
   return requestedAmountElement;
 }
 
-function renderDetailsFields(additionalDetails: { name: string; value: string | undefined }[]) {
-  const additionalDetailsDiv = document.getElementById("additionalDetailsTable") as Element;
+function renderDetailsFields(table: Element, additionalDetails: { name: string; value: string | undefined }[]) {
+  const additionalDetailsDiv = table.querySelector("#additionalDetailsTable") as Element;
   let additionalDetailsHtml = "";
   for (const { name, value } of additionalDetails) {
     if (!value) continue;
@@ -81,27 +81,27 @@ function renderDetailsFields(additionalDetails: { name: string; value: string |
   additionalDetailsDiv.innerHTML = additionalDetailsHtml;
 }
 
-function renderTokenFields(tokenAddress: string, explorerUrl: string) {
-  const tokenFull = document.querySelector("#Token .full") as Element;
-  const tokenShort = document.querySelector("#Token .short") as Element;
+function renderTokenFields(table: Element, tokenAddress: string, explorerUrl: string) {
+  const tokenFull = table.querySelector("#Token .full") as Element;
+  const tokenShort = table.querySelector("#Token .short") as Element;
 
   tokenFull.innerHTML = `<div>${tokenAddress}</div>`;
   tokenShort.innerHTML = `<div>${shortenAddress(tokenAddress)}</div>`;
 
-  const tokenBoth = document.getElementById(`rewardToken`) as Element;
+  const tokenBoth = table.querySelector(`#rewardToken`) as Element;
   tokenBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/token/${tokenAddress}">${tokenBoth.innerHTML}</a>`;
 }
 
-function renderToFields(receiverAddress: string, explorerUrl: string) {
-  const toFull = document.querySelector("#rewardRecipient .full") as Element;
-  const toShort = document.querySelector("#rewardRecipient .short") as Element;
+function renderToFields(table: Element, receiverAddress: string, explorerUrl: string) {
+  const toFull = table.querySelector("#rewardRecipient .full") as Element;
+  const toShort = table.querySelector("#rewardRecipient .short") as Element;
 
   // if the for address is an ENS name neither will be found
   if (!toFull || !toShort) return;
 
   toFull.innerHTML = `<div>${receiverAddress}</div>`;
   toShort.innerHTML = `<div>${shortenAddress(receiverAddress)}</div>`;
 
-  const toBoth = document.getElementById(`rewardRecipient`) as Element;
+  const toBoth = table.querySelector(`#rewardRecipient`) as Element;
   toBoth.innerHTML = `<a target="_blank" rel="noopener noreferrer" href="${explorerUrl}/address/${receiverAddress}">${toBoth.innerHTML}</a>`;
 }

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

@@ -8,7 +8,7 @@ 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 { renderTransactions } from "./render-transaction";
 import { setClaimMessage } from "./set-claim-message";
 import { RewardPermit, claimTxT } from "./tx-type";
 
@@ -50,10 +50,9 @@ export async function readClaimDataFromUrl(app: AppState) {
     buttonController.hideAll();
     toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
   }
-  displayRewardDetails();
   displayRewardPagination();
 
-  await renderTransaction();
+  await renderTransactions();
   if (app.networkId !== null) {
     await verifyCurrentNetwork(app.networkId);
   } else {
@@ -97,13 +96,3 @@ function displayRewardPagination() {
     }
   }
 }
-
-function displayRewardDetails() {
-  let isDetailsVisible = false;
-  table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
-  const additionalDetails = document.getElementById(`additionalDetails`) as HTMLElement;
-  additionalDetails.addEventListener("click", () => {
-    isDetailsVisible = !isDetailsVisible;
-    table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
-  });
-}

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 { checkRenderInvalidatePermitAdminControl, claimErc20PermitHandlerWrapper, fetchTreasury } from "../web3/erc20-permit";
+import { checkRenderInvalidatePermitAdminControl, claimErc20PermitHandlerWrapper, fetchTreasury, handleInvalidateButton } from "../web3/erc20-permit";
 import { claimErc721PermitHandler } from "../web3/erc721-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
@@ -10,73 +10,97 @@ 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;
+const tablesTarget = document.getElementById("table-target")!;
+// const table = document.querySelector(`table`) as HTMLTableElement;
 type Success = boolean;
 
-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`;
-  }
+function displayRewardDetails(table: HTMLTableElement) {
+  let isDetailsVisible = false;
+  table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
+  const additionalDetails = table.querySelector(`#additionalDetails`) as HTMLElement;
+  additionalDetails.addEventListener("click", () => {
+    isDetailsVisible = !isDetailsVisible;
+    table.setAttribute(`data-details-visible`, isDetailsVisible.toString());
+  });
+}
 
-  if (!app.reward) {
-    buttonController.hideAll();
-    console.log("No reward found");
-    return false;
-  }
+export function renderTransactions() {
+  tablesTarget.innerHTML = "";
+  return Promise.all(
+    app.claims.map((claim) =>
+      renderTransaction(claim).then((table) => {
+        handleInvalidateButton(table, claim);
+        displayRewardDetails(table);
+        return table;
+      })
+    )
+  ).then((tables) => tables.map((table) => tablesTarget.appendChild(table)));
+}
+
+async function renderTransaction(reward: RewardPermit): Promise<HTMLTableElement> {
+  // 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`;
+  // }
 
-  verifyCurrentNetwork(app.reward.networkId).catch(console.error);
+  // if (!app.reward) {
+  //   buttonController.hideAll();
+  //   console.log("No reward found");
+  //   return false;
+  // }
+  const table = (document.getElementById("table-template") as HTMLTemplateElement)!.content.cloneNode(true).firstChild as HTMLTableElement;
+  verifyCurrentNetwork(reward.networkId).catch(console.error);
 
-  if (permitCheck(app.reward)) {
-    const treasury = await fetchTreasury(app.reward);
+  if (permitCheck(reward)) {
+    const treasury = await fetchTreasury(reward);
 
     // insert tx data into table
-    const requestedAmountElement = insertErc20PermitTableData(app, table, treasury);
+    const requestedAmountElement = insertErc20PermitTableData(app, reward, table, treasury);
 
     renderTokenSymbol({
-      tokenAddress: app.reward.permit.permitted.token,
-      ownerAddress: app.reward.owner,
-      amount: app.reward.transferDetails.requestedAmount,
-      explorerUrl: networkExplorers[app.reward.networkId],
+      tokenAddress: reward.permit.permitted.token,
+      ownerAddress: reward.owner,
+      amount: reward.transferDetails.requestedAmount,
+      explorerUrl: networkExplorers[reward.networkId],
       table,
       requestedAmountElement,
     }).catch(console.error);
 
     const toElement = document.getElementById(`rewardRecipient`) as Element;
-    renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
+    renderEnsName({ element: toElement, address: reward.transferDetails.to }).catch(console.error);
 
     if (app.provider) {
       checkRenderInvalidatePermitAdminControl(app).catch(console.error);
     }
 
-    if (app.claimTxs[app.reward.permit.nonce.toString()] !== undefined) {
+    if (app.claimTxs[reward.permit.nonce.toString()] !== undefined) {
       buttonController.showViewClaim();
-      viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[app.reward.permit.nonce.toString()]}`));
+      viewClaimButton.addEventListener("click", () => window.open(`${app.currentExplorerUrl}/tx/${app.claimTxs[reward.permit.nonce.toString()]}`));
     } else if (window.ethereum) {
       // requires wallet connection to claim
       buttonController.showMakeClaim();
-      getMakeClaimButton().addEventListener("click", claimErc20PermitHandlerWrapper(app));
+      // getMakeClaimButton(table).addEventListener("click", claimErc20PermitHandlerWrapper(app, reward));
     }
 
     table.setAttribute(`data-make-claim`, "ok");
   } else {
-    const requestedAmountElement = insertErc721PermitTableData(app.reward, table);
+    const requestedAmountElement = insertErc721PermitTableData(reward, table);
     table.setAttribute(`data-make-claim`, "ok");
     renderNftSymbol({
-      tokenAddress: app.reward.permit.permitted.token,
-      explorerUrl: networkExplorers[app.reward.networkId],
+      tokenAddress: reward.permit.permitted.token,
+      explorerUrl: networkExplorers[reward.networkId],
       table,
       requestedAmountElement,
     }).catch(console.error);
 
     const toElement = document.getElementById(`rewardRecipient`) as Element;
-    renderEnsName({ element: toElement, address: app.reward.transferDetails.to }).catch(console.error);
+    renderEnsName({ element: toElement, address: reward.transferDetails.to }).catch(console.error);
 
-    getMakeClaimButton().addEventListener("click", claimErc721PermitHandler(app.reward));
+    // getMakeClaimButton(table).addEventListener("click", claimErc721PermitHandler(reward));
   }
 
-  return true;
+  return table;
 }
 
 function permitCheck(permit: RewardPermit): permit is Erc20Permit {