Merge pull request #28 from multiversx/development

Improve RouteError Handling

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[1.8.3](https://github.com/multiversx/mx-sdk-dapp-swap/pull/28)] - 2024-10-08
+
+- [Improve RouteError Handling](https://github.com/multiversx/mx-sdk-dapp-swap/pull/27)
+
 ## [[1.8.2](https://github.com/multiversx/mx-sdk-dapp-swap/pull/26)] - 2024-09-12
 
 - [Fixes EGLD <-> WEGLD missing transactions](https://github.com/multiversx/mx-sdk-dapp-swap/pull/26)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-swap",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "A library to hold the main logic for swapping between tokens on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

src/components/SwapAuthorizationProvider/SwapAuthorizationProvider.tsx

@@ -95,7 +95,7 @@ export const SwapAuthorizationProvider = ({
     defaultOptions: {
       watchQuery: {
         fetchPolicy: 'no-cache',
-        errorPolicy: 'ignore'
+        errorPolicy: 'all'
       },
       query: {
         fetchPolicy: 'no-cache',

src/hooks/useQueryWrapper.ts

@@ -35,10 +35,10 @@ export const useQueryWrapper = <TData>({
   });
 
   const startPollingCallback = useCallback(() => {
-    if (isPageVisible && isPollingEnabled) {
+    if (isPageVisible && isPollingEnabled && !error) {
       startPolling(POLLING_INTERVAL);
     }
-  }, [isPageVisible, isPollingEnabled, startPolling]);
+  }, [isPageVisible, isPollingEnabled, startPolling, error]);
 
   // mount and unmount
   useEffect(() => {
@@ -61,7 +61,7 @@ export const useQueryWrapper = <TData>({
   }, [refetchTrigger, isRefetchEnabled, refetch, startPollingCallback]);
 
   const isLoading = data == null && loading;
-  const isError = Boolean(error && data == null);
+  const isError = Boolean(error || data == null);
   const isRefetching = loading;
 
   return {

src/hooks/useSwapRoute.ts

@@ -78,6 +78,35 @@ export const useSwapRoute = ({
     [variables, wrappedEgld]
   );
 
+  const query = useMemo(() => {
+    if (swapActionType === SwapActionTypesEnum.wrap) return wrapEgldQuery;
+    if (swapActionType === SwapActionTypesEnum.unwrap) return unwrapEgldQuery;
+
+    return isAuthenticated ? swapQuery : swapWithoutTransactionsQuery;
+  }, [isAuthenticated, swapActionType]);
+
+  const skip = useMemo(() => {
+    if (!variables) return true;
+
+    const { amountIn, amountOut } = variables;
+    const hasAmount = Boolean(amountIn ?? amountOut);
+
+    if (!hasAmount) return true;
+
+    return false;
+  }, [variables]);
+
+  const { data, error, refetch, isRefetching, isLoading, isError } =
+    useQueryWrapper<SwapRouteQueryResponseType | WrappingQueryResponseType>({
+      query,
+      queryOptions: {
+        skip,
+        client,
+        variables
+      },
+      isPollingEnabled
+    });
+
   const handleOnCompleted = (
     data?: SwapRouteQueryResponseType | WrappingQueryResponseType
   ) => {
@@ -123,47 +152,15 @@ export const useSwapRoute = ({
         setSwapRouteError(undefined);
         break;
       default:
-        const { swap, errors } = data as SwapRouteQueryResponseType;
-
-        const error = errors
-          ? translateSwapError(errors[0].message)
-          : undefined;
+        const { swap } = data as SwapRouteQueryResponseType;
 
         setSwapRoute(swap);
-        setSwapRouteError(error);
+
+        const translatedError = translateSwapError(error?.message);
+        setSwapRouteError(translatedError);
     }
   };
 
-  const query = useMemo(() => {
-    if (swapActionType === SwapActionTypesEnum.wrap) return wrapEgldQuery;
-    if (swapActionType === SwapActionTypesEnum.unwrap) return unwrapEgldQuery;
-
-    return isAuthenticated ? swapQuery : swapWithoutTransactionsQuery;
-  }, [isAuthenticated, swapActionType]);
-
-  const skip = useMemo(() => {
-    if (!variables) return true;
-
-    const { amountIn, amountOut } = variables;
-    const hasAmount = Boolean(amountIn ?? amountOut);
-
-    if (!hasAmount) return true;
-
-    return false;
-  }, [variables]);
-
-  const { data, refetch, isRefetching, isLoading, isError } = useQueryWrapper<
-    SwapRouteQueryResponseType | WrappingQueryResponseType
-  >({
-    query,
-    queryOptions: {
-      skip,
-      client,
-      variables
-    },
-    isPollingEnabled
-  });
-
   const getSwapRoute = ({
     amountIn,
     amountOut,

src/queries/swap/swap.ts

@@ -62,5 +62,4 @@ export const swapWithoutTransactionsQuery = gql`
 
 export interface SwapRouteQueryResponseType {
   swap: SwapRouteType;
-  errors?: GraphqlErrorsResponseType[];
 }

src/utils/translateSwapError.ts

@@ -5,7 +5,9 @@ const errorMap: Record<string, string> = {
     'Smart Swap not possible because you would lose more than 5%.'
 };
 
-export const translateSwapError = (serviceError: string) => {
+export const translateSwapError = (serviceError?: string) => {
+  if (!serviceError) return;
+
   const defaultTranslation = 'No swap route found.';
   const foundErrorKey = Object.keys(errorMap).find((key) =>
     serviceError.includes(key)