More ignoring of user errors and improvements to error handling (#3621)

* Fix naming issues

* Include another user cancellation error in isUserRejected check

* Switch errors to regex to match part of errors instead of exact matching the entire thing

* Add comment about out of gas error

* Add test and message for another user disapproval

src/components/contextual/pages/claim/LegacyClaims.vue

@@ -7,7 +7,7 @@ import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 import useEthers from '@/composables/useEthers';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { useTokens } from '@/providers/tokens.provider';
-import useTranasactionErrors from '@/composables/useTransactionErrors';
+import useTransactionErrors from '@/composables/useTransactionErrors';
 import useTransactions from '@/composables/useTransactions';
 import { TOKENS } from '@/constants/tokens';
 import { bnum } from '@/lib/utils';
@@ -55,7 +55,7 @@ const { account, getProvider, isMismatchedNetwork } = useWeb3();
 const { txListener } = useEthers();
 const { addTransaction } = useTransactions();
 const { priceFor, getToken } = useTokens();
-const { parseError } = useTranasactionErrors();
+const { parseError } = useTransactionErrors();
 
 const BALTokenAddress = getAddress(TOKENS.Addresses.BAL);
 

src/composables/swap/useCowswap.ts

@@ -21,7 +21,7 @@ import useTransactions from '../useTransactions';
 import { SwapQuote } from './types';
 import { captureException } from '@sentry/browser';
 import { Goals, trackGoal } from '../useFathom';
-import useTranasactionErrors from '../useTransactionErrors';
+import useTransactionErrors from '../useTransactionErrors';
 import { useI18n } from 'vue-i18n';
 import { useApp } from '@/composables/useApp';
 
@@ -93,7 +93,7 @@ export default function useCowswap({
   const { addTransaction } = useTransactions();
   const { fNum } = useNumbers();
   const { balanceFor } = useTokens();
-  const { isUserRejected } = useTranasactionErrors();
+  const { isUserRejected } = useTransactionErrors();
   const { t } = useI18n();
 
   // DATA

src/composables/swap/useJoinExit.ts

@@ -28,7 +28,7 @@ import useEthers from '../useEthers';
 import useRelayerApprovalQuery from '@/composables/queries/useRelayerApprovalQuery';
 import { TransactionBuilder } from '@/services/web3/transactions/transaction.builder';
 import BatchRelayerAbi from '@/lib/abi/BatchRelayer.json';
-import useTranasactionErrors from '../useTransactionErrors';
+import useTransactionErrors from '../useTransactionErrors';
 import { useI18n } from 'vue-i18n';
 
 type JoinExitState = {
@@ -91,7 +91,7 @@ export default function useJoinExit({
   const { addTransaction } = useTransactions();
   const { txListener } = useEthers();
   const { fNum } = useNumbers();
-  const { isUserRejected } = useTranasactionErrors();
+  const { isUserRejected } = useTransactionErrors();
   const { t } = useI18n();
 
   const hasValidationError = computed(

src/composables/swap/useSor.ts

@@ -43,7 +43,7 @@ import useTransactions, { TransactionAction } from '../useTransactions';
 import { SwapQuote } from './types';
 import { captureException } from '@sentry/browser';
 import { overflowProtected } from '@/components/_global/BalTextInput/helpers';
-import useTranasactionErrors from '../useTransactionErrors';
+import useTransactionErrors from '../useTransactionErrors';
 
 type SorState = {
   validationErrors: {
@@ -204,7 +204,7 @@ export default function useSor({
   const { fNum, toFiat } = useNumbers();
   const { t } = useI18n();
   const { injectTokens, priceFor, getToken } = useTokens();
-  const { isUserRejected } = useTranasactionErrors();
+  const { isUserRejected } = useTransactionErrors();
   const { swapIn, swapOut } = useSwapper();
 
   onMounted(async () => {

src/composables/userTransactionErrors.spec.ts → src/composables/useTransactionErrors.spec.ts

@@ -1,7 +1,7 @@
 import { WalletError } from '@/types';
 import { isUserRejected } from './useTransactionErrors';
 
-describe('userTransactionErrors', () => {
+describe('useTransactionErrors', () => {
   describe('isUserRejected', () => {
     it('Should return false for a non-user error', () => {
       const error = new Error('Unsupported Exit Type For Pool');
@@ -33,5 +33,30 @@ describe('userTransactionErrors', () => {
       rejectionError.code = 4001;
       expect(isUserRejected(rejectionError)).toBe(true);
     });
+
+    // See https://balancer-labs.sentry.io/issues/4199718124/events/74a6db95ab424cd6a286af7a00076d2c/
+    it('Should return true if the error is an object with a and b parameters', () => {
+      const rejectionError = { a: -500, b: 'Cancelled by User' };
+      expect(isUserRejected(rejectionError)).toBe(true);
+    });
+
+    // See https://balancer-labs.sentry.io/issues/4199718124/events/f1a41824e66141b4806c50db5f081f7b/
+    it('Should return true if its a user error where they are out of gas', () => {
+      const rejectionError = {
+        code: 5002,
+        message:
+          "User rejected methods. Your wallet doesn't have enough Ethereum to start this transfer.",
+      };
+      expect(isUserRejected(rejectionError)).toBe(true);
+    });
+
+    // See https://balancer-labs.sentry.io/issues/4199718124/events/57d26b71647046f2be3620f3c0165714/
+    it('Should return true if its a user error as an object', () => {
+      const rejectionError = {
+        code: 5001,
+        message: 'User disapproved requested methods',
+      };
+      expect(isUserRejected(rejectionError)).toBe(true);
+    });
   });
 });

src/composables/useTransactionErrors.ts

@@ -6,45 +6,54 @@ export function isUserRejected(error): boolean {
   if (!error) return false;
 
   const userRejectionMessages = [
-    'user rejected transaction',
-    'request rejected',
-    'user rejected methods.',
-    'user rejected the transaction',
-    'rejected by user',
-    'user canceled',
-    'cancelled by user',
-    'transaction declined',
-    'transaction was rejected',
-    'user denied transaction signature',
+    /user rejected transaction/,
+    /request rejected/,
+    /user rejected methods./,
+    /user rejected the transaction/,
+    /rejected by user/,
+    /user canceled/,
+    /cancelled by user/,
+    /transaction declined/,
+    /transaction was rejected/,
+    /user denied transaction signature/,
+    /user disapproved requested methods/,
   ];
 
   if (
     typeof error === 'string' &&
-    userRejectionMessages.includes(error.toLowerCase())
+    userRejectionMessages.some(msg => msg.test(error.toLowerCase()))
   )
     return true;
 
   if (
     error.message &&
-    userRejectionMessages.includes(error.message.toLowerCase())
+    userRejectionMessages.some(msg => msg.test(error.message.toLowerCase()))
   )
     return true;
 
   if (
     typeof error.reason === 'string' &&
-    userRejectionMessages.includes(error.reason.toLowerCase())
+    userRejectionMessages.some(msg => msg.test(error.reason.toLowerCase()))
   )
     return true;
 
   if (
     error.cause?.message &&
-    userRejectionMessages.includes(error.cause.message.toLowerCase())
+    userRejectionMessages.some(msg =>
+      msg.test(error.cause.message.toLowerCase())
+    )
   )
     return true;
 
   if (
     typeof error.cause === 'string' &&
-    userRejectionMessages.includes(error.cause.toLowerCase())
+    userRejectionMessages.some(msg => msg.test(error.cause.toLowerCase()))
+  )
+    return true;
+
+  if (
+    error.b &&
+    userRejectionMessages.some(msg => msg.test(error.b.toLowerCase()))
   )
     return true;
 
@@ -57,7 +66,7 @@ export function isUserRejected(error): boolean {
   return false;
 }
 
-export default function useTranasactionErrors() {
+export default function useTransactionErrors() {
   /**
    * COMPOSABLES
    */