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>
@@ -92,7 +91,7 @@
               <th>
                 <div>For</div>
               </th>
-              <td id="rewardRecipient">
+              <td class="rewardRecipient">
                 <span class="full">
                   <div></div>
                 </span>
@@ -123,7 +122,7 @@
                 </div>
               </th>
               <td>
-                <div id="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
+                <div class="controls" data-loader="false" data-make-claim="false" data-view-claim="false">
                   <button id="claim-loader">
                     <svg
                       version="1.1"
@@ -140,7 +139,7 @@
                     </svg>
                     <div id="claiming-message">Claiming</div>
                   </button>
-                  <button id="make-claim">
+                  <button class="make-claim">
                     <div class="claim-title">Collect</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="claim-icon">
                       <path
@@ -149,7 +148,7 @@
                     </svg>
                   </button>
 
-                  <button id="view-claim">
+                  <button class="view-claim">
                     <div class="claim-title">View Claim</div>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" id="link-icon">
                       <path
@@ -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,91 +1,101 @@
+import { RewardPermit } from "./render-transaction/tx-type";
+
 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;
+  //Functionality needs to be changed to work per reward
+  setAttribute(rewards: (RewardPermit | undefined)[], attribute: string, value: string) {
+    rewards.forEach((reward) => {
+      if (!reward) return;
+      const controls = document.getElementById(reward.permit.nonce.toString())?.querySelector(".controls") as HTMLDivElement;
+      controls.setAttribute(attribute, value);
+    });
+  }
 
-  constructor(controls: HTMLDivElement) {
-    this._controls = controls;
+  constructor() {
     this.hideAll();
   }
 
-  public showLoader(): void {
+  public showLoader(...rewards: (RewardPermit | undefined)[]): void {
     if (window.ethereum) {
-      this._controls.setAttribute(LOADER, "true");
+      this.setAttribute(rewards, LOADER, "true");
     } else {
       throw new Error("Can not show loader without `ethereum`");
     }
   }
 
-  public hideLoader(): void {
-    this._controls.setAttribute(LOADER, "false");
+  public hideLoader(...rewards: (RewardPermit | undefined)[]): void {
+    this.setAttribute(rewards, LOADER, "false");
   }
 
-  public hideMakeClaim(): void {
-    this._controls.setAttribute(MAKE_CLAIM, "false");
+  public hideMakeClaim(...rewards: (RewardPermit | undefined)[]): void {
+    this.setAttribute(rewards, MAKE_CLAIM, "false");
   }
 
-  public showMakeClaim(): void {
+  public showMakeClaim(...rewards: (RewardPermit | undefined)[]): void {
     if (window.ethereum) {
-      this._controls.setAttribute(MAKE_CLAIM, "true");
+      this.setAttribute(rewards, MAKE_CLAIM, "true");
     } else {
       throw new Error("Can not show make claim button without `ethereum`");
     }
   }
 
-  public hideViewClaim(): void {
-    this._controls.setAttribute(VIEW_CLAIM, "false");
+  public hideViewClaim(...rewards: (RewardPermit | undefined)[]): void {
+    this.setAttribute(rewards, VIEW_CLAIM, "false");
   }
 
-  public showViewClaim(): void {
-    this._controls.setAttribute(VIEW_CLAIM, "true");
+  public showViewClaim(...rewards: (RewardPermit | undefined)[]): void {
+    this.setAttribute(rewards, VIEW_CLAIM, "true");
   }
 
-  public hideInvalidator(): void {
-    this._controls.setAttribute(INVALIDATOR, "false");
+  public hideInvalidator(...rewards: (RewardPermit | undefined)[]): void {
+    this.setAttribute(rewards, INVALIDATOR, "false");
   }
 
-  public showInvalidator(): void {
+  public showInvalidator(...rewards: (RewardPermit | undefined)[]): void {
     if (window.ethereum) {
-      this._controls.setAttribute(INVALIDATOR, "true");
+      this.setAttribute(rewards, INVALIDATOR, "true");
     } else {
       throw new Error("Can not show invalidator button without `ethereum`");
     }
   }
 
-  public onlyShowLoader(): void {
-    this.hideMakeClaim();
-    this.hideViewClaim();
-    this.hideInvalidator();
-    this.showLoader();
+  public onlyShowLoader(...rewards: (RewardPermit | undefined)[]): void {
+    this.hideMakeClaim(...rewards);
+    this.hideViewClaim(...rewards);
+    this.hideInvalidator(...rewards);
+    this.showLoader(...rewards);
   }
 
-  public onlyShowMakeClaim(): void {
-    this.hideLoader();
-    this.showMakeClaim();
-    this.hideViewClaim();
-    this.hideInvalidator();
+  public onlyShowMakeClaim(...rewards: (RewardPermit | undefined)[]): void {
+    this.hideLoader(...rewards);
+    this.showMakeClaim(...rewards);
+    this.hideViewClaim(...rewards);
+    this.hideInvalidator(...rewards);
   }
 
-  public onlyShowViewClaim(): void {
-    this.hideLoader();
-    this.hideMakeClaim();
-    this.showViewClaim();
-    this.hideInvalidator();
+  public onlyShowViewClaim(...rewards: (RewardPermit | undefined)[]): void {
+    this.hideLoader(...rewards);
+    this.hideMakeClaim(...rewards);
+    this.showViewClaim(...rewards);
+    this.hideInvalidator(...rewards);
   }
 
-  public onlyShowInvalidator(): void {
-    this.hideLoader();
-    this.hideMakeClaim();
-    this.hideViewClaim();
-    this.showInvalidator();
+  public onlyShowInvalidator(...rewards: (RewardPermit | undefined)[]): void {
+    this.hideLoader(...rewards);
+    this.hideMakeClaim(...rewards);
+    this.hideViewClaim(...rewards);
+    this.showInvalidator(...rewards);
   }
 
-  public hideAll(): void {
-    this.hideLoader();
-    this.hideMakeClaim();
-    this.hideViewClaim();
-    this.hideInvalidator();
+  public hideAll(...rewards: (RewardPermit | undefined)[]): void {
+    this.hideLoader(...rewards);
+    this.hideMakeClaim(...rewards);
+    this.hideViewClaim(...rewards);
+    this.hideInvalidator(...rewards);
   }
 }

static/scripts/rewards/app-state.ts

@@ -1,12 +1,10 @@
 import { JsonRpcProvider, JsonRpcSigner } from "@ethersproject/providers";
-import { networkExplorers } from "./constants";
 import { RewardPermit } from "./render-transaction/tx-type";
 
 export class AppState {
   public claims: RewardPermit[] = [];
   public claimTxs: Record<string, string> = {};
   private _provider!: JsonRpcProvider;
-  private _currentIndex = 0;
   private _signer: JsonRpcSigner | null = null;
 
   get signer() {
@@ -17,46 +15,13 @@ export class AppState {
     this._signer = value;
   }
 
-  get networkId(): number | null {
-    return this.reward?.networkId || null;
-  }
-
   get provider(): JsonRpcProvider {
     return this._provider;
   }
 
   set provider(value: JsonRpcProvider) {
     this._provider = value;
   }
-
-  get rewardIndex(): number {
-    return this._currentIndex;
-  }
-
-  get reward(): RewardPermit {
-    return this.rewardIndex < this.claims.length ? this.claims[this.rewardIndex] : this.claims[0];
-  }
-
-  get permitNetworkId() {
-    return this.reward?.networkId;
-  }
-
-  get currentExplorerUrl(): string {
-    if (!this.reward) {
-      return "https://etherscan.io";
-    }
-    return networkExplorers[this.reward.networkId] || "https://etherscan.io";
-  }
-
-  nextPermit(): RewardPermit | null {
-    this._currentIndex = Math.min(this.claims.length - 1, this.rewardIndex + 1);
-    return this.reward;
-  }
-
-  previousPermit(): RewardPermit | null {
-    this._currentIndex = Math.max(0, this._currentIndex - 1);
-    return this.reward;
-  }
 }
 
 export const app = new AppState();

static/scripts/rewards/helpers.ts

@@ -0,0 +1,13 @@
+import { RewardPermit } from "./render-transaction/tx-type";
+import { networkExplorers } from "./constants";
+
+export function currentExplorerUrl(reward?: RewardPermit) {
+  if (!reward) {
+    return "https://etherscan.io";
+  }
+  return networkExplorers[reward.networkId] || "https://etherscan.io";
+}
+
+export function networkId(reward?: RewardPermit) {
+  return reward?.networkId ?? null;
+}