@lifi/widget 1.18.9 → 1.20.0

package/cjs/i18n/en/translation.json

@@ -22,6 +22,7 @@
     "removeSwap": "Remove swap",
     "done": "Done",
     "okay": "Okay",
+    "continue": "Continue",
     "seeDetails": "See details",
     "tryAgain": "Try again",
     "light": "Light",
@@ -44,10 +45,6 @@
     "routes": "You get",
     "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
     "currency": "{{value, currency(currency: USD)}}",
-    "sendToRecipient": "Send to recipient",
-    "addressConfirmation": "I confirm that the address above is correct",
-    "gas": "gas fee",
-    "minutes": "minutes",
     "tokenSearch": "Search your token",
     "selectChain": "Chain",
     "selectToken": "Token",
@@ -66,6 +63,10 @@
     "supportId": "Support ID",
     "sendToWallet": "Send to a different wallet",
     "walletAddressOrEns": "Wallet address or ENS name",
+    "swapping": "Swapping",
+    "gasCost": "Gas cost",
+    "receiving": "Receiving",
+    "valueLoss": "Value loss",
     "tags": {
       "RECOMMENDED": "RECOMMENDED",
       "FASTEST": "FAST",
@@ -98,12 +99,16 @@
       "title": {
         "insufficientGas": "Insufficient gas",
         "deleteSwap": "Delete this swap?",
-        "deleteSwapHistory": "Delete swap history?"
+        "deleteSwapHistory": "Delete swap history?",
+        "deleteActiveSwaps": "Delete all active swaps?",
+        "highValueLoss": "High value loss"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
         "insufficientGas": "You need to add at least:",
-        "deleteSwap": "Swap history is only stored locally and can't be recovered if you delete it."
+        "deleteSwapHistory": "Swap history is only stored locally and can't be recovered if you delete it.",
+        "deleteActiveSwaps": "Active swaps are only stored locally and can't be recovered if you delete them.",
+        "highValueLoss": "The value of the received tokens is significantly lower than the swapped tokens and transaction cost."
       }
     },
     "error": {
@@ -179,6 +184,9 @@
       "title": "404",
       "text": "We couldn't find this page."
     },
-    "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
+    "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click here to update manually.",
+    "numberOfSteps": "A number of swap steps. Each step can contain 1-3 transactions that require a signature.",
+    "estimatedTime": "Estimated time in minutes.",
+    "estimatedNetworkFee": "Estimated network fee."
   }
 }

package/cjs/i18n/index.d.ts

@@ -25,6 +25,7 @@ export declare const resources: {
                 removeSwap: string;
                 done: string;
                 okay: string;
+                continue: string;
                 seeDetails: string;
                 tryAgain: string;
                 light: string;
@@ -47,10 +48,6 @@ export declare const resources: {
                 routes: string;
                 approximateCurrency: string;
                 currency: string;
-                sendToRecipient: string;
-                addressConfirmation: string;
-                gas: string;
-                minutes: string;
                 tokenSearch: string;
                 selectChain: string;
                 selectToken: string;
@@ -69,6 +66,10 @@ export declare const resources: {
                 supportId: string;
                 sendToWallet: string;
                 walletAddressOrEns: string;
+                swapping: string;
+                gasCost: string;
+                receiving: string;
+                valueLoss: string;
                 tags: {
                     RECOMMENDED: string;
                     FASTEST: string;
@@ -102,11 +103,15 @@ export declare const resources: {
                         insufficientGas: string;
                         deleteSwap: string;
                         deleteSwapHistory: string;
+                        deleteActiveSwaps: string;
+                        highValueLoss: string;
                     };
                     message: {
                         insufficientFunds: string;
                         insufficientGas: string;
-                        deleteSwap: string;
+                        deleteSwapHistory: string;
+                        deleteActiveSwaps: string;
+                        highValueLoss: string;
                     };
                 };
                 error: {
@@ -183,6 +188,9 @@ export declare const resources: {
                     text: string;
                 };
                 progressToNextUpdate: string;
+                numberOfSteps: string;
+                estimatedTime: string;
+                estimatedNetworkFee: string;
             };
         };
     };

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.js

@@ -2,20 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActiveSwapsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable consistent-return */
+const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
 const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const Dialog_1 = require("../../components/Dialog");
+const Header_1 = require("../../components/Header");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const ActiveSwapsEmpty_1 = require("./ActiveSwapsEmpty");
 const ActiveSwapsPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const { account } = (0, providers_1.useWallet)();
     const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
+    const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleDialog = (0, react_1.useCallback)(() => {
+        setOpen((open) => !open);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (executingRoutes.length) {
+            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+        }
+    }, [executingRoutes.length, toggleDialog]);
     if (!executingRoutes.length) {
         return (0, jsx_runtime_1.jsx)(ActiveSwapsEmpty_1.ActiveSwapsEmpty, {});
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Container, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
-                paddingLeft: 1.5,
-                paddingRight: 1.5,
-            } }, { children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwapItem, { routeId: routeId }, routeId))) })) })));
+    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: 1.5,
+                    paddingRight: 1.5,
+                } }, { children: executingRoutes.map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwapItem, { routeId: routeId }, routeId))) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteActiveSwaps') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteActiveSwaps') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: () => deleteRoutes('active'), autoFocus: true }, { children: t('button.delete') }))] })] }))] })));
 };
 exports.ActiveSwapsPage = ActiveSwapsPage;

package/cjs/pages/MainPage/MainPage.js

@@ -9,11 +9,11 @@ const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
 const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
 const SwapRoutes_1 = require("../../components/SwapRoutes");
-const providers_1 = require("../../providers");
+const hooks_1 = require("../../hooks");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
 const MainPage = () => {
-    const { variant } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { 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" }) })), variant !== 'expandable' ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
+    const expandable = (0, hooks_1.useExpandableVariant)();
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { 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" }) })), !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] }))] }))] })));
 };
 exports.MainPage = MainPage;

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -48,6 +48,6 @@ const SelectWalletPage = () => {
                     paddingRight: 1.5,
                 } }, { children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(SelectWalletPage_style_1.ListItemButton, Object.assign({ onClick: () => handleConnect(wallet), disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: wallet.icon.src || wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), (0, jsx_runtime_1.jsx)(SelectWalletPage_style_1.ListItemText, { primary: wallet.name })] }), wallet.name))) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: walletIdentity.show, onClose: closeDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
                                 name: (_a = walletIdentity.wallet) === null || _a === void 0 ? void 0 : _a.name,
-                            }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
+                            }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
 };
 exports.SelectWalletPage = SelectWalletPage;

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -46,7 +46,7 @@ const SwapDetailsPage = () => {
         yield navigator.clipboard.writeText((_c = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _c !== void 0 ? _c : '');
     });
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
     }, [toggleDialog]);
     const startedAt = new Date((_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
     return ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
@@ -61,6 +61,6 @@ const SwapDetailsPage = () => {
             }), (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                             display: 'flex',
                             flex: 1,
-                        } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 1, mt: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", onClick: copyRouteId }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.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 }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+                        } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: t('swap.supportId') })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 1, mt: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: copyRouteId }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.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 }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -25,12 +25,12 @@ const SwapHistoryPage = () => {
     }, []);
     (0, react_1.useEffect)(() => {
         if (swaps.length) {
-            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
         }
     }, [swaps.length, toggleDialog]);
     if (!swaps.length) {
         return (0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => ((0, jsx_runtime_1.jsx)(SwapHistoryItem_1.SwapHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {})) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: deleteRoutes, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => ((0, jsx_runtime_1.jsx)(SwapHistoryItem_1.SwapHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {})) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };
 exports.SwapHistoryPage = SwapHistoryPage;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -20,8 +20,8 @@ const StatusBottomSheet = ({ status, route, }) => {
     const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(route.toToken, route.toAddress);
     const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(route.toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
         setValue(providers_1.SwapFormKey.FromAmount, '');
@@ -33,7 +33,7 @@ const StatusBottomSheet = ({ status, route, }) => {
     const handleClose = () => {
         var _a;
         clearFromAmount();
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
     };
     const handleSeeDetails = () => {
         handleClose();
@@ -76,9 +76,9 @@ const StatusBottomSheet = ({ status, route, }) => {
                 refetchNewBalance();
                 refetch();
             }
-            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'success' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: StatusBottomSheet_style_1.iconStyles })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.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] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.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' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }) : null, status === 'success' ? (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success" }) : null, status === 'error' ? (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error" }) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.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] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.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.seeDetails') : null] })) })), status === 'success' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", fullWidth: true, onClick: handleSeeDetails }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/pages/SwapPage/StatusBottomSheet.style.d.ts

@@ -19,7 +19,3 @@ export declare const IconCircle: import("@emotion/styled").StyledComponent<impor
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     status: RouteExecutionStatus;
 }, {}, {}>;
-export declare const iconStyles: {
-    position: string;
-    fontSize: string;
-};

package/cjs/pages/SwapPage/StatusBottomSheet.style.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconStyles = exports.IconCircle = exports.IconContainer = void 0;
+exports.IconCircle = exports.IconContainer = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const getStatusColor = (status, theme) => {
     switch (status) {
         case 'success':
-            return theme.palette.success.main;
+            return { color: theme.palette.success.main, alpha: 0.15, darken: 0 };
         case 'error':
-            return theme.palette.error.main;
+            return { color: theme.palette.error.main, alpha: 0.2, darken: 0 };
+        case 'warning':
+            return { color: theme.palette.warning.main, alpha: 0.7, darken: 0.4 };
         default:
-            return theme.palette.primary.main;
+            return { color: theme.palette.primary.main, alpha: 0.15, darken: 0 };
     }
 };
 exports.IconContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
@@ -20,16 +22,20 @@ exports.IconContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
 }));
 exports.IconCircle = (0, styles_1.styled)(material_1.Box, {
     shouldForwardProp: (prop) => prop !== 'status',
-})(({ theme, status }) => ({
-    border: `3px solid ${getStatusColor(status, theme)}`,
-    borderRadius: '50%',
-    width: 64,
-    height: 64,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-}));
-exports.iconStyles = {
-    position: 'absolute',
-    fontSize: '2.5rem',
-};
+})(({ theme, status }) => {
+    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
+    return {
+        backgroundColor: (0, styles_1.alpha)(color, alphaValue),
+        borderRadius: '50%',
+        width: 64,
+        height: 64,
+        display: 'grid',
+        position: 'relative',
+        placeItems: 'center',
+        '& > svg': {
+            color: (0, styles_1.darken)(color, darkenValue),
+            width: 32,
+            height: 32,
+        },
+    };
+});

package/cjs/pages/SwapPage/SwapPage.js

@@ -25,32 +25,51 @@ const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 const SwapPage_style_1 = require("./SwapPage.style");
+const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
 const SwapPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
-    const { setValue, formState: { isValid, isValidating }, } = (0, react_hook_form_1.useFormContext)();
+    const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
+    const { setValue,
+    // formState: { isValid, isValidating },
+     } = (0, react_hook_form_1.useFormContext)();
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)(state === null || state === void 0 ? void 0 : state.routeId);
-    const handleRemoveRoute = () => {
-        navigateBack();
-        deleteRoute();
-    };
+    const handleExecuteRoute = (0, react_1.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(providers_1.SwapFormKey.FromAmount, '');
+    }, [executeRoute, setValue]);
     const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (status === 'idle') {
-            executeRoute();
-            setValue(providers_1.SwapFormKey.FromAmount, '');
+            const thresholdExceeded = (0, TokenValueBottomSheet_1.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 ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
@@ -58,9 +77,11 @@ const SwapPage = () => {
                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.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 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }), status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
-                            minWidth: 48,
-                            marginLeft: 1,
-                        } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) }))) : null] }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, 
+                                // disable={status === 'idle' && (isValidating || !isValid)}
+                                enableLoading: true }), status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                                        minWidth: 48,
+                                        marginLeft: 1,
+                                    } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) })) }))) : null] }))] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/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/cjs/pages/SwapPage/TokenValueBottomSheet.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTokenValueLossThreshold = exports.TokenValueBottomSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const big_js_1 = require("big.js");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const BottomSheet_1 = require("../../components/BottomSheet");
+const hooks_1 = require("../../hooks");
+const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
+exports.TokenValueBottomSheet = (0, react_1.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 ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsx)(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) })));
+});
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const ref = (0, react_1.useRef)();
+    (0, hooks_1.useSetContentHeight)(ref);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3, ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "warning" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.highValueLoss') }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.highValueLoss') })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.fromAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.gasCostUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: t('swap.currency', { value: route.toAmountUSD }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [(0, big_js_1.default)(route.toAmountUSD || 0)
+                                .div((0, big_js_1.default)(route.fromAmountUSD || 0).plus((0, big_js_1.default)(route.gasCostUSD || 0)))
+                                .mul(-100)
+                                .toFixed(1), "%"] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: onCancel, fullWidth: true }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: onContinue, fullWidth: true }, { children: t('button.continue') }))] }))] })));
+};
+const getTokenValueLossThreshold = (route) => {
+    if (!route) {
+        return false;
+    }
+    const fromAmountUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.fromAmountUSD) || 0);
+    const toAmountUSD = (0, big_js_1.default)((route === null || route === void 0 ? void 0 : route.toAmountUSD) || 0);
+    const gasCostUSD = (0, big_js_1.default)((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);
+};
+exports.getTokenValueLossThreshold = getTokenValueLossThreshold;

package/cjs/providers/SwapFormProvider/SwapFormProvider.js

@@ -5,13 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_hook_form_1 = require("react-hook-form");
 const WidgetProvider_1 = require("../WidgetProvider");
 const types_1 = require("./types");
+const URLSearchParamsBuilder_1 = require("./URLSearchParamsBuilder");
 exports.formDefaultValues = {
     [types_1.SwapFormKey.FromAmount]: '',
     [types_1.SwapFormKey.ToAddress]: '',
     [types_1.SwapFormKey.TokenSearchFilter]: '',
 };
 const SwapFormProvider = ({ children, }) => {
-    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress, buildSwapUrl, } = (0, WidgetProvider_1.useWidgetConfig)();
     const methods = (0, react_hook_form_1.useForm)({
         defaultValues: Object.assign(Object.assign({}, exports.formDefaultValues), { fromChain,
             fromToken, fromAmount: (typeof fromAmount === 'number'
@@ -20,6 +21,6 @@ const SwapFormProvider = ({ children, }) => {
             toToken,
             toAddress }),
     });
-    return (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, Object.assign({}, methods, { children: children }));
+    return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, Object.assign({}, methods, { children: [buildSwapUrl ? (0, jsx_runtime_1.jsx)(URLSearchParamsBuilder_1.URLSearchParamsBuilder, {}) : null, children] })));
 };
 exports.SwapFormProvider = SwapFormProvider;

package/cjs/providers/SwapFormProvider/URLSearchParamsBuilder.d.ts

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

package/cjs/providers/SwapFormProvider/URLSearchParamsBuilder.js

@@ -0,0 +1,46 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.URLSearchParamsBuilder = void 0;
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_router_dom_1 = require("react-router-dom");
+const types_1 = require("./types");
+const formValueKeys = [
+    types_1.SwapFormKey.FromAmount,
+    types_1.SwapFormKey.FromChain,
+    types_1.SwapFormKey.FromToken,
+    types_1.SwapFormKey.ToAddress,
+    types_1.SwapFormKey.ToChain,
+    types_1.SwapFormKey.ToToken,
+];
+const URLSearchParamsBuilder = () => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const touchedFields = __rest((0, react_hook_form_1.useFormState)().touchedFields, []);
+    const values = (0, react_hook_form_1.useWatch)({ name: formValueKeys });
+    (0, react_1.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;
+};
+exports.URLSearchParamsBuilder = URLSearchParamsBuilder;

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

@@ -6,10 +6,10 @@ 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 = exports.SwapFormKey || (exports.SwapFormKey = {}));
 exports.SwapFormKeyHelper = {
     getChainKey: (formType) => `${formType}Chain`,

package/cjs/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;
+}>;