@lifi/widget 1.15.0 → 1.16.1

package/cjs/pages/SettingsPage/EnabledBridgesSelect.js

@@ -14,17 +14,14 @@ const Select_1 = require("../../components/Select");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const EnabledBridgesSelect = () => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { tools, formattedTools } = (0, hooks_1.useTools)();
     const [enabledBridges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledBridges, state.setTools], shallow_1.default);
-    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledBridges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2 }, IconComponent: icons_material_1.KeyboardArrowDown, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
-                        if (tools === null || tools === void 0 ? void 0 : tools.bridges) {
-                            setTools('Bridges', event.target.value, tools.bridges);
-                        }
+    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledBridges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: icons_material_1.KeyboardArrowDown, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
+                        setTools('Bridges', event.target.value, tools.bridges);
                     }, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
                             var _a, _b, _c;
                             return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (_c = (_b = (_a = formattedTools.bridges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
-                        }) }))) }, { children: (_a = tools === null || tools === void 0 ? void 0 : tools.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: bridge.key }, { children: bridge.name }), bridge.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+                        }) }))) }, { children: tools.bridges.map((bridge) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: bridge.key, sx: { paddingTop: 0, paddingBottom: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: enabledBridges === null || enabledBridges === void 0 ? void 0 : enabledBridges.includes(bridge.key) }), bridge.name] }), bridge.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
 };
 exports.EnabledBridgesSelect = EnabledBridgesSelect;

package/cjs/pages/SettingsPage/EnabledExchangesSelect.js

@@ -18,12 +18,10 @@ const EnabledExchangesSelect = () => {
     const { tools, formattedTools } = (0, hooks_1.useTools)();
     const [enabledExchanges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledExchanges, state.setTools], shallow_1.default);
     return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledExchanges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), value: enabledExchanges !== null && enabledExchanges !== void 0 ? enabledExchanges : [], onChange: (event) => {
-                        if (tools === null || tools === void 0 ? void 0 : tools.exchanges) {
-                            setTools('Exchanges', event.target.value, tools.exchanges);
-                        }
-                    }, MenuProps: { elevation: 2 }, IconComponent: icons_material_1.KeyboardArrowDown, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
+                        setTools('Exchanges', event.target.value, tools.exchanges);
+                    }, MenuProps: { elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }, IconComponent: icons_material_1.KeyboardArrowDown, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
                             var _a, _b, _c;
                             return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (_c = (_b = (_a = formattedTools.exchanges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
-                        }) }))) }, { children: tools === null || tools === void 0 ? void 0 : tools.exchanges.map((exchange) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: exchange.key }, { children: exchange.key }), exchange.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+                        }) }))) }, { children: tools.exchanges.map((exchange) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: exchange.key, sx: { paddingTop: 0, paddingBottom: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: enabledExchanges === null || enabledExchanges === void 0 ? void 0 : enabledExchanges.includes(exchange.key) }), exchange.name] }), exchange.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
 };
 exports.EnabledExchangesSelect = EnabledExchangesSelect;

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -13,6 +13,10 @@ const RoutePrioritySelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [setValue] = (0, stores_1.useSetSettings)();
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: sdk_1.Orders.map((order) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: sdk_1.Orders.map((order) => {
+                        const tag = t(`swap.tags.${order.toUpperCase()}`);
+                        const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
+                        return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: order }, { children: tagName }), order));
+                    }) })) }))] }));
 };
 exports.RoutePrioritySelect = RoutePrioritySelect;

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -65,6 +65,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.routeId') })), (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", "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') }))] })] }))] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -12,9 +12,8 @@ const Token_1 = require("../../components/Token");
 const hooks_1 = require("../../hooks");
 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;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const ref = (0, react_1.useRef)(null);
@@ -34,41 +33,31 @@ const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
     };
-    const { title, message } = (0, react_1.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 (0, utils_1.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 = (0, hooks_1.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;
+    }
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if ((status === 'success' || status === 'error') &&
@@ -77,6 +66,6 @@ const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
         }
     }, [refetchBalance, 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: (_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] }), (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: handleClose }, { 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", 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: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };
 exports.StatusBottomSheet = StatusBottomSheet;

package/cjs/pages/SwapPage/SwapPage.js

@@ -4,6 +4,7 @@ exports.SwapPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
@@ -11,12 +12,14 @@ const Step_1 = require("../../components/Step");
 const StepDivider_1 = require("../../components/StepDivider");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const StatusBottomSheet_1 = require("./StatusBottomSheet");
 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 { navigateBack } = (0, hooks_1.useNavigateBack)();
+    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();
@@ -25,6 +28,7 @@ const SwapPage = () => {
     const handleSwapClick = () => {
         if (status === 'idle') {
             executeRoute();
+            setValue(providers_1.SwapFormKey.FromAmount, '');
         }
         if (status === 'error') {
             restartRoute();
@@ -44,6 +48,6 @@ 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.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }) }))) : null, status === 'error' ? ((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", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }) }))) : null, status === 'error' ? ((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", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/providers/SDKProvider/SDKProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import LIFI from '@lifi/sdk';
+export declare const useLiFi: () => LIFI;
+export declare const SDKProvider: React.FC<React.PropsWithChildren>;

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SDKProvider = exports.useLiFi = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = __importDefault(require("@lifi/sdk"));
+const react_1 = require("react");
+const WidgetProvider_1 = require("../WidgetProvider");
+let lifi;
+const SDKContext = (0, react_1.createContext)(null);
+const useLiFi = () => (0, react_1.useContext)(SDKContext);
+exports.useLiFi = useLiFi;
+const SDKProvider = ({ children, }) => {
+    const { sdkConfig, integrator } = (0, WidgetProvider_1.useWidgetConfig)();
+    const value = (0, react_1.useMemo)(() => {
+        const config = 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 }) });
+        if (!lifi) {
+            lifi = new sdk_1.default(Object.assign({ disableVersionCheck: true }, config));
+        }
+        lifi.setConfig(config);
+        return lifi;
+    }, [integrator, sdkConfig]);
+    return (0, jsx_runtime_1.jsx)(SDKContext.Provider, Object.assign({ value: value }, { children: children }));
+};
+exports.SDKProvider = SDKProvider;

package/cjs/providers/SDKProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './SDKProvider';

package/cjs/providers/SDKProvider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SDKProvider"), exports);

package/cjs/providers/SwapFormProvider/SwapFormProvider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const chains_1 = require("../../stores/chains");
 const WalletProvider_1 = require("../WalletProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
 const types_1 = require("./types");
@@ -14,6 +15,7 @@ exports.formDefaultValues = {
     [types_1.SwapFormKey.TokenSearchFilter]: '',
 };
 const SwapFormProvider = ({ children, }) => {
+    const [setChain] = (0, chains_1.useSetChainOrder)();
     const { account } = (0, WalletProvider_1.useWallet)();
     const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = (0, WidgetProvider_1.useWidgetConfig)();
     const methods = (0, react_hook_form_1.useForm)({
@@ -27,25 +29,51 @@ const SwapFormProvider = ({ children, }) => {
         if (!account.isActive || !account.chainId) {
             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) {
+        const [fromChainValue, toChainValue] = methods.getValues([
+            types_1.SwapFormKey.FromChain,
+            types_1.SwapFormKey.ToChain,
+        ]);
+        const { isDirty: isFromChainDirty } = methods.getFieldState(types_1.SwapFormKey.FromChain, methods.formState);
+        const { isDirty: isToChainDirty } = methods.getFieldState(types_1.SwapFormKey.ToChain, methods.formState);
+        const { isDirty: isFromTokenDirty } = methods.getFieldState(types_1.SwapFormKey.FromToken, methods.formState);
+        const { isDirty: isToTokenDirty } = methods.getFieldState(types_1.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 } = chains_1.useChainOrderStore.getState();
+        const hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
+        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
+        if ((!fromChain && !isFromChainDirty && !isFromTokenDirty) ||
+            !hasFromChainInOrderedList) {
             methods.setValue(types_1.SwapFormKey.FromChain, account.chainId, {
                 shouldDirty: false,
-                shouldTouch: false,
+            });
+            methods.setValue(types_1.SwapFormKey.FromToken, '', {
+                shouldDirty: false,
+            });
+            methods.setValue(types_1.SwapFormKey.FromAmount, '', {
+                shouldDirty: false,
             });
         }
-        if (!toChain &&
-            !isToChainDirty &&
-            !isToChainTouched &&
-            !isFromChainDirty &&
-            !isFromChainTouched) {
+        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
+            !hasToChainInOrderedList) {
             methods.setValue(types_1.SwapFormKey.ToChain, account.chainId, {
                 shouldDirty: false,
-                shouldTouch: false,
+            });
+            methods.setValue(types_1.SwapFormKey.ToToken, '', {
+                shouldDirty: false,
             });
         }
-    }, [account.chainId, account.isActive, fromChain, methods, toChain]);
+    }, [
+        account.chainId,
+        account.isActive,
+        fromChain,
+        methods,
+        setChain,
+        toChain,
+    ]);
     return (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, Object.assign({}, methods, { children: children }));
 };
 exports.SwapFormProvider = SwapFormProvider;

package/cjs/providers/TelemetryProvider/TelemetryProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TelemetryProvider: React.FC<{
+    children: React.ReactElement<any, any> | null;
+}>;

package/cjs/providers/TelemetryProvider/TelemetryProvider.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TelemetryProvider = void 0;
+const __1 = require("..");
+const hooks_1 = require("../../hooks");
+const TelemetryProvider = ({ children }) => {
+    const config = (0, __1.useWidgetConfig)();
+    (0, hooks_1.useTelemetry)(config === null || config === void 0 ? void 0 : config.disableTelemetry);
+    return children;
+};
+exports.TelemetryProvider = TelemetryProvider;

package/cjs/providers/TelemetryProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './TelemetryProvider';

package/cjs/providers/TelemetryProvider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TelemetryProvider"), exports);

package/cjs/providers/WalletProvider/WalletProvider.d.ts

@@ -1,11 +1,8 @@
 import type { Signer } from 'ethers';
 import type { FC, PropsWithChildren } from 'react';
-import type { WidgetWalletManagement } from '../../types';
 import type { WalletContextProps } from './types';
 export declare const useWallet: () => WalletContextProps;
-export declare const WalletProvider: FC<PropsWithChildren<{
-    walletManagement?: WidgetWalletManagement;
-}>>;
+export declare const WalletProvider: FC<PropsWithChildren>;
 export declare const extractAccountFromSigner: (signer?: Signer) => Promise<{
     address: string | undefined;
     isActive: boolean;

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -13,6 +13,7 @@ exports.extractAccountFromSigner = exports.WalletProvider = exports.useWallet =
 const jsx_runtime_1 = require("react/jsx-runtime");
 const wallet_management_1 = require("@lifi/wallet-management");
 const react_1 = require("react");
+const WidgetProvider_1 = require("../WidgetProvider");
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -27,7 +28,8 @@ const initialContext = {
 const WalletContext = (0, react_1.createContext)(initialContext);
 const useWallet = () => (0, react_1.useContext)(WalletContext);
 exports.useWallet = useWallet;
-const WalletProvider = ({ children, walletManagement }) => {
+const WalletProvider = ({ children }) => {
+    const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
     const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = (0, wallet_management_1.useLiFiWalletManagement)();
     const [account, setAccount] = (0, react_1.useState)({});
     const connect = (0, react_1.useCallback)((wallet) => __awaiter(void 0, void 0, void 0, function* () {
@@ -72,8 +74,13 @@ const WalletProvider = ({ children, walletManagement }) => {
     // keep account information up to date
     (0, react_1.useEffect)(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            const account = yield (0, exports.extractAccountFromSigner)((_a = walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.signer) !== null && _a !== void 0 ? _a : signer);
+            let account;
+            if (walletManagement) {
+                account = yield (0, exports.extractAccountFromSigner)(walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.signer);
+            }
+            else {
+                account = yield (0, exports.extractAccountFromSigner)(signer);
+            }
             setAccount(account);
         });
         updateAccount();

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -15,11 +15,6 @@ exports.WidgetProvider = exports.useWidgetConfig = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
-const lifi_1 = require("../../config/lifi");
-const version_1 = require("../../config/version");
-const stub = () => {
-    throw new Error('You forgot to wrap your component in <WidgetProvider>.');
-};
 const initialContext = {
     disabledChains: [],
 };
@@ -27,7 +22,7 @@ const WidgetContext = (0, react_1.createContext)(initialContext);
 const useWidgetConfig = () => (0, react_1.useContext)(WidgetContext);
 exports.useWidgetConfig = useWidgetConfig;
 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 } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount"]);
     const value = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
         try {
@@ -57,16 +52,6 @@ const WidgetProvider = (_a) => {
             return config;
         }
     }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
-    (0, react_1.useEffect)(() => {
-        (0, lifi_1.updateLiFiConfig)({
-            defaultRouteOptions: {
-                integrator: integrator !== null && integrator !== void 0 ? integrator : window.location.hostname,
-            },
-        });
-    }, [integrator]);
-    (0, react_1.useEffect)(() => {
-        (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
-    }, []);
     return ((0, jsx_runtime_1.jsx)(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 exports.WidgetProvider = WidgetProvider;

package/cjs/providers/index.d.ts

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

package/cjs/providers/index.js

@@ -14,7 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SDKProvider"), exports);
 __exportStar(require("./SwapFormProvider"), exports);
+__exportStar(require("./TelemetryProvider"), exports);
 __exportStar(require("./ThemeProvider"), exports);
 __exportStar(require("./WalletProvider"), exports);
 __exportStar(require("./WidgetProvider"), exports);

package/cjs/stores/chains/index.d.ts

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

package/cjs/stores/chains/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./useChainOrder"), exports);
+__exportStar(require("./useChainOrderStore"), exports);
+__exportStar(require("./useInitializeChainOrder"), exports);

package/cjs/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/cjs/stores/chains/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/stores/chains/useChainOrder.d.ts

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

package/cjs/stores/chains/useChainOrder.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainOrder = void 0;
+const shallow_1 = __importDefault(require("zustand/shallow"));
+const useChainOrderStore_1 = require("./useChainOrderStore");
+const useChainOrder = () => {
+    return (0, useChainOrderStore_1.useChainOrderStore)((state) => [state.chainOrder, state.setChain], shallow_1.default);
+};
+exports.useChainOrder = useChainOrder;

package/cjs/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/cjs/stores/chains/useChainOrderStore.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainOrderStore = exports.maxChainToOrder = void 0;
+/* eslint-disable no-underscore-dangle */
+const zustand_1 = __importDefault(require("zustand"));
+const middleware_1 = require("zustand/middleware");
+const immer_1 = require("zustand/middleware/immer");
+exports.maxChainToOrder = 9;
+exports.useChainOrderStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.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 === exports.maxChainToOrder ||
+            !chainsToAdd.length) {
+            return;
+        }
+        const chainsToAddLength = exports.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 > exports.maxChainToOrder) {
+            state.chainOrder.pop();
+        }
+    }),
+})), {
+    name: 'li.fi-widget-chains-order',
+    version: 0,
+    partialize: (state) => ({ chainOrder: state.chainOrder }),
+}));

package/cjs/stores/chains/useInitializeChainOrder.d.ts

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