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

package/_cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectEnabledToolsPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Check_1 = require("@mui/icons-material/Check");
+const CheckBoxOutlineBlankOutlined_1 = require("@mui/icons-material/CheckBoxOutlineBlankOutlined");
+const CheckBoxOutlined_1 = require("@mui/icons-material/CheckBoxOutlined");
+const IndeterminateCheckBoxOutlined_1 = require("@mui/icons-material/IndeterminateCheckBoxOutlined");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const shallow_1 = require("zustand/shallow");
+const ListItemText_1 = require("../../components/ListItemText");
+const SettingsListItemButton_1 = require("../../components/SettingsListItemButton");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const SelectAllCheckbox = ({ allCheckboxesSelected, anyCheckboxesSelected, onClick, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const tooltipTitle = allCheckboxesSelected
+        ? t('tooltip.deselectAll')
+        : t('tooltip.selectAll');
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: tooltipTitle, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: onClick, children: allCheckboxesSelected ? ((0, jsx_runtime_1.jsx)(CheckBoxOutlined_1.default, {})) : anyCheckboxesSelected ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBoxOutlined_1.default, {})) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {})) }) }));
+};
+const SelectEnabledToolsPage = ({ type }) => {
+    const typeKey = type.toLowerCase();
+    const { tools } = (0, hooks_1.useTools)();
+    const [enabledTools, setTools] = (0, stores_1.useSettingsStore)((state) => [state[`enabled${type}`], state.setTools], shallow_1.shallow);
+    const headerStoreContext = (0, stores_1.useHeaderStoreContext)();
+    const handleClick = (key) => {
+        if (!tools) {
+            return;
+        }
+        const toolKeys = tools[typeKey].map((tool) => tool.key);
+        if (enabledTools?.includes(key)) {
+            setTools(type, enabledTools.filter((toolKey) => toolKey !== key), toolKeys);
+        }
+        else {
+            setTools(type, [...enabledTools, key], toolKeys);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const allToolsSelected = tools?.[typeKey].length === enabledTools.length;
+        const toggleCheckboxes = () => {
+            if (!tools) {
+                return;
+            }
+            const toolKeys = tools[typeKey].map((tool) => tool.key);
+            if (allToolsSelected) {
+                setTools(type, [], toolKeys);
+            }
+            else {
+                setTools(type, toolKeys, toolKeys);
+            }
+        };
+        return headerStoreContext
+            .getState()
+            .setAction((0, jsx_runtime_1.jsx)(SelectAllCheckbox, { allCheckboxesSelected: allToolsSelected, anyCheckboxesSelected: !!enabledTools.length, onClick: toggleCheckboxes }));
+    }, [enabledTools.length, headerStoreContext, setTools, tools, type, typeKey]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            }, children: tools?.[typeKey].map((tool) => ((0, jsx_runtime_1.jsxs)(SettingsListItemButton_1.SettingsListItemButton, { onClick: () => handleClick(tool.key), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) && (0, jsx_runtime_1.jsx)(Check_1.default, { color: "primary" })] }, tool.name))) }) }));
+};
+exports.SelectEnabledToolsPage = SelectEnabledToolsPage;

package/_cjs/pages/SelectEnabledToolsPage/index.js

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

package/_cjs/pages/SelectNativeTokenPage/SelectNativeTokenPage.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectNativeTokenPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const ListItemButton_1 = require("../../components/ListItemButton");
+const ListItemText_1 = require("../../components/ListItemText");
+const TokenAvatar_1 = require("../../components/TokenAvatar");
+const TokenList_1 = require("../../components/TokenList");
+const hooks_1 = require("../../hooks");
+const SelectNativeTokenPage = ({ formType, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { chains } = (0, hooks_1.useChains)();
+    const selectToken = (0, TokenList_1.useTokenSelect)(formType, navigateBack);
+    return ((0, jsx_runtime_1.jsx)(material_1.Container, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(material_1.List, { sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            }, children: chains?.map((chain) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => selectToken(chain.nativeToken.address, chain.id), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: chain.nativeToken, chain: chain }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: chain.nativeToken.symbol, secondary: t('main.onChain', { chainName: chain.name }) })] }, chain.id))) }) }));
+};
+exports.SelectNativeTokenPage = SelectNativeTokenPage;

package/_cjs/pages/SelectNativeTokenPage/index.js

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

package/_cjs/pages/SelectTokenPage/SearchTokenInput.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchTokenInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Search_1 = require("@mui/icons-material/Search");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const Card_1 = require("../../components/Card");
+const providers_1 = require("../../providers");
+const SearchTokenInput_style_1 = require("./SearchTokenInput.style");
+const SearchTokenInput = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { register, setValue } = (0, react_hook_form_1.useFormContext)();
+    (0, react_1.useEffect)(() => () => {
+        setValue(providers_1.FormKey.TokenSearchFilter, '');
+    }, [setValue]);
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_style_1.Input, { size: "small", placeholder: t(`main.tokenSearch`), defaultValue: "", endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), inputProps: {
+                    inputMode: 'search',
+                    ...register(providers_1.FormKey.TokenSearchFilter),
+                }, autoComplete: "off" }) }) }));
+};
+exports.SearchTokenInput = SearchTokenInput;

package/_cjs/pages/SelectTokenPage/SearchTokenInput.style.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const styles_1 = require("@mui/material/styles");
+const Input_1 = require("../../components/Input");
+exports.Input = (0, styles_1.styled)(Input_1.Input)(({ theme }) => ({
+    paddingRight: theme.spacing(1.5),
+}));

package/_cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectTokenPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const ChainSelect_1 = require("../../components/ChainSelect");
+const TokenList_1 = require("../../components/TokenList");
+const hooks_1 = require("../../hooks");
+const SearchTokenInput_1 = require("./SearchTokenInput");
+const minTokenListHeight = 360;
+const SelectTokenPage = ({ formType }) => {
+    (0, hooks_1.useScrollableOverflowHidden)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const headerRef = (0, react_1.useRef)(null);
+    const contentHeight = (0, hooks_1.useContentHeight)();
+    const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
+    const swapOnly = (0, hooks_1.useSwapOnly)();
+    (0, react_1.useLayoutEffect)(() => {
+        setTokenListHeight(Math.max(contentHeight - (headerRef.current?.offsetHeight ?? 0), minTokenListHeight));
+    }, [contentHeight]);
+    const hideChainSelect = swapOnly && formType === 'to';
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { pt: 1, pb: 2, px: 3, ref: headerRef, children: [!hideChainSelect ? (0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: !hideChainSelect ? 2 : 0, children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) })] }), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] }));
+};
+exports.SelectTokenPage = SelectTokenPage;

package/_cjs/pages/SelectTokenPage/index.js

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

package/_cjs/pages/SelectTokenPage/types.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenFilterType = void 0;
+var TokenFilterType;
+(function (TokenFilterType) {
+    TokenFilterType[TokenFilterType["My"] = 0] = "My";
+    TokenFilterType[TokenFilterType["All"] = 1] = "All";
+})(TokenFilterType || (exports.TokenFilterType = TokenFilterType = {}));

package/_cjs/pages/SelectWalletPage/EVMListItemButton.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVMListItemButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@lifi/sdk");
+const wallet_management_1 = require("@lifi/wallet-management");
+const material_1 = require("@mui/material");
+const wagmi_1 = require("wagmi");
+const ListItemButton_1 = require("../../components/ListItemButton");
+const ListItemText_1 = require("../../components/ListItemText");
+const hooks_1 = require("../../hooks");
+const types_1 = require("../../types");
+const EVMListItemButton = ({ connectedConnector, connector, onNotInstalled, }) => {
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const emitter = (0, hooks_1.useWidgetEvents)();
+    const { connectAsync } = (0, wagmi_1.useConnect)();
+    const { disconnectAsync } = (0, wagmi_1.useDisconnect)();
+    const handleEVMConnect = async () => {
+        const identityCheckPassed = await (0, wallet_management_1.isWalletInstalledAsync)(connector.id);
+        if (!identityCheckPassed) {
+            onNotInstalled(connector);
+            return;
+        }
+        if (connectedConnector) {
+            await disconnectAsync({ connector: connectedConnector });
+        }
+        await connectAsync({ connector }, {
+            onSuccess(data) {
+                emitter.emit(types_1.WidgetEvent.WalletConnected, {
+                    address: data.accounts[0],
+                    chainId: data.chainId,
+                    chainType: sdk_1.ChainType.EVM,
+                });
+            },
+        });
+        navigateBack();
+    };
+    return ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: handleEVMConnect, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: connector.icon || (0, wallet_management_1.getWalletIcon)(connector.id), alt: connector.name, children: connector.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: connector.name })] }, connector.uid));
+};
+exports.EVMListItemButton = EVMListItemButton;

package/_cjs/pages/SelectWalletPage/SVMListItemButton.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVMListItemButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@lifi/sdk");
+const material_1 = require("@mui/material");
+const wallet_adapter_react_1 = require("@solana/wallet-adapter-react");
+const ListItemButton_1 = require("../../components/ListItemButton");
+const ListItemText_1 = require("../../components/ListItemText");
+const hooks_1 = require("../../hooks");
+const types_1 = require("../../types");
+const SVMListItemButton = ({ wallet }) => {
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const emitter = (0, hooks_1.useWidgetEvents)();
+    const { select, disconnect, connected } = (0, wallet_adapter_react_1.useWallet)();
+    const connect = async () => {
+        if (connected) {
+            await disconnect();
+        }
+        select(wallet.adapter.name);
+        // We use autoConnect on wallet selection
+        // await solanaConnect();
+        wallet.adapter.once('connect', (publicKey) => {
+            emitter.emit(types_1.WidgetEvent.WalletConnected, {
+                address: publicKey?.toString(),
+                chainId: sdk_1.ChainId.SOL,
+                chainType: sdk_1.ChainType.SVM,
+            });
+        });
+        navigateBack();
+    };
+    return ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: connect, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: wallet.adapter.icon, alt: wallet.adapter.name, children: wallet.adapter.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: `${wallet.adapter.name} (Solana)` })] }, wallet.adapter.name));
+};
+exports.SVMListItemButton = SVMListItemButton;

package/_cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectWalletPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const wallet_management_1 = require("@lifi/wallet-management");
+const material_1 = require("@mui/material");
+const useMediaQuery_1 = require("@mui/material/useMediaQuery");
+const wallet_adapter_base_1 = require("@solana/wallet-adapter-base");
+const wallet_adapter_react_1 = require("@solana/wallet-adapter-react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const wagmi_1 = require("wagmi");
+const Dialog_1 = require("../../components/Dialog");
+const EVMListItemButton_1 = require("./EVMListItemButton");
+const SVMListItemButton_1 = require("./SVMListItemButton");
+const utils_1 = require("./utils");
+const SelectWalletPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const account = (0, wagmi_1.useAccount)();
+    const { connectors } = (0, wagmi_1.useConnect)();
+    const [walletIdentity, setWalletIdentity] = (0, react_1.useState)({ show: false });
+    const { wallets: solanaWallets } = (0, wallet_adapter_react_1.useWallet)();
+    const isDesktopView = (0, useMediaQuery_1.default)((theme) => theme.breakpoints.up('sm'));
+    const closeDialog = () => {
+        setWalletIdentity((state) => ({
+            ...state,
+            show: false,
+        }));
+    };
+    const handleNotInstalled = (0, react_1.useCallback)(async (connector) => {
+        setWalletIdentity({
+            show: true,
+            connector,
+        });
+    }, []);
+    const wallets = (0, react_1.useMemo)(() => {
+        const evmInstalled = connectors.filter((connector) => (0, wallet_management_1.isWalletInstalled)(connector.id) &&
+            // We should not show already connected connectors
+            account.connector?.id !== connector.id);
+        const evmNotDetected = connectors.filter((connector) => !(0, wallet_management_1.isWalletInstalled)(connector.id));
+        const svmInstalled = solanaWallets?.filter((connector) => connector.adapter.readyState === wallet_adapter_base_1.WalletReadyState.Installed &&
+            // We should not show already connected connectors
+            !connector.adapter.connected);
+        const svmNotDetected = solanaWallets?.filter((connector) => connector.adapter.readyState !== wallet_adapter_base_1.WalletReadyState.Installed);
+        const installedWallets = [...evmInstalled, ...svmInstalled].sort(utils_1.walletComparator);
+        if (isDesktopView) {
+            const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(utils_1.walletComparator);
+            installedWallets.push(...notDetectedWallets);
+        }
+        return installedWallets;
+    }, [account.connector?.id, connectors, isDesktopView, solanaWallets]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(material_1.List, { sx: {
+                    paddingLeft: 1.5,
+                    paddingRight: 1.5,
+                }, children: wallets?.map((connector) => connector.uid ? ((0, jsx_runtime_1.jsx)(EVMListItemButton_1.EVMListItemButton, { connector: connector, connectedConnector: account.connector, onNotInstalled: handleNotInstalled }, connector.uid)) : ((0, jsx_runtime_1.jsx)(SVMListItemButton_1.SVMListItemButton, { wallet: connector }, connector.adapter.name))) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('wallet.extensionNotFound', {
+                                name: walletIdentity.connector?.name,
+                            }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: closeDialog, autoFocus: true, children: t('button.ok') }) })] })] }));
+};
+exports.SelectWalletPage = SelectWalletPage;

package/_cjs/pages/SelectWalletPage/index.js

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

package/_cjs/pages/SelectWalletPage/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.walletComparator = void 0;
+const wallet_management_1 = require("@lifi/wallet-management");
+const walletComparator = (a, b) => {
+    let aId = a.id || a.adapter?.name;
+    let bId = b.id || b.adapter?.name;
+    const priorityA = (0, wallet_management_1.getWalletPriority)(aId);
+    const priorityB = (0, wallet_management_1.getWalletPriority)(bId);
+    if (priorityA !== priorityB) {
+        return priorityA - priorityB;
+    }
+    if (aId < bId) {
+        return -1;
+    }
+    if (aId > bId) {
+        return 1;
+    }
+    return 0;
+};
+exports.walletComparator = walletComparator;

package/_cjs/pages/SettingsPage/BridgeAndExchangeSettings.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BridgeAndExchangeSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AirlineStops_1 = require("@mui/icons-material/AirlineStops");
+const SwapHoriz_1 = require("@mui/icons-material/SwapHoriz");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const shallow_1 = require("zustand/shallow");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const SettingsCard_1 = require("./SettingsCard");
+const supportedIcons = {
+    Bridges: AirlineStops_1.default,
+    Exchanges: SwapHoriz_1.default,
+};
+const BridgeAndExchangeSettings = ({ type }) => {
+    const { isBridgesChanged, isExchangesChanged } = (0, hooks_1.useSettingMonitor)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const [enabledTools, tools] = (0, stores_1.useSettingsStore)((state) => {
+        const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
+        return [enabledTools.filter(Boolean).length, enabledTools.length];
+    }, shallow_1.shallow);
+    const customisationLookUp = {
+        Bridges: isBridgesChanged,
+        Exchanges: isExchangesChanged,
+    };
+    const handleClick = () => {
+        navigate(utils_1.navigationRoutes[type.toLowerCase()]);
+    };
+    const Icon = supportedIcons[type];
+    return ((0, jsx_runtime_1.jsx)(SettingsCard_1.SettingCardButton, { onClick: handleClick, icon: (0, jsx_runtime_1.jsx)(Icon, {}), title: t(`settings.enabled${type}`), children: (0, jsx_runtime_1.jsx)(SettingsCard_1.BadgedValue, { badgeColor: "info", showBadge: customisationLookUp[type], children: `${enabledTools}/${tools}` }) }));
+};
+exports.BridgeAndExchangeSettings = BridgeAndExchangeSettings;

package/_cjs/pages/SettingsPage/GasPriceSettings.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasPriceSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const react_i18next_1 = require("react-i18next");
+const Tabs_1 = require("../../components/Tabs");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const SettingsCard_1 = require("./SettingsCard");
+const GasPriceSettings = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
+    const { isGasPriceChanged } = (0, hooks_1.useSettingMonitor)();
+    const { gasPrice } = (0, stores_1.useSettings)(['gasPrice']);
+    const handleGasPriceChange = (_, gasPrice) => {
+        setValue('gasPrice', gasPrice);
+    };
+    return ((0, jsx_runtime_1.jsx)(SettingsCard_1.SettingCardExpandable, { value: (0, jsx_runtime_1.jsx)(SettingsCard_1.BadgedValue, { badgeColor: "info", showBadge: isGasPriceChanged, children: t(`settings.gasPrice.${gasPrice}`) }), icon: (0, jsx_runtime_1.jsx)(EvStation_1.default, {}), title: t(`settings.gasPrice.title`), children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { value: gasPrice, "aria-label": "tabs", indicatorColor: "primary", onChange: handleGasPriceChange, sx: { mt: 1.5 }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: t(`settings.gasPrice.slow`), value: "slow", disableRipple: true }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: t(`settings.gasPrice.normal`), value: "normal", disableRipple: true }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: t(`settings.gasPrice.fast`), value: "fast", disableRipple: true })] }) }));
+};
+exports.GasPriceSettings = GasPriceSettings;

package/_cjs/pages/SettingsPage/LanguageSetting.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguageSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Language_1 = require("@mui/icons-material/Language");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const SettingsCard_1 = require("./SettingsCard");
+const LanguageSetting = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const { selectedLanguageDisplayName } = (0, hooks_1.useLanguages)();
+    if (hiddenUI?.includes(types_1.HiddenUI.Language)) {
+        return null;
+    }
+    const handleClick = () => {
+        navigate(utils_1.navigationRoutes.languages);
+    };
+    return ((0, jsx_runtime_1.jsx)(SettingsCard_1.SettingCardButton, { onClick: handleClick, icon: (0, jsx_runtime_1.jsx)(Language_1.default, {}), title: t(`language.title`), children: (0, jsx_runtime_1.jsx)(SettingsCard_1.SummaryValue, { children: selectedLanguageDisplayName }) }));
+};
+exports.LanguageSetting = LanguageSetting;

package/_cjs/pages/SettingsPage/ResetSettingsButton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetSettingsButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InfoRounded_1 = require("@mui/icons-material/InfoRounded");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const Dialog_1 = require("../../components/Dialog");
+const hooks_1 = require("../../hooks");
+const ResetSettingsButton_style_1 = require("./ResetSettingsButton.style");
+const ResetSettingsButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { isCustomRouteSettings, reset } = (0, hooks_1.useSettingMonitor)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleDialog = (0, react_1.useCallback)(() => {
+        setOpen((open) => !open);
+    }, []);
+    const handleReset = () => {
+        reset();
+        toggleDialog();
+    };
+    if (!isCustomRouteSettings) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, mb: 1, children: (0, jsx_runtime_1.jsxs)(ResetSettingsButton_style_1.ResetButtonContainer, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", marginBottom: "12px", children: [(0, jsx_runtime_1.jsx)(InfoRounded_1.default, { sx: {
+                                marginRight: '8px',
+                            } }), (0, jsx_runtime_1.jsx)(material_1.Box, { fontSize: 14, children: t(`settings.resetSettings`) })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.resetSettings') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }) }));
+};
+exports.ResetSettingsButton = ResetSettingsButton;

package/_cjs/pages/SettingsPage/ResetSettingsButton.style.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetButtonContainer = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.ResetButtonContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    background: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
+    borderRadius: '16px',
+    padding: '16px',
+    [`svg`]: {
+        fill: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '40%'),
+    },
+}));

package/_cjs/pages/SettingsPage/RoutePrioritySettings.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoutePrioritySettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@lifi/sdk");
+const Route_1 = require("@mui/icons-material/Route");
+const react_i18next_1 = require("react-i18next");
+const Tabs_1 = require("../../components/Tabs");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const SettingsCard_1 = require("./SettingsCard");
+const RoutePrioritySettings = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
+    const { isRoutePriorityChanged } = (0, hooks_1.useSettingMonitor)();
+    const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
+    const currentRoutePriority = routePriority ?? '';
+    const handleRoutePriorityChange = (_, routePriority) => {
+        setValue('routePriority', routePriority);
+    };
+    return ((0, jsx_runtime_1.jsx)(SettingsCard_1.SettingCardExpandable, { value: (0, jsx_runtime_1.jsx)(SettingsCard_1.BadgedValue, { badgeColor: "info", showBadge: isRoutePriorityChanged, children: t(`main.tags.${currentRoutePriority.toLowerCase()}`) }), icon: (0, jsx_runtime_1.jsx)(Route_1.default, {}), title: t(`settings.routePriority`), children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs, { value: currentRoutePriority, "aria-label": "tabs", indicatorColor: "primary", onChange: handleRoutePriorityChange, orientation: "vertical", sx: { mt: 1.5 }, children: sdk_1.Orders.map((order) => {
+                return ((0, jsx_runtime_1.jsx)(Tabs_1.Tab, { label: t(`main.tags.${order.toLowerCase()}`), value: order, disableRipple: true }, order));
+            }) }) }));
+};
+exports.RoutePrioritySettings = RoutePrioritySettings;

package/_cjs/pages/SettingsPage/SendToWalletOptionSetting.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SendToWalletOptionSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Wallet_1 = require("@mui/icons-material/Wallet");
+const react_i18next_1 = require("react-i18next");
+const Switch_1 = require("../../components/Switch");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const types_1 = require("../../types");
+const SettingsCard_1 = require("./SettingsCard");
+const SendToWalletOptionSetting = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const setSendToWallet = (0, stores_1.useSendToWalletStore)((state) => state.setSendToWallet);
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
+    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    if (hiddenUI?.includes(types_1.HiddenUI.ToAddress)) {
+        return null;
+    }
+    const onChange = (_, checked) => {
+        setValue('showDestinationWallet', checked);
+        setSendToWallet(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(SettingsCard_1.SettingCard, { children: (0, jsx_runtime_1.jsxs)(SettingsCard_1.SummaryRowContainer, { children: [(0, jsx_runtime_1.jsxs)(SettingsCard_1.SummaryTitleContainer, { children: [(0, jsx_runtime_1.jsx)(Wallet_1.default, {}), (0, jsx_runtime_1.jsx)(SettingsCard_1.SummaryValue, { children: t(`settings.sendToWalletOption`) })] }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: showDestinationWallet, onChange: onChange })] }) }));
+};
+exports.SendToWalletOptionSetting = SendToWalletOptionSetting;

package/_cjs/pages/SettingsPage/SettingsCard/BadgedValue.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgedValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SettingCard_style_1 = require("./SettingCard.style");
+const BadgedValue = ({ showBadge, badgeColor, children, }) => showBadge && badgeColor ? ((0, jsx_runtime_1.jsx)(SettingCard_style_1.Badge, { variant: "dot", color: badgeColor, children: (0, jsx_runtime_1.jsx)(SettingCard_style_1.SummaryValue, { children: children }) })) : ((0, jsx_runtime_1.jsx)(SettingCard_style_1.SummaryValue, { children: children }));
+exports.BadgedValue = BadgedValue;

package/_cjs/pages/SettingsPage/SettingsCard/SettingCard.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Card_1 = require("../../../components/Card");
+const SettingCard = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { variant: "default", selectionColor: "primary", sx: {
+            p: 2,
+        }, children: children }));
+};
+exports.SettingCard = SettingCard;