@lifi/widget 1.1.2 → 1.2.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;

package/providers/SwapFormProvider/types.d.ts

@@ -1,35 +1,16 @@
-import { Order } from '@lifinance/sdk';
 export declare enum SwapFormKey {
-    BridgePrioritization = "bridgePrioritization",
-    EnabledBridges = "enabledBridges",
-    EnabledExchanges = "enabledExchanges",
     FromAmount = "fromAmount",
     FromChain = "fromChain",
     FromToken = "fromToken",
-    GasPrice = "gasPrice",
-    IsAddressConfirmed = "isAddressConfirmed",
-    IsSendToRecipient = "isSendToRecipient",
-    RecipientsAddress = "recipientsAddress",
-    RoutePriority = "routePriority",
     SearchTokensFilter = "searchTokensFilter",
-    Slippage = "slippage",
     ToChain = "toChain",
     ToToken = "toToken"
 }
 export declare type SwapFormValues = {
-    [SwapFormKey.BridgePrioritization]: string;
-    [SwapFormKey.EnabledBridges]: string[];
-    [SwapFormKey.EnabledExchanges]: string[];
     [SwapFormKey.FromAmount]: string;
     [SwapFormKey.FromChain]: number;
     [SwapFormKey.FromToken]: string;
-    [SwapFormKey.GasPrice]: string;
-    [SwapFormKey.IsAddressConfirmed]: boolean;
-    [SwapFormKey.IsSendToRecipient]: boolean;
-    [SwapFormKey.RecipientsAddress]: string;
-    [SwapFormKey.RoutePriority]: Order;
     [SwapFormKey.SearchTokensFilter]: string;
-    [SwapFormKey.Slippage]: string;
     [SwapFormKey.ToChain]: number;
     [SwapFormKey.ToToken]: string;
 };

package/providers/SwapFormProvider/types.js

@@ -1,18 +1,9 @@
 export var SwapFormKey;
 (function (SwapFormKey) {
-    SwapFormKey["BridgePrioritization"] = "bridgePrioritization";
-    SwapFormKey["EnabledBridges"] = "enabledBridges";
-    SwapFormKey["EnabledExchanges"] = "enabledExchanges";
     SwapFormKey["FromAmount"] = "fromAmount";
     SwapFormKey["FromChain"] = "fromChain";
     SwapFormKey["FromToken"] = "fromToken";
-    SwapFormKey["GasPrice"] = "gasPrice";
-    SwapFormKey["IsAddressConfirmed"] = "isAddressConfirmed";
-    SwapFormKey["IsSendToRecipient"] = "isSendToRecipient";
-    SwapFormKey["RecipientsAddress"] = "recipientsAddress";
-    SwapFormKey["RoutePriority"] = "routePriority";
     SwapFormKey["SearchTokensFilter"] = "searchTokensFilter";
-    SwapFormKey["Slippage"] = "slippage";
     SwapFormKey["ToChain"] = "toChain";
     SwapFormKey["ToToken"] = "toToken";
 })(SwapFormKey || (SwapFormKey = {}));

package/providers/ThemeProvider/ThemeProvider.js

@@ -3,7 +3,7 @@ import { useMediaQuery } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import { useEffect, useMemo, useState } from 'react';
 import { createTheme } from '../../config/theme';
-import { useAppearance } from '../../hooks';
+import { useAppearance } from '../../stores';
 import { useWidgetConfig } from '../WidgetProvider';
 export const ThemeProvider = ({ children, }) => {
     const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig();

package/providers/WalletProvider/WalletProvider.js

@@ -20,6 +20,7 @@ const initialContext = {
     switchChain: stub,
     addChain: stub,
     addToken: stub,
+    attemptEagerConnect: stub,
     account: {},
 };
 const WalletContext = createContext(initialContext);
@@ -30,35 +31,58 @@ export const WalletProvider = ({ children }) => {
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
         if (config.disableInternalWalletManagement) {
-            // TODO
+            const signer = yield config.walletCallbacks.connect();
+            const account = yield extractAccountFromSigner(signer);
+            setAccount(account);
             return;
         }
         yield walletManagementConnect(wallet);
-    }), [config.disableInternalWalletManagement, walletManagementConnect]);
+    }), [
+        config.disableInternalWalletManagement,
+        config.walletCallbacks,
+        walletManagementConnect,
+    ]);
     const disconnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (config.disableInternalWalletManagement) {
+            yield config.walletCallbacks.disconnect();
             setAccount({});
+            return;
         }
         yield walletManagementDisconnect();
-    }), [config.disableInternalWalletManagement, walletManagementDisconnect]);
+    }), [
+        config.disableInternalWalletManagement,
+        config.walletCallbacks,
+        walletManagementDisconnect,
+    ]);
     // only for injected wallets
     const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
         if (config.disableInternalWalletManagement) {
-            // TODO
-            return false;
+            const signer = yield config.walletCallbacks.switchChain(chainId);
+            const account = yield extractAccountFromSigner(signer);
+            setAccount(account);
         }
         return walletSwitchChain(chainId);
-    }), [config.disableInternalWalletManagement]);
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
     const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!config.disableInternalWalletManagement) {
-            yield walletAddChain(chainId);
+        if (config.disableInternalWalletManagement) {
+            return config.walletCallbacks.addChain(chainId);
         }
-    }), [config.disableInternalWalletManagement]);
+        return walletAddChain(chainId);
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
     const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!config.disableInternalWalletManagement) {
-            yield switchChainAndAddToken(chainId, token);
+        if (config.disableInternalWalletManagement) {
+            return config.walletCallbacks.addToken(token, chainId);
         }
-    }), [config.disableInternalWalletManagement]);
+        return switchChainAndAddToken(chainId, token);
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
+    const attemptEagerConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.disableInternalWalletManagement) {
+            const signer = yield config.walletCallbacks.provideSigner();
+            const account = yield extractAccountFromSigner(signer);
+            console.log(account);
+            setAccount((oldAccount) => (Object.assign({}, account)));
+        }
+    }), [config.disableInternalWalletManagement, config.walletCallbacks]);
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -75,8 +99,17 @@ export const WalletProvider = ({ children }) => {
         switchChain,
         addChain,
         addToken,
+        attemptEagerConnect,
+        account,
+    }), [
         account,
-    }), [account, addChain, addToken, connect, disconnect, switchChain]);
+        addChain,
+        addToken,
+        connect,
+        disconnect,
+        switchChain,
+        attemptEagerConnect,
+    ]);
     return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {

package/providers/WalletProvider/types.d.ts

@@ -3,11 +3,12 @@ import { Token } from '@lifinance/sdk';
 import { Signer } from 'ethers';
 export interface WalletContextProps {
     account: WalletAccount;
-    addChain(chainId: number): Promise<void>;
+    addChain(chainId: number): Promise<boolean>;
     addToken(chainId: number, token: Token): Promise<void>;
     disconnect(): void;
     switchChain(chainId: number): Promise<boolean>;
     connect(wallet?: Wallet | undefined): Promise<void>;
+    attemptEagerConnect(): Promise<void>;
 }
 export interface WalletAccount {
     address?: string;

package/providers/WidgetProvider/types.d.ts

@@ -1,8 +1,8 @@
 import { WidgetConfig } from '../../types';
-export interface WidgetContextProps extends WidgetConfig {
+export declare type WidgetContextProps = WidgetConfig & {
     fromChain?: number;
     toChain?: number;
-}
+};
 export interface WidgetProviderProps {
     config?: WidgetConfig;
 }

package/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from './route';
+export * from './settings';

package/stores/index.js

@@ -0,0 +1,2 @@
+export * from './route';
+export * from './settings';

package/stores/route/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './useCurrentRoute';
+export * from './useExecutingRoutes';
+export * from './useRouteStore';
+export * from './useSetExecutableRoute';

package/stores/route/index.js

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './useCurrentRoute';
+export * from './useExecutingRoutes';
+export * from './useRouteStore';
+export * from './useSetExecutableRoute';

package/stores/route/useCurrentRoute.d.ts

@@ -0,0 +1,2 @@
+import { Route } from '@lifinance/sdk';
+export declare const useCurrentRoute: () => [Route | undefined, (route?: Route) => void];

package/stores/route/useCurrentRoute.js

@@ -0,0 +1,5 @@
+import shallow from 'zustand/shallow';
+import { useRouteStore } from './useRouteStore';
+export const useCurrentRoute = () => {
+    return useRouteStore((state) => [state.currentRoute, state.setCurrentRoute], shallow);
+};

package/stores/route/useExecutingRoutes.d.ts

@@ -0,0 +1 @@
+export declare const useExecutingRoutes: () => import("./types").RouteExecution[];

package/stores/route/useExecutingRoutes.js

@@ -0,0 +1,4 @@
+import { useRouteStore } from './useRouteStore';
+export const useExecutingRoutes = () => {
+    return useRouteStore((state) => Object.values(state.routes).filter((route) => route.status === 'loading' || route.status === 'error'));
+};

package/{hooks/useRouteExecution → stores/route}/useRouteStore.d.ts

@@ -1,6 +1,5 @@
-import { Route } from '@lifinance/sdk';
 import type { RouteExecutionStore } from './types';
-export declare const useRouteStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
+export declare const useRouteStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RouteExecutionStore, {
             routes: Record<string, import("./types").RouteExecution>;
@@ -11,7 +10,6 @@ export declare const useRouteStore: import("zustand").UseBoundStore<Omit<import(
         onHydrate: (fn: (state: RouteExecutionStore) => void) => () => void;
         onFinishHydration: (fn: (state: RouteExecutionStore) => void) => () => void;
     };
+}, "setState"> & {
+    setState(nextStateOrUpdater: RouteExecutionStore | Partial<RouteExecutionStore> | ((state: import("immer/dist/internal").WritableDraft<RouteExecutionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare const useSetExecutableRoute: () => (route: Route) => void;
-export declare const useExecutingRoutes: () => import("./types").RouteExecution[];
-export declare const useCurrentRoute: () => [Route | undefined, (route?: Route) => void];

package/{hooks/useRouteExecution → stores/route}/useRouteStore.js

@@ -1,13 +1,12 @@
-import produce from 'immer';
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
-import shallow from 'zustand/shallow';
-export const useRouteStore = create()(persist((set) => ({
+import { immer } from 'zustand/middleware/immer';
+export const useRouteStore = create()(persist(immer((set) => ({
     routes: {},
-    setCurrentRoute: (route) => set(produce((state) => {
+    setCurrentRoute: (route) => set((state) => {
         state.currentRoute = route;
-    })),
-    setExecutableRoute: (route) => set(produce((state) => {
+    }),
+    setExecutableRoute: (route) => set((state) => {
         if (!state.routes[route.id]) {
             // clean previous idle routes that were not executed
             Object.keys(state.routes)
@@ -19,8 +18,8 @@ export const useRouteStore = create()(persist((set) => ({
             };
             state.currentRoute = route;
         }
-    })),
-    updateRoute: (route) => set(produce((state) => {
+    }),
+    updateRoute: (route) => set((state) => {
         state.routes[route.id].route = route;
         const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
         if (isFailed) {
@@ -36,8 +35,8 @@ export const useRouteStore = create()(persist((set) => ({
         if (isLoading) {
             state.routes[route.id].status = 'loading';
         }
-    })),
-    restartRoute: (routeId) => set(produce((state) => {
+    }),
+    restartRoute: (routeId) => set((state) => {
         state.routes[routeId].route.steps.forEach((step) => {
             var _a, _b;
             const stepHasFailed = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED';
@@ -50,22 +49,13 @@ export const useRouteStore = create()(persist((set) => ({
             }
         });
         state.routes[routeId].status = 'loading';
-    })),
-    removeRoute: (routeId) => set(produce((state) => {
-        if (state.routes[routeId]) {
-            delete state.routes[routeId];
-        }
-    })),
-}), {
+    }),
+    removeRoute: (routeId) => set((state) => {
+        // TODO: handle immediate removal
+        // delete state.routes[routeId];
+        state.routes[routeId].status = 'idle';
+    }),
+})), {
     name: 'li.fi-widget-executable-routes',
     partialize: (state) => ({ routes: state.routes }),
 }));
-export const useSetExecutableRoute = () => {
-    return useRouteStore((state) => state.setExecutableRoute);
-};
-export const useExecutingRoutes = () => {
-    return useRouteStore((state) => Object.values(state.routes).filter((route) => route.status === 'loading' || route.status === 'error'));
-};
-export const useCurrentRoute = () => {
-    return useRouteStore((state) => [state.currentRoute, state.setCurrentRoute], shallow);
-};

package/stores/route/useSetExecutableRoute.d.ts

@@ -0,0 +1 @@
+export declare const useSetExecutableRoute: () => (route: import("@lifinance/types").Route) => void;

package/stores/route/useSetExecutableRoute.js

@@ -0,0 +1,4 @@
+import { useRouteStore } from './useRouteStore';
+export const useSetExecutableRoute = () => {
+    return useRouteStore((state) => state.setExecutableRoute);
+};

package/stores/settings/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './useAppearance';
+export * from './useSetSettings';
+export * from './useSettings';
+export * from './useSettingsStore';

package/stores/settings/index.js

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './useAppearance';
+export * from './useSetSettings';
+export * from './useSettings';
+export * from './useSettingsStore';

package/stores/settings/types.d.ts

@@ -0,0 +1,23 @@
+import { Bridge, Exchange, Order } from '@lifinance/sdk';
+import { Appearance } from '../../types';
+export declare type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
+export declare type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
+export declare type SettingsToolType = 'Bridges' | 'Exchanges';
+export declare const SettingsToolTypes: SettingsToolType[];
+export interface SettingsState {
+    advancedPreferences: boolean;
+    appearance: Appearance;
+    routePriority: Order;
+    slippage: string;
+    gasPrice: string;
+    enabledBridges?: string[];
+    _enabledBridges?: Record<string, boolean>;
+    enabledExchanges?: string[];
+    _enabledExchanges?: Record<string, boolean>;
+}
+export interface SettingsStore extends SettingsState {
+    setValue: ValueSetter<SettingsState>;
+    setValues: ValuesSetter<SettingsState>;
+    initializeTools(toolType: SettingsToolType, tools: string[]): void;
+    setTools(toolType: SettingsToolType, tools: string[], availableTools: (Pick<Bridge, 'key'> | Pick<Exchange, 'key'>)[]): void;
+}

package/stores/settings/types.js

@@ -0,0 +1 @@
+export const SettingsToolTypes = ['Bridges', 'Exchanges'];

package/stores/settings/useAppearance.d.ts

@@ -0,0 +1,2 @@
+import { Appearance } from '../../types';
+export declare const useAppearance: () => [Appearance, (appearance: Appearance) => void];

package/stores/settings/useAppearance.js

@@ -0,0 +1,7 @@
+import shallow from 'zustand/shallow';
+import { useSettingsStore } from './useSettingsStore';
+export const useAppearance = () => {
+    const [appearance, setValue] = useSettingsStore((state) => [state.appearance, state.setValue], shallow);
+    const setAppearance = (appearance) => setValue('appearance', appearance);
+    return [appearance, setAppearance];
+};

package/stores/settings/useSetSettings.d.ts

@@ -0,0 +1,5 @@
+import { SettingsState, ValueSetter, ValuesSetter } from './types';
+export declare const useSetSettings: () => [
+    ValueSetter<SettingsState>,
+    ValuesSetter<SettingsState>
+];

package/stores/settings/useSetSettings.js

@@ -0,0 +1,5 @@
+import shallow from 'zustand/shallow';
+import { useSettingsStore } from './useSettingsStore';
+export const useSetSettings = () => {
+    return useSettingsStore((state) => [state.setValue, state.setValues], shallow);
+};

package/stores/settings/useSettings.d.ts

@@ -0,0 +1,2 @@
+import { SettingsState } from '.';
+export declare const useSettings: <K extends keyof SettingsState>(keys: K[]) => Pick<SettingsState, K>;

package/stores/settings/useSettings.js

@@ -0,0 +1,8 @@
+import shallow from 'zustand/shallow';
+import { useSettingsStore } from './useSettingsStore';
+export const useSettings = (keys) => {
+    return useSettingsStore((state) => keys.reduce((values, key) => {
+        values[key] = state[key];
+        return values;
+    }, {}), shallow);
+};

package/stores/settings/useSettingsStore.d.ts

@@ -0,0 +1,25 @@
+import { SettingsState, SettingsStore } from './types';
+export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, {
+            setValue: import("./types").ValueSetter<SettingsState>;
+            setValues: import("./types").ValuesSetter<SettingsState>;
+            initializeTools(toolType: import("./types").SettingsToolType, tools: string[]): void;
+            setTools(toolType: import("./types").SettingsToolType, tools: string[], availableTools: (Pick<import("@lifinance/types").Bridge, "key"> | Pick<import("@lifinance/types").Exchange, "key">)[]): void;
+            advancedPreferences: boolean;
+            appearance: import("../..").Appearance;
+            routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
+            slippage: string;
+            gasPrice: string;
+            _enabledBridges?: Record<string, boolean> | undefined;
+            _enabledExchanges?: Record<string, boolean> | undefined;
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: SettingsStore) => void) => () => void;
+        onFinishHydration: (fn: (state: SettingsStore) => void) => () => void;
+    };
+}, "setState"> & {
+    setState(nextStateOrUpdater: SettingsStore | Partial<SettingsStore> | ((state: import("immer/dist/internal").WritableDraft<SettingsStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;