@lifi/widget 2.9.4 → 3.0.0-alpha.0

package/cjs/pages/ActiveTransactionsPage/ActiveTransactionsPage.js

@@ -8,12 +8,12 @@ const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const ActiveTransactions_1 = require("../../components/ActiveTransactions");
 const Dialog_1 = require("../../components/Dialog");
-const providers_1 = require("../../providers");
+const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const ActiveTransactionsEmpty_1 = require("./ActiveTransactionsEmpty");
 const ActiveTransactionsPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { account } = (0, providers_1.useWallet)();
+    const { account } = (0, hooks_1.useAccount)();
     const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
     const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
     const headerStoreContext = (0, stores_1.useHeaderStoreContext)();

package/cjs/pages/LanguagesPage/LanguagesPage.d.ts

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

package/cjs/pages/LanguagesPage/LanguagesPage.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguagesPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_i18next_1 = require("react-i18next");
+const Check_1 = require("@mui/icons-material/Check");
+const material_1 = require("@mui/material");
+const ListItemText_1 = require("../../components/ListItemText");
+const SettingsListItemButton_1 = require("../../components/SettingsListItemButton");
+const hooks_1 = require("../../hooks");
+const LanguagesPage = () => {
+    const { selectedLanguageCode, availableLanguages, setLanguageWithCode } = (0, hooks_1.useLanguages)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    if (availableLanguages.length < 1) {
+        return null;
+    }
+    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: availableLanguages.map((language) => ((0, jsx_runtime_1.jsxs)(SettingsListItemButton_1.SettingsListItemButton, { onClick: () => setLanguageWithCode(language), children: [(0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: t('language.name', { lng: language }) }), selectedLanguageCode === language && (0, jsx_runtime_1.jsx)(Check_1.default, { color: "primary" })] }, language))) }) }));
+};
+exports.LanguagesPage = LanguagesPage;

package/cjs/pages/LanguagesPage/index.d.ts

@@ -0,0 +1 @@
+export * from './LanguagesPage';

package/cjs/pages/LanguagesPage/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("./LanguagesPage"), exports);

package/cjs/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -2,17 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectEnabledToolsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CheckBox_1 = require("@mui/icons-material/CheckBox");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+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 shallow_1 = require("zustand/shallow");
 const ListItemText_1 = require("../../components/ListItemText");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
-const SelectEnabledToolsPage_style_1 = require("./SelectEnabledToolsPage.style");
+const SettingsListItemButton_1 = require("../../components/SettingsListItemButton");
+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)();
@@ -44,11 +52,13 @@ const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return headerStoreContext.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? ((0, jsx_runtime_1.jsx)(CheckBoxOutlined_1.default, {})) : enabledTools.length ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBoxOutlined_1.default, {})) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {})) }));
+        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)(SelectEnabledToolsPage_style_1.ListItemButton, { 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)(CheckBox_1.default, { color: "primary" })) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, {}))] }, tool.name))) }) }));
+            }, 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/SelectTokenPage/SelectTokenPage.d.ts

@@ -1,3 +1,3 @@
 import type { FC } from 'react';
-import { type FormTypeProps } from '../../providers';
+import type { FormTypeProps } from '../../providers';
 export declare const SelectTokenPage: FC<FormTypeProps>;

package/cjs/pages/SelectWalletPage/EVMListItemButton.d.ts

@@ -0,0 +1,8 @@
+import type { Connector } from 'wagmi';
+interface EVMListItemButtonProps {
+    connectedConnector?: Connector;
+    connector: Connector;
+    onNotInstalled(connector: Connector): void;
+}
+export declare const EVMListItemButton: ({ connectedConnector, connector, onNotInstalled, }: EVMListItemButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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.d.ts

@@ -0,0 +1,6 @@
+import type { Wallet } from '@solana/wallet-adapter-react';
+interface SVMListItemButtonProps {
+    wallet: Wallet;
+}
+export declare const SVMListItemButton: ({ wallet }: SVMListItemButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -4,19 +4,21 @@ 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 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 ListItemButton_1 = require("../../components/ListItemButton");
-const ListItemText_1 = require("../../components/ListItemText");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
+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 { navigateBack } = (0, hooks_1.useNavigateBack)();
-    const { connect } = (0, providers_1.useWallet)();
+    const account = (0, wagmi_1.useAccount)();
+    const { connectors } = (0, wagmi_1.useConnect)();
     const [walletIdentity, setWalletIdentity] = (0, react_1.useState)({ show: false });
-    const [wallets, setWallets] = (0, react_1.useState)();
+    const { wallets: solanaWallets } = (0, wallet_adapter_react_1.useWallet)();
     const isDesktopView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.up('sm'));
     const closeDialog = () => {
         setWalletIdentity((state) => ({
@@ -24,36 +26,33 @@ const SelectWalletPage = () => {
             show: false,
         }));
     };
-    const handleConnect = (0, react_1.useCallback)(async (wallet) => {
-        const identityCheckPassed = await wallet.installed();
-        if (!identityCheckPassed) {
-            setWalletIdentity({
-                show: true,
-                wallet,
-            });
-            return;
-        }
-        navigateBack();
-        await connect(wallet);
-    }, [connect, navigateBack]);
-    (0, react_1.useEffect)(() => {
-        Promise.all(wallet_management_1.supportedWallets.map((wallet) => wallet.installed())).then((installed) => {
-            // separate into installed and not installed wallets
-            const installedWallets = wallet_management_1.supportedWallets.filter((_, index) => installed[index]);
-            // always remove Default Wallet from not installed Wallets
-            const notInstalledWallets = wallet_management_1.supportedWallets.filter((wallet, index) => !installed[index] && wallet.name !== 'Default Wallet');
-            const allowedWallets = [...installedWallets];
-            if (isDesktopView) {
-                allowedWallets.push(...notInstalledWallets);
-            }
-            setWallets(allowedWallets);
+    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((wallet) => ((0, jsx_runtime_1.jsxs)(ListItemButton_1.ListItemButton, { onClick: () => handleConnect(wallet), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: wallet.name })] }, wallet.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.wallet?.name,
+                }, 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/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Wallet } from '@solana/wallet-adapter-react';
+import type { Connector } from 'wagmi';
+export declare const walletComparator: (a: Connector | Wallet, b: Connector | Wallet) => number;

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/{pages/SettingsPage/EnabledToolsButton.d.ts → cjs/pages/SettingsPage/BridgeAndExchangeSettings.d.ts}

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const EnabledToolsButton: React.FC<{
+export declare const BridgeAndExchangeSettings: React.FC<{
     type: 'Bridges' | 'Exchanges';
 }>;

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 react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const shallow_1 = require("zustand/shallow");
+const AirlineStops_1 = require("@mui/icons-material/AirlineStops");
+const SwapHoriz_1 = require("@mui/icons-material/SwapHoriz");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const hooks_1 = require("../../hooks");
+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.d.ts

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

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 stores_1 = require("../../stores");
+const Tabs_1 = require("../../components/Tabs");
+const hooks_1 = require("../../hooks");
+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.d.ts

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

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 react_router_dom_1 = require("react-router-dom");
+const react_i18next_1 = require("react-i18next");
+const Language_1 = require("@mui/icons-material/Language");
+const providers_1 = require("../../providers");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const hooks_1 = require("../../hooks");
+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

@@ -7,50 +7,23 @@ const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Dialog_1 = require("../../components/Dialog");
 const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
 const ResetSettingsButton_style_1 = require("./ResetSettingsButton.style");
 const icons_material_1 = require("@mui/icons-material");
-const shallow_1 = require("zustand/shallow");
 const ResetSettingsButton = () => {
-    const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] = (0, stores_1.useSettingsStore)((state) => [
-        state.enabledBridges,
-        state.enabledExchanges,
-        state.routePriority,
-        state.slippage,
-        state.gasPrice,
-    ], shallow_1.shallow);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { tools } = (0, hooks_1.useTools)();
-    const config = (0, providers_1.useWidgetConfig)();
-    const resetSettings = (0, stores_1.useSettingsStore)((state) => state.reset);
+    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 = () => {
-        if (tools) {
-            resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
-            (0, stores_1.setDefaultSettings)(config);
-        }
+        reset();
         toggleDialog();
     };
-    const isSlippageChanged = config.slippage
-        ? Number(slippage) !== config.slippage * 100
-        : slippage !== stores_1.defaultConfigurableSettings.slippage;
-    const isRoutePriorityChanged = config.routePriority
-        ? routePriority !== config.routePriority
-        : routePriority !== stores_1.defaultConfigurableSettings.routePriority;
-    const isGasPriceChanged = gasPrice !== stores_1.defaultConfigurableSettings.gasPrice;
-    const isCustomRouteSettings = tools?.bridges?.length !== enabledBridges?.length ||
-        tools?.exchanges?.length !== enabledExchanges?.length ||
-        isSlippageChanged ||
-        isRoutePriorityChanged ||
-        isGasPriceChanged;
     if (!isCustomRouteSettings) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, mt: 1.5, 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)(icons_material_1.InfoRounded, { sx: {
+    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)(icons_material_1.InfoRounded, { 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') })] })] })] }) }));
 };

package/cjs/pages/SettingsPage/RoutePrioritySettings.d.ts

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

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 react_i18next_1 = require("react-i18next");
+const Route_1 = require("@mui/icons-material/Route");
+const sdk_1 = require("@lifi/sdk");
+const Tabs_1 = require("../../components/Tabs");
+const stores_1 = require("../../stores");
+const hooks_1 = require("../../hooks");
+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.d.ts

@@ -0,0 +1 @@
+export declare const SendToWalletOptionSetting: () => import("react/jsx-runtime").JSX.Element | null;

package/cjs/pages/SettingsPage/{ShowDestinationWallet.js → SendToWalletOptionSetting.js}

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShowDestinationWallet = void 0;
+exports.SendToWalletOptionSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
+const Wallet_1 = require("@mui/icons-material/Wallet");
 const Switch_1 = require("../../components/Switch");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const types_1 = require("../../types");
-const ShowDestinationWallet = () => {
+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);
@@ -21,10 +22,6 @@ const ShowDestinationWallet = () => {
         setValue('showDestinationWallet', checked);
         setSendToWallet(false);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, pt: 2, pb: 1.5, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", color: "text.primary", lineHeight: "normal", children: t(`settings.showDestinationWallet`) }) }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: showDestinationWallet, onChange: onChange })] }) }));
+    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.ShowDestinationWallet = ShowDestinationWallet;
+exports.SendToWalletOptionSetting = SendToWalletOptionSetting;

package/cjs/pages/SettingsPage/SettingsCard/BadgedValue.d.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+import type { BadgeProps } from '@mui/material';
+interface BadgedValueProps {
+    showBadge: boolean;
+    badgeColor?: BadgeProps['color'];
+}
+export declare const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>>;
+export {};

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.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from 'react';
+export declare const SettingCard: React.FC<PropsWithChildren>;

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;