@lifi/widget 1.16.1 → 1.17.0

package/cjs/i18n/en/translation.json

@@ -15,7 +15,6 @@
   },
   "button": {
     "connectWallet": "Connect wallet",
-    "switchChain": "Switch chain",
     "swap": "Swap",
     "reviewSwap": "Review swap",
     "startSwap": "Start swap",
@@ -56,7 +55,6 @@
     "featuredTokens": "Featured tokens",
     "otherTokens": "Other tokens",
     "inProgress": "in progress",
-    "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
@@ -92,7 +90,8 @@
       "message": {
         "routeNotFound": "Try another token combination.",
         "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data.",
-        "emptyActiveSwaps": "Swaps in progress will appear here. Once completed, find them in swap history."
+        "emptyActiveSwaps": "Swaps in progress will appear here. Once completed, find them in swap history.",
+        "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please try search again or choose another chain."
       }
     },
     "warning": {

package/cjs/i18n/index.d.ts

@@ -18,7 +18,6 @@ export declare const resources: {
             };
             button: {
                 connectWallet: string;
-                switchChain: string;
                 swap: string;
                 reviewSwap: string;
                 startSwap: string;
@@ -59,7 +58,6 @@ export declare const resources: {
                 featuredTokens: string;
                 otherTokens: string;
                 inProgress: string;
-                couldntFindTokens: string;
                 stepSwap: string;
                 stepBridge: string;
                 stepSwapAndBridge: string;
@@ -96,6 +94,7 @@ export declare const resources: {
                         routeNotFound: string;
                         emptySwapHistory: string;
                         emptyActiveSwaps: string;
+                        emptyTokenList: string;
                     };
                 };
                 warning: {

package/cjs/pages/MainPage/MainSwapButton.js

@@ -31,6 +31,6 @@ const MainSwapButton = () => {
             });
         }
     });
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || !currentRoute || isValidating || !isValid }));
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid }));
 };
 exports.MainSwapButton = MainSwapButton;

package/cjs/pages/SettingsPage/AdvancedPreferences.js

@@ -10,7 +10,7 @@ const EnabledBridgesSelect_1 = require("./EnabledBridgesSelect");
 const EnabledExchangesSelect_1 = require("./EnabledExchangesSelect");
 const AdvancedPreferences = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { advancedPreferences } = (0, stores_1.useSettings)(['advancedPreferences']);
     const handleAdvancedPreferences = (_, checked) => {
         setValue('advancedPreferences', checked);

package/cjs/pages/SettingsPage/GasPriceSelect.js

@@ -10,7 +10,7 @@ const Select_1 = require("../../components/Select");
 const stores_1 = require("../../stores");
 const GasPriceSelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { gasPrice } = (0, stores_1.useSettings)(['gasPrice']);
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1 }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.gasPrice.title`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsxs)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: gasPrice, onChange: (event) => setValue('gasPrice', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
 };

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -11,7 +11,7 @@ const Select_1 = require("../../components/Select");
 const stores_1 = require("../../stores");
 const RoutePrioritySelect = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     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) => {
                         const tag = t(`swap.tags.${order.toUpperCase()}`);

package/cjs/pages/SettingsPage/ShowDestinationWallet.js

@@ -8,7 +8,7 @@ const Switch_1 = require("../../components/Switch");
 const stores_1 = require("../../stores");
 const ShowDestinationWallet = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
     const onChange = (_, checked) => {
         setValue('showDestinationWallet', checked);

package/cjs/pages/SettingsPage/SlippageInput.js

@@ -11,8 +11,8 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const SlippageInput = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [setValue] = (0, stores_1.useSetSettings)();
     const { slippage } = (0, stores_1.useSettings)(['slippage']);
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
     const defaultValue = (0, react_1.useRef)(slippage);
     const handleChange = (event) => {
         const { value } = event.target;

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -32,7 +32,6 @@ const SwapDetailsPage = () => {
     var _a, _b;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
-    const setHeaderAction = (0, Header_1.useSetHeaderAction)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const [routeExecution, deleteRoute] = (0, stores_1.useRouteStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -50,8 +49,8 @@ const SwapDetailsPage = () => {
         yield navigator.clipboard.writeText((_c = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _c !== void 0 ? _c : '');
     });
     (0, react_1.useEffect)(() => {
-        return setHeaderAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
-    }, [setHeaderAction, toggleDialog]);
+        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+    }, [toggleDialog]);
     const startedAt = new Date((_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
     return ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -18,14 +18,13 @@ const SwapHistoryPage = () => {
     const { account } = (0, providers_1.useWallet)();
     const swaps = (0, route_1.useSwapHistory)(account.address);
     const deleteRoutes = (0, stores_1.useRouteStore)((store) => store.deleteRoutes);
-    const setHeaderAction = (0, Header_1.useSetHeaderAction)();
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);
     }, []);
     (0, react_1.useEffect)(() => {
-        return setHeaderAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
-    }, [setHeaderAction, toggleDialog]);
+        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+    }, [toggleDialog]);
     if (!swaps.length) {
         return (0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {});
     }

package/cjs/pages/SwapPage/SwapPage.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -25,7 +34,7 @@ const SwapPage = () => {
         navigateBack();
         deleteRoute();
     };
-    const handleSwapClick = () => {
+    const handleSwapClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (status === 'idle') {
             executeRoute();
             setValue(providers_1.SwapFormKey.FromAmount, '');
@@ -33,7 +42,7 @@ const SwapPage = () => {
         if (status === 'error') {
             restartRoute();
         }
-    };
+    });
     // eslint-disable-next-line consistent-return
     const getSwapButtonText = () => {
         if (status === 'idle') {

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -14,7 +14,6 @@ const SwapRoutesPage_style_1 = require("./SwapRoutesPage.style");
 const SwapRoutesPage = () => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const setHeaderAction = (0, Header_1.useSetHeaderAction)();
     const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const handleRouteClick = (route) => {
@@ -31,8 +30,10 @@ const SwapRoutesPage = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     (0, react_1.useEffect)(() => {
-        return setHeaderAction((0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
-    }, [dataUpdatedAt, isFetching, refetch, refetchTime, setHeaderAction]);
+        return Header_1.useHeaderActionStore
+            .getState()
+            .setAction((0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
+    }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
     const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching;
     return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
 };

package/cjs/providers/SwapFormProvider/SwapFormProvider.js

@@ -2,11 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapFormProvider = exports.formDefaultValues = void 0;
 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");
 exports.formDefaultValues = {
@@ -15,65 +11,15 @@ 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)({
-        defaultValues: Object.assign(Object.assign({}, exports.formDefaultValues), { fromChain: fromChain !== null && fromChain !== void 0 ? fromChain : sdk_1.ChainId.ETH, fromToken, fromAmount: (typeof fromAmount === 'number'
+        defaultValues: Object.assign(Object.assign({}, exports.formDefaultValues), { fromChain,
+            fromToken, fromAmount: (typeof fromAmount === 'number'
                 ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
-                : fromAmount) || exports.formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : sdk_1.ChainId.ETH, toToken,
+                : fromAmount) || exports.formDefaultValues.fromAmount, toChain,
+            toToken,
             toAddress }),
     });
-    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
-    (0, react_1.useEffect)(() => {
-        if (!account.isActive || !account.chainId) {
-            return;
-        }
-        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,
-            });
-            methods.setValue(types_1.SwapFormKey.FromToken, '', {
-                shouldDirty: false,
-            });
-            methods.setValue(types_1.SwapFormKey.FromAmount, '', {
-                shouldDirty: false,
-            });
-        }
-        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
-            !hasToChainInOrderedList) {
-            methods.setValue(types_1.SwapFormKey.ToChain, account.chainId, {
-                shouldDirty: false,
-            });
-            methods.setValue(types_1.SwapFormKey.ToToken, '', {
-                shouldDirty: false,
-            });
-        }
-    }, [
-        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/SwapFormProvider/types.d.ts

@@ -16,12 +16,12 @@ export declare type SwapFormValues = {
     [SwapFormKey.ToToken]: string;
     [SwapFormKey.ToAddress]: string;
 };
-export declare type SwapFormDirection = 'from' | 'to';
+export declare type SwapFormType = 'from' | 'to';
 export declare const SwapFormKeyHelper: {
-    getChainKey: (formType: SwapFormDirection) => 'fromChain' | 'toChain';
-    getTokenKey: (formType: SwapFormDirection) => 'fromToken' | 'toToken';
-    getAmountKey: (formType: SwapFormDirection) => 'fromAmount' | 'toAmount';
+    getChainKey: (formType: SwapFormType) => 'fromChain' | 'toChain';
+    getTokenKey: (formType: SwapFormType) => 'fromToken' | 'toToken';
+    getAmountKey: (formType: SwapFormType) => 'fromAmount' | 'toAmount';
 };
 export interface SwapFormTypeProps {
-    formType: SwapFormDirection;
+    formType: SwapFormType;
 }

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -13,6 +13,9 @@ 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 react_hook_form_1 = require("react-hook-form");
+const chains_1 = require("../../stores/chains");
+const SwapFormProvider_1 = require("../SwapFormProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
@@ -29,7 +32,8 @@ const WalletContext = (0, react_1.createContext)(initialContext);
 const useWallet = () => (0, react_1.useContext)(WalletContext);
 exports.useWallet = useWallet;
 const WalletProvider = ({ children }) => {
-    const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { walletManagement, fromChain, toChain, chains, disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
+    const methods = (0, react_hook_form_1.useFormContext)();
     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* () {
@@ -94,6 +98,58 @@ const WalletProvider = ({ children }) => {
         account,
         provider,
     }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
+    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
+    (0, react_1.useEffect)(() => {
+        const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains, disabledChains);
+        if (!account.isActive || !account.chainId || !chainAllowed) {
+            return;
+        }
+        const [fromChainValue, toChainValue] = methods.getValues([
+            SwapFormProvider_1.SwapFormKey.FromChain,
+            SwapFormProvider_1.SwapFormKey.ToChain,
+        ]);
+        const { isDirty: isFromChainDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.FromChain, methods.formState);
+        const { isDirty: isToChainDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToChain, methods.formState);
+        const { isDirty: isFromTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.FromToken, methods.formState);
+        const { isDirty: isToTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToToken, methods.formState);
+        const { chainOrder, setChain } = chains_1.useChainOrderStore.getState();
+        // 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 hasFromChainInOrderedList = chainOrder.includes(fromChainValue);
+        const hasToChainInOrderedList = chainOrder.includes(toChainValue);
+        if ((!fromChain && !isFromChainDirty && !isFromTokenDirty) ||
+            !hasFromChainInOrderedList) {
+            methods.setValue(SwapFormProvider_1.SwapFormKey.FromChain, account.chainId, {
+                shouldDirty: false,
+            });
+            methods.setValue(SwapFormProvider_1.SwapFormKey.FromToken, '', {
+                shouldDirty: false,
+            });
+            methods.setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '', {
+                shouldDirty: false,
+            });
+        }
+        if ((!toChain && !isToChainDirty && !isToTokenDirty) ||
+            !hasToChainInOrderedList) {
+            methods.setValue(SwapFormProvider_1.SwapFormKey.ToChain, account.chainId, {
+                shouldDirty: false,
+            });
+            methods.setValue(SwapFormProvider_1.SwapFormKey.ToToken, '', {
+                shouldDirty: false,
+            });
+        }
+    }, [
+        account.chainId,
+        account.isActive,
+        chains,
+        disabledChains,
+        fromChain,
+        methods,
+        toChain,
+    ]);
     return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 exports.WalletProvider = WalletProvider;

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

@@ -1,2 +1,3 @@
 export * from './types';
+export * from './utils';
 export * from './WidgetProvider';

package/cjs/providers/WidgetProvider/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);
 __exportStar(require("./WidgetProvider"), exports);

package/cjs/providers/WidgetProvider/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const isItemAllowed: <T>(chainId: T, chains?: {
+    allow?: T[] | undefined;
+    deny?: T[] | undefined;
+} | undefined, disabledChains?: T[] | undefined) => boolean;

package/cjs/providers/WidgetProvider/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isItemAllowed = void 0;
+const isItemAllowed = (chainId, chains, 
+/** @deprecated Remove in the next major release */
+disabledChains) => {
+    var _a, _b;
+    if ((_a = chains === null || chains === void 0 ? void 0 : chains.allow) === null || _a === void 0 ? void 0 : _a.length) {
+        return chains.allow.includes(chainId);
+    }
+    return !((disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chainId)) || ((_b = chains === null || chains === void 0 ? void 0 : chains.deny) === null || _b === void 0 ? void 0 : _b.includes(chainId)));
+};
+exports.isItemAllowed = isItemAllowed;

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

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

package/cjs/stores/chains/index.js

@@ -17,4 +17,3 @@ 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

@@ -3,6 +3,6 @@ export interface ChainOrderState {
     availableChains: number[];
 }
 export interface ChainOrderStore extends ChainOrderState {
-    initializeChains(chainIds: number[]): void;
+    initializeChains(chainIds: number[]): number[];
     setChain(chainId: number): void;
 }

package/cjs/stores/chains/useChainOrderStore.js

@@ -9,22 +9,25 @@ 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) => ({
+exports.useChainOrderStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set, get) => ({
     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]);
-        }
-    }),
+    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]);
+            }
+        });
+        return get().chainOrder;
+    },
     setChain: (chainId) => set((state) => {
         if (state.chainOrder.includes(chainId) ||
             !state.availableChains.includes(chainId)) {

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

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

package/cjs/stores/settings/index.js

@@ -16,6 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
 __exportStar(require("./useAppearance"), exports);
-__exportStar(require("./useSetSettings"), exports);
 __exportStar(require("./useSettings"), exports);
 __exportStar(require("./useSettingsStore"), exports);

package/cjs/stores/settings/useAppearance.js

@@ -8,7 +8,9 @@ const shallow_1 = __importDefault(require("zustand/shallow"));
 const useSettingsStore_1 = require("./useSettingsStore");
 const useAppearance = () => {
     const [appearance, setValue] = (0, useSettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.default);
-    const setAppearance = (appearance) => setValue('appearance', appearance);
+    const setAppearance = (appearance) => {
+        setValue('appearance', appearance);
+    };
     return [appearance, setAppearance];
 };
 exports.useAppearance = useAppearance;

package/cjs/types/widget.d.ts

@@ -17,33 +17,40 @@ export interface WidgetWalletManagement {
     addChain?(chainId: number): Promise<boolean>;
     signer?: Signer;
 }
-interface WidgetConfigBase {
-    fromAmount?: number | string;
+export interface WidgetConfig {
+    fromChain?: `${ChainKey}` | number;
+    toChain?: `${ChainKey}` | number;
+    fromToken?: string;
+    toToken?: string;
     toAddress?: string;
-    containerStyle?: CSSProperties;
-    theme?: ThemeConfig;
+    fromAmount?: number | string;
     appearance?: Appearance;
+    theme?: ThemeConfig;
+    containerStyle?: CSSProperties;
     disableAppearance?: boolean;
     disableTelemetry?: boolean;
-    walletManagement?: WidgetWalletManagement;
-    integrator?: string;
+    /** @deprecated Use chains.deny instead */
     disabledChains?: number[];
+    /** @deprecated Use tokens.featured instead */
     featuredTokens?: Token[];
+    integrator?: string;
+    walletManagement?: WidgetWalletManagement;
     sdkConfig?: ConfigUpdate;
+    bridges?: {
+        allow?: string[];
+        deny?: string[];
+    };
+    exchanges?: {
+        allow?: string[];
+        deny?: string[];
+    };
+    chains?: {
+        allow?: number[];
+        deny?: number[];
+    };
+    tokens?: {
+        featured?: Token[];
+        allow?: Token[];
+        deny?: (Partial<Token> & Pick<Token, 'address' | 'chainId'>)[];
+    };
 }
-declare type WidgetFromTokenConfig = {
-    fromChain: `${ChainKey}` | number;
-    fromToken?: string;
-} | {
-    fromChain?: never;
-    fromToken?: never;
-};
-declare type WidgetToTokenConfig = {
-    toChain: `${ChainKey}` | number;
-    toToken?: string;
-} | {
-    toChain?: never;
-    toToken?: never;
-};
-export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig;
-export {};

package/components/ChainSelect/ChainSelect.style.js

@@ -1,15 +1,15 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Card } from '../../components/Card';
-export const ChainCard = styled(Card)(({ theme }) => ({
+export const ChainCard = styled(Card)({
     display: 'grid',
     placeItems: 'center',
-    width: 56,
+    minWidth: 56,
     height: 56,
-}));
+});
 export const ChainContainer = styled(Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, 56px)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/components/ChainSelect/useChainSelect.d.ts

@@ -1,6 +1,6 @@
 import type { EVMChain } from '@lifi/sdk';
-import type { SwapFormDirection } from '../../providers';
-export declare const useChainSelect: (formType: SwapFormDirection) => {
+import type { SwapFormType } from '../../providers';
+export declare const useChainSelect: (formType: SwapFormType) => {
     chains: EVMChain[] | undefined;
     getChains: () => EVMChain[];
     setCurrentChain: (chainId: number) => void;

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -20,15 +20,15 @@ export const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = useTranslation();
     const { insufficientFunds, insufficientGas } = useGasSufficiency(route);
-    if (!insufficientFunds && !insufficientGas.length) {
+    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
         return null;
     }
     return (_jsxs(MessageCard, Object.assign({}, props, { children: [_jsx(WarningIcon, { sx: {
                     marginTop: 2,
                     marginLeft: 2,
-                } }), _jsxs(Box, { children: [insufficientGas.length ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length ? 0 : 2, pt: insufficientGas.length ? 1 : 2 }, { children: insufficientFunds
+                } }), _jsxs(Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
                             ? t(`swap.warning.message.insufficientFunds`)
-                            : null }))) : null, insufficientGas.length ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, insufficientGas.length
+                            : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
                             return (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {