@lifi/widget 1.13.2 → 1.13.3

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -0,0 +1,27 @@
+"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 react_router_dom_1 = require("react-router-dom");
+const TokenList_1 = require("../../components/TokenList");
+const hooks_1 = require("../../hooks");
+const ChainSelect_1 = require("./ChainSelect");
+const SearchTokenInput_1 = require("./SearchTokenInput");
+const SelectTokenPage = ({ formType, }) => {
+    (0, hooks_1.useScrollableOverflowHidden)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const headerRef = (0, react_1.useRef)(null);
+    const contentHeight = (0, hooks_1.useContentHeight)();
+    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
+    const handleTokenClick = () => {
+        navigate(-1);
+    };
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b;
+        setHeaderHeight(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0));
+    }, [contentHeight]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: headerHeight, onClick: handleTokenClick, formType: formType })] })));
+};
+exports.SelectTokenPage = SelectTokenPage;

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

@@ -0,0 +1,2 @@
+export * from './SelectTokenPage';
+export * from './types';

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

@@ -0,0 +1,4 @@
+export declare enum TokenFilterType {
+    My = 0,
+    All = 1
+}

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 || (exports.TokenFilterType = {}));

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SelectWalletPage: () => JSX.Element;

package/cjs/pages/SelectWalletPage/SelectWalletPage.js

@@ -0,0 +1,53 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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 react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const Dialog_1 = require("../../components/Dialog");
+const WalletProvider_1 = require("../../providers/WalletProvider");
+const SelectWalletPage_style_1 = require("./SelectWalletPage.style");
+const SelectWalletPage = () => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { connect } = (0, WalletProvider_1.useWallet)();
+    const [walletIdentity, setWalletIdentity] = (0, react_1.useState)({ show: false });
+    const closeDialog = () => {
+        setWalletIdentity((state) => (Object.assign(Object.assign({}, state), { show: false })));
+    };
+    const handleConnect = (0, react_1.useCallback)((event, wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        const { ethereum } = window;
+        const identityCheckPassed = wallet.checkProviderIdentity({
+            provider: ethereum,
+        });
+        if (!identityCheckPassed) {
+            setWalletIdentity({
+                show: true,
+                wallet,
+            });
+            return;
+        }
+        navigate(-1);
+        yield connect(wallet);
+    }), [connect, navigate]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ sx: {
+                    paddingLeft: 2,
+                    paddingRight: 2,
+                } }, { children: wallet_management_1.supportedWallets.map((wallet) => ((0, jsx_runtime_1.jsxs)(SelectWalletPage_style_1.WalletListItemButton, Object.assign({ onClick: (event) => handleConnect(event, wallet), disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: wallet.icon.src || wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), (0, jsx_runtime_1.jsx)(SelectWalletPage_style_1.WalletListItemText, { primary: wallet.name })] }), wallet.name))) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ 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: (_a = walletIdentity.wallet) === null || _a === void 0 ? void 0 : _a.name,
+                            }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
+};
+exports.SelectWalletPage = SelectWalletPage;

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+export declare const WalletListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletListItem: import("@emotion/styled").StyledComponent<{
+    button?: false | undefined;
+} & import("@mui/material").ListItemBaseProps & {
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletIdentityPopoverContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "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" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/SelectWalletPage/SelectWalletPage.style.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletIdentityPopoverContent = exports.WalletListItemText = exports.WalletListItem = exports.WalletListItemButton = void 0;
+const material_1 = require("@mui/material");
+const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
+const ListItemText_1 = require("@mui/material/ListItemText");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.WalletListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    height: 64,
+    '&:hover': {
+        backgroundColor: (0, utils_1.getContrastAlphaColor)(theme, '4%'),
+    },
+}));
+exports.WalletListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
+    padding: theme.spacing(1.5),
+    [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
+        right: theme.spacing(3),
+    },
+}));
+exports.WalletListItemText = (0, styles_1.styled)(material_1.ListItemText)(({ theme }) => ({
+    [`.${ListItemText_1.listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));
+exports.WalletIdentityPopoverContent = (0, styles_1.styled)(material_1.Typography)({
+    maxWidth: 400,
+});

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

@@ -0,0 +1 @@
+export * from './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/SettingsPage/AdvancedPreferences.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AdvancedPreferences: () => JSX.Element;

package/cjs/pages/SettingsPage/AdvancedPreferences.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdvancedPreferences = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Switch_1 = require("../../components/Switch");
+const stores_1 = require("../../stores");
+const EnabledBridgesSelect_1 = require("./EnabledBridgesSelect");
+const EnabledExchangesSelect_1 = require("./EnabledExchangesSelect");
+const AdvancedPreferences = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [setValue] = (0, stores_1.useSetSettings)();
+    const { advancedPreferences } = (0, stores_1.useSettings)(['advancedPreferences']);
+    const handleAdvancedPreferences = (_, checked) => {
+        setValue('advancedPreferences', checked);
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 3 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { checked: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(EnabledBridgesSelect_1.EnabledBridgesSelect, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(EnabledExchangesSelect_1.EnabledExchangesSelect, {}) }))] })))] })));
+};
+exports.AdvancedPreferences = AdvancedPreferences;

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

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

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorSchemeButtonGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const stores_1 = require("../../stores");
+const ColorSchemeButtonGroup_style_1 = require("./ColorSchemeButtonGroup.style");
+const ColorSchemeButtonGroup = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { disableAppearance } = (0, WidgetProvider_1.useWidgetConfig)();
+    const [appearance, setAppearance] = (0, stores_1.useAppearance)();
+    if (disableAppearance) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pb: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.ToggleButtonGroup, Object.assign({ color: "primary", value: appearance, onChange: (_, value) => {
+                if (value) {
+                    setAppearance(value);
+                }
+            }, exclusive: true, fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, Object.assign({ value: "light" }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.LightMode, { sx: { marginRight: 1 } }), t('button.light')] })), (0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, Object.assign({ value: "dark" }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.DarkMode, { sx: { marginRight: 1 } }), t('button.dark')] })), (0, jsx_runtime_1.jsxs)(ColorSchemeButtonGroup_style_1.ToggleButton, Object.assign({ value: "auto" }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.Brightness4, { sx: { marginRight: 1 } }), t('button.auto')] }))] })) })));
+};
+exports.ColorSchemeButtonGroup = ColorSchemeButtonGroup;

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "standard" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    onChange?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
+    onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
+    selected?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    value: unknown;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "size" | "value" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const ToggleButton_1 = require("@mui/material/ToggleButton");
+exports.ToggleButton = (0, styles_1.styled)(material_1.ToggleButton)(({ theme }) => ({
+    textTransform: 'none',
+    borderRadius: theme.shape.borderRadius,
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    [`&.${ToggleButton_1.toggleButtonClasses.selected}`]: {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.primary.main
+            : theme.palette.primary.light,
+        borderColor: 'currentColor !important',
+    },
+}));

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

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

package/cjs/pages/SettingsPage/EnabledBridgesSelect.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnabledBridgesSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const shallow_1 = __importDefault(require("zustand/shallow"));
+const Card_1 = require("../../components/Card");
+const Select_1 = require("../../components/Select");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const EnabledBridgesSelect = () => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { tools, formattedTools } = (0, hooks_1.useTools)();
+    const [enabledBridges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledBridges, state.setTools], shallow_1.default);
+    return (tools === null || tools === void 0 ? void 0 : tools.bridges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledBridges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), MenuProps: { elevation: 2 }, IconComponent: icons_material_1.KeyboardArrowDown, value: enabledBridges !== null && enabledBridges !== void 0 ? enabledBridges : [], onChange: (event) => {
+                        if (tools === null || tools === void 0 ? void 0 : tools.bridges) {
+                            setTools('Bridges', event.target.value, tools.bridges);
+                        }
+                    }, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
+                            var _a, _b, _c;
+                            return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (_c = (_b = (_a = formattedTools.bridges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
+                        }) }))) }, { children: (_a = tools === null || tools === void 0 ? void 0 : tools.bridges) === null || _a === void 0 ? void 0 : _a.map((bridge) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: bridge.key }, { children: bridge.name }), bridge.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+};
+exports.EnabledBridgesSelect = EnabledBridgesSelect;

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

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

package/cjs/pages/SettingsPage/EnabledExchangesSelect.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnabledExchangesSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const shallow_1 = __importDefault(require("zustand/shallow"));
+const Card_1 = require("../../components/Card");
+const Select_1 = require("../../components/Select");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const EnabledExchangesSelect = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { tools, formattedTools } = (0, hooks_1.useTools)();
+    const [enabledExchanges, setTools] = (0, stores_1.useSettingsStore)((state) => [state.enabledExchanges, state.setTools], shallow_1.default);
+    return (tools === null || tools === void 0 ? void 0 : tools.exchanges.length) ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.enabledExchanges`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), value: enabledExchanges !== null && enabledExchanges !== void 0 ? enabledExchanges : [], onChange: (event) => {
+                        if (tools === null || tools === void 0 ? void 0 : tools.exchanges) {
+                            setTools('Exchanges', event.target.value, tools.exchanges);
+                        }
+                    }, MenuProps: { elevation: 2 }, IconComponent: icons_material_1.KeyboardArrowDown, renderValue: (selected) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => {
+                            var _a, _b, _c;
+                            return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (_c = (_b = (_a = formattedTools.exchanges) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : value }, value));
+                        }) }))) }, { children: tools === null || tools === void 0 ? void 0 : tools.exchanges.map((exchange) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: exchange.key }, { children: exchange.key }), exchange.key))) })) }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+};
+exports.EnabledExchangesSelect = EnabledExchangesSelect;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GasPriceSelect: () => JSX.Element;

package/cjs/pages/SettingsPage/GasPriceSelect.js

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

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

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

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoutePrioritySelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@lifi/sdk");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Card_1 = require("../../components/Card");
+const Select_1 = require("../../components/Select");
+const stores_1 = require("../../stores");
+const RoutePrioritySelect = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [setValue] = (0, stores_1.useSetSettings)();
+    const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({ MenuProps: { elevation: 2 }, value: routePriority, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: icons_material_1.KeyboardArrowDown, dense: true }, { children: sdk_1.Orders.map((order) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: order }, { children: t(`swap.tags.${order.toLowerCase()}`) }), order))) })) }))] }));
+};
+exports.RoutePrioritySelect = RoutePrioritySelect;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SettingsPage: () => JSX.Element;

package/cjs/pages/SettingsPage/SettingsPage.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const AdvancedPreferences_1 = require("./AdvancedPreferences");
+const ColorSchemeButtonGroup_1 = require("./ColorSchemeButtonGroup");
+const GasPriceSelect_1 = require("./GasPriceSelect");
+const RoutePrioritySelect_1 = require("./RoutePrioritySelect");
+const SlippageInput_1 = require("./SlippageInput");
+const SettingsPage = () => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 3, pt: 1 }, { children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 2, flex: 1 }, { children: (0, jsx_runtime_1.jsx)(SlippageInput_1.SlippageInput, {}) })), (0, jsx_runtime_1.jsx)(GasPriceSelect_1.GasPriceSelect, {})] }))] })), (0, jsx_runtime_1.jsx)(AdvancedPreferences_1.AdvancedPreferences, {})] })));
+};
+exports.SettingsPage = SettingsPage;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SlippageInput: () => JSX.Element;

package/cjs/pages/SettingsPage/SlippageInput.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlippageInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const Card_1 = require("../../components/Card");
+const Input_1 = require("../../components/Input");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const SlippageInput = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [setValue] = (0, stores_1.useSetSettings)();
+    const { slippage } = (0, stores_1.useSettings)(['slippage']);
+    const defaultValue = (0, react_1.useRef)(slippage);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        setValue('slippage', (0, utils_1.formatSlippage)(value, defaultValue.current, true));
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        setValue('slippage', (0, utils_1.formatSlippage)(value, defaultValue.current));
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.slippage`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Input_1.Input, { size: "small", placeholder: t(`settings.slippage`), endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: "%" })), autoComplete: "off", inputProps: {
+                        inputMode: 'decimal',
+                    }, onChange: handleChange, onBlur: handleBlur, value: slippage }) }))] }));
+};
+exports.SlippageInput = SlippageInput;

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

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

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

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.d.ts

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