@lifi/widget 1.14.1 → 1.16.0

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ShowDestinationWallet: () => JSX.Element;

package/pages/SettingsPage/ShowDestinationWallet.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Switch } from '../../components/Switch';
+import { useSetSettings, useSettings } from '../../stores';
+export const ShowDestinationWallet = () => {
+    const { t } = useTranslation();
+    const [setValue] = useSetSettings();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const onChange = (_, checked) => {
+        setValue('showDestinationWallet', checked);
+    };
+    return (_jsx(Box, Object.assign({ px: 3, pt: 2 }, { children: _jsxs(Box, Object.assign({ sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.showDestinationWallet`) })) })), _jsx(Switch, { checked: showDestinationWallet, onChange: onChange })] })) })));
+};

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -12,19 +12,20 @@ import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon, } from '@m
 import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography, } from '@mui/material';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { Dialog } from '../../components/Dialog';
 import { useSetHeaderAction } from '../../components/Header';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
+import { useNavigateBack } from '../../hooks';
 import { useRouteStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 export const SwapDetailsPage = () => {
     var _a, _b;
     const { t } = useTranslation();
-    const navigate = useNavigate();
+    const { navigateBack } = useNavigateBack();
     const setHeaderAction = useSetHeaderAction();
     const { state } = useLocation();
     const [routeExecution, deleteRoute] = useRouteStore((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow);
@@ -33,7 +34,7 @@ export const SwapDetailsPage = () => {
         setOpen((open) => !open);
     }, []);
     const handleDeleteRoute = () => {
-        navigate(-1);
+        navigateBack();
         if (routeExecution) {
             deleteRoute(routeExecution.route.id);
         }
@@ -58,5 +59,5 @@ export const SwapDetailsPage = () => {
             }), _jsxs(Card, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
                             display: 'flex',
                             flex: 1,
-                        } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: t('swap.routeId') })), _jsx(Box, Object.assign({ mr: 1, mt: 1 }, { children: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", onClick: copyRouteId }, { children: _jsx(ContentCopyIcon, { fontSize: "small" }) })) }))] })), _jsx(Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id }))] })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+                        } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), _jsx(Box, Object.assign({ mr: 1, mt: 1 }, { children: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", onClick: copyRouteId }, { children: _jsx(ContentCopyIcon, { fontSize: "small" }) })) }))] })), _jsx(Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id }))] })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
 import { useSetHeaderAction } from '../../components/Header';
-import { useWallet } from '../../providers/WalletProvider';
+import { useWallet } from '../../providers';
 import { useRouteStore } from '../../stores';
 import { useSwapHistory } from '../../stores/route';
 import { SwapHistoryEmpty } from './SwapHistoryEmpty';

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
 import { Box, Button, Typography } from '@mui/material';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
-import { useChains, useTokenBalance } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { getProcessMessage, useChains, useNavigateBack, useTokenBalance, } from '../../hooks';
+import { SwapFormKey } from '../../providers';
 import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.style';
-import { getProcessMessage } from './utils';
 export const StatusBottomSheet = ({ status, route, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { t } = useTranslation();
-    const navigate = useNavigate();
+    const { navigateBack } = useNavigateBack();
     const ref = useRef(null);
     const { getChainById } = useChains();
     const { token, refetch: refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
@@ -25,48 +23,38 @@ export const StatusBottomSheet = ({ status, route, }) => {
     };
     const handleDone = () => {
         clearFromAmount();
-        navigate(-1);
+        navigateBack();
     };
     const handleClose = () => {
         var _a;
         clearFromAmount();
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
     };
-    const { title, message } = useMemo(() => {
-        var _a, _b;
-        switch (status) {
-            case 'success':
-                return {
-                    title: t('swap.success.title.fundsReceived'),
-                    message: t('swap.success.message.fundsReceived', {
-                        amount: token === null || token === void 0 ? void 0 : token.amount,
-                        tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
-                        chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
-                    }),
-                };
-            case 'error': {
-                const step = route.steps.find((step) => {
-                    var _a;
-                    return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
-                });
-                const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
-                if (!step || !process) {
-                    return {};
-                }
-                return getProcessMessage(t, getChainById, step, process);
+    let title;
+    let message;
+    switch (status) {
+        case 'success':
+            title = t('swap.success.title.fundsReceived');
+            message = t('swap.success.message.fundsReceived', {
+                amount: token === null || token === void 0 ? void 0 : token.amount,
+                tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
+                chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+            });
+            break;
+        case 'error': {
+            const step = route.steps.find((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+            const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
+            if (!step || !process) {
+                break;
             }
-            default:
-                return {};
+            const processMessage = getProcessMessage(t, getChainById, step, process);
+            title = processMessage.title;
+            message = processMessage.message;
+            break;
         }
-    }, [
-        getChainById,
-        route.steps,
-        route.toChainId,
-        status,
-        t,
-        token === null || token === void 0 ? void 0 : token.amount,
-        token === null || token === void 0 ? void 0 : token.symbol,
-    ]);
+        default:
+            break;
+    }
     useEffect(() => {
         var _a, _b;
         if ((status === 'success' || status === 'error') &&
@@ -75,5 +63,5 @@ export const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
         }
     }, [refetchBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toAmount) !== null && _c !== void 0 ? _c : (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.estimate.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_g = (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : (_f = route.steps.at(-1)) === null || _f === void 0 ? void 0 : _f.estimate.toAmount) !== null && _g !== void 0 ? _g : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };

package/pages/SwapPage/SwapPage.js

@@ -1,27 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button } from '@mui/material';
 import { Fragment } from 'react';
+import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { SwapButton } from '../../components/SwapButton';
-import { useRouteExecution } from '../../hooks';
+import { useNavigateBack, useRouteExecution } from '../../hooks';
+import { SwapFormKey } from '../../providers';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
 export const SwapPage = () => {
     const { t } = useTranslation();
     const { state } = useLocation();
-    const navigate = useNavigate();
+    const { navigateBack } = useNavigateBack();
+    const { setValue, formState: { isValid, isValidating }, } = useFormContext();
     const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
     const handleRemoveRoute = () => {
-        navigate(-1);
+        navigateBack();
         deleteRoute();
     };
     const handleSwapClick = () => {
         if (status === 'idle') {
             executeRoute();
+            setValue(SwapFormKey.FromAmount, '');
         }
         if (status === 'error') {
             restartRoute();
@@ -41,5 +45,5 @@ 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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }) }))) : null, status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' ? (_jsx(GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }) }))) : null, status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null] }));
 };

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -12,7 +12,7 @@ export const SwapRoutesPage = () => {
     const navigate = useNavigate();
     const { pathname } = useLocation();
     const setHeaderAction = useSetHeaderAction();
-    const { routes: swapRoutes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
+    const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);

package/providers/SwapFormProvider/SwapFormProvider.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const formDefaultValues: {
     fromAmount: string;
+    toAddress: string;
     tokenSearchFilter: string;
 };
 export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -2,40 +2,74 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ChainId } from '@lifi/sdk';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { useChainOrderStore, useSetChainOrder } from '../../stores/chains';
 import { useWallet } from '../WalletProvider';
 import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey } from './types';
 export const formDefaultValues = {
     [SwapFormKey.FromAmount]: '',
+    [SwapFormKey.ToAddress]: '',
     [SwapFormKey.TokenSearchFilter]: '',
 };
 export const SwapFormProvider = ({ children, }) => {
+    const [setChain] = useSetChainOrder();
     const { account } = useWallet();
-    const { fromChain, fromToken, fromAmount, toChain, toToken } = useWidgetConfig();
+    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = useWidgetConfig();
     const methods = useForm({
         defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain: fromChain !== null && fromChain !== void 0 ? fromChain : ChainId.ETH, fromToken, fromAmount: (typeof fromAmount === 'number'
                 ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
-                : fromAmount) || formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : ChainId.ETH, toToken }),
+                : fromAmount) || formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : ChainId.ETH, toToken,
+            toAddress }),
     });
     // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
     useEffect(() => {
         if (!account.isActive || !account.chainId) {
             return;
         }
-        const { isDirty: isFromChainDirty, isTouched: isFromChainTouched } = methods.getFieldState(SwapFormKey.FromChain, methods.formState);
-        if (!fromChain && !isFromChainDirty && !isFromChainTouched) {
+        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);
+        // 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 { chainOrder } = useChainOrderStore.getState();
+        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
+        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
+        if ((!fromChain && !isFromChainDirty && !isFromTokenDirty) ||
+            !hasFromChainInOrderedList) {
             methods.setValue(SwapFormKey.FromChain, account.chainId, {
                 shouldDirty: false,
-                shouldTouch: false,
+            });
+            methods.setValue(SwapFormKey.FromToken, '', {
+                shouldDirty: false,
+            });
+            methods.setValue(SwapFormKey.FromAmount, '', {
+                shouldDirty: false,
             });
         }
-        const { isDirty: isToChainDirty, isTouched: isToChainTouched } = methods.getFieldState(SwapFormKey.ToChain, methods.formState);
-        if (!toChain && !isToChainDirty && !isToChainTouched) {
+        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
+            !hasToChainInOrderedList) {
             methods.setValue(SwapFormKey.ToChain, account.chainId, {
                 shouldDirty: false,
-                shouldTouch: false,
+            });
+            methods.setValue(SwapFormKey.ToToken, '', {
+                shouldDirty: false,
             });
         }
-    }, [account.chainId, account.isActive, fromChain, methods, toChain]);
+    }, [
+        account.chainId,
+        account.isActive,
+        fromChain,
+        methods,
+        setChain,
+        toChain,
+    ]);
     return _jsx(FormProvider, Object.assign({}, methods, { children: children }));
 };

package/providers/SwapFormProvider/types.d.ts

@@ -4,7 +4,8 @@ export declare enum SwapFormKey {
     FromToken = "fromToken",
     TokenSearchFilter = "tokenSearchFilter",
     ToChain = "toChain",
-    ToToken = "toToken"
+    ToToken = "toToken",
+    ToAddress = "toAddress"
 }
 export declare type SwapFormValues = {
     [SwapFormKey.FromAmount]: string;
@@ -13,6 +14,7 @@ export declare type SwapFormValues = {
     [SwapFormKey.TokenSearchFilter]: string;
     [SwapFormKey.ToChain]: number;
     [SwapFormKey.ToToken]: string;
+    [SwapFormKey.ToAddress]: string;
 };
 export declare type SwapFormDirection = 'from' | 'to';
 export declare const SwapFormKeyHelper: {

package/providers/SwapFormProvider/types.js

@@ -6,6 +6,7 @@ export var SwapFormKey;
     SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
     SwapFormKey["ToChain"] = "toChain";
     SwapFormKey["ToToken"] = "toToken";
+    SwapFormKey["ToAddress"] = "toAddress";
 })(SwapFormKey || (SwapFormKey = {}));
 export const SwapFormKeyHelper = {
     getChainKey: (formType) => `${formType}Chain`,

package/providers/WalletProvider/WalletProvider.js

@@ -24,7 +24,7 @@ const initialContext = {
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
 export const WalletProvider = ({ children, walletManagement }) => {
-    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLiFiWalletManagement();
+    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = useLiFiWalletManagement();
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
         if (walletManagement) {
@@ -68,8 +68,13 @@ export const WalletProvider = ({ children, walletManagement }) => {
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            const account = yield extractAccountFromSigner((_a = walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.signer) !== null && _a !== void 0 ? _a : signer);
+            let account;
+            if (walletManagement) {
+                account = yield extractAccountFromSigner(walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.signer);
+            }
+            else {
+                account = yield extractAccountFromSigner(signer);
+            }
             setAccount(account);
         });
         updateAccount();
@@ -81,7 +86,8 @@ export const WalletProvider = ({ children, walletManagement }) => {
         addChain,
         addToken,
         account,
-    }), [account, addChain, addToken, connect, disconnect, switchChain]);
+        provider,
+    }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
     return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 export const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {

package/providers/WalletProvider/types.d.ts

@@ -1,8 +1,10 @@
+import type { Web3Provider } from '@ethersproject/providers';
 import type { Token } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
 import type { Signer } from 'ethers';
 export interface WalletContextProps {
     account: WalletAccount;
+    provider?: Web3Provider;
     addChain(chainId: number): Promise<boolean>;
     addToken(chainId: number, token: Token): Promise<void>;
     disconnect(): void;
@@ -10,8 +12,8 @@ export interface WalletContextProps {
     connect(wallet?: Wallet | undefined): Promise<void>;
 }
 export interface WalletAccount {
-    address?: string;
     isActive?: boolean;
-    signer?: Signer;
     chainId?: number;
+    address?: string;
+    signer?: Signer;
 }

package/providers/WidgetProvider/WidgetProvider.js

@@ -23,7 +23,7 @@ const initialContext = {
 const WidgetContext = createContext(initialContext);
 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, integrator } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount", "integrator"]);
+    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount, integrator, sdkConfig } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount", "integrator", "sdkConfig"]);
     const value = useMemo(() => {
         var _a, _b, _c, _d;
         try {
@@ -54,12 +54,8 @@ export const WidgetProvider = (_a) => {
         }
     }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
     useEffect(() => {
-        updateLiFiConfig({
-            defaultRouteOptions: {
-                integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname,
-            },
-        });
-    }, [integrator]);
+        updateLiFiConfig(Object.assign(Object.assign({}, sdkConfig), { defaultRouteOptions: Object.assign(Object.assign({}, sdkConfig === null || sdkConfig === void 0 ? void 0 : sdkConfig.defaultRouteOptions), { integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname }) }));
+    }, [integrator, sdkConfig]);
     useEffect(() => {
         checkPackageUpdates(name, version);
     }, []);

package/providers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SwapFormProvider';
+export * from './ThemeProvider';
+export * from './WalletProvider';
+export * from './WidgetProvider';

package/providers/index.js

@@ -0,0 +1,4 @@
+export * from './SwapFormProvider';
+export * from './ThemeProvider';
+export * from './WalletProvider';
+export * from './WidgetProvider';

package/stores/chains/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './useChainOrder';
+export * from './useChainOrderStore';
+export * from './useInitializeChainOrder';

package/stores/chains/index.js

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './useChainOrder';
+export * from './useChainOrderStore';
+export * from './useInitializeChainOrder';

package/stores/chains/types.d.ts

@@ -0,0 +1,8 @@
+export interface ChainOrderState {
+    chainOrder: number[];
+    availableChains: number[];
+}
+export interface ChainOrderStore extends ChainOrderState {
+    initializeChains(chainIds: number[]): void;
+    setChain(chainId: number): void;
+}

package/stores/chains/types.js

@@ -0,0 +1 @@
+export {};

package/stores/chains/useChainOrder.d.ts

@@ -0,0 +1 @@
+export declare const useChainOrder: () => [number[], (chainId: number) => void];

package/stores/chains/useChainOrder.js

@@ -0,0 +1,5 @@
+import shallow from 'zustand/shallow';
+import { useChainOrderStore } from './useChainOrderStore';
+export const useChainOrder = () => {
+    return useChainOrderStore((state) => [state.chainOrder, state.setChain], shallow);
+};

package/stores/chains/useChainOrderStore.d.ts

@@ -0,0 +1,19 @@
+import type { ChainOrderStore } from './types';
+export declare const maxChainToOrder = 9;
+export declare const useChainOrderStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<ChainOrderStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ChainOrderStore, {
+            chainOrder: number[];
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ChainOrderStore) => void) => () => void;
+        onFinishHydration: (fn: (state: ChainOrderStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ChainOrderStore, {
+            chainOrder: number[];
+        }>>;
+    };
+}, "setState"> & {
+    setState(nextStateOrUpdater: ChainOrderStore | Partial<ChainOrderStore> | ((state: import("immer/dist/internal").WritableDraft<ChainOrderStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/stores/chains/useChainOrderStore.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-underscore-dangle */
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+export const maxChainToOrder = 9;
+export const useChainOrderStore = create()(persist(immer((set) => ({
+    chainOrder: [],
+    availableChains: [],
+    initializeChains: (chainIds) => set((state) => {
+        state.availableChains = chainIds;
+        state.chainOrder = state.chainOrder.filter((chainId) => chainIds.includes(chainId));
+        const chainsToAdd = chainIds.filter((chainId) => !state.chainOrder.includes(chainId));
+        if (state.chainOrder.length === maxChainToOrder ||
+            !chainsToAdd.length) {
+            return;
+        }
+        const chainsToAddLength = maxChainToOrder - state.chainOrder.length;
+        for (let index = 0; index < chainsToAddLength; index++) {
+            state.chainOrder.push(chainsToAdd[index]);
+        }
+    }),
+    setChain: (chainId) => set((state) => {
+        if (state.chainOrder.includes(chainId) ||
+            !state.availableChains.includes(chainId)) {
+            return;
+        }
+        state.chainOrder.unshift(chainId);
+        if (state.chainOrder.length > maxChainToOrder) {
+            state.chainOrder.pop();
+        }
+    }),
+})), {
+    name: 'li.fi-widget-chains-order',
+    version: 0,
+    partialize: (state) => ({ chainOrder: state.chainOrder }),
+}));

package/stores/chains/useInitializeChainOrder.d.ts

@@ -0,0 +1 @@
+export declare const useSetChainOrder: () => [(chainId: number) => void, (chainIds: number[]) => void];

package/stores/chains/useInitializeChainOrder.js

@@ -0,0 +1,5 @@
+import shallow from 'zustand/shallow';
+import { useChainOrderStore } from './useChainOrderStore';
+export const useSetChainOrder = () => {
+    return useChainOrderStore((state) => [state.setChain, state.initializeChains], shallow);
+};

package/stores/route/index.d.ts

@@ -1,5 +1,6 @@
 export * from './types';
-export * from './useExecutingRoutes';
+export * from './useExecutingRoutesIds';
 export * from './useRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
+export * from './utils';

package/stores/route/index.js

@@ -1,5 +1,6 @@
 export * from './types';
-export * from './useExecutingRoutes';
+export * from './useExecutingRoutesIds';
 export * from './useRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
+export * from './utils';

package/stores/route/useExecutingRoutesIds.d.ts

@@ -0,0 +1 @@
+export declare const useExecutingRoutesIds: (address?: string) => string[];

package/stores/route/useExecutingRoutesIds.js

@@ -0,0 +1,13 @@
+import shallow from 'zustand/shallow';
+import { useRouteStore } from './useRouteStore';
+export const useExecutingRoutesIds = (address) => {
+    return useRouteStore((state) => Object.values(state.routes)
+        .filter((item) => item.route.fromAddress === address &&
+        (item.status === 'loading' || item.status === 'error'))
+        .sort((a, b) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = b === null || b === void 0 ? void 0 : b.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0) -
+            ((_d = (_c = a === null || a === void 0 ? void 0 : a.route.steps[0].execution) === null || _c === void 0 ? void 0 : _c.process[0].startedAt) !== null && _d !== void 0 ? _d : 0);
+    })
+        .map(({ route }) => route.id), shallow);
+};