@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/hooks/useLanguages.d.ts

@@ -0,0 +1,6 @@
+export declare const useLanguages: () => {
+    availableLanguages: string[];
+    selectedLanguageCode: string | undefined;
+    selectedLanguageDisplayName: string;
+    setLanguageWithCode: (code: string) => void;
+};

package/hooks/useLanguages.js

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../providers';
+import { useSettings, useSettingsStore } from '../stores';
+export const useLanguages = () => {
+    const { t, i18n } = useTranslation();
+    const { languages } = useWidgetConfig();
+    const { language } = useSettings(['language']);
+    const setValue = useSettingsStore((state) => state.setValue);
+    const sortedLanguages = Object.keys(i18n.store.data).sort();
+    const selectedLanguageCode = sortedLanguages.includes(language || i18n.resolvedLanguage || '')
+        ? language || i18n.resolvedLanguage
+        : languages?.default || languages?.allow?.[0];
+    return {
+        availableLanguages: sortedLanguages,
+        selectedLanguageCode: selectedLanguageCode,
+        selectedLanguageDisplayName: t('language.name', {
+            lng: selectedLanguageCode,
+        }),
+        setLanguageWithCode: (code) => {
+            setValue('language', code);
+            i18n.changeLanguage(code);
+        },
+    };
+};

package/hooks/useProcessMessage.d.ts

@@ -1,11 +1,11 @@
-import type { EVMChain, LifiStep, Process } from '@lifi/sdk';
+import type { EVMChain, LiFiStep, Process } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
 import type { WidgetSubvariant } from '../types';
-export declare const useProcessMessage: (step?: LifiStep, process?: Process) => {
+export declare const useProcessMessage: (step?: LiFiStep, process?: Process) => {
     title?: string | undefined;
     message?: string | undefined;
 };
-export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LifiStep, process: Process, subvariant?: WidgetSubvariant): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: LiFiStep, process: Process, subvariant?: WidgetSubvariant): {
     title?: string;
     message?: string;
 };

package/hooks/useProcessMessage.js

@@ -1,12 +1,12 @@
-import { LifiErrorCode } from '@lifi/sdk';
+import { LiFiErrorCode } from '@lifi/sdk';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../providers';
 import { formatTokenAmount } from '../utils';
-import { useChains } from './useChains';
+import { useAvailableChains } from './useAvailableChains';
 export const useProcessMessage = (step, process) => {
     const { subvariant } = useWidgetConfig();
     const { t } = useTranslation();
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     if (!step || !process) {
         return {};
     }
@@ -73,72 +73,76 @@ const processSubstatusMessages = {
 };
 export function getProcessMessage(t, getChainById, step, process, subvariant) {
     if (process.error && process.status === 'FAILED') {
-        const getTransactionNotSentMessage = () => t(`error.message.transactionNotSent`, {
-            amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
+        const getDefaultErrorMessage = (key) => `${t(key ?? 'error.message.transactionNotSent')} ${t('error.message.remainInYourWallet', {
+            amount: formatTokenAmount(BigInt(step.action.fromAmount), step.action.fromToken.decimals),
             tokenSymbol: step.action.fromToken.symbol,
             chainName: getChainById(step.action.fromChainId)?.name ?? '',
-        });
+        })}`;
         let title = '';
         let message = '';
         switch (process.error.code) {
-            case LifiErrorCode.AllowanceRequired:
+            case LiFiErrorCode.AllowanceRequired:
                 title = t(`error.title.allowanceRequired`);
                 message = t(`error.message.allowanceRequired`, {
                     tokenSymbol: step.action.fromToken.symbol,
                 });
                 break;
-            case LifiErrorCode.BalanceError:
+            case LiFiErrorCode.BalanceError:
                 title = t(`error.title.balanceIsTooLow`);
-                message = getTransactionNotSentMessage();
+                message = getDefaultErrorMessage();
                 break;
-            case LifiErrorCode.ChainSwitchError:
+            case LiFiErrorCode.ChainSwitchError:
                 title = t(`error.title.chainSwitch`);
-                message = getTransactionNotSentMessage();
+                message = getDefaultErrorMessage();
                 break;
-            case LifiErrorCode.GasLimitError:
+            case LiFiErrorCode.GasLimitError:
                 title = t(`error.title.gasLimitIsTooLow`);
-                message = getTransactionNotSentMessage();
+                message = getDefaultErrorMessage();
                 break;
-            case LifiErrorCode.InsufficientFunds:
+            case LiFiErrorCode.InsufficientFunds:
                 title = t(`error.title.insufficientFunds`);
-                message = `${t(`error.message.insufficientFunds`)} ${getTransactionNotSentMessage()}`;
+                message = `${t(`error.message.insufficientFunds`)} ${getDefaultErrorMessage()}`;
                 break;
-            case LifiErrorCode.SlippageError:
+            case LiFiErrorCode.SlippageError:
                 title = t(`error.title.slippageNotMet`);
                 message = t(`error.message.slippageThreshold`);
                 break;
-            case LifiErrorCode.TransactionFailed:
+            case LiFiErrorCode.TransactionFailed:
                 title = t(`error.title.transactionFailed`);
                 message = t(`error.message.transactionFailed`);
                 break;
-            case LifiErrorCode.TransactionUnderpriced:
+            case LiFiErrorCode.TransactionUnderpriced:
                 title = t(`error.title.transactionUnderpriced`);
-                message = getTransactionNotSentMessage();
+                message = getDefaultErrorMessage();
                 break;
-            case LifiErrorCode.TransactionUnprepared:
+            case LiFiErrorCode.TransactionUnprepared:
                 title = t(`error.title.transactionUnprepared`);
-                message = getTransactionNotSentMessage();
+                message = getDefaultErrorMessage();
                 break;
-            case LifiErrorCode.TransactionCanceled:
+            case LiFiErrorCode.TransactionCanceled:
                 title = t(`error.title.transactionCanceled`);
-                message = getTransactionNotSentMessage();
+                message = getDefaultErrorMessage('error.message.transactionCanceled');
                 break;
-            case LifiErrorCode.TransactionRejected:
-                title = t(`error.title.transactionRejected`);
-                message = t(`error.message.transactionRejected`, {
-                    amount: formatTokenAmount(step.action.fromAmount, step.action.fromToken.decimals),
+            case LiFiErrorCode.ExchangeRateUpdateCanceled:
+                title = t(`error.title.exchangeRateUpdateCanceled`);
+                message = getDefaultErrorMessage();
+                break;
+            case LiFiErrorCode.SignatureRejected:
+                title = t(`error.title.signatureRejected`);
+                message = t(`error.message.signatureRejected`, {
+                    amount: formatTokenAmount(BigInt(step.action.fromAmount), step.action.fromToken.decimals),
                     tokenSymbol: step.action.fromToken.symbol,
                     chainName: getChainById(step.action.fromChainId)?.name ?? '',
                 });
                 break;
-            case LifiErrorCode.ProviderUnavailable:
+            case LiFiErrorCode.ProviderUnavailable:
             default:
                 title = t(`error.title.unknown`);
                 if (process.txLink) {
                     message = t(`error.message.transactionFailed`);
                 }
                 else {
-                    message = t(`error.message.unknown`);
+                    message = process.error.message || t(`error.message.unknown`);
                 }
                 break;
         }

package/hooks/useRequiredToAddress.d.ts

@@ -0,0 +1 @@
+export declare const useRequiredToAddress: () => boolean | undefined;

package/hooks/useRequiredToAddress.js

@@ -0,0 +1,15 @@
+import { useWatch } from 'react-hook-form';
+import { useChain } from '../hooks';
+import { FormKey, useWidgetConfig } from '../providers';
+import { RequiredUI } from '../types';
+export const useRequiredToAddress = () => {
+    const { requiredUI } = useWidgetConfig();
+    const [fromChainId, toChainId] = useWatch({
+        name: [FormKey.FromChain, FormKey.ToChain],
+    });
+    const { chain: fromChain } = useChain(fromChainId);
+    const { chain: toChain } = useChain(toChainId);
+    const differentChainType = fromChain && toChain && fromChain.chainType !== toChain.chainType;
+    const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress) || differentChainType;
+    return requiredToAddress;
+};

package/hooks/useRouteExecution.d.ts

@@ -1,4 +1,4 @@
-import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
+import type { ExchangeRateUpdateParams } from '@lifi/sdk';
 interface RouteExecutionProps {
     routeId: string;
     executeInBackground?: boolean;
@@ -8,7 +8,7 @@ export declare const useRouteExecution: ({ routeId, executeInBackground, onAccep
     executeRoute: () => void;
     restartRoute: () => void;
     deleteRoute: () => void;
-    route: Route | undefined;
+    route: import("@lifi/sdk").RouteExtended | undefined;
     status: import("../stores").RouteExecutionStatus | undefined;
 };
 export {};

package/hooks/useRouteExecution.js

@@ -1,14 +1,14 @@
+import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
-import { useLiFi, useWallet } from '../providers';
 import { getUpdatedProcess, isRouteActive, isRouteDone, isRouteFailed, useRouteExecutionStore, useRouteExecutionStoreContext, } from '../stores';
 import { WidgetEvent } from '../types/events';
+import { useAccount } from './useAccount';
 import { useWidgetEvents } from './useWidgetEvents';
 export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchangeRateUpdate, }) => {
-    const lifi = useLiFi();
     const queryClient = useQueryClient();
-    const { account, switchChain } = useWallet();
+    const { account } = useAccount();
     const resumedAfterMount = useRef(false);
     const emitter = useWidgetEvents();
     const routeExecutionStoreContext = useRouteExecutionStoreContext();
@@ -39,20 +39,6 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         }
         console.log('Route updated.', clonedUpdatedRoute);
     };
-    const switchChainHook = async (requiredChainId) => {
-        if (!account.isActive || !account.signer) {
-            return account.signer;
-        }
-        const currentChainId = await account.signer.getChainId();
-        if (currentChainId !== requiredChainId) {
-            const signer = await switchChain(requiredChainId);
-            if (!signer) {
-                throw new Error('Chain was not switched.');
-            }
-            return signer;
-        }
-        return account.signer;
-    };
     const acceptExchangeRateUpdateHook = async (params) => {
         if (!onAcceptExchangeRateUpdate) {
             return false;
@@ -60,22 +46,22 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
         const accepted = await new Promise((resolve) => onAcceptExchangeRateUpdate(resolve, params));
         return accepted;
     };
-    const executeRouteMutation = useMutation(() => {
-        if (!account.signer) {
-            throw Error('Account signer not found.');
-        }
-        if (!routeExecution?.route) {
-            throw Error('Execution route not found.');
-        }
-        queryClient.removeQueries(['routes'], { exact: false });
-        return lifi.executeRoute(account.signer, routeExecution.route, {
-            updateRouteHook,
-            switchChainHook,
-            acceptExchangeRateUpdateHook,
-            infiniteApproval: false,
-            executeInBackground,
-        });
-    }, {
+    const executeRouteMutation = useMutation({
+        mutationFn: () => {
+            if (!account.isConnected) {
+                throw Error('Account is not connected.');
+            }
+            if (!routeExecution?.route) {
+                throw Error('Execution route not found.');
+            }
+            queryClient.removeQueries({ queryKey: ['routes'], exact: false });
+            return executeRoute(routeExecution.route, {
+                updateRouteHook,
+                acceptExchangeRateUpdateHook,
+                infiniteApproval: false,
+                executeInBackground,
+            });
+        },
         onMutate: () => {
             console.log('Execution started.', routeId);
             if (routeExecution) {
@@ -83,26 +69,26 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
             }
         },
     });
-    const resumeRouteMutation = useMutation((resumedRoute) => {
-        if (!account.signer) {
-            throw Error('Account signer not found.');
-        }
-        if (!routeExecution?.route) {
-            throw Error('Execution route not found.');
-        }
-        return lifi.resumeRoute(account.signer, resumedRoute ?? routeExecution.route, {
-            updateRouteHook,
-            switchChainHook,
-            acceptExchangeRateUpdateHook,
-            infiniteApproval: false,
-            executeInBackground,
-        });
-    }, {
+    const resumeRouteMutation = useMutation({
+        mutationFn: (resumedRoute) => {
+            if (!account.isConnected) {
+                throw Error('Account is not connected.');
+            }
+            if (!routeExecution?.route) {
+                throw Error('Execution route not found.');
+            }
+            return resumeRoute(resumedRoute ?? routeExecution.route, {
+                updateRouteHook,
+                acceptExchangeRateUpdateHook,
+                infiniteApproval: false,
+                executeInBackground,
+            });
+        },
         onMutate: () => {
             console.log('Resumed to execution.', routeId);
         },
     });
-    const executeRoute = useCallback(() => {
+    const _executeRoute = useCallback(() => {
         executeRouteMutation.mutateAsync(undefined, {
             onError: (error) => {
                 console.warn('Execution failed!', routeId, error);
@@ -112,7 +98,7 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
             },
         });
     }, [executeRouteMutation, routeId]);
-    const resumeRoute = useCallback((route) => {
+    const _resumeRoute = useCallback((route) => {
         resumeRouteMutation.mutateAsync(route, {
             onError: (error) => {
                 console.warn('Resumed execution failed.', routeId, error);
@@ -124,9 +110,9 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
     }, [resumeRouteMutation, routeId]);
     const restartRouteMutation = useCallback(() => {
         restartRoute(routeId);
-        resumeRoute(routeExecution?.route);
+        _resumeRoute(routeExecution?.route);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resumeRoute, routeExecution?.route, routeId]);
+    }, [_resumeRoute, routeExecution?.route, routeId]);
     const deleteRouteMutation = useCallback(() => {
         deleteRoute(routeId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -135,26 +121,26 @@ export const useRouteExecution = ({ routeId, executeInBackground, onAcceptExchan
     useEffect(() => {
         // Check if route is eligible for automatic resuming
         if (isRouteActive(routeExecution?.route) &&
-            account.isActive &&
+            account.isConnected &&
             !resumedAfterMount.current) {
             resumedAfterMount.current = true;
-            resumeRoute();
+            _resumeRoute();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [account.isActive]);
+    }, [account.isConnected]);
     useEffect(() => {
         return () => {
             const route = routeExecutionStoreContext.getState().routes[routeId]?.route;
             if (!route || !isRouteActive(route)) {
                 return;
             }
-            lifi.updateRouteExecution(route, { executeInBackground: true });
+            updateRouteExecution(route, { executeInBackground: true });
             console.log('Move route execution to background.', routeId);
             resumedAfterMount.current = false;
         };
-    }, [lifi, routeExecutionStoreContext, routeId]);
+    }, [routeExecutionStoreContext, routeId]);
     return {
-        executeRoute,
+        executeRoute: _executeRoute,
         restartRoute: restartRouteMutation,
         deleteRoute: deleteRouteMutation,
         route: routeExecution?.route,

package/hooks/useRoutes.d.ts

@@ -9,6 +9,6 @@ export declare const useRoutes: ({ insurableRoute }?: RoutesProps) => {
     isFetched: boolean;
     dataUpdatedAt: number;
     refetchTime: number;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<RoutesResponse, unknown>>;
+    refetch: (options?: import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").Z | undefined) => Promise<import("@tanstack/query-core/build/legacy/queryClient-IoYjXsnV").ac<RoutesResponse, Error>>;
 };
 export {};