fix: ask for fee upfront in useRevokeBatchQueuedTransactions

Author: rkalis

lib/hooks/ethereum/useFeePayment.tsx

@@ -2,22 +2,21 @@
 
 import { isNonZeroFeeDollarAmount } from 'components/allowances/controls/batch-revoke/fee';
 import { DONATION_ADDRESS } from 'lib/constants';
-import { type TransactionSubmitted, TransactionType } from 'lib/interfaces';
+import type { TransactionSubmitted } from 'lib/interfaces';
 import { waitForTransactionConfirmation } from 'lib/utils';
 import analytics from 'lib/utils/analytics';
 import { type DocumentedChainId, getChainNativeToken, isTestnetChain } from 'lib/utils/chains';
+import { isNoFeeRequiredError } from 'lib/utils/errors';
 import { HOUR } from 'lib/utils/time';
 import useLocalStorage from 'use-local-storage';
 import { parseEther, type SendTransactionParameters } from 'viem';
 import { usePublicClient, useWalletClient } from 'wagmi';
-import { useHandleTransaction } from './useHandleTransaction';
 import { useNativeTokenPrice } from './useNativeTokenPrice';
 
 export const useFeePayment = (chainId: number) => {
   const nativeToken = getChainNativeToken(chainId)!;
   const { data: walletClient } = useWalletClient({ chainId });
   const publicClient = usePublicClient({ chainId })!;
-  const handleTransaction = useHandleTransaction(chainId);
   const { nativeTokenPrice } = useNativeTokenPrice(chainId);
 
   const [lastFeePayments, setLastFeePayments] = useLocalStorage<Record<string, number>>('last-fee-payments', {});
@@ -31,7 +30,7 @@ export const useFeePayment = (chainId: number) => {
     const lastFeePayment = lastFeePayments[feePaymentKey];
 
     if (lastFeePayment && Date.now() - lastFeePayment < 1 * HOUR) {
-      throw new Error('User rejected fee payment: Fee payment already registered in the last hour');
+      throw new Error('No fee required: Fee payment already registered in the last hour');
     }
 
     const hash = await walletClient.sendTransaction(await prepareFeePayment(dollarAmount));
@@ -47,11 +46,11 @@ export const useFeePayment = (chainId: number) => {
     }
 
     if (!nativeTokenPrice) {
-      throw new Error('User rejected fee payment: Could not get native token price for fee payment');
+      throw new Error('No fee required: Could not get native token price for fee payment');
     }
 
     if (!isNonZeroFeeDollarAmount(dollarAmount)) {
-      throw new Error('User rejected fee payment');
+      throw new Error('No fee required: Fee amount is zero');
     }
 
     const tokenAmount = Number(dollarAmount) / nativeTokenPrice;
@@ -68,9 +67,14 @@ export const useFeePayment = (chainId: number) => {
   const sendFeePayment = async (dollarAmount: string): Promise<TransactionSubmitted | undefined> => {
     if (!dollarAmount || Number(dollarAmount) === 0) return;
 
-    const transactionSubmitted = await handleTransaction(sendFeePaymentInternal(dollarAmount), TransactionType.FEE);
-    if (transactionSubmitted) trackFeePaid(chainId, dollarAmount);
-    return transactionSubmitted;
+    try {
+      const transactionSubmitted = await sendFeePaymentInternal(dollarAmount);
+      trackFeePaid(chainId, dollarAmount);
+      return transactionSubmitted;
+    } catch (error) {
+      if (isNoFeeRequiredError(error)) return;
+      throw error;
+    }
   };
 
   return { prepareFeePayment, sendFeePayment, nativeToken };

lib/hooks/ethereum/useHandleTransaction.tsx

@@ -1,6 +1,12 @@
 import { displayTransactionSubmittedToast } from 'components/common/TransactionSubmittedToast';
 import { type TransactionSubmitted, TransactionType } from 'lib/interfaces';
-import { isLedgerNanoSError, isRevertedError, isUserRejectionError, parseErrorMessage } from 'lib/utils/errors';
+import {
+  isLedgerNanoSError,
+  isNoFeeRequiredError,
+  isRevertedError,
+  isUserRejectionError,
+  parseErrorMessage,
+} from 'lib/utils/errors';
 import { useTranslations } from 'next-intl';
 import { toast } from 'react-toastify';
 import { stringify } from 'viem';
@@ -14,6 +20,7 @@ export const useHandleTransaction = (chainId: number) => {
 
     // Don't show error toasts for user denied transactions
     if (isUserRejectionError(message)) return;
+    if (isNoFeeRequiredError(message)) return;
 
     console.debug(stringify(e, null, 2));
 
@@ -44,7 +51,7 @@ export const useHandleTransaction = (chainId: number) => {
     try {
       const transaction = await transactionPromise;
 
-      if (transaction.hash && type !== TransactionType.FEE) {
+      if (transaction.hash) {
         displayTransactionSubmittedToast(chainId, transaction.hash);
       }
 

lib/hooks/ethereum/useRevokeBatchQueuedTransactions.tsx

@@ -10,22 +10,50 @@ import {
   trackRevokeTransaction,
 } from 'lib/utils/allowances';
 import { trackBatchRevoke } from 'lib/utils/batch-revoke';
+import { isUserRejectionError, parseErrorMessage } from 'lib/utils/errors';
+import { useTranslations } from 'next-intl';
 import type PQueue from 'p-queue';
+import { toast } from 'react-toastify';
 import { useWalletClient } from 'wagmi';
 import { useTransactionStore, wrapTransaction } from '../../stores/transaction-store';
 import { useAddressPageContext } from '../page-context/AddressPageContext';
 import { useFeePayment } from './useFeePayment';
 
 export const useRevokeBatchQueuedTransactions = (allowances: TokenAllowanceData[], onUpdate: OnUpdate) => {
+  const t = useTranslations();
   const { getTransaction, updateTransaction } = useTransactionStore();
   const { address, selectedChainId } = useAddressPageContext();
   const { sendFeePayment } = useFeePayment(selectedChainId);
   const { data: walletClient } = useWalletClient();
 
   const revoke = async (REVOKE_QUEUE: PQueue, feeDollarAmount: string) => {
+    // Pay the fee before revoking the allowances
+    if (isNonZeroFeeDollarAmount(feeDollarAmount)) {
+      allowances.forEach((allowance) => {
+        updateTransaction(getAllowanceKey(allowance), { status: 'preparing' });
+      });
+
+      try {
+        await sendFeePayment(feeDollarAmount);
+      } catch (error) {
+        if (isUserRejectionError(error)) {
+          toast.error(t('common.toasts.fee_payment_rejected'));
+        } else {
+          toast.error(t('common.toasts.fee_payment_failed', { message: parseErrorMessage(error) }));
+        }
+
+        console.error(error);
+
+        allowances.forEach((allowance) => {
+          updateTransaction(getAllowanceKey(allowance), { status: 'not_started' });
+        });
+
+        return;
+      }
+    }
+
     await Promise.race([
       Promise.all([
-        isNonZeroFeeDollarAmount(feeDollarAmount) ? sendFeePayment(feeDollarAmount) : Promise.resolve(),
         ...allowances.map(async (allowance) => {
           // Skip if already confirmed or pending
           if (['confirmed', 'pending'].includes(getTransaction(getAllowanceKey(allowance)).status)) return;

lib/utils/errors.ts

@@ -19,6 +19,16 @@ export const isUserRejectionError = (error?: string | any): boolean => {
   return false;
 };
 
+export const isNoFeeRequiredError = (error?: string | any): boolean => {
+  if (!error) return false;
+
+  if (typeof error !== 'string') {
+    return isNoFeeRequiredError(parseErrorMessage(error)) || isNoFeeRequiredError(stringifyError(error));
+  }
+
+  return error?.toLowerCase()?.includes('no fee required');
+};
+
 export const isAccountUpgradeRejectionError = (error?: string | any): boolean => {
   if (!error) return false;
 

locales/en/common.json

@@ -143,6 +143,8 @@
     "clipboard_failed": "❌ Couldn't copy to clipboard",
     "clipboard_success": "✅ Copied to clipboard",
     "donation_sent": "💪 Thanks for the donation!",
+    "fee_payment_failed": "❌ Fee payment failed: {message}",
+    "fee_payment_rejected": "❌ Please pay the batch revoke fee to continue",
     "revoke_failed": "❌ Revoking failed: {message}",
     "revoke_failed_ledger_nano_s": "❌ Ledger Nano S was deprecated by Ledger and does not support revoking NFT approvals any more. It is recommended to upgrade to a newer Ledger device.",
     "revoke_failed_revert": "❌ The creator of this token has disabled or paused approving and revoking approvals ({message})",

locales/es/common.json

@@ -143,6 +143,8 @@
     "clipboard_failed": "❌ No se pudo copiar al portapapeles",
     "clipboard_success": "✅ Copiado al portapapeles",
     "donation_sent": "💪 ¡Gracias por la donación!",
+    "fee_payment_failed": "❌ Fee payment failed: {message}",
+    "fee_payment_rejected": "❌ Please pay the batch revoke fee to continue",
     "revoke_failed": "❌ No se pudo revocar la autorización: {message}",
     "revoke_failed_ledger_nano_s": "❌ Ledger Nano S fue obsoleto por Ledger y ya no admite la revocación de las aprobaciones de NFT. Se recomienda actualizar a un dispositivo Ledger más nuevo.",
     "revoke_failed_revert": "❌ El creador de este token ha deshabilitado o pausado la aprobación y revocación de aprobaciones ({message})",

locales/ja/common.json

@@ -143,6 +143,8 @@
     "clipboard_failed": "❌ クリップボードにコピーできませんでした。",
     "clipboard_success": "✅ クリップボードにコピーされました",
     "donation_sent": "💪 寄付いただき、ありがとうございます！",
+    "fee_payment_failed": "❌ Fee payment failed: {message}",
+    "fee_payment_rejected": "❌ Please pay the batch revoke fee to continue",
     "revoke_failed": "❌ 許可のリボークに失敗しました: {message}",
     "revoke_failed_ledger_nano_s": "❌ Ledger Nano SはLedgerによって非推奨となり、NFT承認の取り消し機能をサポートしなくなりました。新しいLedgerデバイスへのアップグレードが推奨されます。",
     "revoke_failed_revert": "❌ このトークンの作成者は、承認と承認取り消しの機能を無効化または一時停止しました（{message}）",

locales/ru/common.json

@@ -143,6 +143,8 @@
     "clipboard_failed": "❌ Не удалось скопировать в буфер",
     "clipboard_success": "✅ Скопировано в буфер обмена",
     "donation_sent": "💪 Спасибо за пожертвование!",
+    "fee_payment_failed": "❌ Fee payment failed: {message}",
+    "fee_payment_rejected": "❌ Please pay the batch revoke fee to continue",
     "revoke_failed": "❌ Отменить доступ не удалось: {message}",
     "revoke_failed_ledger_nano_s": "❌ Ledger Nano S был снят с поддержки Ledger и больше не поддерживает отзыв NFT подтверждений. Рекомендуется перейти на более новое устройство Ledger.",
     "revoke_failed_revert": "❌ Создатель этого токена отключил или приостановил утверждение и отзыв разрешений ({message})",

locales/zh/common.json

@@ -143,6 +143,8 @@
     "clipboard_failed": "❌ 无法复制到剪贴板",
     "clipboard_success": "✅ 已复制到剪贴板",
     "donation_sent": "💪 感谢捐赠！",
+    "fee_payment_failed": "❌ Fee payment failed: {message}",
+    "fee_payment_rejected": "❌ Please pay the batch revoke fee to continue",
     "revoke_failed": "❌ 撤销授权许可失败：{message}",
     "revoke_failed_ledger_nano_s": "❌ Ledger Nano S 已被 Ledger 弃用，不再支持撤销 NFT 授权。建议升级到较新的 Ledger 设备。",
     "revoke_failed_revert": "❌该代币创建者已禁用或暂停批准及撤销批准功能（{message}）",