feat: add an approval/funding UI

.env.example

@@ -1 +0,0 @@
-ALCHEMY_KEY=""

.github/knip.ts

@@ -6,7 +6,18 @@ const config: KnipConfig = {
   ignore: ["src/types/config.ts", "**/__mocks__/**", "**/__fixtures__/**"],
   ignoreExportsUsedInFile: true,
   // eslint can also be safely ignored as per the docs: https://knip.dev/guides/handling-issues#eslint--jest
-  ignoreDependencies: ["eslint-config-prettier", "eslint-plugin-prettier", "@types/jest", "@mswjs/data"],
+  ignoreDependencies: [
+    "eslint-config-prettier",
+    "eslint-plugin-prettier",
+    "@types/jest",
+    "@mswjs/data",
+    "@coinbase/wallet-sdk",
+    "@reown/appkit",
+    "@reown/appkit-adapter-ethers5",
+    "ethers",
+    "@types/react",
+    "react",
+  ],
   eslint: true,
 };
 

.github/workflows/build.yml

@@ -25,8 +25,6 @@ jobs:
         run: |
           yarn
           yarn build
-        env:
-          ALCHEMY_KEY: ${{ secrets.ALCHEMY_KEY }}
 
       - name: Upload build artifact
         uses: actions/upload-artifact@v4

.github/workflows/no-empty-strings.yml

@@ -14,8 +14,8 @@ jobs:
         with:
           node-version: "20.10.0"
       - name: Get GitHub App token
-        uses: tibdex/github-app-token@v1.7.0
-        id: get_installation_token
+        uses: actions/create-github-app-token
+        id: get_app_token
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
@@ -26,7 +26,7 @@ jobs:
         run: |
           yarn tsx .github/empty-string-checker.ts
         env:
-          GITHUB_TOKEN: ${{ steps.get_installation_token.outputs.token }}
+          GITHUB_TOKEN: ${{ steps.get_app_token.outputs.token }}
           GITHUB_REPOSITORY: ${{ github.repository }}
           GITHUB_PR_NUMBER: ${{ github.event.pull_request.number }}
           GITHUB_BASE_REF: ${{ github.base_ref }}

build/esbuild-build.ts

@@ -16,9 +16,6 @@ export const esbuildOptions: BuildOptions = {
   minify: false,
   loader: Object.fromEntries(DATA_URL_LOADERS.map((ext) => [ext, "dataurl"])),
   outdir: "static/dist",
-  define: createEnvDefines(["ALCHEMY_KEY"], {
-    ALCHEMY_KEY: process.env.ALCHEMY_KEY || "",
-  }),
 };
 
 async function runBuild() {
@@ -33,20 +30,20 @@ async function runBuild() {
 
 void runBuild();
 
-function createEnvDefines(environmentVariables: string[], generatedAtBuild: Record<string, unknown>): Record<string, string> {
-  const defines: Record<string, string> = {};
-  for (const name of environmentVariables) {
-    const envVar = process.env[name];
-    if (envVar !== undefined) {
-      defines[name] = JSON.stringify(envVar);
-    } else {
-      throw new Error(`Missing environment variable: ${name}`);
-    }
-  }
-  for (const key in generatedAtBuild) {
-    if (Object.prototype.hasOwnProperty.call(generatedAtBuild, key)) {
-      defines[key] = JSON.stringify(generatedAtBuild[key]);
-    }
-  }
-  return defines;
-}
+// function createEnvDefines(environmentVariables: string[], generatedAtBuild: Record<string, unknown>): Record<string, string> {
+//   const defines: Record<string, string> = {};
+//   for (const name of environmentVariables) {
+//     const envVar = process.env[name];
+//     if (envVar !== undefined) {
+//       defines[name] = JSON.stringify(envVar);
+//     } else {
+//       throw new Error(`Missing environment variable: ${name}`);
+//     }
+//   }
+//   for (const key in generatedAtBuild) {
+//     if (Object.prototype.hasOwnProperty.call(generatedAtBuild, key)) {
+//       defines[key] = JSON.stringify(generatedAtBuild[key]);
+//     }
+//   }
+//   return defines;
+// }

package.json

@@ -58,7 +58,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-filename-rules": "^1.3.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-sonarjs": "^2.0.3",
+    "eslint-plugin-sonarjs": "^0.24.0",
     "husky": "^9.0.11",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",

static/display-popup-modal.ts

@@ -1,6 +1,8 @@
+import { appState, explorersUrl } from "./main";
+
 export function renderErrorInModal(error: Error) {
-  const modal = document.getElementById("modal");
-  const closeButton = document.getElementsByClassName("close-modal");
+  const modal = document.getElementById("error-modal");
+  const closeButton = document.getElementsByClassName("error-close-modal");
   if (closeButton) {
     closeButton[0].addEventListener("click", closeErrorModal);
   }
@@ -16,7 +18,45 @@ export function renderErrorInModal(error: Error) {
 }
 
 export function closeErrorModal() {
-  const modal = document.getElementById("modal");
+  const modal = document.getElementById("error-modal");
+  if (modal) {
+    modal.style.display = "none";
+  }
+}
+
+export function renderSuccessModal(transactionHash: string) {
+  const modal = document.getElementById("success-modal");
+  const closeButton = document.getElementsByClassName("success-close-modal");
+  if (closeButton) {
+    closeButton[0].addEventListener("click", closeSuccessModal);
+  }
+  const successMessageElement = document.getElementById("success-message");
+
+  if (successMessageElement) {
+    successMessageElement.innerHTML = `You've successfully signed the transaction. Your allowance balance should be updated in a few blocks.<br><br>transaction hash: <span class="tx-hash">${transactionHash}</span>`;
+    const chainId = appState.getChainId();
+    const explorerUrl = chainId !== undefined ? explorersUrl[chainId] : "";
+    const txLink = document.createElement("a");
+    txLink.href = `${explorerUrl}/tx/${transactionHash}`;
+    txLink.target = "_blank";
+    txLink.rel = "noopener noreferrer";
+    txLink.style.color = "white";
+    txLink.textContent = transactionHash;
+
+    const txHashElement = successMessageElement.querySelector(".tx-hash");
+    if (txHashElement) {
+      txHashElement.innerHTML = "";
+      txHashElement.appendChild(txLink);
+    }
+  }
+
+  if (modal) {
+    modal.style.display = "flex";
+  }
+}
+
+export function closeSuccessModal() {
+  const modal = document.getElementById("success-modal");
   if (modal) {
     modal.style.display = "none";
   }

static/handle-approval.ts

@@ -1,5 +1,5 @@
 import { erc20Abi } from "./abis";
-import { renderErrorInModal } from "./display-popup-modal";
+import { renderErrorInModal, renderSuccessModal } from "./display-popup-modal";
 import { appState, provider, userSigner } from "./main";
 import { getPermit2Address } from "./permit2-addresses";
 import { ethers } from "ethers";
@@ -11,53 +11,54 @@ const approveButton = document.querySelector(".approve-button") as HTMLButtonEle
 const revokeButton = document.querySelector(".revoke-button") as HTMLButtonElement;
 
 function isValidAddress(): boolean {
-  // Check if the address is 20 bytes long (40 characters) excluding the '0x' prefix
-  const result = /^0x[a-fA-F0-9]{40}$/.test(addressInput.value);
+  const isValid = /^0x[a-fA-F0-9]{40}$/.test(addressInput.value);
 
-  console.log("a");
-
-  if (result) {
+  if (isValid) {
     addressInput.style.border = "1px solid #5af55a";
   } else if (addressInput.value === "") {
     addressInput.style.border = "1px solid rgba(255, 255, 255, 0.1)";
   } else {
     addressInput.style.border = "1px solid red";
   }
 
-  return result;
+  return isValid;
 }
 
 function isValidAmount(): boolean {
-  // Check if the amount is a positive number
-  const result = !isNaN(Number(amountInput.value)) && Number(amountInput.value) > 0;
+  const isValid = !isNaN(Number(amountInput.value)) && Number(amountInput.value) > 0;
 
-  if (result) {
+  if (isValid) {
     amountInput.style.border = "1px solid #5af55a";
   } else if (amountInput.value === "") {
     amountInput.style.border = "1px solid rgba(255, 255, 255, 0.1)";
   } else {
     amountInput.style.border = "1px solid red";
   }
 
-  return result;
+  return isValid;
 }
 
-function isApprovalValid() {
-  const addressValidity = isValidAddress();
-  const amountValidity = isValidAmount();
-  const isValid = addressValidity && amountValidity;
+export function isApprovalButtonsValid() {
+  const isConnected = appState.getIsConnectedState();
+  const isAddressValid = isValidAddress();
+  const isAmountValid = isValidAmount();
 
-  approveButton.disabled = !isValid;
-  revokeButton.disabled = !addressValidity;
+  approveButton.disabled = !(isConnected && isAddressValid && isAmountValid);
+  revokeButton.disabled = !(isConnected && isAddressValid);
 
-  if (addressValidity && appState.getIsConnectedState()) {
+  if (isAddressValid && isConnected) {
     void getCurrentAllowance();
   }
 }
 
 async function getCurrentAllowance() {
+  if (!provider) {
+    console.error("Provider is not initialized");
+    return;
+  }
+
   const tokenAddress = addressInput.value;
-  const permit2Address = getPermit2Address(appState.getCaipNetworkId() as number);
+  const permit2Address = getPermit2Address(appState.getChainId() as number);
   const userAddress = appState.getAddress();
   const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, provider);
 
@@ -75,42 +76,80 @@ async function getCurrentAllowance() {
 }
 
 export function setupApproveButton() {
-  approveButton.addEventListener("click", async () => {
+  approveButton.removeEventListener("click", onApproveClick); // ensure no duplicate listeners
+  approveButton.addEventListener("click", onApproveClick);
+}
+
+async function onApproveClick() {
+  if (!userSigner) {
+    console.error("No signer available. Cannot send transaction.");
+    return;
+  }
+
+  const originalText = approveButton.textContent;
+  try {
+    approveButton.textContent = "Loading...";
+    approveButton.disabled = true;
+    revokeButton.disabled = true; // disable revoke as well to prevent conflicting actions
+
     const tokenAddress = addressInput.value;
-    const permit2Address = getPermit2Address(appState.getCaipNetworkId() as number);
+    const permit2Address = getPermit2Address(appState.getChainId() as number);
     const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, userSigner);
+    const decimals = await tokenContract.decimals();
+    const amount = ethers.utils.parseUnits(amountInput.value, decimals);
 
-    try {
-      const decimals = await tokenContract.decimals();
-      const amount = ethers.utils.parseUnits(amountInput.value, decimals);
-      const tx = await tokenContract.connect(userSigner).approve(permit2Address, amount);
-      await tx.wait();
-      await getCurrentAllowance();
-    } catch (error) {
-      console.error("Error approving allowance:", error);
-      renderErrorInModal(error as Error);
-    }
-  });
+    const tx = await tokenContract.approve(permit2Address, amount);
+    await tx.wait();
+
+    renderSuccessModal(tx.hash);
+
+    await getCurrentAllowance();
+  } catch (error) {
+    console.error("Error approving allowance:", error);
+    renderErrorInModal(error as Error);
+  } finally {
+    approveButton.textContent = originalText;
+    isApprovalButtonsValid(); // re-check the state to restore buttons correctly
+  }
 }
 
 export function setupRevokeButton() {
-  revokeButton.addEventListener("click", async () => {
+  revokeButton.removeEventListener("click", onRevokeClick); // ensure no duplicate listeners
+  revokeButton.addEventListener("click", onRevokeClick);
+}
+
+async function onRevokeClick() {
+  if (!userSigner) {
+    console.error("No signer available. Cannot send transaction.");
+    return;
+  }
+
+  const originalText = revokeButton.textContent;
+  try {
+    revokeButton.textContent = "Loading...";
+    revokeButton.disabled = true;
+    approveButton.disabled = true; // disable approve as well
+
     const tokenAddress = addressInput.value;
-    const permit2Address = getPermit2Address(appState.getCaipNetworkId() as number);
+    const permit2Address = getPermit2Address(appState.getChainId() as number);
     const tokenContract = new ethers.Contract(tokenAddress, erc20Abi, userSigner);
 
-    try {
-      const tx = await tokenContract.connect(userSigner).approve(permit2Address, 0);
-      await tx.wait();
-      await getCurrentAllowance();
-    } catch (error) {
-      console.error("Error revoking allowance:", error);
-      renderErrorInModal(error as Error);
-    }
-  });
+    const tx = await tokenContract.approve(permit2Address, 0);
+    await tx.wait();
+
+    renderSuccessModal(tx.hash);
+
+    await getCurrentAllowance();
+  } catch (error) {
+    console.error("Error revoking allowance:", error);
+    renderErrorInModal(error as Error);
+  } finally {
+    revokeButton.textContent = originalText;
+    isApprovalButtonsValid(); // re-check state to restore buttons correctly
+  }
 }
 
-export function setupValidityListener() {
-  amountInput.addEventListener("change", isApprovalValid);
-  addressInput.addEventListener("change", isApprovalValid);
+export function setupButtonValidityListener() {
+  amountInput.addEventListener("change", isApprovalButtonsValid);
+  addressInput.addEventListener("change", isApprovalButtonsValid);
 }