fix: carousel

scripts/typescript/generate-erc20-permit-url.ts

@@ -9,7 +9,7 @@ const PERMIT2_ADDRESS = "0x000000000022D473030F116dDEE9F6B43aC78BA3"; // same on
 
 function createProviderAndWallet() {
   const provider = new ethers.providers.JsonRpcProvider(process.env.RPC_PROVIDER_URL);
-  const myWallet = new ethers.Wallet(process.env.UBIQUIBOT_PRIVATE_KEY || "", provider);
+  const myWallet = new ethers.Wallet(process.env.UBIQUIBOT_PRIVATE_KEY, provider);
   return { provider, myWallet };
 }
 
@@ -19,7 +19,7 @@ function createPermitTransferFromData(amount: string) {
       token: process.env.PAYMENT_TOKEN_ADDRESS || "",
       amount: ethers.utils.parseUnits(amount || "", 18),
     },
-    spender: process.env.BENEFICIARY_ADDRESS || "",
+    spender: process.env.BENEFICIARY_ADDRESS,
     nonce: BigNumber.from(`0x${randomBytes(32).toString("hex")}`),
     deadline: MaxUint256,
   };
@@ -61,13 +61,29 @@ export async function generateERC20Permit() {
   const permitTransferFromData = createPermitTransferFromData(process.env.AMOUNT_IN_ETH);
   const signature = await signTypedData(myWallet, permitTransferFromData);
 
-  const permitTransferFromData2 = createPermitTransferFromData("9");
-  const sig = await signTypedData(myWallet, permitTransferFromData2);
+  // const permitTransferFromData2 = createPermitTransferFromData("9");
+  const sig = await signTypedData(myWallet, permitTransferFromData);
 
-  const txData = [createTxData(myWallet, permitTransferFromData, signature), createTxData(myWallet, permitTransferFromData2, sig)];
+  const txData = [createTxData(myWallet, permitTransferFromData, signature), createTxData(myWallet, permitTransferFromData, sig)];
 
   const base64encodedTxData = Buffer.from(JSON.stringify(txData)).toString("base64");
 
   log.ok("ERC20 Local URL:");
   log.info(`${process.env.FRONTEND_URL}?claim=${base64encodedTxData}`);
 }
+
+/* eslint-disable @typescript-eslint/no-namespace */
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      RPC_PROVIDER_URL: string;
+      UBIQUIBOT_PRIVATE_KEY: string;
+      PAYMENT_TOKEN_ADDRESS: string;
+      BENEFICIARY_ADDRESS: string;
+      CHAIN_ID: string;
+      AMOUNT_IN_ETH: string;
+      FRONTEND_URL: string;
+    }
+  }
+}
+/* eslint-enable @typescript-eslint/no-namespace */

static/index.html

@@ -150,7 +150,7 @@
           <tbody id="additionalDetailsTable"></tbody>
         </table>
 
-        <figure id="carosel">
+        <figure id="carousel">
           <div id="prevTx"></div>
           <div id="rewardsCount"></div>
           <div id="nextTx"></div>

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

@@ -2,7 +2,6 @@ import { app } from "../app-state";
 import { claimButton } from "../toaster";
 import { table } from "./read-claim-data-from-url";
 import { renderTransaction } from "./render-transaction";
-import { setPagination } from "./set-pagination";
 import { removeAllEventListeners } from "./utils";
 
 const nextTxButton = document.getElementById("nextTx");
@@ -30,6 +29,4 @@ export function claimRewardsPagination(rewardsCount: HTMLElement) {
       renderTransaction().catch(console.error);
     });
   }
-
-  setPagination(nextTxButton, prevTxButton);
 }

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

@@ -7,34 +7,25 @@ import { verifyCurrentNetwork } from "../web3/verify-current-network";
 import { insertErc20PermitTableData, insertErc721PermitTableData } from "./insert-table-data";
 import { renderEnsName } from "./render-ens-name";
 import { renderNftSymbol, renderTokenSymbol } from "./render-token-symbol";
-import { RewardPermit, Erc20Permit } from "./tx-type";
+import { Erc20Permit, RewardPermit } from "./tx-type";
 
-function setPagination(nextTxButton: Element | null, prevTxButton: Element | null) {
-  if (!nextTxButton || !prevTxButton) return;
-  if (app.claims.length > 1) {
-    prevTxButton.classList.remove("hide-pagination");
-    nextTxButton.classList.remove("hide-pagination");
-
-    prevTxButton.classList.add("show-pagination");
-    nextTxButton.classList.add("show-pagination");
-  }
-}
+const carousel = document.getElementById("carousel") as Element;
 
 type Success = boolean;
 export async function renderTransaction(nextTx?: boolean): Promise<Success> {
   const table = document.getElementsByTagName(`table`)[0];
 
+  if (app.claims && app.claims.length > 1) {
+    console.trace("displaying carousel");
+    carousel.className = "display-carousel";
+    const rewardsCount = document.getElementById("rewardsCount") as Element;
+    rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
+  } else {
+    console.trace("not displaying carousel");
+  }
+
   if (nextTx) {
     app.nextPermit();
-
-    if (!app.claims || app.claims.length <= 1) {
-      // already hidden
-    } else {
-      setPagination(document.getElementById("nextTx"), document.getElementById("prevTx"));
-
-      const rewardsCount = document.getElementById("rewardsCount") as Element;
-      rewardsCount.innerHTML = `${app.rewardIndex + 1}/${app.claims.length} reward`;
-    }
   }
 
   if (!app.reward) {

static/styles/rewards/claim-table.css

@@ -291,9 +291,6 @@ table[data-claim="ok"] tbody {
   color: #fff;
 }
 
-.hide-pagination {
-  display: none;
-}
 
 #additionalDetails svg {
   /* display: none; */

static/styles/rewards/pay.css

@@ -142,13 +142,16 @@ footer {
   /* padding-bottom: env(safe-area-inset-bottom); */
 }
 
-#carosel {
-  display: flex;
+#carousel {
   flex-direction: row;
   align-items: center;
   align-self: center;
   margin: 12px auto;
   opacity: 0.5;
+  display: none;
+}
+#carousel.display-carousel {
+  display: flex;
 }
 
 #prevTx,
@@ -159,9 +162,9 @@ footer {
   cursor: pointer;
   transform: rotate(45deg);
 }
-#prevTx{
-    border-color: transparent transparent #fff #fff;
+#prevTx {
+  border-color: transparent transparent #fff #fff;
+}
+#nextTx {
+  border-color: #fff #fff transparent transparent;
 }
-#nextTx{
-    border-color: #fff #fff transparent transparent;
-}