@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.9.3",
+  "version": "3.0.0-alpha.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -39,31 +39,31 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@ethersproject/abstract-signer": "^5.7.0",
-    "@ethersproject/address": "^5.7.0",
-    "@ethersproject/experimental": "^5.7.0",
-    "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.4.3",
-    "@lifi/wallet-management": "^2.5.2",
-    "@mui/icons-material": "^5.14.14",
-    "@mui/lab": "^5.0.0-alpha.149",
-    "@mui/material": "^5.14.14",
-    "@tanstack/react-query": "^4.36.1",
+    "@lifi/sdk": "^3.0.0-alpha.36",
+    "@lifi/wallet-management": "^3.0.0-alpha.0",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/lab": "^5.0.0-alpha.154",
+    "@mui/material": "^5.14.19",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-wallets": "^0.19.23",
+    "@solana/web3.js": "^1.87.6",
+    "@tanstack/react-query": "^5.12.0",
     "@tanstack/react-virtual": "^3.0.0-beta.68",
-    "big.js": "^6.2.1",
-    "i18next": "^23.6.0",
-    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next": "^23.7.7",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.47.0",
-    "react-i18next": "^13.3.1",
-    "react-intersection-observer": "^9.5.2",
-    "react-router-dom": "^6.17.0",
+    "react-hook-form": "^7.48.2",
+    "react-i18next": "^13.5.0",
+    "react-intersection-observer": "^9.5.3",
+    "react-router-dom": "^6.20.0",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "zustand": "^4.4.4"
+    "viem": "^2.0.0-beta.6",
+    "wagmi": "^2.0.0-beta.5",
+    "zustand": "^4.4.7"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.js

@@ -5,12 +5,12 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActiveTransactionItem } from '../../components/ActiveTransactions';
 import { Dialog } from '../../components/Dialog';
-import { useWallet } from '../../providers';
+import { useAccount } from '../../hooks';
 import { useExecutingRoutesIds, useHeaderStoreContext, useRouteExecutionStore, } from '../../stores';
 import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
 export const ActiveTransactionsPage = () => {
     const { t } = useTranslation();
-    const { account } = useWallet();
+    const { account } = useAccount();
     const executingRoutes = useExecutingRoutesIds(account.address);
     const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
     const headerStoreContext = useHeaderStoreContext();

package/pages/LanguagesPage/LanguagesPage.d.ts

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

package/pages/LanguagesPage/LanguagesPage.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import CheckIcon from '@mui/icons-material/Check';
+import { Container, List } from '@mui/material';
+import { ListItemText } from '../../components/ListItemText';
+import { SettingsListItemButton } from '../../components/SettingsListItemButton';
+import { useLanguages } from '../../hooks';
+export const LanguagesPage = () => {
+    const { selectedLanguageCode, availableLanguages, setLanguageWithCode } = useLanguages();
+    const { t } = useTranslation();
+    if (availableLanguages.length < 1) {
+        return null;
+    }
+    return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
+                paddingLeft: 1.5,
+                paddingRight: 1.5,
+            }, children: availableLanguages.map((language) => (_jsxs(SettingsListItemButton, { onClick: () => setLanguageWithCode(language), children: [_jsx(ListItemText, { primary: t('language.name', { lng: language }) }), selectedLanguageCode === language && _jsx(CheckIcon, { color: "primary" })] }, language))) }) }));
+};

package/pages/LanguagesPage/index.d.ts

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

package/pages/LanguagesPage/index.js

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

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.js

@@ -1,15 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import CheckIcon from '@mui/icons-material/Check';
 import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
 import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
-import { Avatar, Container, IconButton, List, ListItemAvatar, } from '@mui/material';
-import { useEffect } from 'react';
+import { Avatar, Container, IconButton, List, ListItemAvatar, Tooltip, } from '@mui/material';
 import { shallow } from 'zustand/shallow';
 import { ListItemText } from '../../components/ListItemText';
 import { useTools } from '../../hooks';
 import { useHeaderStoreContext, useSettingsStore } from '../../stores';
-import { ListItemButton } from './SelectEnabledToolsPage.style';
+import { SettingsListItemButton } from '../../components/SettingsListItemButton';
+const SelectAllCheckbox = ({ allCheckboxesSelected, anyCheckboxesSelected, onClick, }) => {
+    const { t } = useTranslation();
+    const tooltipTitle = allCheckboxesSelected
+        ? t('tooltip.deselectAll')
+        : t('tooltip.selectAll');
+    return (_jsx(Tooltip, { title: tooltipTitle, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "end", onClick: onClick, children: allCheckboxesSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : anyCheckboxesSelected ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }) }));
+};
 export const SelectEnabledToolsPage = ({ type }) => {
     const typeKey = type.toLowerCase();
     const { tools } = useTools();
@@ -41,10 +49,12 @@ export const SelectEnabledToolsPage = ({ type }) => {
                 setTools(type, toolKeys, toolKeys);
             }
         };
-        return headerStoreContext.getState().setAction(_jsx(IconButton, { size: "medium", edge: "end", onClick: toggleCheckboxes, children: allToolsSelected ? (_jsx(CheckBoxOutlinedIcon, {})) : enabledTools.length ? (_jsx(IndeterminateCheckBoxOutlinedIcon, {})) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {})) }));
+        return headerStoreContext
+            .getState()
+            .setAction(_jsx(SelectAllCheckbox, { allCheckboxesSelected: allToolsSelected, anyCheckboxesSelected: !!enabledTools.length, onClick: toggleCheckboxes }));
     }, [enabledTools.length, headerStoreContext, setTools, tools, type, typeKey]);
     return (_jsx(Container, { disableGutters: true, children: _jsx(List, { sx: {
                 paddingLeft: 1.5,
                 paddingRight: 1.5,
-            }, children: tools?.[typeKey].map((tool) => (_jsxs(ListItemButton, { onClick: () => handleClick(tool.key), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), _jsx(ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) ? (_jsx(CheckBoxIcon, { color: "primary" })) : (_jsx(CheckBoxOutlineBlankOutlinedIcon, {}))] }, tool.name))) }) }));
+            }, children: tools?.[typeKey].map((tool) => (_jsxs(SettingsListItemButton, { onClick: () => handleClick(tool.key), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: tool.logoURI, alt: tool.name, children: tool.name[0] }) }), _jsx(ListItemText, { primary: tool.name }), enabledTools?.includes(tool.key) && _jsx(CheckIcon, { color: "primary" })] }, tool.name))) }) }));
 };

package/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/pages/SelectWalletPage/EVMListItemButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChainType } from '@lifi/sdk';
+import { getWalletIcon, isWalletInstalledAsync } from '@lifi/wallet-management';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import { useConnect, useDisconnect } from 'wagmi';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
+import { useNavigateBack, useWidgetEvents } from '../../hooks';
+import { WidgetEvent } from '../../types';
+export const EVMListItemButton = ({ connectedConnector, connector, onNotInstalled, }) => {
+    const { navigateBack } = useNavigateBack();
+    const emitter = useWidgetEvents();
+    const { connectAsync } = useConnect();
+    const { disconnectAsync } = useDisconnect();
+    const handleEVMConnect = async () => {
+        const identityCheckPassed = await isWalletInstalledAsync(connector.id);
+        if (!identityCheckPassed) {
+            onNotInstalled(connector);
+            return;
+        }
+        if (connectedConnector) {
+            await disconnectAsync({ connector: connectedConnector });
+        }
+        await connectAsync({ connector }, {
+            onSuccess(data) {
+                emitter.emit(WidgetEvent.WalletConnected, {
+                    address: data.accounts[0],
+                    chainId: data.chainId,
+                    chainType: ChainType.EVM,
+                });
+            },
+        });
+        navigateBack();
+    };
+    return (_jsxs(ListItemButton, { onClick: handleEVMConnect, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: connector.icon || getWalletIcon(connector.id), alt: connector.name, children: connector.name[0] }) }), _jsx(ListItemText, { primary: connector.name })] }, connector.uid));
+};

package/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/pages/SelectWalletPage/SVMListItemButton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChainId, ChainType } from '@lifi/sdk';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { ListItemButton } from '../../components/ListItemButton';
+import { ListItemText } from '../../components/ListItemText';
+import { useNavigateBack, useWidgetEvents } from '../../hooks';
+import { WidgetEvent } from '../../types';
+export const SVMListItemButton = ({ wallet }) => {
+    const { navigateBack } = useNavigateBack();
+    const emitter = useWidgetEvents();
+    const { select, disconnect, connected } = 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(WidgetEvent.WalletConnected, {
+                address: publicKey?.toString(),
+                chainId: ChainId.SOL,
+                chainType: ChainType.SVM,
+            });
+        });
+        navigateBack();
+    };
+    return (_jsxs(ListItemButton, { onClick: connect, children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: wallet.adapter.icon, alt: wallet.adapter.name, children: wallet.adapter.name[0] }) }), _jsx(ListItemText, { primary: `${wallet.adapter.name} (Solana)` })] }, wallet.adapter.name));
+};

package/pages/SelectWalletPage/SelectWalletPage.js

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { supportedWallets } from '@lifi/wallet-management';
-import { Avatar, Button, Container, DialogActions, DialogContent, DialogContentText, List, ListItemAvatar, useMediaQuery, } from '@mui/material';
-import { useCallback, useEffect, useState } from 'react';
+import { isWalletInstalled } from '@lifi/wallet-management';
+import { Button, Container, DialogActions, DialogContent, DialogContentText, List, useMediaQuery, } from '@mui/material';
+import { WalletReadyState } from '@solana/wallet-adapter-base';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
 import { Dialog } from '../../components/Dialog';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { useNavigateBack } from '../../hooks';
-import { useWallet } from '../../providers';
+import { EVMListItemButton } from './EVMListItemButton';
+import { SVMListItemButton } from './SVMListItemButton';
+import { walletComparator } from './utils';
 export const SelectWalletPage = () => {
     const { t } = useTranslation();
-    const { navigateBack } = useNavigateBack();
-    const { connect } = useWallet();
+    const account = useWagmiAccount();
+    const { connectors } = useConnect();
     const [walletIdentity, setWalletIdentity] = useState({ show: false });
-    const [wallets, setWallets] = useState();
+    const { wallets: solanaWallets } = useWallet();
     const isDesktopView = useMediaQuery((theme) => theme.breakpoints.up('sm'));
     const closeDialog = () => {
         setWalletIdentity((state) => ({
@@ -21,35 +23,32 @@ export const SelectWalletPage = () => {
             show: false,
         }));
     };
-    const handleConnect = useCallback(async (wallet) => {
-        const identityCheckPassed = await wallet.installed();
-        if (!identityCheckPassed) {
-            setWalletIdentity({
-                show: true,
-                wallet,
-            });
-            return;
-        }
-        navigateBack();
-        await connect(wallet);
-    }, [connect, navigateBack]);
-    useEffect(() => {
-        Promise.all(supportedWallets.map((wallet) => wallet.installed())).then((installed) => {
-            // separate into installed and not installed wallets
-            const installedWallets = supportedWallets.filter((_, index) => installed[index]);
-            // always remove Default Wallet from not installed Wallets
-            const notInstalledWallets = supportedWallets.filter((wallet, index) => !installed[index] && wallet.name !== 'Default Wallet');
-            const allowedWallets = [...installedWallets];
-            if (isDesktopView) {
-                allowedWallets.push(...notInstalledWallets);
-            }
-            setWallets(allowedWallets);
+    const handleNotInstalled = useCallback(async (connector) => {
+        setWalletIdentity({
+            show: true,
+            connector,
         });
     }, []);
+    const wallets = useMemo(() => {
+        const evmInstalled = connectors.filter((connector) => isWalletInstalled(connector.id) &&
+            // We should not show already connected connectors
+            account.connector?.id !== connector.id);
+        const evmNotDetected = connectors.filter((connector) => !isWalletInstalled(connector.id));
+        const svmInstalled = solanaWallets?.filter((connector) => connector.adapter.readyState === WalletReadyState.Installed &&
+            // We should not show already connected connectors
+            !connector.adapter.connected);
+        const svmNotDetected = solanaWallets?.filter((connector) => connector.adapter.readyState !== WalletReadyState.Installed);
+        const installedWallets = [...evmInstalled, ...svmInstalled].sort(walletComparator);
+        if (isDesktopView) {
+            const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(walletComparator);
+            installedWallets.push(...notDetectedWallets);
+        }
+        return installedWallets;
+    }, [account.connector?.id, connectors, isDesktopView, solanaWallets]);
     return (_jsxs(Container, { disableGutters: true, children: [_jsx(List, { sx: {
                     paddingLeft: 1.5,
                     paddingRight: 1.5,
-                }, children: wallets?.map((wallet) => (_jsxs(ListItemButton, { onClick: () => handleConnect(wallet), children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, { src: wallet.icon.src || wallet.icon, alt: wallet.name, children: wallet.name[0] }) }), _jsx(ListItemText, { primary: wallet.name })] }, wallet.name))) }), _jsxs(Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
-                                name: walletIdentity.wallet?.name,
+                }, children: wallets?.map((connector) => connector.uid ? (_jsx(EVMListItemButton, { connector: connector, connectedConnector: account.connector, onNotInstalled: handleNotInstalled }, connector.uid)) : (_jsx(SVMListItemButton, { wallet: connector }, connector.adapter.name))) }), _jsxs(Dialog, { open: walletIdentity.show, onClose: closeDialog, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
+                                name: walletIdentity.connector?.name,
                             }) }) }), _jsx(DialogActions, { children: _jsx(Button, { variant: "contained", onClick: closeDialog, autoFocus: true, children: t('button.ok') }) })] })] }));
 };

package/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/pages/SelectWalletPage/utils.js

@@ -0,0 +1,17 @@
+import { getWalletPriority } from '@lifi/wallet-management';
+export const walletComparator = (a, b) => {
+    let aId = a.id || a.adapter?.name;
+    let bId = b.id || b.adapter?.name;
+    const priorityA = getWalletPriority(aId);
+    const priorityB = getWalletPriority(bId);
+    if (priorityA !== priorityB) {
+        return priorityA - priorityB;
+    }
+    if (aId < bId) {
+        return -1;
+    }
+    if (aId > bId) {
+        return 1;
+    }
+    return 0;
+};

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { shallow } from 'zustand/shallow';
+import AirlineStopsIcon from '@mui/icons-material/AirlineStops';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import { useSettingsStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { useSettingMonitor } from '../../hooks';
+import { SettingCardButton, BadgedValue } from './SettingsCard';
+const supportedIcons = {
+    Bridges: AirlineStopsIcon,
+    Exchanges: SwapHorizIcon,
+};
+export const BridgeAndExchangeSettings = ({ type }) => {
+    const { isBridgesChanged, isExchangesChanged } = useSettingMonitor();
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [enabledTools, tools] = useSettingsStore((state) => {
+        const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
+        return [enabledTools.filter(Boolean).length, enabledTools.length];
+    }, shallow);
+    const customisationLookUp = {
+        Bridges: isBridgesChanged,
+        Exchanges: isExchangesChanged,
+    };
+    const handleClick = () => {
+        navigate(navigationRoutes[type.toLowerCase()]);
+    };
+    const Icon = supportedIcons[type];
+    return (_jsx(SettingCardButton, { onClick: handleClick, icon: _jsx(Icon, {}), title: t(`settings.enabled${type}`), children: _jsx(BadgedValue, { badgeColor: "info", showBadge: customisationLookUp[type], children: `${enabledTools}/${tools}` }) }));
+};

package/pages/SettingsPage/GasPriceSettings.d.ts

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

package/pages/SettingsPage/GasPriceSettings.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import EvStationIcon from '@mui/icons-material/EvStation';
+import { useTranslation } from 'react-i18next';
+import { useSettings, useSettingsStore } from '../../stores';
+import { Tab, Tabs } from '../../components/Tabs';
+import { useSettingMonitor } from '../../hooks';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
+export const GasPriceSettings = () => {
+    const { t } = useTranslation();
+    const setValue = useSettingsStore((state) => state.setValue);
+    const { isGasPriceChanged } = useSettingMonitor();
+    const { gasPrice } = useSettings(['gasPrice']);
+    const handleGasPriceChange = (_, gasPrice) => {
+        setValue('gasPrice', gasPrice);
+    };
+    return (_jsx(SettingCardExpandable, { value: _jsx(BadgedValue, { badgeColor: "info", showBadge: isGasPriceChanged, children: t(`settings.gasPrice.${gasPrice}`) }), icon: _jsx(EvStationIcon, {}), title: t(`settings.gasPrice.title`), children: _jsxs(Tabs, { value: gasPrice, "aria-label": "tabs", indicatorColor: "primary", onChange: handleGasPriceChange, sx: { mt: 1.5 }, children: [_jsx(Tab, { label: t(`settings.gasPrice.slow`), value: "slow", disableRipple: true }), _jsx(Tab, { label: t(`settings.gasPrice.normal`), value: "normal", disableRipple: true }), _jsx(Tab, { label: t(`settings.gasPrice.fast`), value: "fast", disableRipple: true })] }) }));
+};

package/pages/SettingsPage/LanguageSetting.d.ts

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

package/pages/SettingsPage/LanguageSetting.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
+import { navigationRoutes } from '../../utils';
+import { useLanguages } from '../../hooks';
+import { SettingCardButton, SummaryValue } from './SettingsCard';
+export const LanguageSetting = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { hiddenUI } = useWidgetConfig();
+    const { selectedLanguageDisplayName } = useLanguages();
+    if (hiddenUI?.includes(HiddenUI.Language)) {
+        return null;
+    }
+    const handleClick = () => {
+        navigate(navigationRoutes.languages);
+    };
+    return (_jsx(SettingCardButton, { onClick: handleClick, icon: _jsx(LanguageIcon, {}), title: t(`language.title`), children: _jsx(SummaryValue, { children: selectedLanguageDisplayName }) }));
+};

package/pages/SettingsPage/ResetSettingsButton.js

@@ -3,51 +3,24 @@ import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTit
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
-import { useTools } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { defaultConfigurableSettings, setDefaultSettings, useSettingsStore, } from '../../stores';
+import { useSettingMonitor } from '../../hooks';
 import { ResetButtonContainer } from './ResetSettingsButton.style';
 import { InfoRounded } from '@mui/icons-material';
-import { shallow } from 'zustand/shallow';
 export const ResetSettingsButton = () => {
-    const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] = useSettingsStore((state) => [
-        state.enabledBridges,
-        state.enabledExchanges,
-        state.routePriority,
-        state.slippage,
-        state.gasPrice,
-    ], shallow);
     const { t } = useTranslation();
-    const { tools } = useTools();
-    const config = useWidgetConfig();
-    const resetSettings = useSettingsStore((state) => state.reset);
+    const { isCustomRouteSettings, reset } = useSettingMonitor();
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
         setOpen((open) => !open);
     }, []);
     const handleReset = () => {
-        if (tools) {
-            resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
-            setDefaultSettings(config);
-        }
+        reset();
         toggleDialog();
     };
-    const isSlippageChanged = config.slippage
-        ? Number(slippage) !== config.slippage * 100
-        : slippage !== defaultConfigurableSettings.slippage;
-    const isRoutePriorityChanged = config.routePriority
-        ? routePriority !== config.routePriority
-        : routePriority !== defaultConfigurableSettings.routePriority;
-    const isGasPriceChanged = gasPrice !== defaultConfigurableSettings.gasPrice;
-    const isCustomRouteSettings = tools?.bridges?.length !== enabledBridges?.length ||
-        tools?.exchanges?.length !== enabledExchanges?.length ||
-        isSlippageChanged ||
-        isRoutePriorityChanged ||
-        isGasPriceChanged;
     if (!isCustomRouteSettings) {
         return null;
     }
-    return (_jsx(Box, { px: 3, mt: 1.5, mb: 1, children: _jsxs(ResetButtonContainer, { children: [_jsxs(Box, { display: "flex", marginBottom: "12px", children: [_jsx(InfoRounded, { sx: {
+    return (_jsx(Box, { px: 3, mb: 1, children: _jsxs(ResetButtonContainer, { children: [_jsxs(Box, { display: "flex", marginBottom: "12px", children: [_jsx(InfoRounded, { sx: {
                                 marginRight: '8px',
                             } }), _jsx(Box, { fontSize: 14, children: t(`settings.resetSettings`) })] }), _jsx(Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), _jsxs(Dialog, { open: open, onClose: toggleDialog, children: [_jsx(DialogTitle, { children: t('warning.title.resetSettings') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('warning.message.resetSettings') }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: toggleDialog, children: t('button.cancel') }), _jsx(Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }) }));
 };

package/pages/SettingsPage/RoutePrioritySettings.d.ts

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

package/pages/SettingsPage/RoutePrioritySettings.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import RouteIcon from '@mui/icons-material/Route';
+import { Orders } from '@lifi/sdk';
+import { Tab, Tabs } from '../../components/Tabs';
+import { useSettings, useSettingsStore } from '../../stores';
+import { useSettingMonitor } from '../../hooks';
+import { SettingCardExpandable, BadgedValue } from './SettingsCard';
+export const RoutePrioritySettings = () => {
+    const { t } = useTranslation();
+    const setValue = useSettingsStore((state) => state.setValue);
+    const { isRoutePriorityChanged } = useSettingMonitor();
+    const { routePriority } = useSettings(['routePriority']);
+    const currentRoutePriority = routePriority ?? '';
+    const handleRoutePriorityChange = (_, routePriority) => {
+        setValue('routePriority', routePriority);
+    };
+    return (_jsx(SettingCardExpandable, { value: _jsx(BadgedValue, { badgeColor: "info", showBadge: isRoutePriorityChanged, children: t(`main.tags.${currentRoutePriority.toLowerCase()}`) }), icon: _jsx(RouteIcon, {}), title: t(`settings.routePriority`), children: _jsx(Tabs, { value: currentRoutePriority, "aria-label": "tabs", indicatorColor: "primary", onChange: handleRoutePriorityChange, orientation: "vertical", sx: { mt: 1.5 }, children: Orders.map((order) => {
+                return (_jsx(Tab, { label: t(`main.tags.${order.toLowerCase()}`), value: order, disableRipple: true }, order));
+            }) }) }));
+};

package/pages/SettingsPage/SendToWalletOptionSetting.d.ts

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

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import WalletIcon from '@mui/icons-material/Wallet';
 import { Switch } from '../../components/Switch';
 import { useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings, useSettingsStore, } from '../../stores';
 import { HiddenUI } from '../../types';
-export const ShowDestinationWallet = () => {
+import { SettingCard, SummaryRowContainer, SummaryTitleContainer, SummaryValue, } from './SettingsCard';
+export const SendToWalletOptionSetting = () => {
     const { t } = useTranslation();
     const { hiddenUI } = useWidgetConfig();
     const setSendToWallet = useSendToWalletStore((state) => state.setSendToWallet);
@@ -18,9 +19,5 @@ export const ShowDestinationWallet = () => {
         setValue('showDestinationWallet', checked);
         setSendToWallet(false);
     };
-    return (_jsx(Box, { px: 3, pt: 2, pb: 1.5, children: _jsxs(Box, { sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsx(Typography, { variant: "subtitle1", color: "text.primary", lineHeight: "normal", children: t(`settings.showDestinationWallet`) }) }), _jsx(Switch, { checked: showDestinationWallet, onChange: onChange })] }) }));
+    return (_jsx(SettingCard, { children: _jsxs(SummaryRowContainer, { children: [_jsxs(SummaryTitleContainer, { children: [_jsx(WalletIcon, {}), _jsx(SummaryValue, { children: t(`settings.sendToWalletOption`) })] }), _jsx(Switch, { checked: showDestinationWallet, onChange: onChange })] }) }));
 };

package/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/pages/SettingsPage/SettingsCard/BadgedValue.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SummaryValue, Badge } from './SettingCard.style';
+export const BadgedValue = ({ showBadge, badgeColor, children, }) => showBadge && badgeColor ? (_jsx(Badge, { variant: "dot", color: badgeColor, children: _jsx(SummaryValue, { children: children }) })) : (_jsx(SummaryValue, { children: children }));

package/pages/SettingsPage/SettingsCard/SettingCard.d.ts

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

package/pages/SettingsPage/SettingsCard/SettingCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from '../../../components/Card';
+export const SettingCard = ({ children }) => {
+    return (_jsx(Card, { variant: "default", selectionColor: "primary", sx: {
+            p: 2,
+        }, children: children }));
+};

package/pages/SettingsPage/SettingsCard/SettingCard.style.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const SettingsList: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SummaryTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SummaryRowContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SummaryRowButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SummaryValue: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Badge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "color" | "variant" | "max" | "components" | "componentsProps" | "slots" | "slotProps" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;