@lifi/widget 1.13.7 → 1.15.0

package/cjs/hooks/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./useDebouncedWatch"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
 __exportStar(require("./useInitializer"), exports);
+__exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useRouteExecution"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
 __exportStar(require("./useSwapRoutes"), exports);

package/cjs/hooks/useNavigateBack.d.ts

@@ -0,0 +1,4 @@
+export declare const useNavigateBack: () => {
+    navigateBack: () => void;
+    navigate: import("react-router-dom").NavigateFunction;
+};

package/cjs/hooks/useNavigateBack.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigateBack = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const useNavigateBack = () => {
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const navigateBack = (0, react_1.useCallback)(() => {
+        if (window.history.state && window.history.state.idx > 0) {
+            navigate(-1);
+        }
+        else {
+            navigate(window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) || '/', { replace: true });
+        }
+    }, [navigate]);
+    return { navigateBack, navigate };
+};
+exports.useNavigateBack = useNavigateBack;

package/cjs/hooks/useSwapRoutes.js

@@ -13,6 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwapRoutes = void 0;
+const address_1 = require("@ethersproject/address");
 const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = __importDefault(require("big.js"));
 const react_hook_form_1 = require("react-hook-form");
@@ -24,7 +25,7 @@ const stores_1 = require("../stores");
 const refetchTime = 60000;
 const useSwapRoutes = () => {
     var _a;
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { account, provider } = (0, WalletProvider_1.useWallet)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const { slippage, enabledBridges, enabledExchanges, routePriority } = (0, stores_1.useSettings)([
         'slippage',
@@ -32,12 +33,13 @@ const useSwapRoutes = () => {
         'enabledBridges',
         'enabledExchanges',
     ]);
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] = (0, react_hook_form_1.useWatch)({
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             SwapFormProvider_1.SwapFormKey.FromChain,
             SwapFormProvider_1.SwapFormKey.FromToken,
             SwapFormProvider_1.SwapFormKey.ToChain,
             SwapFormProvider_1.SwapFormKey.ToToken,
+            SwapFormProvider_1.SwapFormKey.ToAddress,
         ],
     });
     const [fromTokenAmount] = (0, _1.useDebouncedWatch)([SwapFormProvider_1.SwapFormKey.FromAmount], 250);
@@ -59,6 +61,7 @@ const useSwapRoutes = () => {
         fromTokenAmount,
         toChainId,
         toTokenAddress,
+        toAddress,
         slippage,
         enabledBridges,
         enabledExchanges,
@@ -68,16 +71,24 @@ const useSwapRoutes = () => {
     const refetchInterval = previousDataUpdatedAt
         ? Math.min(Math.abs(refetchTime - (Date.now() - previousDataUpdatedAt)), refetchTime)
         : refetchTime;
-    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.useQuery)(queryKey, ({ queryKey: [_, address, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
+    const { data, isLoading, isFetching, isFetched, dataUpdatedAt, refetch } = (0, react_query_1.useQuery)(queryKey, ({ queryKey: [_, fromAddress, fromChainId, fromTokenAddress, fromTokenAmount, toChainId, toTokenAddress, toAddress, slippage, enabledBridges, enabledExchanges, routePriority,], signal, }) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c;
+        let toWalletAddress;
+        try {
+            toWalletAddress =
+                (_b = (yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(toAddress)))) !== null && _b !== void 0 ? _b : ((0, address_1.isAddress)(toAddress) ? toAddress : fromAddress);
+        }
+        catch (_d) {
+            toWalletAddress = (0, address_1.isAddress)(toAddress) ? toAddress : fromAddress;
+        }
         return lifi_1.LiFi.getRoutes({
             fromChainId,
-            fromAmount: (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 0))).toString(),
+            fromAmount: (0, big_js_1.default)(Number(fromTokenAmount) * Math.pow(10, ((_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 0))).toString(),
             fromTokenAddress,
             toChainId,
             toTokenAddress,
-            fromAddress: address,
-            toAddress: address,
+            fromAddress,
+            toAddress: toWalletAddress,
             options: {
                 slippage: slippage / 100,
                 bridges: {

package/cjs/i18n/en/translation.json

@@ -52,24 +52,26 @@
     "selectChainAndToken": "Select chain and token",
     "featuredTokens": "Featured tokens",
     "otherTokens": "Other tokens",
-    "inProgress": "In progress",
+    "inProgress": "in progress",
+    "activeTransfers": "Active transfers",
     "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
     "estimatedTime": "~{{value}} min.",
-    "networkIsBusy": "Network is busy...",
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount}} {{tokenSymbol}} on {{chainName}}",
     "routeId": "Route ID",
+    "sendToWallet": "Send to a different wallet",
+    "walletAddressOrEns": "Wallet address or ENS name",
     "tags": {
-      "recommended": "Recommended",
-      "fastest": "Fast",
-      "cheapest": "Cheap",
-      "safest": "Safe",
-      "general": "General"
+      "RECOMMENDED": "RECOMMENDED",
+      "FASTEST": "FAST",
+      "CHEAPEST": "CHEAP",
+      "SAFEST": "SAFE",
+      "ALTERNATIVE": "ALTERNATIVE"
     },
     "success": {
       "title": {
@@ -109,7 +111,9 @@
         "transactionUnprepared": "Unable to prepare transaction.",
         "unknown": "Something went wrong.",
         "userRejectedSignatureRequest": "Signature required.",
-        "slippageTooLarge": "Slippage too large."
+        "slippageTooLarge": "Slippage too large.",
+        "walletAddressInvalid": "Wallet address is invalid.",
+        "walletEnsAddressInvalid": "Wallet address is invalid or network doesn't support ENS."
       },
       "message": {
         "signatureRequired": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
@@ -156,6 +160,7 @@
       "fast": "Fast"
     },
     "advancedPreferences": "Advanced preferences",
+    "showDestinationWallet": "Show destination wallet",
     "enabledBridges": "Enabled bridges",
     "selectEnabledBridges": "Select enabled bridges",
     "enabledExchanges": "Enabled exchanges",

package/cjs/i18n/index.d.ts

@@ -56,23 +56,25 @@ export declare const resources: {
                 featuredTokens: string;
                 otherTokens: string;
                 inProgress: string;
+                activeTransfers: string;
                 couldntFindTokens: string;
                 stepSwap: string;
                 stepBridge: string;
                 stepSwapAndBridge: string;
                 estimatedTime: string;
-                networkIsBusy: string;
                 crossStepDetails: string;
                 swapStepDetails: string;
                 tokenOnChain: string;
                 tokenOnChainAmount: string;
                 routeId: string;
+                sendToWallet: string;
+                walletAddressOrEns: string;
                 tags: {
-                    recommended: string;
-                    fastest: string;
-                    cheapest: string;
-                    safest: string;
-                    general: string;
+                    RECOMMENDED: string;
+                    FASTEST: string;
+                    CHEAPEST: string;
+                    SAFEST: string;
+                    ALTERNATIVE: string;
                 };
                 success: {
                     title: {
@@ -113,6 +115,8 @@ export declare const resources: {
                         unknown: string;
                         userRejectedSignatureRequest: string;
                         slippageTooLarge: string;
+                        walletAddressInvalid: string;
+                        walletEnsAddressInvalid: string;
                     };
                     message: {
                         signatureRequired: string;
@@ -159,6 +163,7 @@ export declare const resources: {
                     fast: string;
                 };
                 advancedPreferences: string;
+                showDestinationWallet: string;
                 enabledBridges: string;
                 selectEnabledBridges: string;
                 enabledExchanges: string;

package/cjs/pages/MainPage/MainPage.js

@@ -4,12 +4,13 @@ exports.MainPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
-const SwapInProgress_1 = require("../../components/SwapInProgress");
+const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
+const SwapsInProgress_1 = require("../../components/SwapsInProgress");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
 const SwapRoutes_1 = require("./SwapRoutes");
 const MainPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInProgress_1.SwapInProgress, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: (0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(SwapsInProgress_1.SwapsInProgress, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: (0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}) }))] })));
 };
 exports.MainPage = MainPage;

package/cjs/pages/SelectTokenPage/ChainSelect.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+import type { SwapFormTypeProps } from '../../providers';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/cjs/pages/SelectTokenPage/ChainSelect.js

@@ -9,24 +9,23 @@ const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../../components/Card");
 const Select_1 = require("../../components/Select");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
-const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const providers_1 = require("../../providers");
 const ChainSelect = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue, register } = (0, react_hook_form_1.useFormContext)();
-    const { fromChain, toChain } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { fromChain, toChain } = (0, providers_1.useWidgetConfig)();
     const { chains, isLoading } = (0, hooks_1.useChains)();
-    const chainKey = SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType);
+    const chainKey = providers_1.SwapFormKeyHelper.getChainKey(formType);
     const [chainId] = (0, react_hook_form_1.useWatch)({
         name: [chainKey],
     });
-    const { onChange, onBlur, name, ref } = register(chainKey);
-    const handleChain = (event) => {
-        onChange(event);
-        setValue(SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType), '');
-        setValue(SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType), '');
-        setValue(SwapFormProvider_1.SwapFormKey.TokenSearchFilter, '');
-    };
-    return !isLoading ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.selectChain`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ ref: ref, labelId: chainKey, name: name, MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, onBlur: onBlur, IconComponent: icons_material_1.KeyboardArrowDown }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: chain.id }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
+    const { onChange, onBlur, name, ref } = register(chainKey, {
+        onChange: () => {
+            setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), '');
+            setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
+            setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
+        },
+    });
+    return !isLoading ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.selectChain`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ ref: ref, labelId: chainKey, name: name, MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: onChange, onBlur: onBlur, IconComponent: icons_material_1.KeyboardArrowDown }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: chain.id }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
 };
 exports.ChainSelect = ChainSelect;

package/cjs/pages/SelectTokenPage/SearchTokenInput.js

@@ -8,14 +8,14 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../../components/Card");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const SearchTokenInput_style_1 = require("./SearchTokenInput.style");
 const SearchTokenInput = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { register, setValue } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => () => {
-        setValue(SwapFormProvider_1.SwapFormKey.TokenSearchFilter, '');
+        setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormProvider_1.SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Search, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(providers_1.SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
 };
 exports.SearchTokenInput = SearchTokenInput;

package/cjs/pages/SelectTokenPage/SelectTokenPage.d.ts

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import type { SwapFormDirection } from '../../providers/SwapFormProvider';
+import type { SwapFormDirection } from '../../providers';
 export declare const SelectTokenPage: FC<{
     formType: SwapFormDirection;
 }>;

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -4,24 +4,20 @@ exports.SelectTokenPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
 const ChainSelect_1 = require("./ChainSelect");
 const SearchTokenInput_1 = require("./SearchTokenInput");
 const SelectTokenPage = ({ formType, }) => {
     (0, hooks_1.useScrollableOverflowHidden)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const headerRef = (0, react_1.useRef)(null);
     const contentHeight = (0, hooks_1.useContentHeight)();
     const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
-    const handleTokenClick = () => {
-        navigate(-1);
-    };
     (0, react_1.useLayoutEffect)(() => {
         var _a, _b;
         setHeaderHeight(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0));
     }, [contentHeight]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: headerHeight, onClick: handleTokenClick, formType: formType })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: headerHeight, onClick: navigateBack, formType: formType })] })));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -15,15 +15,15 @@ const wallet_management_1 = require("@lifi/wallet-management");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
 const Dialog_1 = require("../../components/Dialog");
-const WalletProvider_1 = require("../../providers/WalletProvider");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const SelectWalletPage_style_1 = require("./SelectWalletPage.style");
 const SelectWalletPage = () => {
     var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { connect } = (0, WalletProvider_1.useWallet)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { connect } = (0, providers_1.useWallet)();
     const [walletIdentity, setWalletIdentity] = (0, react_1.useState)({ show: false });
     const closeDialog = () => {
         setWalletIdentity((state) => (Object.assign(Object.assign({}, state), { show: false })));
@@ -40,9 +40,9 @@ const SelectWalletPage = () => {
             });
             return;
         }
-        navigate(-1);
+        navigateBack();
         yield connect(wallet);
-    }), [connect, navigate]);
+    }), [connect, navigateBack]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
                     paddingLeft: 2,
                     paddingRight: 2,

package/cjs/pages/SettingsPage/AdvancedPreferences.js

@@ -15,10 +15,10 @@ const AdvancedPreferences = () => {
     const handleAdvancedPreferences = (_, checked) => {
         setValue('advancedPreferences', checked);
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 3 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(EnabledBridgesSelect_1.EnabledBridgesSelect, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(EnabledExchangesSelect_1.EnabledExchangesSelect, {}) }))] })))] })));
+                } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(EnabledBridgesSelect_1.EnabledBridgesSelect, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(EnabledExchangesSelect_1.EnabledExchangesSelect, {}) }))] })))] })));
 };
 exports.AdvancedPreferences = AdvancedPreferences;

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -5,12 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
-const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const ColorSchemeButtonGroup_style_1 = require("./ColorSchemeButtonGroup.style");
 const ColorSchemeButtonGroup = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { disableAppearance } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { disableAppearance } = (0, providers_1.useWidgetConfig)();
     const [appearance, setAppearance] = (0, stores_1.useAppearance)();
     if (disableAppearance) {
         return null;

package/cjs/pages/SettingsPage/SettingsPage.js

@@ -7,8 +7,9 @@ const AdvancedPreferences_1 = require("./AdvancedPreferences");
 const ColorSchemeButtonGroup_1 = require("./ColorSchemeButtonGroup");
 const GasPriceSelect_1 = require("./GasPriceSelect");
 const RoutePrioritySelect_1 = require("./RoutePrioritySelect");
+const ShowDestinationWallet_1 = require("./ShowDestinationWallet");
 const SlippageInput_1 = require("./SlippageInput");
 const SettingsPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 1 }, { children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 2, flex: 1 }, { children: (0, jsx_runtime_1.jsx)(SlippageInput_1.SlippageInput, {}) })), (0, jsx_runtime_1.jsx)(GasPriceSelect_1.GasPriceSelect, {})] }))] })), (0, jsx_runtime_1.jsx)(AdvancedPreferences_1.AdvancedPreferences, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 1 }, { children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 2, flex: 1 }, { children: (0, jsx_runtime_1.jsx)(SlippageInput_1.SlippageInput, {}) })), (0, jsx_runtime_1.jsx)(GasPriceSelect_1.GasPriceSelect, {})] }))] })), (0, jsx_runtime_1.jsx)(ShowDestinationWallet_1.ShowDestinationWallet, {}), (0, jsx_runtime_1.jsx)(AdvancedPreferences_1.AdvancedPreferences, {})] })));
 };
 exports.SettingsPage = SettingsPage;

package/cjs/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/cjs/pages/SettingsPage/ShowDestinationWallet.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowDestinationWallet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Switch_1 = require("../../components/Switch");
+const stores_1 = require("../../stores");
+const ShowDestinationWallet = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [setValue] = (0, stores_1.useSetSettings)();
+    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    const onChange = (_, checked) => {
+        setValue('showDestinationWallet', checked);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ px: 3, pt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.showDestinationWallet`) })) })), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: showDestinationWallet, onChange: onChange })] })) })));
+};
+exports.ShowDestinationWallet = ShowDestinationWallet;

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -25,12 +25,13 @@ const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const Step_1 = require("../../components/Step");
 const StepDivider_1 = require("../../components/StepDivider");
+const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
 const SwapDetailsPage = () => {
     var _a, _b;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const setHeaderAction = (0, Header_1.useSetHeaderAction)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const [routeExecution, deleteRoute] = (0, stores_1.useRouteStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
@@ -39,7 +40,7 @@ const SwapDetailsPage = () => {
         setOpen((open) => !open);
     }, []);
     const handleDeleteRoute = () => {
-        navigate(-1);
+        navigateBack();
         if (routeExecution) {
             deleteRoute(routeExecution.route.id);
         }

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -8,14 +8,14 @@ const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
-const WalletProvider_1 = require("../../providers/WalletProvider");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const route_1 = require("../../stores/route");
 const SwapHistoryEmpty_1 = require("./SwapHistoryEmpty");
 const SwapHistoryItem_1 = require("./SwapHistoryItem");
 const SwapHistoryPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const swaps = (0, route_1.useSwapHistory)(account.address);
     const deleteRoutes = (0, stores_1.useRouteStore)((store) => store.deleteRoutes);
     const setHeaderAction = (0, Header_1.useSetHeaderAction)();

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -7,28 +7,27 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
 const BottomSheet_1 = require("../../components/BottomSheet");
 const Token_1 = require("../../components/Token");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
 const utils_1 = require("./utils");
 const StatusBottomSheet = ({ status, route, }) => {
     var _a, _b, _c, _d, _e;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
     const { token, refetch: refetchBalance } = (0, hooks_1.useTokenBalance)(route.toChainId, route.toToken.address);
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const clearFromAmount = () => {
         refetchBalance();
-        setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
+        setValue(providers_1.SwapFormKey.FromAmount, '');
     };
     const handleDone = () => {
         clearFromAmount();
-        navigate(-1);
+        navigateBack();
     };
     const handleClose = () => {
         var _a;

package/cjs/pages/SwapPage/SwapPage.js

@@ -16,10 +16,10 @@ const SwapPage_style_1 = require("./SwapPage.style");
 const SwapPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { state } = (0, react_router_dom_1.useLocation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)(state === null || state === void 0 ? void 0 : state.routeId);
     const handleRemoveRoute = () => {
-        navigate(-1);
+        navigateBack();
         deleteRoute();
     };
     const handleSwapClick = () => {

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -15,7 +15,7 @@ const SwapRoutesPage = () => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const setHeaderAction = (0, Header_1.useSetHeaderAction)();
-    const { routes: swapRoutes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
+    const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);

package/cjs/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/cjs/providers/SwapFormProvider/SwapFormProvider.js

@@ -10,15 +10,17 @@ const WidgetProvider_1 = require("../WidgetProvider");
 const types_1 = require("./types");
 exports.formDefaultValues = {
     [types_1.SwapFormKey.FromAmount]: '',
+    [types_1.SwapFormKey.ToAddress]: '',
     [types_1.SwapFormKey.TokenSearchFilter]: '',
 };
 const SwapFormProvider = ({ children, }) => {
     const { account } = (0, WalletProvider_1.useWallet)();
-    const { fromChain, fromToken, fromAmount, toChain, toToken } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = (0, WidgetProvider_1.useWidgetConfig)();
     const methods = (0, react_hook_form_1.useForm)({
         defaultValues: Object.assign(Object.assign({}, exports.formDefaultValues), { fromChain: fromChain !== null && fromChain !== void 0 ? fromChain : sdk_1.ChainId.ETH, fromToken, fromAmount: (typeof fromAmount === 'number'
                 ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
-                : fromAmount) || exports.formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : sdk_1.ChainId.ETH, toToken }),
+                : fromAmount) || exports.formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : sdk_1.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
     (0, react_1.useEffect)(() => {
@@ -26,14 +28,18 @@ const SwapFormProvider = ({ children, }) => {
             return;
         }
         const { isDirty: isFromChainDirty, isTouched: isFromChainTouched } = methods.getFieldState(types_1.SwapFormKey.FromChain, methods.formState);
+        const { isDirty: isToChainDirty, isTouched: isToChainTouched } = methods.getFieldState(types_1.SwapFormKey.ToChain, methods.formState);
         if (!fromChain && !isFromChainDirty && !isFromChainTouched) {
             methods.setValue(types_1.SwapFormKey.FromChain, account.chainId, {
                 shouldDirty: false,
                 shouldTouch: false,
             });
         }
-        const { isDirty: isToChainDirty, isTouched: isToChainTouched } = methods.getFieldState(types_1.SwapFormKey.ToChain, methods.formState);
-        if (!toChain && !isToChainDirty && !isToChainTouched) {
+        if (!toChain &&
+            !isToChainDirty &&
+            !isToChainTouched &&
+            !isFromChainDirty &&
+            !isFromChainTouched) {
             methods.setValue(types_1.SwapFormKey.ToChain, account.chainId, {
                 shouldDirty: false,
                 shouldTouch: false,

package/cjs/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/cjs/providers/SwapFormProvider/types.js

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