feat: better mobile feedback

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

@@ -3,7 +3,7 @@ import { decodePermits } from "@ubiquibot/permit-generation/handlers";
 import { Permit } from "@ubiquibot/permit-generation/types";
 import { app, AppState } from "../app-state";
 import { useFastestRpc } from "../rpc-optimization/get-optimal-provider";
-import { buttonController, toaster } from "../toaster";
+import { toaster } from "../toaster";
 import { connectWallet } from "../web3/connect-wallet";
 import { checkRenderInvalidatePermitAdminControl, checkRenderMakeClaimControl } from "../web3/erc20-permit";
 import { verifyCurrentNetwork } from "../web3/verify-current-network";
@@ -30,26 +30,32 @@ export async function readClaimDataFromUrl(app: AppState) {
 
   app.claims = decodeClaimData(base64encodedTxData);
   app.claimTxs = await getClaimedTxs(app);
+
   try {
     app.provider = await useFastestRpc(app);
   } catch (e) {
     toaster.create("error", `${e}`);
   }
 
-  if (window.ethereum) {
-    try {
-      app.signer = await connectWallet();
-    } catch (error) {
-      /* empty */
-    }
-    window.ethereum.on("accountsChanged", () => {
+  try {
+    app.signer = await connectWallet();
+  } catch (error) {
+    /* empty */
+  }
+
+  try {
+    // this would throw on mobile browsers & non-web3 browsers
+    window?.ethereum.on("accountsChanged", () => {
       checkRenderMakeClaimControl(app).catch(console.error);
       checkRenderInvalidatePermitAdminControl(app).catch(console.error);
     });
-  } else {
-    buttonController.hideAll();
-    toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
+  } catch (err) {
+    /*
+     * handled feedback upstream already
+     * buttons are hidden and non-web3 infinite toast exists
+     */
   }
+
   displayRewardDetails();
   displayRewardPagination();
 

static/scripts/rewards/toaster.ts

@@ -19,10 +19,10 @@ export const viewClaimButton = document.getElementById("view-claim") as HTMLButt
 const notifications = document.querySelector(".notifications") as HTMLUListElement;
 export const buttonController = new ButtonController(controls);
 
-function createToast(meaning: keyof typeof toaster.icons, text: string) {
+function createToast(meaning: keyof typeof toaster.icons, text: string, timeout: number = 5000) {
   if (meaning != "info") buttonController.hideLoader();
   const toastDetails = {
-    timer: 5000,
+    timer: timeout,
   } as {
     timer: number;
     timeoutId?: NodeJS.Timeout;
@@ -43,8 +43,10 @@ function createToast(meaning: keyof typeof toaster.icons, text: string) {
 
   notifications.appendChild(toastContent); // Append the toast to the notification ul
 
-  // Setting a timeout to remove the toast after the specified duration
-  toastDetails.timeoutId = setTimeout(() => removeToast(toastContent, toastDetails.timeoutId), toastDetails.timer);
+  if (timeout !== Infinity) {
+    // Setting a timeout to remove the toast after the specified duration
+    toastDetails.timeoutId = setTimeout(() => removeToast(toastContent, toastDetails.timeoutId), toastDetails.timer);
+  }
 }
 
 function removeToast(toast: HTMLElement, timeoutId?: NodeJS.Timeout) {

static/scripts/rewards/web3/connect-wallet.ts

@@ -20,18 +20,30 @@ export async function connectWallet(): Promise<JsonRpcSigner | null> {
 
     return signer;
   } catch (error: unknown) {
-    // For testing purposes
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (window.location.href.includes("localhost") && (window as any).signer) return (window as any).signer;
-
-    if (error instanceof Error) {
-      console.error(error);
-      if (error?.message?.includes("missing provider")) {
-        toaster.create("info", "Please use a web3 enabled browser to collect this reward.");
-      } else {
-        toaster.create("info", "Please connect your wallet to collect this reward.");
+    connectErrorHandler(error);
+  }
+  return null;
+}
+
+function connectErrorHandler(error: unknown) {
+  if (window.location.href.includes("localhost") && (window as any).signer) return (window as any).signer;
+
+  if (error instanceof Error) {
+    console.error(error);
+    if (error?.message?.includes("missing provider")) {
+      // mobile browsers don't really support window.ethereum
+      const mediaQuery = window.matchMedia("(max-width: 768px)");
+
+      if (mediaQuery.matches) {
+        toaster.create("warning", "Please use a mobile-friendly Web3 browser such as MetaMask to collect this reward", Infinity);
+      } else if (!window.ethereum) {
+        toaster.create("warning", "Please use a web3 enabled browser to collect this reward.", Infinity);
+        buttonController.hideAll();
       }
+    } else {
+      toaster.create("error", error.message);
     }
-    return null;
+  } else {
+    toaster.create("error", "An unknown error occurred.");
   }
 }

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

@@ -5,7 +5,8 @@ import { erc20Abi, permit2Abi } from "../abis";
 import { app, AppState } from "../app-state";
 import { permit2Address } from "../constants";
 import { supabase } from "../render-transaction/read-claim-data-from-url";
-import { buttonController, errorToast, getMakeClaimButton, MetaMaskError, toaster } from "../toaster";
+import { MetaMaskError, buttonController, errorToast, getMakeClaimButton, toaster } from "../toaster";
+import { connectWallet } from "./connect-wallet";
 
 export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
   let balance: BigNumber, allowance: BigNumber, decimals: number, symbol: string;
@@ -58,6 +59,9 @@ async function checkPermitClaimability(app: AppState): Promise<boolean> {
 
 async function transferFromPermit(permit2Contract: Contract, app: AppState) {
   const reward = app.reward;
+  const signer = app.signer;
+  if (!signer) return null;
+
   try {
     const tx = await permit2Contract.permitTransferFrom(
       {
@@ -101,6 +105,7 @@ async function waitForTransaction(tx: TransactionResponse) {
     buttonController.hideLoader();
     buttonController.hideMakeClaim();
     console.log(receipt.transactionHash);
+
     return receipt;
   } catch (error: unknown) {
     if (error instanceof Error) {
@@ -113,23 +118,23 @@ async function waitForTransaction(tx: TransactionResponse) {
 
 export function claimErc20PermitHandlerWrapper(app: AppState) {
   return async function claimErc20PermitHandler() {
+    const signer = await connectWallet();
+    if (!signer) {
+      return;
+    }
+
     buttonController.hideMakeClaim();
     buttonController.showLoader();
 
     const isPermitClaimable = await checkPermitClaimability(app);
     if (!isPermitClaimable) return;
 
-    if (!app.signer) return;
-
-    const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, app.signer);
+    const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, signer);
     if (!permit2Contract) return;
 
     const tx = await transferFromPermit(permit2Contract, app);
     if (!tx) return;
 
-    // buttonController.showLoader();
-    // buttonController.hideMakeClaim();
-
     const receipt = await waitForTransaction(tx);
     if (!receipt) return;
 
@@ -280,7 +285,11 @@ async function isNonceClaimed(app: AppState): Promise<boolean> {
   return bit.and(flipped).eq(0);
 }
 
-async function invalidateNonce(signer: JsonRpcSigner, nonce: BigNumberish): Promise<void> {
+async function invalidateNonce(signer: JsonRpcSigner | null, nonce: BigNumberish): Promise<void> {
+  if (!signer) {
+    console.error("Signer is null");
+    return;
+  }
   const permit2Contract = new ethers.Contract(permit2Address, permit2Abi, signer);
   const { wordPos, bitPos } = nonceBitmap(nonce);
   // mimics https://github.com/ubiquity/pay.ubq.fi/blob/c9e7ed90718fe977fd9f348db27adf31d91d07fb/scripts/solidity/test/Permit2.t.sol#L428