@lifi/widget 1.18.9 → 1.20.0

package/pages/SwapPage/SwapPage.js

@@ -7,10 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Delete as DeleteIcon } from '@mui/icons-material';
-import { Box, Button } from '@mui/material';
-import { Fragment } from 'react';
+import { Box, Button, Tooltip } from '@mui/material';
+import { Fragment, useCallback, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
@@ -22,32 +22,51 @@ import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { SwapFormKey } from '../../providers';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
+import { getTokenValueLossThreshold, TokenValueBottomSheet, } from './TokenValueBottomSheet';
 export const SwapPage = () => {
     const { t } = useTranslation();
     const { state } = useLocation();
     const { navigateBack } = useNavigateBack();
-    const { setValue, formState: { isValid, isValidating }, } = useFormContext();
+    const tokenValueBottomSheetRef = useRef(null);
+    const { setValue,
+    // formState: { isValid, isValidating },
+     } = useFormContext();
     const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
-    const handleRemoveRoute = () => {
-        navigateBack();
-        deleteRoute();
-    };
+    const handleExecuteRoute = useCallback(() => {
+        var _a, _b;
+        if ((_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()) {
+            (_b = tokenValueBottomSheetRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        }
+        executeRoute();
+        setValue(SwapFormKey.FromAmount, '');
+    }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (status === 'idle') {
-            executeRoute();
-            setValue(SwapFormKey.FromAmount, '');
+            const thresholdExceeded = getTokenValueLossThreshold(route);
+            if (thresholdExceeded) {
+                (_a = tokenValueBottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.open();
+            }
+            else {
+                handleExecuteRoute();
+            }
         }
         if (status === 'error') {
             restartRoute();
         }
     });
-    // eslint-disable-next-line consistent-return
+    const handleRemoveRoute = () => {
+        navigateBack();
+        deleteRoute();
+    };
     const getSwapButtonText = () => {
-        if (status === 'idle') {
-            return t('button.startSwap');
-        }
-        if (status === 'error') {
-            return t('button.restartSwap');
+        switch (status) {
+            case 'idle':
+                return t('button.startSwap');
+            case 'error':
+                return t('button.restartSwap');
+            default:
+                return '';
         }
     };
     return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
@@ -55,8 +74,10 @@ export const SwapPage = () => {
                 return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
                                 ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' ? (_jsx(GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }), status === 'error' ? (_jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
-                            minWidth: 48,
-                            marginLeft: 1,
-                        } }, { children: _jsx(DeleteIcon, {}) }))) : null] }))) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' || status === 'error' ? (_jsxs(_Fragment, { children: [_jsx(GasSufficiencyMessage, { route: route, mt: 2 }), _jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
+                                // disable={status === 'idle' && (isValidating || !isValid)}
+                                enableLoading: true }), status === 'error' ? (_jsx(Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: _jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                                        minWidth: 48,
+                                        marginLeft: 1,
+                                    } }, { children: _jsx(DeleteIcon, {}) })) }))) : null] }))] })) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null, route ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null] }));
 };

package/pages/SwapPage/TokenValueBottomSheet.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Route } from '@lifi/sdk';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+interface TokenValueBottomSheetProps {
+    route: Route;
+    onContinue(): void;
+    onCancel?(): void;
+}
+export declare const TokenValueBottomSheet: import("react").ForwardRefExoticComponent<TokenValueBottomSheetProps & import("react").RefAttributes<BottomSheetBase>>;
+export declare const getTokenValueLossThreshold: (route?: Route) => boolean;
+export {};

package/pages/SwapPage/TokenValueBottomSheet.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Warning as WarningIcon } from '@mui/icons-material';
+import { Box, Button, Typography } from '@mui/material';
+import Big from 'big.js';
+import { forwardRef, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet';
+import { useSetContentHeight } from '../../hooks';
+import { IconCircle, IconContainer } from './StatusBottomSheet.style';
+export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
+    const handleCancel = () => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
+});
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
+    const { t } = useTranslation();
+    const ref = useRef();
+    useSetContentHeight(ref);
+    return (_jsxs(Box, Object.assign({ p: 3, ref: ref }, { children: [_jsxs(IconContainer, { children: [_jsx(IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: _jsx(WarningIcon, { color: "warning" }) })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.highValueLoss') }))] }), _jsx(Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.highValueLoss') })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [_jsx(Typography, { children: t('swap.swapping') }), _jsx(Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.fromAmountUSD }) }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.gasCost') }), _jsx(Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.gasCostUSD }) }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.receiving') }), _jsx(Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.toAmountUSD }) }))] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [_jsx(Typography, { children: t('swap.valueLoss') }), _jsxs(Typography, Object.assign({ fontWeight: 600 }, { children: [Big(route.toAmountUSD || 0)
+                                .div(Big(route.fromAmountUSD || 0).plus(Big(route.gasCostUSD || 0)))
+                                .mul(-100)
+                                .toFixed(1), "%"] }))] })), _jsxs(Box, Object.assign({ display: "flex", mt: 3 }, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
+};
+export const getTokenValueLossThreshold = (route) => {
+    if (!route) {
+        return false;
+    }
+    const fromAmountUSD = Big((route === null || route === void 0 ? void 0 : route.fromAmountUSD) || 0);
+    const toAmountUSD = Big((route === null || route === void 0 ? void 0 : route.toAmountUSD) || 0);
+    const gasCostUSD = Big((route === null || route === void 0 ? void 0 : route.gasCostUSD) || 0);
+    if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
+        return false;
+    }
+    return toAmountUSD.div(fromAmountUSD.plus(gasCostUSD)).lt(0.9);
+};

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormProvider, useForm } from 'react-hook-form';
 import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey } from './types';
+import { URLSearchParamsBuilder } from './URLSearchParamsBuilder';
 export const formDefaultValues = {
     [SwapFormKey.FromAmount]: '',
     [SwapFormKey.ToAddress]: '',
     [SwapFormKey.TokenSearchFilter]: '',
 };
 export const SwapFormProvider = ({ children, }) => {
-    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = useWidgetConfig();
+    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress, buildSwapUrl, } = useWidgetConfig();
     const methods = useForm({
         defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain,
             fromToken, fromAmount: (typeof fromAmount === 'number'
@@ -17,5 +18,5 @@ export const SwapFormProvider = ({ children, }) => {
             toToken,
             toAddress }),
     });
-    return _jsx(FormProvider, Object.assign({}, methods, { children: children }));
+    return (_jsxs(FormProvider, Object.assign({}, methods, { children: [buildSwapUrl ? _jsx(URLSearchParamsBuilder, {}) : null, children] })));
 };

package/providers/SwapFormProvider/URLSearchParamsBuilder.d.ts

@@ -0,0 +1 @@
+export declare const URLSearchParamsBuilder: () => null;

package/providers/SwapFormProvider/URLSearchParamsBuilder.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useEffect } from 'react';
+import { useFormState, useWatch } from 'react-hook-form';
+import { useLocation } from 'react-router-dom';
+import { SwapFormKey } from './types';
+const formValueKeys = [
+    SwapFormKey.FromAmount,
+    SwapFormKey.FromChain,
+    SwapFormKey.FromToken,
+    SwapFormKey.ToAddress,
+    SwapFormKey.ToChain,
+    SwapFormKey.ToToken,
+];
+export const URLSearchParamsBuilder = () => {
+    const { pathname } = useLocation();
+    const touchedFields = __rest(useFormState().touchedFields, []);
+    const values = useWatch({ name: formValueKeys });
+    useEffect(() => {
+        const url = new URL(window.location);
+        formValueKeys.forEach((key, index) => {
+            if (touchedFields[key] && values[index]) {
+                url.searchParams.set(key, values[index]);
+            }
+            else if (url.searchParams.has(key) && !values[index]) {
+                url.searchParams.delete(key);
+            }
+        });
+        url.searchParams.sort();
+        window.history.replaceState(window.history.state, '', url);
+    }, [pathname, touchedFields, values]);
+    return null;
+};

package/providers/SwapFormProvider/types.d.ts

@@ -2,19 +2,19 @@ export declare enum SwapFormKey {
     FromAmount = "fromAmount",
     FromChain = "fromChain",
     FromToken = "fromToken",
-    TokenSearchFilter = "tokenSearchFilter",
+    ToAddress = "toAddress",
     ToChain = "toChain",
     ToToken = "toToken",
-    ToAddress = "toAddress"
+    TokenSearchFilter = "tokenSearchFilter"
 }
 export declare type SwapFormValues = {
     [SwapFormKey.FromAmount]: string;
     [SwapFormKey.FromChain]: number;
     [SwapFormKey.FromToken]: string;
-    [SwapFormKey.TokenSearchFilter]: string;
+    [SwapFormKey.ToAddress]: string;
     [SwapFormKey.ToChain]: number;
     [SwapFormKey.ToToken]: string;
-    [SwapFormKey.ToAddress]: string;
+    [SwapFormKey.TokenSearchFilter]: string;
 };
 export declare type SwapFormType = 'from' | 'to';
 export declare const SwapFormKeyHelper: {

package/providers/SwapFormProvider/types.js

@@ -3,10 +3,10 @@ export var SwapFormKey;
     SwapFormKey["FromAmount"] = "fromAmount";
     SwapFormKey["FromChain"] = "fromChain";
     SwapFormKey["FromToken"] = "fromToken";
-    SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
+    SwapFormKey["ToAddress"] = "toAddress";
     SwapFormKey["ToChain"] = "toChain";
     SwapFormKey["ToToken"] = "toToken";
-    SwapFormKey["ToAddress"] = "toAddress";
+    SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
 })(SwapFormKey || (SwapFormKey = {}));
 export const SwapFormKeyHelper = {
     getChainKey: (formType) => `${formType}Chain`,

package/providers/WalletProvider/WalletFormUpdate.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { WalletAccount } from './types';
+export declare const WalletFormUpdate: React.FC<{
+    account: WalletAccount;
+}>;

package/providers/WalletProvider/WalletFormUpdate.js

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useChainOrderStore } from '../../stores';
+import { SwapFormKey } from '../SwapFormProvider';
+import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
+export const WalletFormUpdate = ({ account, }) => {
+    const { fromChain, toChain, chains, disabledChains } = useWidgetConfig();
+    const { setValue, getValues, getFieldState, 
+    // Subscription to touchedFields is required by getFieldState to work
+    formState: { touchedFields }, } = useFormContext();
+    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
+    useEffect(() => {
+        const chainAllowed = account.chainId && isItemAllowed(account.chainId, chains, disabledChains);
+        if (!account.isActive || !account.chainId || !chainAllowed) {
+            return;
+        }
+        const [fromChainValue, toChainValue] = getValues([
+            SwapFormKey.FromChain,
+            SwapFormKey.ToChain,
+        ]);
+        const { isTouched: isFromChainTouched } = getFieldState(SwapFormKey.FromChain);
+        const { isTouched: isToChainTouched } = getFieldState(SwapFormKey.ToChain);
+        const { isTouched: isFromTokenTouched } = getFieldState(SwapFormKey.FromToken);
+        const { isTouched: isToTokenTouched } = getFieldState(SwapFormKey.ToToken);
+        const { isTouched: isFromAmountTouched } = getFieldState(SwapFormKey.FromAmount);
+        const { chainOrder, setChain } = useChainOrderStore.getState();
+        // Users can switch chains in the wallet.
+        // If we don't have a chain in the ordered chain list we should add it.
+        setChain(account.chainId);
+        // If we ran out of slots for the ordered chain list and the current chain isn't there
+        // we should make a recently switched chain as current.
+        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
+        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
+        if ((!fromChain && !isFromChainTouched && !isFromTokenTouched) ||
+            !hasFromChainInOrderedList) {
+            setValue(SwapFormKey.FromChain, account.chainId);
+            setValue(SwapFormKey.FromToken, '');
+            if (isFromAmountTouched) {
+                setValue(SwapFormKey.FromAmount, '');
+            }
+        }
+        if ((!toChain && !isToChainTouched && !isToTokenTouched) ||
+            !hasToChainInOrderedList) {
+            setValue(SwapFormKey.ToChain, account.chainId);
+            setValue(SwapFormKey.ToToken, '');
+        }
+    }, [
+        account.chainId,
+        account.isActive,
+        chains,
+        disabledChains,
+        fromChain,
+        getFieldState,
+        getValues,
+        setValue,
+        toChain,
+    ]);
+    return null;
+};

package/providers/WalletProvider/WalletProvider.js

@@ -7,13 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { useChainOrderStore } from '../../stores';
-import { SwapFormKey } from '../SwapFormProvider';
-import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
+import { useWidgetConfig } from '../WidgetProvider';
+import { WalletFormUpdate } from './WalletFormUpdate';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -28,8 +26,7 @@ const initialContext = {
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
 export const WalletProvider = ({ children }) => {
-    const { walletManagement, fromChain, toChain, chains, disabledChains } = useWidgetConfig();
-    const methods = useFormContext();
+    const { walletManagement } = useWidgetConfig();
     const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = useLiFiWalletManagement();
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
@@ -94,59 +91,7 @@ export const WalletProvider = ({ children }) => {
         account,
         provider,
     }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
-    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
-    useEffect(() => {
-        const chainAllowed = account.chainId && isItemAllowed(account.chainId, chains, disabledChains);
-        if (!account.isActive || !account.chainId || !chainAllowed) {
-            return;
-        }
-        const [fromChainValue, toChainValue] = methods.getValues([
-            SwapFormKey.FromChain,
-            SwapFormKey.ToChain,
-        ]);
-        const { isDirty: isFromChainDirty } = methods.getFieldState(SwapFormKey.FromChain, methods.formState);
-        const { isDirty: isToChainDirty } = methods.getFieldState(SwapFormKey.ToChain, methods.formState);
-        const { isDirty: isFromTokenDirty } = methods.getFieldState(SwapFormKey.FromToken, methods.formState);
-        const { isDirty: isToTokenDirty } = methods.getFieldState(SwapFormKey.ToToken, methods.formState);
-        const { chainOrder, setChain } = useChainOrderStore.getState();
-        // Users can switch chains in the wallet.
-        // If we don't have a chain in the ordered chain list we should add it.
-        setChain(account.chainId);
-        // If we ran out of slots for the ordered chain list and the current chain isn't there
-        // we should make a recently switched chain as current.
-        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
-        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
-        if ((!fromChain && !isFromChainDirty && !isFromTokenDirty) ||
-            !hasFromChainInOrderedList) {
-            methods.setValue(SwapFormKey.FromChain, account.chainId, {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormKey.FromToken, '', {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormKey.FromAmount, '', {
-                shouldDirty: false,
-            });
-        }
-        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
-            !hasToChainInOrderedList) {
-            methods.setValue(SwapFormKey.ToChain, account.chainId, {
-                shouldDirty: false,
-            });
-            methods.setValue(SwapFormKey.ToToken, '', {
-                shouldDirty: false,
-            });
-        }
-    }, [
-        account.chainId,
-        account.isActive,
-        chains,
-        disabledChains,
-        fromChain,
-        methods,
-        toChain,
-    ]);
-    return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
+    return (_jsxs(WalletContext.Provider, Object.assign({ value: value }, { children: [_jsx(WalletFormUpdate, { account: account }), children] })));
 };
 export const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {
     try {

package/providers/WidgetProvider/WidgetProvider.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useMemo } from 'react';
+import { formatAmount } from '../../utils';
 const initialContext = {
     disabledChains: [],
 };
@@ -20,27 +21,33 @@ export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
     var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount"]);
     const value = useMemo(() => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         try {
             const searchParams = Object.fromEntries(new URLSearchParams(window === null || window === void 0 ? void 0 : window.location.search));
+            // Prevent using fromToken/toToken params if chain is not selected
+            ['from', 'to'].forEach((key) => {
+                if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
+                    delete searchParams[`${key}Token`];
+                }
+            });
             return Object.assign(Object.assign({}, config), { fromChain: (searchParams.fromChain &&
                     isNaN(parseInt(searchParams.fromChain, 10))) ||
                     typeof fromChain === 'string'
-                    ? getChainByKey((_a = (searchParams.fromChain || fromChain)) === null || _a === void 0 ? void 0 : _a.toLowerCase()).id
+                    ? (_b = getChainByKey((_a = (searchParams.fromChain || fromChain)) === null || _a === void 0 ? void 0 : _a.toLowerCase())) === null || _b === void 0 ? void 0 : _b.id
                     : (searchParams.fromChain &&
                         !isNaN(parseInt(searchParams.fromChain, 10))) ||
                         typeof fromChain === 'number'
                         ? parseInt(searchParams.fromChain, 10) || fromChain
                         : undefined, toChain: (searchParams.toChain && isNaN(parseInt(searchParams.toChain, 10))) ||
                     typeof toChain === 'string'
-                    ? getChainByKey((_b = (searchParams.toChain || toChain)) === null || _b === void 0 ? void 0 : _b.toLowerCase()).id
+                    ? (_d = getChainByKey((_c = (searchParams.toChain || toChain)) === null || _c === void 0 ? void 0 : _c.toLowerCase())) === null || _d === void 0 ? void 0 : _d.id
                     : (searchParams.toChain &&
                         !isNaN(parseInt(searchParams.toChain, 10))) ||
                         typeof toChain === 'number'
                         ? parseInt(searchParams.toChain, 10) || toChain
-                        : undefined, fromToken: ((_c = searchParams.fromToken) === null || _c === void 0 ? void 0 : _c.toLowerCase()) || (fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase()), toToken: ((_d = searchParams.toToken) === null || _d === void 0 ? void 0 : _d.toLowerCase()) || (toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase()), fromAmount: typeof searchParams.fromAmount === 'string' &&
+                        : undefined, fromToken: ((_e = searchParams.fromToken) === null || _e === void 0 ? void 0 : _e.toLowerCase()) || (fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase()), toToken: ((_f = searchParams.toToken) === null || _f === void 0 ? void 0 : _f.toLowerCase()) || (toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase()), fromAmount: typeof searchParams.fromAmount === 'string' &&
                     !isNaN(parseFloat(searchParams.fromAmount))
-                    ? searchParams.fromAmount
+                    ? formatAmount(searchParams.fromAmount)
                     : fromAmount });
         }
         catch (e) {

package/stores/routes/index.d.ts

@@ -1,7 +1,7 @@
 export * from './types';
 export * from './useExecutingRoutesIds';
+export * from './useRecommendedRouteStore';
 export * from './useRouteExecutionStore';
-export * from './useSelectedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/stores/routes/index.js

@@ -1,7 +1,7 @@
 export * from './types';
 export * from './useExecutingRoutesIds';
+export * from './useRecommendedRouteStore';
 export * from './useRouteExecutionStore';
-export * from './useSelectedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/stores/routes/types.d.ts

@@ -5,14 +5,14 @@ export interface RouteExecutionStore {
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
-    deleteRoutes: () => void;
+    deleteRoutes: (type: 'completed' | 'active') => void;
 }
-export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
+export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success' | 'warning';
 export interface RouteExecution {
     route: Route;
     status: RouteExecutionStatus;
 }
-export interface SelectedRouteStore {
-    selectedRoute?: Route;
-    setSelectedRoute: (route?: Route) => void;
+export interface RecommendedRouteStore {
+    recommendedRoute?: Route;
+    setRecommendedRoute: (route?: Route) => void;
 }

package/stores/routes/useRecommendedRouteStore.d.ts

@@ -0,0 +1,4 @@
+import type { RecommendedRouteStore } from './types';
+export declare const useRecommendedRouteStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<RecommendedRouteStore>, "setState"> & {
+    setState(nextStateOrUpdater: RecommendedRouteStore | Partial<RecommendedRouteStore> | ((state: import("immer/dist/internal").WritableDraft<RecommendedRouteStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/stores/routes/useRecommendedRouteStore.js

@@ -0,0 +1,9 @@
+import create from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+export const useRecommendedRouteStore = create()(immer((set) => ({
+    setRecommendedRoute: (route) => {
+        set((state) => {
+            state.recommendedRoute = route;
+        });
+    },
+})));

package/stores/routes/useRouteExecutionStore.js

@@ -43,8 +43,15 @@ export const useRouteExecutionStore = create()(persist(immer((set) => ({
             delete state.routes[routeId];
         }
     }),
-    deleteRoutes: () => set((state) => {
-        state.routes = {};
+    deleteRoutes: (type) => set((state) => {
+        Object.keys(state.routes)
+            .filter((routeId) => {
+            var _a, _b;
+            return type === 'completed'
+                ? ((_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === 'success'
+                : ((_b = state.routes[routeId]) === null || _b === void 0 ? void 0 : _b.status) !== 'success';
+        })
+            .forEach((routeId) => delete state.routes[routeId]);
     }),
 })), {
     name: 'li.fi-widget-routes',