@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

package/_esm/providers/FormProvider/FormProvider.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { FormProvider as ReactHookFormProvider, useForm, } from 'react-hook-form';
+import { useWidgetConfig } from '../WidgetProvider';
+import { FormUpdater } from './FormUpdater';
+import { FormKey } from './types';
+export const formDefaultValues = {
+    [FormKey.FromAmount]: '',
+    [FormKey.ToAddress]: '',
+    [FormKey.TokenSearchFilter]: '',
+    [FormKey.ContractOutputsToken]: '',
+    [FormKey.ToContractAddress]: '',
+    [FormKey.ToContractCallData]: '',
+    [FormKey.ToContractGasLimit]: '',
+    [FormKey.ToAmount]: '',
+};
+export const FormProvider = ({ children, }) => {
+    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = useWidgetConfig();
+    const defaultValues = useMemo(() => ({
+        ...formDefaultValues,
+        fromChain,
+        fromToken,
+        fromAmount: (typeof fromAmount === 'number'
+            ? fromAmount?.toPrecision()
+            : fromAmount) || formDefaultValues.fromAmount,
+        toChain,
+        toToken,
+        toAddress: toAddress || formDefaultValues.toAddress,
+    }), [fromAmount, fromChain, fromToken, toAddress, toChain, toToken]);
+    const methods = useForm({
+        // values,
+        defaultValues,
+    });
+    return (_jsxs(ReactHookFormProvider, { ...methods, children: [_jsx(FormUpdater, { defaultValues: defaultValues }), children] }));
+};

package/_esm/providers/FormProvider/FormUpdater.js

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { FormKey } from '.';
+import { useAccount } from '../../hooks';
+import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
+export const FormUpdater = ({ defaultValues }) => {
+    const { fromChain, toChain, chains } = useWidgetConfig();
+    const { account } = useAccount();
+    const { setValue, getValues, getFieldState, resetField, 
+    // Subscription to touchedFields is required by getFieldState to work
+    formState: { touchedFields }, } = useFormContext();
+    const previousDefaultValues = useRef(defaultValues);
+    // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
+    useEffect(() => {
+        const chainAllowed = account.chainId && isItemAllowed(account.chainId, chains);
+        if (!account.isConnected || !account.chainId || !chainAllowed) {
+            return;
+        }
+        const { isTouched: isFromChainTouched } = getFieldState(FormKey.FromChain);
+        const { isTouched: isToChainTouched } = getFieldState(FormKey.ToChain);
+        const { isTouched: isFromTokenTouched } = getFieldState(FormKey.FromToken);
+        const { isTouched: isToTokenTouched } = getFieldState(FormKey.ToToken);
+        const { isTouched: isFromAmountTouched } = getFieldState(FormKey.FromAmount);
+        if (!fromChain && !isFromChainTouched && !isFromTokenTouched) {
+            resetField(FormKey.FromChain, { defaultValue: account.chainId });
+            setValue(FormKey.FromChain, account.chainId);
+            setValue(FormKey.FromToken, '');
+            if (isFromAmountTouched) {
+                setValue(FormKey.FromAmount, '');
+            }
+        }
+        if (!toChain && !isToChainTouched && !isToTokenTouched) {
+            resetField(FormKey.ToChain, { defaultValue: account.chainId });
+            setValue(FormKey.ToChain, account.chainId);
+            setValue(FormKey.ToToken, '');
+        }
+    }, [
+        account.chainId,
+        account.isConnected,
+        chains,
+        fromChain,
+        getFieldState,
+        getValues,
+        resetField,
+        setValue,
+        toChain,
+    ]);
+    // Makes widget config options reactive to changes
+    // Acts similar to values property from useForm, but includes additional logic for chains
+    useEffect(() => {
+        Object.keys(defaultValues).forEach((key) => {
+            if (previousDefaultValues.current[key] !== defaultValues[key]) {
+                const value = defaultValues[key] ||
+                    // set the chain to the current user one if it is not present in the config
+                    (key === FormKey.FromChain || key === FormKey.ToChain
+                        ? account.chainId || ''
+                        : '');
+                setValue(key, value);
+                resetField(key, { defaultValue: value });
+            }
+        });
+        previousDefaultValues.current = defaultValues;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultValues, getValues, resetField, setValue]);
+    return null;
+};

package/_esm/providers/FormProvider/URLSearchParamsBuilder.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useFormState, useWatch } from 'react-hook-form';
+import { useLocation } from 'react-router-dom';
+import { FormKey } from './types';
+const formValueKeys = [
+    FormKey.FromAmount,
+    FormKey.FromChain,
+    FormKey.FromToken,
+    FormKey.ToAddress,
+    FormKey.ToChain,
+    FormKey.ToToken,
+];
+export const URLSearchParamsBuilder = () => {
+    const { pathname } = useLocation();
+    const { 
+    // Have to use touchedFields, because default values are not considered dirty
+    touchedFields: { ...touchedFields }, } = useFormState();
+    const values = useWatch({ name: formValueKeys });
+    useEffect(() => {
+        const url = new URL(window.location);
+        formValueKeys.forEach((key, index) => {
+            if (touchedFields[key] && values[index]) {
+                url.searchParams.set(key, values[index]);
+            }
+            else if (url.searchParams.has(key) && !values[index]) {
+                url.searchParams.delete(key);
+            }
+        });
+        url.searchParams.sort();
+        window.history.replaceState(window.history.state, '', url);
+    }, [pathname, touchedFields, values]);
+    return null;
+};

package/_esm/providers/FormProvider/types.js

@@ -0,0 +1,20 @@
+export var FormKey;
+(function (FormKey) {
+    FormKey["ContractOutputsToken"] = "contractOutputsToken";
+    FormKey["FromAmount"] = "fromAmount";
+    FormKey["FromChain"] = "fromChain";
+    FormKey["FromToken"] = "fromToken";
+    FormKey["ToAddress"] = "toAddress";
+    FormKey["ToAmount"] = "toAmount";
+    FormKey["ToChain"] = "toChain";
+    FormKey["ToContractAddress"] = "toContractAddress";
+    FormKey["ToContractCallData"] = "toContractCallData";
+    FormKey["ToContractGasLimit"] = "ToContractGasLimit";
+    FormKey["ToToken"] = "toToken";
+    FormKey["TokenSearchFilter"] = "tokenSearchFilter";
+})(FormKey || (FormKey = {}));
+export const FormKeyHelper = {
+    getChainKey: (formType) => `${formType}Chain`,
+    getTokenKey: (formType) => `${formType}Token`,
+    getAmountKey: (formType) => `${formType}Amount`,
+};

package/_esm/providers/I18nProvider/I18nProvider.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createInstance } from 'i18next';
+import { useMemo } from 'react';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import * as supportedLanguages from '../../i18n';
+import { useSettings } from '../../stores';
+import { deepMerge } from '../../utils';
+import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
+export const I18nProvider = ({ children, }) => {
+    const { languageResources, languages } = useWidgetConfig();
+    const { language } = useSettings(['language']);
+    const i18n = useMemo(() => {
+        let resources = Object.keys(supportedLanguages)
+            .filter((lng) => isItemAllowed(lng, languages))
+            .reduce((resources, lng) => {
+            resources[lng] = {
+                translation: languageResources?.[lng]
+                    ? deepMerge(supportedLanguages[lng], languageResources[lng])
+                    : supportedLanguages[lng],
+            };
+            return resources;
+        }, {});
+        if (languageResources) {
+            resources = Object.keys(languageResources).reduce((resources, lng) => {
+                if (!resources[lng]) {
+                    resources[lng] = {
+                        translation: languageResources[lng],
+                    };
+                }
+                return resources;
+            }, resources);
+        }
+        let i18n = createInstance({
+            lng: languages?.default || language,
+            fallbackLng: resources.en
+                ? 'en'
+                : languages?.default ||
+                    languages?.allow?.[0] ||
+                    Object.keys(resources)?.[0],
+            lowerCaseLng: true,
+            interpolation: {
+                escapeValue: false,
+            },
+            resources,
+            detection: {
+                caches: [],
+            },
+        });
+        i18n.use(initReactI18next).init();
+        return i18n;
+    }, [language, languageResources, languages]);
+    return _jsx(I18nextProvider, { i18n: i18n, children: children });
+};

package/_esm/providers/I18nProvider/types.js

@@ -0,0 +1 @@
+export {};

package/_esm/providers/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useEffect, useMemo, useState } from 'react';
+import { createTheme } from '../../config/theme';
+import { useAppearance } from '../../stores';
+import { useWidgetConfig } from '../WidgetProvider';
+export const ThemeProvider = ({ children, }) => {
+    const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig();
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    const [appearance, setAppearance] = useAppearance();
+    const [mode, setMode] = useState(colorSchemeMode ?? appearance === 'auto'
+        ? prefersDarkMode
+            ? 'dark'
+            : 'light'
+        : appearance);
+    useEffect(() => {
+        if (appearance === 'auto') {
+            setMode(prefersDarkMode ? 'dark' : 'light');
+        }
+        else {
+            setMode(appearance);
+        }
+    }, [appearance, prefersDarkMode]);
+    useEffect(() => {
+        if (colorSchemeMode) {
+            setAppearance(colorSchemeMode);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [colorSchemeMode]);
+    const theme = useMemo(() => createTheme(mode, themeConfig), [mode, themeConfig]);
+    return _jsx(MuiThemeProvider, { theme: theme, children: children });
+};

package/_esm/providers/WalletProvider/EVMProvider.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alpha, binance, bitget, bitpie, block, brave, coinbase, dcent, exodus, frame, frontier, gate, hyperpay, imtoken, liquality, okx, oneinch, ownbit, rabby, safepal, status, taho, tokenary, tokenpocket, trust, walletConnect, xdefi, } from '@lifi/wallet-management';
+import { useContext, useMemo } from 'react';
+import { createClient } from 'viem';
+import { WagmiContext, WagmiProvider, createConfig, http } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { useAvailableChains } from '../../hooks';
+import { formatChain } from './utils';
+const connectors = [
+    walletConnect,
+    coinbase,
+    bitget,
+    gate,
+    exodus,
+    taho,
+    binance,
+    frontier,
+    okx,
+    trust,
+    status,
+    alpha,
+    block,
+    bitpie,
+    brave,
+    dcent,
+    frame,
+    hyperpay,
+    imtoken,
+    liquality,
+    ownbit,
+    tokenpocket,
+    xdefi,
+    oneinch,
+    tokenary,
+    safepal,
+    rabby,
+];
+export const EVMProvider = ({ children }) => {
+    const inWagmiContext = useInWagmiContext();
+    return inWagmiContext ? (children) : (_jsx(EVMBaseProvider, { children: children }));
+};
+export const EVMBaseProvider = ({ children }) => {
+    const { chains } = useAvailableChains();
+    const wagmiConfig = useMemo(() => {
+        const _chains = chains?.length
+            ? chains.map(formatChain)
+            : [mainnet];
+        // Add ENS contracts
+        const _mainnet = _chains.find((chain) => chain.id === mainnet.id);
+        if (_mainnet) {
+            _mainnet.contracts = mainnet.contracts;
+        }
+        const wagmiConfig = createConfig({
+            chains: _chains,
+            connectors: connectors,
+            client({ chain }) {
+                return createClient({ chain, transport: http() });
+            },
+            // transports: _chains.reduce(
+            //   (transports, chain) => {
+            //     transports[chain.id] = http();
+            //     return transports;
+            //   },
+            //   {} as Record<number, Transport>,
+            // ),
+        });
+        return wagmiConfig;
+    }, [chains]);
+    return (_jsx(WagmiProvider, { config: wagmiConfig, reconnectOnMount: Boolean(chains?.length), children: children }));
+};
+function useInWagmiContext() {
+    const context = useContext(WagmiContext);
+    return Boolean(context);
+}

package/_esm/providers/WalletProvider/SDKProviders.js

@@ -0,0 +1,27 @@
+import { EVM, Solana, config } from '@lifi/sdk';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { getWalletClient, switchChain } from '@wagmi/core';
+import { useEffect } from 'react';
+import { useConfig } from 'wagmi';
+export const SDKProviders = () => {
+    const { wallet } = useWallet();
+    const wagmiConfig = useConfig();
+    useEffect(() => {
+        // Configure SDK Providers
+        config.setProviders([
+            EVM({
+                getWalletClient: () => getWalletClient(wagmiConfig),
+                switchChain: async (chainId) => {
+                    await switchChain(wagmiConfig, { chainId });
+                    return getWalletClient(wagmiConfig);
+                },
+            }),
+            Solana({
+                async getWalletAdapter() {
+                    return wallet?.adapter;
+                },
+            }),
+        ]);
+    }, [wagmiConfig, wallet?.adapter]);
+    return null;
+};

package/_esm/providers/WalletProvider/SolanaProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import { ConnectionContext, ConnectionProvider, WalletProvider, } from '@solana/wallet-adapter-react';
+import { clusterApiUrl } from '@solana/web3.js';
+import { useContext } from 'react';
+const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet);
+/**
+ * Wallets that implement either of these standards will be available automatically.
+ *
+ *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
+ *     (https://github.com/solana-mobile/mobile-wallet-adapter)
+ *   - Solana Wallet Standard
+ *     (https://github.com/solana-labs/wallet-standard)
+ *
+ * If you wish to support a wallet that supports neither of those standards,
+ * instantiate its legacy wallet adapter here. Common legacy adapters can be found
+ * in the npm package `@solana/wallet-adapter-wallets`.
+ */
+const wallets = [];
+export const SolanaProvider = ({ children }) => {
+    const inSolanaContext = useInSolanaContext();
+    return inSolanaContext ? (children) : (_jsx(SolanaBaseProvider, { children: children }));
+};
+export const SolanaBaseProvider = ({ children }) => {
+    return (_jsx(ConnectionProvider, { endpoint: endpoint, children: _jsx(WalletProvider, { wallets: wallets, autoConnect: true, children: children }) }));
+};
+function useInSolanaContext() {
+    const context = useContext(ConnectionContext);
+    return Boolean(context?.connection);
+}

package/_esm/providers/WalletProvider/WalletProvider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EVMProvider } from './EVMProvider';
+import { SDKProviders } from './SDKProviders';
+import { SolanaProvider } from './SolanaProvider';
+export const WalletProvider = ({ children }) => {
+    return (_jsx(SolanaProvider, { children: _jsxs(EVMProvider, { children: [_jsx(SDKProviders, {}), children] }) }));
+};

package/_esm/providers/WalletProvider/utils.js

@@ -0,0 +1,21 @@
+export const formatChain = (chain) => ({
+    ...chain,
+    ...chain.metamask,
+    blockExplorers: chain.metamask.blockExplorerUrls.reduce((blockExplorers, blockExplorer, index) => {
+        blockExplorers[index === 0 ? 'default' : `${index}`] = {
+            name: blockExplorer,
+            url: blockExplorer,
+        };
+        return blockExplorers;
+    }, {}),
+    name: chain.metamask.chainName,
+    rpcUrls: {
+        default: { http: chain.metamask.rpcUrls },
+        public: { http: chain.metamask.rpcUrls },
+    },
+    contracts: {
+        ...(chain.multicallAddress
+            ? { multicall3: { address: chain.multicallAddress } }
+            : undefined),
+    },
+});

package/_esm/providers/WidgetProvider/WidgetProvider.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { config, createConfig } from '@lifi/sdk';
+import { createContext, useContext, useId, useMemo } from 'react';
+import { version } from '../../config/version';
+import { setDefaultSettings } from '../../stores';
+import { formatInputAmount } from '../../utils';
+const initialContext = {
+    elementId: '',
+    integrator: '',
+};
+const WidgetContext = createContext(initialContext);
+export const useWidgetConfig = () => useContext(WidgetContext);
+let sdkInitialized = false;
+export const WidgetProvider = ({ children, config: widgetConfig }) => {
+    const elementId = useId();
+    if (!widgetConfig?.integrator) {
+        throw Error('Required property "integrator" is missing.');
+    }
+    const value = useMemo(() => {
+        try {
+            // Get search params from URL
+            const searchParams = Object.fromEntries(new URLSearchParams(window?.location.search));
+            // Prevent using fromToken/toToken params if chain is not selected
+            ['from', 'to'].forEach((key) => {
+                if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {
+                    delete searchParams[`${key}Token`];
+                }
+            });
+            // Create widget configuration object
+            const value = {
+                ...widgetConfig,
+                fromChain: (searchParams.fromChain &&
+                    !isNaN(parseInt(searchParams.fromChain, 10))) ||
+                    typeof widgetConfig.fromChain === 'number'
+                    ? parseInt(searchParams.fromChain, 10) || widgetConfig.fromChain
+                    : undefined,
+                toChain: (searchParams.toChain &&
+                    !isNaN(parseInt(searchParams.toChain, 10))) ||
+                    typeof widgetConfig.toChain === 'number'
+                    ? parseInt(searchParams.toChain, 10) || widgetConfig.toChain
+                    : undefined,
+                fromToken: searchParams.fromToken || widgetConfig.fromToken,
+                toToken: searchParams.toToken || widgetConfig.toToken,
+                fromAmount: typeof searchParams.fromAmount === 'string' &&
+                    !isNaN(parseFloat(searchParams.fromAmount))
+                    ? formatInputAmount(searchParams.fromAmount)
+                    : widgetConfig.fromAmount,
+                toAddress: searchParams.toAddress || widgetConfig.toAddress,
+                integrator: widgetConfig.integrator,
+                elementId,
+            };
+            // Set default settings for widget settings store
+            setDefaultSettings(value);
+            // Configure SDK
+            const _config = {
+                ...widgetConfig.sdkConfig,
+                apiKey: widgetConfig.apiKey,
+                integrator: widgetConfig.integrator ?? window?.location.hostname,
+                routeOptions: {
+                    fee: widgetConfig.fee,
+                    referrer: widgetConfig.referrer,
+                    order: widgetConfig.routePriority,
+                    slippage: widgetConfig.slippage,
+                    ...widgetConfig.sdkConfig?.routeOptions,
+                },
+                disableVersionCheck: true,
+                widgetVersion: version,
+                preloadChains: false,
+            };
+            if (!sdkInitialized) {
+                createConfig(_config);
+                sdkInitialized = true;
+            }
+            else {
+                config.set(_config);
+            }
+            return value;
+        }
+        catch (e) {
+            console.warn(e);
+            return {
+                ...widgetConfig,
+                elementId,
+                integrator: widgetConfig.integrator,
+            };
+        }
+    }, [elementId, widgetConfig]);
+    return (_jsx(WidgetContext.Provider, { value: value, children: children }));
+};

package/_esm/providers/WidgetProvider/types.js

@@ -0,0 +1 @@
+export {};

package/_esm/providers/WidgetProvider/utils.js

@@ -0,0 +1,6 @@
+export const isItemAllowed = (itemId, items) => {
+    if (items?.allow?.length) {
+        return items.allow.includes(itemId);
+    }
+    return !items?.deny?.includes(itemId);
+};

package/_esm/stores/StoreProvider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChainOrderStoreProvider } from './chains';
+import { HeaderStoreProvider } from './header';
+import { RouteExecutionStoreProvider } from './routes';
+import { SplitSubvariantStoreProvider } from './settings';
+export const StoreProvider = ({ children, config, }) => {
+    return (_jsx(SplitSubvariantStoreProvider, { state: config.subvariant === 'split'
+            ? config.subvariantOptions || 'swap'
+            : undefined, children: _jsx(HeaderStoreProvider, { namePrefix: config?.keyPrefix, children: _jsx(ChainOrderStoreProvider, { namePrefix: config?.keyPrefix, children: _jsx(RouteExecutionStoreProvider, { namePrefix: config?.keyPrefix, children: children }) }) }) }));
+};

package/_esm/stores/chains/ChainOrderStore.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useChains } from '../../hooks';
+import { FormKey } from '../../providers';
+import { createChainOrderStore } from './createChainOrderStore';
+export const ChainOrderStoreContext = createContext(null);
+export function ChainOrderStoreProvider({ children, ...props }) {
+    const storeRef = useRef();
+    const { chains: filteredChains } = useChains();
+    const { setValue, getValues } = useFormContext();
+    if (!storeRef.current) {
+        storeRef.current = createChainOrderStore(props);
+    }
+    useEffect(() => {
+        if (filteredChains) {
+            const chainOrder = storeRef.current
+                ?.getState()
+                .initializeChains(filteredChains.map((chain) => chain.id));
+            if (chainOrder) {
+                const [fromChainValue, toChainValue] = getValues([
+                    FormKey.FromChain,
+                    FormKey.ToChain,
+                ]);
+                if (!fromChainValue) {
+                    setValue(FormKey.FromChain, chainOrder[0]);
+                }
+                if (!toChainValue) {
+                    setValue(FormKey.ToChain, chainOrder[0]);
+                }
+            }
+        }
+    }, [filteredChains, getValues, setValue]);
+    return (_jsx(ChainOrderStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+export function useChainOrderStore(selector, equalityFn) {
+    const useStore = useContext(ChainOrderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+export function useChainOrderStoreContext() {
+    const useStore = useContext(ChainOrderStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${ChainOrderStoreProvider.name}>.`);
+    }
+    return useStore;
+}

package/_esm/stores/chains/createChainOrderStore.js

@@ -0,0 +1,49 @@
+import { persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+export const maxChainToOrder = 9;
+export const createChainOrderStore = ({ namePrefix }) => createWithEqualityFn(persist((set, get) => ({
+    chainOrder: [],
+    availableChains: [],
+    initializeChains: (chainIds) => {
+        set((state) => {
+            const chainOrder = state.chainOrder.filter((chainId) => chainIds.includes(chainId));
+            const chainsToAdd = chainIds.filter((chainId) => !chainOrder.includes(chainId));
+            if (chainOrder.length === maxChainToOrder || !chainsToAdd.length) {
+                return {
+                    availableChains: chainIds,
+                    chainOrder,
+                };
+            }
+            const chainsToAddLength = maxChainToOrder - chainOrder.length;
+            for (let index = 0; index < chainsToAddLength; index++) {
+                chainOrder.push(chainsToAdd[index]);
+            }
+            return {
+                availableChains: chainIds,
+                chainOrder,
+            };
+        });
+        return get().chainOrder;
+    },
+    setChain: (chainId) => {
+        const state = get();
+        if (state.chainOrder.includes(chainId) ||
+            !state.availableChains.includes(chainId)) {
+            return;
+        }
+        set((state) => {
+            const chainOrder = state.chainOrder.slice();
+            chainOrder.unshift(chainId);
+            if (chainOrder.length > maxChainToOrder) {
+                chainOrder.pop();
+            }
+            return {
+                chainOrder,
+            };
+        });
+    },
+}), {
+    name: `${namePrefix || 'li.fi'}-widget-chains-order`,
+    version: 0,
+    partialize: (state) => ({ chainOrder: state.chainOrder }),
+}), Object.is);

package/_esm/stores/chains/types.js

@@ -0,0 +1 @@
+export {};

package/_esm/stores/chains/useChainOrder.js

@@ -0,0 +1,5 @@
+import { shallow } from 'zustand/shallow';
+import { useChainOrderStore } from './ChainOrderStore';
+export const useChainOrder = () => {
+    return useChainOrderStore((state) => [state.chainOrder, state.setChain], shallow);
+};

package/_esm/stores/header/types.js

@@ -0,0 +1 @@
+export {};