@lifi/widget 1.1.3 → 1.2.0

package/App.js

@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import { AppProvider } from './AppProvider';
 import { AppContainer } from './components/AppContainer';
 import { Header } from './components/Header';
+import { Initializer } from './components/Initializer';
 import { MainPage } from './pages/MainPage';
 import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
@@ -14,5 +15,5 @@ export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
 export const AppDefault = () => {
-    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: routes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: routes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: routes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: routes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: routes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: routes.swap, element: _jsx(SwapPage, {}) })] })] }));
+    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: routes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: routes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: routes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: routes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: routes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: `${routes.swapRoutes}/${routes.swap}`, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: routes.swap, element: _jsx(SwapPage, {}) })] }), _jsx(Initializer, {})] }));
 };

package/components/Initializer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Initializer: React.FC;

package/components/Initializer.js

@@ -0,0 +1,5 @@
+import { useInitializer } from '../hooks/useInitializer';
+export const Initializer = () => {
+    useInitializer();
+    return null;
+};

package/components/StepToken.js

@@ -15,7 +15,7 @@ import { formatTokenAmount } from '../utils/format';
 import { TextFitter } from './TextFitter';
 export const StepToken = (_a) => {
     var { token } = _a, other = __rest(_a, ["token"]);
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginRight: 2 } }, { children: token.symbol[0] })), _jsx(TextFitter, Object.assign({ maxHeight: 32, textStyle: {
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginRight: 2 } }, { children: token.symbol[0] })), _jsx(TextFitter, Object.assign({ height: 32, textStyle: {
                             fontWeight: 700,
                         } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsx(Typography, Object.assign({ fontSize: 14, lineHeight: 1, fontWeight: "500", color: "text.secondary", mr: 1, ml: 6 }, { children: token.symbol }))] })));
 };

package/components/SwapButton/SwapButton.js

@@ -12,9 +12,10 @@ import { ChainId } from '@lifinance/sdk';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChains, useCurrentRoute, useHasSufficientBalance, useSetExecutableRoute, useSwapRoutes, } from '../../hooks';
+import { useChains, useHasSufficientBalance, useSwapRoutes } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
+import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { ButtonTooltip } from './ButtonTooltip';
 import { Button } from './SwapButton.style';
@@ -43,7 +44,9 @@ export const SwapButton = () => {
         else if (currentRoute &&
             (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.some((route) => route.id === currentRoute.id))) {
             setExecutableRoute(currentRoute);
-            navigate(routes.swap, { state: { routeId: currentRoute.id } });
+            navigate(routes.swap, {
+                state: { routeId: currentRoute.id },
+            });
         }
     });
     const getButtonText = () => {

package/components/SwapInProgress/SwapInProgress.js

@@ -4,7 +4,7 @@ import { AvatarGroup, Box, Stack } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useExecutingRoutes } from '../../hooks';
+import { useExecutingRoutes } from '../../stores';
 import { routes } from '../../utils/routes';
 import { CardTitle } from '../Card';
 import { Card, RouteAvatar, RouteCard } from './SwapInProgress.style';

package/components/SwapRoutes/SwapRoutes.js

@@ -5,7 +5,8 @@ import { Box, IconButton, Skeleton } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useCurrentRoute, useSwapRoutes } from '../../hooks';
+import { useSwapRoutes } from '../../hooks';
+import { useCurrentRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { CardContainer, CardTitle } from '../Card';
 import { SwapRouteCard } from '../SwapRouteCard';

package/components/TextFitter/TextFitter.js

@@ -11,7 +11,7 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
     const theme = useTheme();
     const textRef = useRef(null);
     const [viewBox, setViewBox] = useState(initialState);
-    const [textRect, setTextRect] = useState(initialState);
+    // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
     const calculateBox = useCallback(() => {
         if (!textRef.current) {
             return;
@@ -25,7 +25,7 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
             box.height -= box.height * cropBottom;
         }
         setViewBox(box);
-        setTextRect(textRef.current.getBoundingClientRect());
+        // setTextRect(textRef.current.getBoundingClientRect());
         onFit === null || onFit === void 0 ? void 0 : onFit();
     }, [cropBottom, cropTop, onFit]);
     useLayoutEffect(() => {
@@ -38,7 +38,11 @@ export const TextFitter = ({ children, width = '100%', height, maxHeight, preser
             });
         }
     }, [calculateBox]);
-    return (_jsx("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: textRect.height && maxHeight && textRect.height >= maxHeight
-            ? maxHeight
-            : height, preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary }, { children: _jsx("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
+    return (_jsx("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
+        // height={
+        //   textRect.height && maxHeight && textRect.height >= maxHeight
+        //     ? maxHeight
+        //     : height
+        // }
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary }, { children: _jsx("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
 };

package/hooks/index.d.ts

@@ -1,15 +1,13 @@
-export * from './useBridges';
 export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
-export * from './useExchanges';
 export * from './useHasSufficientBalance';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
-export * from './useSettings';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
 export * from './useTokens';
+export * from './useTools';

package/hooks/index.js

@@ -1,15 +1,13 @@
-export * from './useBridges';
 export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
-export * from './useExchanges';
 export * from './useHasSufficientBalance';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
-export * from './useSettings';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
 export * from './useTokens';
+export * from './useTools';

package/hooks/useHasSufficientBalance.js

@@ -3,7 +3,7 @@ import Big from 'big.js';
 import { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import { SwapFormKeyHelper } from '../providers/SwapFormProvider';
-import { useCurrentRoute } from './useRouteExecution';
+import { useCurrentRoute } from '../stores';
 import { useTokenBalances } from './useTokenBalances';
 export const useHasSufficientBalance = () => {
     var _a;

package/hooks/useInitializer.d.ts

@@ -0,0 +1 @@
+export declare const useInitializer: () => void;

package/hooks/useInitializer.js

@@ -0,0 +1,5 @@
+/* eslint-disable no-underscore-dangle */
+import { useTools } from './useTools';
+export const useInitializer = () => {
+    useTools();
+};

package/hooks/{useRouteExecution/useRouteExecution.d.ts → useRouteExecution.d.ts}

@@ -4,5 +4,5 @@ export declare const useRouteExecution: (routeId: string) => {
     restartRoute: () => void;
     removeRoute: () => void;
     route: Route;
-    status: import("./types").RouteExecutionStatus;
+    status: import("../stores").RouteExecutionStatus;
 };

package/hooks/{useRouteExecution/useRouteExecution.js → useRouteExecution.js}

@@ -10,13 +10,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useCallback, useEffect } from 'react';
 import { useMutation } from 'react-query';
 import shallow from 'zustand/shallow';
-import { LiFi } from '../../lifi';
-import { useWallet } from '../../providers/WalletProvider';
-import { deepClone } from '../../utils/deepClone';
-import { useRouteStore } from './useRouteStore';
+import { LiFi } from '../lifi';
+import { useWallet } from '../providers/WalletProvider';
+import { useRouteStore } from '../stores';
+import { deepClone } from '../utils/deepClone';
 export const useRouteExecution = (routeId) => {
     const { account, switchChain } = useWallet();
-    const { route, status } = useRouteStore((state) => state.routes[routeId]);
+    const { route, status } = useRouteStore((state) => { var _a; return (_a = state.routes[routeId]) !== null && _a !== void 0 ? _a : {}; });
     const [updateRoute, restartRoute, removeRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.removeRoute], shallow);
     const updateCallback = (updatedRoute) => {
         console.log('Route updated.', updatedRoute);

package/hooks/useSwapRoutes.js

@@ -14,23 +14,25 @@ import { useDebouncedWatch, useToken } from '.';
 import { LiFi } from '../lifi';
 import { SwapFormKey } from '../providers/SwapFormProvider';
 import { useWallet } from '../providers/WalletProvider';
-import { useCurrentRoute } from './useRouteExecution';
+import { useCurrentRoute, useSettings } from '../stores';
 const refetchTime = 60000;
 export const useSwapRoutes = () => {
     var _a;
     const { account } = useWallet();
     const queryClient = useQueryClient();
     const [currentRoute, setCurrentRoute] = useCurrentRoute();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, slippage, enabledBridges, enabledExchanges, routePriority,] = useWatch({
+    const { slippage, enabledBridges, enabledExchanges, routePriority } = useSettings([
+        'slippage',
+        'routePriority',
+        'enabledBridges',
+        'enabledExchanges',
+    ]);
+    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] = useWatch({
         name: [
             SwapFormKey.FromChain,
             SwapFormKey.FromToken,
             SwapFormKey.ToChain,
             SwapFormKey.ToToken,
-            SwapFormKey.Slippage,
-            SwapFormKey.EnabledBridges,
-            SwapFormKey.EnabledExchanges,
-            SwapFormKey.RoutePriority,
         ],
     });
     const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 500);
@@ -42,7 +44,7 @@ export const useSwapRoutes = () => {
         Boolean(toTokenAddress) &&
         Boolean(fromTokenAmount) &&
         !isNaN(fromTokenAmount) &&
-        !isNaN(slippage);
+        !Number.isNaN(slippage);
     const queryKey = [
         'routes',
         account.address,

package/hooks/useTools.d.ts

@@ -0,0 +1 @@
+export declare const useTools: () => import("@lifinance/types").ToolsResponse | undefined;

package/hooks/useTools.js

@@ -0,0 +1,14 @@
+/* eslint-disable no-underscore-dangle */
+import { useQuery } from 'react-query';
+import { LiFi } from '../lifi';
+import { useSettingsStore } from '../stores';
+export const useTools = () => {
+    const initializeTools = useSettingsStore((state) => state.initializeTools);
+    const { data } = useQuery(['tools'], ({ signal }) => LiFi.getTools(undefined, { signal }), {
+        onSuccess(data) {
+            initializeTools('Bridges', data.bridges.map((bridge) => bridge.key));
+            initializeTools('Exchanges', data.exchanges.map((exchange) => exchange.key));
+        },
+    });
+    return data;
+};

package/i18n/en/translation.json

@@ -37,7 +37,6 @@
     "approximateCurrency": "\u2248 {{value, currency(currency: USD)}}",
     "currency": "{{value, currency(currency: USD)}}",
     "sendToRecipient": "Send to recipient",
-    "recipientsAddress": "Recipient's {{chain}} address",
     "addressConfirmation": "I confirm that the address above is correct",
     "gas": "gas fee",
     "minutes": "minutes",
@@ -126,7 +125,6 @@
       "fast": "Fast"
     },
     "advancedPreferences": "Advanced preferences",
-    "bridgePrioritization": "Bridge prioritization",
     "enabledBridges": "Enabled bridges",
     "selectEnabledBridges": "Select enabled bridges",
     "enabledExchanges": "Enabled exchanges",

package/i18n/index.d.ts

@@ -40,7 +40,6 @@ export declare const resources: {
                 approximateCurrency: string;
                 currency: string;
                 sendToRecipient: string;
-                recipientsAddress: string;
                 addressConfirmation: string;
                 gas: string;
                 minutes: string;
@@ -129,7 +128,6 @@ export declare const resources: {
                     fast: string;
                 };
                 advancedPreferences: string;
-                bridgePrioritization: string;
                 enabledBridges: string;
                 selectEnabledBridges: string;
                 enabledExchanges: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -37,8 +37,8 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@ethersproject/experimental": "^5.6.2",
     "@ethersproject/providers": "^5.6.8",
     "@lifi/wallet-management": "^1.0.2",
@@ -51,8 +51,8 @@
     "immer": "^9.0.14",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-hook-form": "^7.31.3",
-    "react-i18next": "^11.16.10",
+    "react-hook-form": "^7.32.0",
+    "react-i18next": "^11.17.1",
     "react-query": "^4.0.0-beta.23",
     "react-resize-detector": "^7.1.1",
     "react-router-dom": "^6.3.0",

package/pages/SettingsPage/AdvancedPreferences.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
+import { useSetSettings, useSettings } from '../../stores';
 import { EnabledBridgesSelect } from './EnabledBridgesSelect';
 import { EnabledExchangesSelect } from './EnabledExchangesSelect';
 export const AdvancedPreferences = () => {
     const { t } = useTranslation();
-    const [advancedPreferences, setAdvancedPreferences] = useState(false);
+    const [setValue] = useSetSettings();
+    const { advancedPreferences } = useSettings(['advancedPreferences']);
     const handleAdvancedPreferences = (_, checked) => {
-        setAdvancedPreferences(checked);
+        setValue('advancedPreferences', checked);
     };
     return (_jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { value: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
+                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
 };

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Brightness4 as Brightness4Icon, DarkMode as DarkModeIcon, LightMode as LightModeIcon, } from '@mui/icons-material';
 import { Box, ToggleButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useAppearance } from '../../hooks';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { useAppearance } from '../../stores';
 import { ToggleButton } from './ColorSchemeButtonGroup.style';
 export const ColorSchemeButtonGroup = () => {
     const { t } = useTranslation();

package/pages/SettingsPage/EnabledBridgesSelect.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useBridges } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
 export const EnabledBridgesSelect = () => {
+    var _a;
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    const bridges = useBridges();
-    return bridges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), defaultValue: bridges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledBridges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: bridges.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge }, { children: bridge }), bridge))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+    const tools = useTools();
+    const [enabledBridges, setTools] = useSettingsStore((state) => [state.enabledBridges, state.setTools], shallow);
+    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, 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);
+                        }
+                    }, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: (_a = tools === null || tools === void 0 ? void 0 : tools.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge.key }, { children: bridge.key }), bridge.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/EnabledExchangesSelect.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { useExchanges } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useTools } from '../../hooks';
+import { useSettingsStore } from '../../stores';
 export const EnabledExchangesSelect = () => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    const exchanges = useExchanges();
-    return exchanges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), defaultValue: exchanges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledExchanges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange }, { children: exchange }), exchange))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+    const tools = useTools();
+    const [enabledExchanges, setTools] = useSettingsStore((state) => [state.enabledExchanges, state.setTools], shallow);
+    return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(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: KeyboardArrowDownIcon, renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: tools === null || tools === void 0 ? void 0 : tools.exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange.key }, { children: exchange.key }), exchange.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
 };

package/pages/SettingsPage/GasPriceSelect.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { FormControl, MenuItem } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { formDefaultValues, SwapFormKey, } from '../../providers/SwapFormProvider';
+import { useSetSettings, useSettings } from '../../stores';
 export const GasPriceSelect = () => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    return (_jsxs(CardContainer, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ defaultValue: formDefaultValues.gasPrice, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.GasPrice)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
+    const [setValue] = useSetSettings();
+    const { gasPrice } = useSettings(['gasPrice']);
+    return (_jsxs(CardContainer, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
 };

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Orders } from '@lifinance/sdk';
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
 import { FormControl, MenuItem } from '@mui/material';
-import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
-import { formDefaultValues, SwapFormKey, } from '../../providers/SwapFormProvider';
+import { useSetSettings, useSettings } from '../../stores';
 export const RoutePrioritySelect = () => {
     const { t } = useTranslation();
-    const { register } = useFormContext();
-    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ defaultValue: formDefaultValues.routePriority, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.RoutePriority)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => (_jsx(MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
+    const [setValue] = useSetSettings();
+    const { routePriority } = useSettings(['routePriority']);
+    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.routePriority`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: Orders.map((order) => (_jsx(MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
 };

package/pages/SettingsPage/SlippageInput.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, InputAdornment } from '@mui/material';
 import { useRef } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { Input } from '../../components/Input';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useSetSettings, useSettings } from '../../stores';
 import { formatSlippage } from '../../utils/format';
 export const SlippageInput = () => {
     const { t } = useTranslation();
-    const { setValue } = useFormContext();
-    const value = useWatch({
-        name: SwapFormKey.Slippage,
-    });
-    const defaultValue = useRef(value);
+    const [setValue] = useSetSettings();
+    const { slippage } = useSettings(['slippage']);
+    const defaultValue = useRef(slippage);
     const handleChange = (event) => {
         const { value } = event.target;
-        setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current, true));
+        setValue('slippage', formatSlippage(value, defaultValue.current, true));
     };
     const handleBlur = (event) => {
         const { value } = event.target;
-        setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current));
+        setValue('slippage', formatSlippage(value, defaultValue.current));
     };
     return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.slippage`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`settings.slippage`), endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: "%" })), autoComplete: "off", inputProps: {
                         inputMode: 'decimal',
-                    }, onChange: handleChange, onBlur: handleBlur, value: value, name: SwapFormKey.Slippage }) }))] }));
+                    }, onChange: handleChange, onBlur: handleBlur, value: slippage }) }))] }));
 };

package/pages/SwapPage/ExecutionItem.js

@@ -13,7 +13,7 @@ export const ExecutionItem = ({ step, process }) => {
     return (_jsxs(Box, Object.assign({ px: 2, py: 1 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',
-                } }, { children: [_jsx(CircularProgress, { status: process.status }), _jsx(Typography, Object.assign({ ml: 2, fontWeight: process.error ? 700 : 500 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
+                } }, { children: [_jsx(CircularProgress, { status: process.status }), _jsx(Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
                             display: 'flex',
                             flex: 1,
                             justifyContent: 'flex-end',

package/pages/SwapPage/StatusBottomSheet.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { RouteExecution } from '../../hooks';
+import { RouteExecution } from '../../stores';
 export declare const StatusBottomSheet: React.FC<RouteExecution>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { RouteExecutionStatus } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
 export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;

package/pages/SwapPage/StepItem.js

@@ -25,5 +25,5 @@ export const StepItem = ({ step, fromToken, toToken }) => {
     return (_jsxs(CardContainer, Object.assign({ isError: stepHasError }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     flex: 1,
-                } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), _jsx(CardTitle, { children: _jsx(StepTimer, { step: step }) })] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [fromToken ? _jsx(StepToken, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.map((process, index) => (_jsx(ExecutionItem, { step: step, process: process }, index))), toToken ? _jsx(StepToken, { token: toToken, px: 2, py: 1 }) : null] }))] })));
+                } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), _jsx(CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: _jsx(StepTimer, { step: step }) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [fromToken ? _jsx(StepToken, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.map((process, index) => (_jsx(ExecutionItem, { step: step, process: process }, index))), toToken ? _jsx(StepToken, { token: toToken, px: 2, py: 1 }) : null] }))] })));
 };

package/pages/SwapPage/StepTimer.js

@@ -8,7 +8,7 @@ const getExpiryTimestamp = (step) => {
         step.estimate.executionDuration * 1000);
 };
 export const StepTimer = ({ step }) => {
-    var _a;
+    var _a, _b;
     const { t } = useTranslation();
     const [isExpired, setExpired] = useState(false);
     const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
@@ -50,7 +50,8 @@ export const StepTimer = ({ step }) => {
                 value: (step.estimate.executionDuration / 60).toFixed(0),
             }) }));
     }
-    if (((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE') {
+    if (((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE' ||
+        ((_b = step.execution) === null || _b === void 0 ? void 0 : _b.status) === 'FAILED') {
         return null;
     }
     return isExpired ? (_jsx(_Fragment, { children: t('swap.networkIsBusy') })) : (

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { SwapRouteCard } from '../../components/SwapRouteCard';
-import { useCurrentRoute, useSetExecutableRoute, useSwapRoutes, } from '../../hooks';
+import { useSwapRoutes } from '../../hooks';
+import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
 import { routes } from '../../utils/routes';
 import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {

package/providers/SwapFormProvider/SwapFormProvider.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 export declare const formDefaultValues: {
     fromAmount: string;
-    gasPrice: string;
-    slippage: string;
     searchTokensFilter: string;
-    routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
 };
 export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -4,10 +4,7 @@ import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey } from './types';
 export const formDefaultValues = {
     [SwapFormKey.FromAmount]: '',
-    [SwapFormKey.GasPrice]: 'normal',
-    [SwapFormKey.Slippage]: '3',
     [SwapFormKey.SearchTokensFilter]: '',
-    [SwapFormKey.RoutePriority]: 'RECOMMENDED',
 };
 export const SwapFormProvider = ({ children, }) => {
     var _a;