chore: add not enough gas error to generic error

lib/shared/components/errors/GenericError.tsx

@@ -3,6 +3,7 @@
 import { AlertProps, Text } from '@chakra-ui/react'
 import { ErrorAlert } from './ErrorAlert'
 import {
+  isNotEnoughGasError,
   isPausedError,
   isTooManyRequestsError,
   isUserRejectedError,
@@ -55,6 +56,17 @@ export function GenericError({ error: _error, customErrorName, ...rest }: Props)
       </ErrorAlert>
     )
   }
+  if (isNotEnoughGasError(_error)) {
+    return (
+      <ErrorAlert title={customErrorName} {...rest}>
+        <Text variant="secondary" color="black">
+          It looks like you don&apos;t have enough gas to complete this transaction. If you believe
+          this is a mistake, please report it in{' '}
+          <BalAlertLink href="https://discord.balancer.fi/">our discord.</BalAlertLink>
+        </Text>
+      </ErrorAlert>
+    )
+  }
   const errorMessage = error?.shortMessage || error.message
 
   if (errorMessage === 'RPC Request failed.' || errorMessage === 'An unknown RPC error occurred.') {

lib/shared/utils/error-filters.ts

@@ -21,11 +21,21 @@ export function isViemHttpFetchError(error?: Error | null): boolean {
   - others
 */
 export function isTooManyRequestsError(error?: Error | null): boolean {
-  console.log(error?.message)
   if (!error) return false
   return error.message.startsWith('HTTP request failed.') && error.message.includes('Status: 429')
 }
 
+export function isNotEnoughGasError(error?: Error | null): boolean {
+  if (!error) return false
+  return isNotEnoughGasErrorMessage(error.message)
+}
+
+export function isNotEnoughGasErrorMessage(errorMessage: string): boolean {
+  return errorMessage.startsWith(
+    'The total cost (gas * gas fee + value) of executing this transaction exceeds the balance of the account.'
+  )
+}
+
 export function isPausedError(error?: Error | null): boolean {
   if (!error) return false
   return isPausedErrorMessage(error.message)

lib/shared/utils/query-errors.ts

@@ -6,7 +6,11 @@ import {
   Exception as SentryException,
 } from '@sentry/types'
 import { SentryError, ensureError } from './errors'
-import { isPausedErrorMessage, isUserRejectedError } from './error-filters'
+import {
+  isNotEnoughGasErrorMessage,
+  isPausedErrorMessage,
+  isUserRejectedError,
+} from './error-filters'
 import {
   AddLiquidityParams,
   stringifyHumanAmountsIn,
@@ -245,6 +249,8 @@ export function shouldIgnoreException(sentryException: SentryException) {
 export function shouldIgnore(message: string, stackTrace = ''): boolean {
   if (isUserRejectedError(new Error(message))) return true
 
+  if (isNotEnoughGasErrorMessage(message)) return true
+
   /*
     Thrown from useWalletClient() when loading a pool page from scratch.
     It looks like is is caused by the useWalletClient call in AddTokenToWalletButton but it does not affect it's behavior.