From b9259d022b3b457707d189462051693ca6cb2a06 Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Tue, 10 Sep 2024 16:24:42 +0200 Subject: [PATCH 1/5] fix: improve price impact error handling --- .../pool/actions/LiquidityActionHelpers.ts | 3 +- .../add-liquidity/form/AddLiquidityForm.tsx | 58 ++++++++++--------- .../form/RemoveLiquidityForm.tsx | 50 ++++++++-------- lib/shared/components/alerts/BalAlertLink.tsx | 12 ++++ lib/shared/components/errors/GenericError.tsx | 15 ++++- lib/shared/utils/error-filters.ts | 15 +++++ 6 files changed, 100 insertions(+), 53 deletions(-) create mode 100644 lib/shared/components/alerts/BalAlertLink.tsx diff --git a/lib/modules/pool/actions/LiquidityActionHelpers.ts b/lib/modules/pool/actions/LiquidityActionHelpers.ts index 1f189a647..c19b9ad49 100644 --- a/lib/modules/pool/actions/LiquidityActionHelpers.ts +++ b/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, } diff --git a/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx b/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx index 9c881082e..10d0b5b3b 100644 --- a/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx +++ b/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm.tsx @@ -172,33 +172,35 @@ function AddLiquidityMainForm() { tokenSelectDisclosure.onOpen()} /> )} - - - Price impact:{' '} - - {isFetching ? ( - - ) : ( - - {priceImpactLabel} + {!simulationQuery.isError && ( + + + Price impact:{' '} - )} - - } - accordionPanelComponent={ - - } - /> + {isFetching ? ( + + ) : ( + + {priceImpactLabel} + + )} + + } + accordionPanelComponent={ + + } + /> + )} @@ -225,7 +227,9 @@ function AddLiquidityMainForm() { {showAcceptPoolRisks && } - {priceImpactQuery.isError && } + {!simulationQuery.isError && priceImpactQuery.isError && ( + + )} {simulationQuery.isError && ( - - - Price impact:{' '} - - {isFetching ? ( - - ) : ( - - {priceImpactLabel} + {!simulationQuery.isError && ( + + + Price impact:{' '} - )} - - } - accordionPanelComponent={ - - } - isDisabled={priceImpactQuery.isLoading && !priceImpactQuery.isSuccess} - /> + {isFetching ? ( + + ) : ( + + {priceImpactLabel} + + )} + + } + accordionPanelComponent={ + + } + isDisabled={priceImpactQuery.isLoading && !priceImpactQuery.isSuccess} + /> + )} diff --git a/lib/shared/components/alerts/BalAlertLink.tsx b/lib/shared/components/alerts/BalAlertLink.tsx new file mode 100644 index 000000000..9f5591c2d --- /dev/null +++ b/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) { + return ( + + {children} + + ) +} diff --git a/lib/shared/components/errors/GenericError.tsx b/lib/shared/components/errors/GenericError.tsx index 4f52f7e72..5cb72b0c7 100644 --- a/lib/shared/components/errors/GenericError.tsx +++ b/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 ( + + + It looks like there was a network issue. Check your connection and try again. You can + report the problem in our{' '} + discord if the issue + persists. + + + ) + } const errorMessage = error?.shortMessage || error.message return ( diff --git a/lib/shared/utils/error-filters.ts b/lib/shared/utils/error-filters.ts index 8ddccf88f..a21cfd602 100644 --- a/lib/shared/utils/error-filters.ts +++ b/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 +} From 1046858e5f90c7e6cb00c8a6c4d95d034ade14a2 Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Tue, 10 Sep 2024 16:33:44 +0200 Subject: [PATCH 2/5] chore: change link --- lib/modules/web3/ChainConfig.tsx | 4 ++-- lib/shared/components/errors/GenericError.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/modules/web3/ChainConfig.tsx b/lib/modules/web3/ChainConfig.tsx index 22148f344..e76510c2a 100644 --- a/lib/modules/web3/ChainConfig.tsx +++ b/lib/modules/web3/ChainConfig.tsx @@ -48,13 +48,13 @@ export const rpcOverrides: Record = { [GqlChain.Base]: getPrivateRpcUrl(GqlChain.Base), [GqlChain.Avalanche]: getPrivateRpcUrl(GqlChain.Avalanche), [GqlChain.Fantom]: getPrivateRpcUrl(GqlChain.Fantom), - [GqlChain.Gnosis]: getPrivateRpcUrl(GqlChain.Gnosis), + [GqlChain.Gnosis]: undefined, [GqlChain.Optimism]: getPrivateRpcUrl(GqlChain.Optimism), [GqlChain.Polygon]: getPrivateRpcUrl(GqlChain.Polygon), [GqlChain.Zkevm]: getPrivateRpcUrl(GqlChain.Zkevm), [GqlChain.Sepolia]: getPrivateRpcUrl(GqlChain.Sepolia), [GqlChain.Mode]: undefined, - [GqlChain.Fraxtal]: undefined, + [GqlChain.Fraxtal]: getPrivateRpcUrl(GqlChain.Fraxtal), } const customMainnet = { iconUrl: '/images/chains/MAINNET.svg', ...mainnet } diff --git a/lib/shared/components/errors/GenericError.tsx b/lib/shared/components/errors/GenericError.tsx index 5cb72b0c7..20a873900 100644 --- a/lib/shared/components/errors/GenericError.tsx +++ b/lib/shared/components/errors/GenericError.tsx @@ -21,8 +21,8 @@ export function GenericError({ error: _error, customErrorName, ...rest }: Props) It looks like there was a network issue. Check your connection and try again. You can - report the problem in our{' '} - discord if the issue + report the problem in{' '} + our discord if the issue persists. From 2d0a8dbfd56f0c2fa01e098d5ed46c3e3d60f41f Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Tue, 10 Sep 2024 16:50:46 +0200 Subject: [PATCH 3/5] chore: fix ChainConfig --- lib/modules/web3/ChainConfig.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/modules/web3/ChainConfig.tsx b/lib/modules/web3/ChainConfig.tsx index e76510c2a..22148f344 100644 --- a/lib/modules/web3/ChainConfig.tsx +++ b/lib/modules/web3/ChainConfig.tsx @@ -48,13 +48,13 @@ export const rpcOverrides: Record = { [GqlChain.Base]: getPrivateRpcUrl(GqlChain.Base), [GqlChain.Avalanche]: getPrivateRpcUrl(GqlChain.Avalanche), [GqlChain.Fantom]: getPrivateRpcUrl(GqlChain.Fantom), - [GqlChain.Gnosis]: undefined, + [GqlChain.Gnosis]: getPrivateRpcUrl(GqlChain.Gnosis), [GqlChain.Optimism]: getPrivateRpcUrl(GqlChain.Optimism), [GqlChain.Polygon]: getPrivateRpcUrl(GqlChain.Polygon), [GqlChain.Zkevm]: getPrivateRpcUrl(GqlChain.Zkevm), [GqlChain.Sepolia]: getPrivateRpcUrl(GqlChain.Sepolia), [GqlChain.Mode]: undefined, - [GqlChain.Fraxtal]: getPrivateRpcUrl(GqlChain.Fraxtal), + [GqlChain.Fraxtal]: undefined, } const customMainnet = { iconUrl: '/images/chains/MAINNET.svg', ...mainnet } From 809d99c455030caaae87bdc42b3a21ae8f489e52 Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Tue, 10 Sep 2024 16:52:19 +0200 Subject: [PATCH 4/5] chore: remove optional --- lib/shared/utils/error-filters.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/shared/utils/error-filters.ts b/lib/shared/utils/error-filters.ts index a21cfd602..e959e2921 100644 --- a/lib/shared/utils/error-filters.ts +++ b/lib/shared/utils/error-filters.ts @@ -9,8 +9,8 @@ export function isUserRejectedError(error: Error): boolean { export function isViemHttpFetchError(error?: Error | null): boolean { if (!error) return false if ( - error?.message.startsWith('HTTP request failed.') && - error?.message.includes('Failed to fetch') + error.message.startsWith('HTTP request failed.') && + error.message.includes('Failed to fetch') ) { return true } From 171631c2681f6ae170ebde8c4014e792fc4fa49f Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Tue, 10 Sep 2024 16:58:59 +0200 Subject: [PATCH 5/5] chore: add underline text decoration to link --- lib/shared/components/alerts/BalAlertLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/shared/components/alerts/BalAlertLink.tsx b/lib/shared/components/alerts/BalAlertLink.tsx index 9f5591c2d..28e20d22c 100644 --- a/lib/shared/components/alerts/BalAlertLink.tsx +++ b/lib/shared/components/alerts/BalAlertLink.tsx @@ -5,7 +5,7 @@ import { PropsWithChildren } from 'react' export function BalAlertLink({ href, children, ...rest }: PropsWithChildren) { return ( - + {children} )