fix: improve price impact error handling

lib/modules/pool/actions/LiquidityActionHelpers.ts

@@ -203,7 +203,8 @@ export function toPoolState(pool: Pool): PoolState {
   return {
     id: pool.id as Hex,
     address: pool.address as Address,
-    tokens: pool.poolTokens as MinimalToken[],
+    // Destruct to avoid errors when the SDK tries to mutate the poolTokens (read-only from GraphQL)
+    tokens: [...pool.poolTokens] as MinimalToken[],
     type: mapPoolType(pool.type),
     protocolVersion: pool.protocolVersion as ProtocolVersion,
   }

lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx

@@ -172,33 +172,35 @@ function AddLiquidityMainForm() {
             <TokenInputs tokenSelectDisclosureOpen={() => tokenSelectDisclosure.onOpen()} />
           )}
           <VStack spacing="sm" align="start" w="full">
-            <PriceImpactAccordion
-              isDisabled={!priceImpactQuery.data}
-              cannotCalculatePriceImpact={cannotCalculatePriceImpactError(priceImpactQuery.error)}
-              setNeedsToAcceptPIRisk={setNeedsToAcceptHighPI}
-              accordionButtonComponent={
-                <HStack>
-                  <Text variant="secondary" fontSize="sm" color="font.secondary">
-                    Price impact:{' '}
-                  </Text>
-                  {isFetching ? (
-                    <Skeleton w="40px" h="16px" />
-                  ) : (
-                    <Text variant="secondary" fontSize="sm" color={priceImpactColor}>
-                      {priceImpactLabel}
+            {!simulationQuery.isError && (
+              <PriceImpactAccordion
+                isDisabled={!priceImpactQuery.data}
+                cannotCalculatePriceImpact={cannotCalculatePriceImpactError(priceImpactQuery.error)}
+                setNeedsToAcceptPIRisk={setNeedsToAcceptHighPI}
+                accordionButtonComponent={
+                  <HStack>
+                    <Text variant="secondary" fontSize="sm" color="font.secondary">
+                      Price impact:{' '}
                     </Text>
-                  )}
-                </HStack>
-              }
-              accordionPanelComponent={
-                <PoolActionsPriceImpactDetails
-                  totalUSDValue={totalUSDValue}
-                  bptAmount={simulationQuery.data?.bptOut.amount}
-                  isAddLiquidity
-                  isLoading={isFetching}
-                />
-              }
-            />
+                    {isFetching ? (
+                      <Skeleton w="40px" h="16px" />
+                    ) : (
+                      <Text variant="secondary" fontSize="sm" color={priceImpactColor}>
+                        {priceImpactLabel}
+                      </Text>
+                    )}
+                  </HStack>
+                }
+                accordionPanelComponent={
+                  <PoolActionsPriceImpactDetails
+                    totalUSDValue={totalUSDValue}
+                    bptAmount={simulationQuery.data?.bptOut.amount}
+                    isAddLiquidity
+                    isLoading={isFetching}
+                  />
+                }
+              />
+            )}
           </VStack>
           <Grid w="full" templateColumns="1fr 1fr" gap="sm">
             <GridItem>
@@ -225,7 +227,9 @@ function AddLiquidityMainForm() {
             </GridItem>
           </Grid>
           {showAcceptPoolRisks && <AddLiquidityFormCheckbox />}
-          {priceImpactQuery.isError && <PriceImpactError priceImpactQuery={priceImpactQuery} />}
+          {!simulationQuery.isError && priceImpactQuery.isError && (
+            <PriceImpactError priceImpactQuery={priceImpactQuery} />
+          )}
           {simulationQuery.isError && (
             <GenericError
               customErrorName={'Error in query simulation'}

lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm.tsx

@@ -152,31 +152,33 @@ export function RemoveLiquidityForm() {
               )}
             </VStack>
             <VStack spacing="sm" align="start" w="full">
-              <PriceImpactAccordion
-                setNeedsToAcceptPIRisk={setNeedsToAcceptHighPI}
-                accordionButtonComponent={
-                  <HStack>
-                    <Text variant="secondary" fontSize="sm" color="font.secondary">
-                      Price impact:{' '}
-                    </Text>
-                    {isFetching ? (
-                      <Skeleton w="40px" h="16px" />
-                    ) : (
-                      <Text variant="secondary" fontSize="sm" color={priceImpactColor}>
-                        {priceImpactLabel}
+              {!simulationQuery.isError && (
+                <PriceImpactAccordion
+                  setNeedsToAcceptPIRisk={setNeedsToAcceptHighPI}
+                  accordionButtonComponent={
+                    <HStack>
+                      <Text variant="secondary" fontSize="sm" color="font.secondary">
+                        Price impact:{' '}
                       </Text>
-                    )}
-                  </HStack>
-                }
-                accordionPanelComponent={
-                  <PoolActionsPriceImpactDetails
-                    totalUSDValue={totalUSDValue}
-                    bptAmount={BigInt(parseUnits(quoteBptIn, 18))}
-                    isLoading={isFetching}
-                  />
-                }
-                isDisabled={priceImpactQuery.isLoading && !priceImpactQuery.isSuccess}
-              />
+                      {isFetching ? (
+                        <Skeleton w="40px" h="16px" />
+                      ) : (
+                        <Text variant="secondary" fontSize="sm" color={priceImpactColor}>
+                          {priceImpactLabel}
+                        </Text>
+                      )}
+                    </HStack>
+                  }
+                  accordionPanelComponent={
+                    <PoolActionsPriceImpactDetails
+                      totalUSDValue={totalUSDValue}
+                      bptAmount={BigInt(parseUnits(quoteBptIn, 18))}
+                      isLoading={isFetching}
+                    />
+                  }
+                  isDisabled={priceImpactQuery.isLoading && !priceImpactQuery.isSuccess}
+                />
+              )}
             </VStack>
             <SimulationError simulationQuery={simulationQuery} />
             <Tooltip label={isDisabled ? disabledReason : ''}>

lib/shared/components/alerts/BalAlertLink.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { Link, LinkProps } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+
+export function BalAlertLink({ href, children, ...rest }: PropsWithChildren<LinkProps>) {
+  return (
+    <Link href={href} color="font.dark" textDecoration="underline" target="_blank" {...rest}>
+      {children}
+    </Link>
+  )
+}

lib/shared/components/errors/GenericError.tsx

@@ -2,8 +2,9 @@
 
 import { AlertProps, Text } from '@chakra-ui/react'
 import { ErrorAlert } from './ErrorAlert'
-import { isUserRejectedError } from '../../utils/error-filters'
+import { isUserRejectedError, isViemHttpFetchError } from '../../utils/error-filters'
 import { ensureError } from '../../utils/errors'
+import { BalAlertLink } from '../alerts/BalAlertLink'
 
 type ErrorWithOptionalShortMessage = Error & { shortMessage?: string }
 type Props = AlertProps & {
@@ -15,6 +16,18 @@ export function GenericError({ error: _error, customErrorName, ...rest }: Props)
   const error = ensureError(_error)
   if (isUserRejectedError(error)) return null
   const errorName = customErrorName ? `${customErrorName} (${error.name})` : error.name
+  if (isViemHttpFetchError(_error)) {
+    return (
+      <ErrorAlert title={customErrorName} {...rest}>
+        <Text variant="secondary" color="black">
+          It looks like there was a network issue. Check your connection and try again. You can
+          report the problem in{' '}
+          <BalAlertLink href="https://discord.balancer.fi/">our discord</BalAlertLink> if the issue
+          persists.
+        </Text>
+      </ErrorAlert>
+    )
+  }
   const errorMessage = error?.shortMessage || error.message
   return (
     <ErrorAlert title={errorName} {...rest}>

lib/shared/utils/error-filters.ts

@@ -1,3 +1,18 @@
 export function isUserRejectedError(error: Error): boolean {
   return error.message.startsWith('User rejected the request.')
 }
+
+/*
+  Detects "Failed to fetch" Http request errors thrown by wagmi/viem
+  These errors could be caused by different reasons, like network issues, CORS, 429 etc.
+*/
+export function isViemHttpFetchError(error?: Error | null): boolean {
+  if (!error) return false
+  if (
+    error.message.startsWith('HTTP request failed.') &&
+    error.message.includes('Failed to fetch')
+  ) {
+    return true
+  }
+  return false
+}