@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/cjs/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>, {}, {}>;

package/cjs/pages/SettingsPage/SettingsCard/SettingCard.style.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = exports.SummaryValue = exports.SummaryRowButton = exports.SummaryRowContainer = exports.SummaryTitleContainer = exports.SettingsList = void 0;
+const material_1 = require("@mui/material");
+const Badge_1 = require("@mui/material/Badge");
+const styles_1 = require("@mui/material/styles");
+exports.SettingsList = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    padding: theme.spacing(1, 3, 2),
+}));
+exports.SummaryTitleContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+}));
+exports.SummaryRowContainer = (0, styles_1.styled)(material_1.Box)({
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
+exports.SummaryRowButton = (0, styles_1.styled)(material_1.ButtonBase)({
+    background: 'none',
+    color: 'inherit',
+    border: 'none',
+    padding: 0,
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'inherit',
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
+exports.SummaryValue = (0, styles_1.styled)(material_1.Typography)({
+    lineHeight: '1.25',
+    fontWeight: 500,
+});
+exports.Badge = (0, styles_1.styled)(material_1.Badge)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.25),
+    [`.${Badge_1.badgeClasses.badge}`]: {
+        width: 10,
+        height: 10,
+        // the following removes MUI styling so we can position the badge with flex
+        position: 'relative',
+        transform: 'translateX(0)',
+        borderRadius: '50%',
+    },
+}));

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

@@ -0,0 +1,7 @@
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+import type { SettingCardTitle } from './types';
+interface SettingCardButtonProps extends SettingCardTitle {
+    onClick: MouseEventHandler;
+}
+export declare const SettingCardButton: React.FC<PropsWithChildren<SettingCardButtonProps>>;
+export {};

package/cjs/pages/SettingsPage/SettingsCard/SettingCardButton.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingCardButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SettingCard_1 = require("./SettingCard");
+const SettingCard_style_1 = require("./SettingCard.style");
+const SettingCardButton = ({ onClick, icon, title, children }) => ((0, jsx_runtime_1.jsx)(SettingCard_1.SettingCard, { children: (0, jsx_runtime_1.jsxs)(SettingCard_style_1.SummaryRowButton, { onClick: onClick, disableRipple: true, children: [(0, jsx_runtime_1.jsxs)(SettingCard_style_1.SummaryTitleContainer, { children: [icon, (0, jsx_runtime_1.jsx)(SettingCard_style_1.SummaryValue, { children: title })] }), children] }) }));
+exports.SettingCardButton = SettingCardButton;

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

@@ -0,0 +1,7 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import type { SettingCardTitle } from './types';
+interface SettingCardExpandableProps extends SettingCardTitle {
+    value: ReactNode;
+}
+export declare const SettingCardExpandable: React.FC<PropsWithChildren<SettingCardExpandableProps>>;
+export {};

package/cjs/pages/SettingsPage/SettingsCard/SettingCardExpandable.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingCardExpandable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const SettingCard_1 = require("./SettingCard");
+const SettingCard_style_1 = require("./SettingCard.style");
+const SettingsAccordian_1 = require("./SettingsAccordian");
+const SettingCardExpandable = ({ icon, title, value, children }) => {
+    const { expanded, toggleExpanded } = (0, SettingsAccordian_1.useSettingsCardExpandable)();
+    const buttonId = (0, react_1.useId)();
+    const collapseId = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)(SettingCard_1.SettingCard, { children: [(0, jsx_runtime_1.jsxs)(SettingCard_style_1.SummaryRowButton, { id: buttonId, "aria-expanded": expanded, "aria-controls": collapseId, onClick: toggleExpanded, disableRipple: true, children: [(0, jsx_runtime_1.jsxs)(SettingCard_style_1.SummaryTitleContainer, { children: [icon, (0, jsx_runtime_1.jsx)(SettingCard_style_1.SummaryValue, { children: title })] }), !expanded && value] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { id: collapseId, role: "region", "aria-labelledby": buttonId, in: expanded, children: children })] }));
+};
+exports.SettingCardExpandable = SettingCardExpandable;

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

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+export declare const SettingsCardAccordion: React.FC<PropsWithChildren>;
+export declare const useSettingsCardExpandable: () => {
+    expanded: boolean;
+    toggleExpanded: () => void;
+};

package/cjs/pages/SettingsPage/SettingsCard/SettingsAccordian.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSettingsCardExpandable = exports.SettingsCardAccordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SettingsAccordionContext = (0, react_1.createContext)({
+    setOpenCard: (id) => { },
+    openCard: '',
+});
+const SettingsCardAccordion = ({ children, }) => {
+    const [openCard, setOpenCard] = (0, react_1.useState)('');
+    return ((0, jsx_runtime_1.jsx)(SettingsAccordionContext.Provider, { value: { openCard, setOpenCard }, children: children }));
+};
+exports.SettingsCardAccordion = SettingsCardAccordion;
+const useSettingsCardExpandable = () => {
+    const settingCardExpandableId = (0, react_1.useId)();
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const { openCard, setOpenCard } = (0, react_1.useContext)(SettingsAccordionContext);
+    const toggleExpanded = () => {
+        const newExpanded = !expanded;
+        setExpanded(newExpanded);
+        if (newExpanded && openCard !== settingCardExpandableId) {
+            setOpenCard(settingCardExpandableId);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (openCard !== settingCardExpandableId) {
+            setExpanded(false);
+        }
+    }, [settingCardExpandableId, openCard]);
+    return {
+        expanded,
+        toggleExpanded,
+    };
+};
+exports.useSettingsCardExpandable = useSettingsCardExpandable;

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

@@ -0,0 +1,6 @@
+export * from './SettingCard';
+export * from './SettingCard.style';
+export * from './SettingCardButton';
+export * from './SettingCardExpandable';
+export * from './BadgedValue';
+export * from './SettingsAccordian';

package/cjs/pages/SettingsPage/SettingsCard/index.js

@@ -0,0 +1,22 @@
+"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("./SettingCard"), exports);
+__exportStar(require("./SettingCard.style"), exports);
+__exportStar(require("./SettingCardButton"), exports);
+__exportStar(require("./SettingCardExpandable"), exports);
+__exportStar(require("./BadgedValue"), exports);
+__exportStar(require("./SettingsAccordian"), exports);

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface SettingCardTitle {
+    icon: ReactNode;
+    title: ReactNode;
+}

package/cjs/pages/SettingsPage/SettingsPage.js

@@ -3,15 +3,16 @@ 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 ColorSchemeButtonGroup_1 = require("./ColorSchemeButtonGroup");
-const EnabledToolsButton_1 = require("./EnabledToolsButton");
-const GasPriceSelect_1 = require("./GasPriceSelect");
-const LanguageSelect_1 = require("./LanguageSelect");
+const BridgeAndExchangeSettings_1 = require("./BridgeAndExchangeSettings");
+const LanguageSetting_1 = require("./LanguageSetting");
 const ResetSettingsButton_1 = require("./ResetSettingsButton");
-const RoutePrioritySelect_1 = require("./RoutePrioritySelect");
-const ShowDestinationWallet_1 = require("./ShowDestinationWallet");
-const SlippageInput_1 = require("./SlippageInput");
+const SendToWalletOptionSetting_1 = require("./SendToWalletOptionSetting");
+const GasPriceSettings_1 = require("./GasPriceSettings");
+const RoutePrioritySettings_1 = require("./RoutePrioritySettings");
+const ThemeSettings_1 = require("./ThemeSettings");
+const SlippageSettings_1 = require("./SlippageSettings");
+const SettingsCard_1 = require("./SettingsCard");
 const SettingsPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, pt: 1, children: [(0, jsx_runtime_1.jsx)(ColorSchemeButtonGroup_1.ColorSchemeButtonGroup, {}), (0, jsx_runtime_1.jsx)(LanguageSelect_1.LanguageSelect, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySelect_1.RoutePrioritySelect, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, mt: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { 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)(ShowDestinationWallet_1.ShowDestinationWallet, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, { px: 1.5, children: [(0, jsx_runtime_1.jsx)(EnabledToolsButton_1.EnabledToolsButton, { type: "Bridges" }), (0, jsx_runtime_1.jsx)(EnabledToolsButton_1.EnabledToolsButton, { type: "Exchanges" })] }), (0, jsx_runtime_1.jsx)(ResetSettingsButton_1.ResetSettingsButton, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(SettingsCard_1.SettingsList, { children: (0, jsx_runtime_1.jsxs)(SettingsCard_1.SettingsCardAccordion, { children: [(0, jsx_runtime_1.jsx)(ThemeSettings_1.ThemeSettings, {}), (0, jsx_runtime_1.jsx)(LanguageSetting_1.LanguageSetting, {}), (0, jsx_runtime_1.jsx)(RoutePrioritySettings_1.RoutePrioritySettings, {}), (0, jsx_runtime_1.jsx)(GasPriceSettings_1.GasPriceSettings, {}), (0, jsx_runtime_1.jsx)(SlippageSettings_1.SlippageSettings, {}), (0, jsx_runtime_1.jsx)(BridgeAndExchangeSettings_1.BridgeAndExchangeSettings, { type: "Bridges" }), (0, jsx_runtime_1.jsx)(BridgeAndExchangeSettings_1.BridgeAndExchangeSettings, { type: "Exchanges" }), (0, jsx_runtime_1.jsx)(SendToWalletOptionSetting_1.SendToWalletOptionSetting, {})] }) }), (0, jsx_runtime_1.jsx)(ResetSettingsButton_1.ResetSettingsButton, {})] }));
 };
 exports.SettingsPage = SettingsPage;

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

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

package/cjs/pages/SettingsPage/SlippageSettings/SlippageSettings.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlippageSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const Percent_1 = require("@mui/icons-material/Percent");
+const stores_1 = require("../../../stores");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const SlippageSettings_style_1 = require("./SlippageSettings.style");
+const material_1 = require("@mui/material");
+const SettingsCard_1 = require("../SettingsCard");
+const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
+const slippageDefault = '0.5';
+const SlippageSettings = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { isSlippageOutsideRecommendedLimits, isSlippageChanged } = (0, hooks_1.useSettingMonitor)();
+    const { slippage } = (0, stores_1.useSettings)(['slippage']);
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
+    const defaultValue = (0, react_1.useRef)(slippage);
+    const [focused, setFocused] = (0, react_1.useState)();
+    const handleDefaultClick = () => {
+        setValue('slippage', (0, utils_1.formatSlippage)(slippageDefault, defaultValue.current));
+    };
+    const handleInputUpdate = (event) => {
+        const { value } = event.target;
+        setValue('slippage', (0, utils_1.formatSlippage)(value || slippageDefault, defaultValue.current, true));
+    };
+    const handleInputBlur = (event) => {
+        setFocused(undefined);
+        const { value } = event.target;
+        setValue('slippage', (0, utils_1.formatSlippage)(value || slippageDefault, defaultValue.current));
+    };
+    const customInputValue = !slippage || slippage === slippageDefault ? '' : slippage;
+    const badgeColor = isSlippageOutsideRecommendedLimits
+        ? 'warning'
+        : isSlippageChanged
+            ? 'info'
+            : undefined;
+    return ((0, jsx_runtime_1.jsx)(SettingsCard_1.SettingCardExpandable, { value: (0, jsx_runtime_1.jsx)(SettingsCard_1.BadgedValue, { badgeColor: badgeColor, showBadge: !!badgeColor, children: `${slippage}%` }), icon: (0, jsx_runtime_1.jsx)(Percent_1.default, {}), title: t(`settings.slippage`), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 1.5, children: [(0, jsx_runtime_1.jsxs)(SlippageSettings_style_1.SettingsFieldSet, { children: [(0, jsx_runtime_1.jsx)(SlippageSettings_style_1.SlippageDefaultButton, { selected: slippageDefault === slippage && focused !== 'input', onFocus: () => {
+                                setFocused('button');
+                            }, onBlur: () => {
+                                setFocused(undefined);
+                            }, onClick: handleDefaultClick, disableRipple: true, children: slippageDefault }), (0, jsx_runtime_1.jsx)(SlippageSettings_style_1.SlippageCustomInput, { selected: slippageDefault !== slippage && focused !== 'button', placeholder: focused === 'input' ? '' : t('settings.custom'), inputProps: {
+                                inputMode: 'decimal',
+                            }, onChange: handleInputUpdate, onFocus: () => {
+                                setFocused('input');
+                            }, onBlur: handleInputBlur, value: customInputValue, autoComplete: "off" })] }), isSlippageOutsideRecommendedLimits && ((0, jsx_runtime_1.jsxs)(SlippageSettings_style_1.SlippageLimitsWarningContainer, { children: [(0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 13, fontWeight: 400, children: t('warning.message.slippageOutsideRecommendedLimits') })] }))] }) }));
+};
+exports.SlippageSettings = SlippageSettings;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { Theme } from '@mui/material';
+export declare const SettingsFieldSet: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<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<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+interface SlippageDefaultProps {
+    selected?: boolean;
+}
+export declare const SlippageDefaultButton: 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<Theme> & SlippageDefaultProps, {}, {}>;
+export declare const SlippageCustomInput: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<Theme> & SlippageDefaultProps, {}, {}>;
+export declare const SlippageLimitsWarningContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<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<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export {};

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlippageLimitsWarningContainer = exports.SlippageCustomInput = exports.SlippageDefaultButton = exports.SettingsFieldSet = void 0;
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const InputBase_1 = require("@mui/material/InputBase");
+const utils_1 = require("../../../utils");
+exports.SettingsFieldSet = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    backgroundColor: (0, utils_1.getCardFieldsetBackgroundColor)(theme),
+    borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary),
+    padding: theme.spacing(0.5),
+    gap: theme.spacing(0.5),
+    height: '3.5rem',
+}));
+const slippageControlSelected = (theme) => ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.background.default
+        : theme.palette.common.white,
+    borderRadius: theme.shape.borderRadiusSecondary,
+    boxShadow: `0px 2px 4px ${(0, styles_1.alpha)(theme.palette.common.black, 0.04)}`,
+});
+exports.SlippageDefaultButton = (0, styles_1.styled)(material_1.ButtonBase)(({ theme, selected, }) => {
+    const selectedStyle = selected
+        ? {
+            '&:not(:focus)': {
+                ...slippageControlSelected(theme),
+            },
+        }
+        : {};
+    return {
+        height: '100%',
+        width: '100%',
+        fontSize: '1rem',
+        fontWeight: 700,
+        '&:focus': {
+            ...slippageControlSelected(theme),
+        },
+        ...selectedStyle,
+    };
+});
+exports.SlippageCustomInput = (0, styles_1.styled)(material_1.InputBase)(({ theme, selected, }) => {
+    const selectedStyle = selected
+        ? {
+            '&:not(:focus)': {
+                ...slippageControlSelected(theme),
+            },
+        }
+        : {};
+    return {
+        height: '100%',
+        width: '100%',
+        [`.${InputBase_1.inputBaseClasses.input}`]: {
+            height: '100%',
+            width: '100%',
+            padding: 0,
+            textAlign: 'center',
+            '&::placeholder': {
+                fontSize: '1rem',
+                fontWeight: 700,
+                opacity: 1,
+            },
+            '&:focus': {
+                ...slippageControlSelected(theme),
+            },
+            ...selectedStyle,
+        },
+    };
+});
+exports.SlippageLimitsWarningContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1.25),
+    marginTop: theme.spacing(1.5),
+}));

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

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

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

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

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

package/cjs/pages/SettingsPage/ThemeSettings.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("../../types");
+const providers_1 = require("../../providers");
+const LightMode_1 = require("@mui/icons-material/LightMode");
+const BrightnessAuto_1 = require("@mui/icons-material/BrightnessAuto");
+const Nightlight_1 = require("@mui/icons-material/Nightlight");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const stores_1 = require("../../stores");
+const SettingsCard_1 = require("./SettingsCard");
+const Tabs_1 = require("../../components/Tabs");
+const themeIcons = {
+    light: LightMode_1.default,
+    dark: Nightlight_1.default,
+    auto: BrightnessAuto_1.default,
+};
+// If the Tab is not the direct child of the Tabs component you can loose the switching
+// The component passes the props to the Tab component so switching isn't lost
+const ThemeTab = ({ title, value, Icon, ...props }) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: title, arrow: true, children: (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { icon: Icon, value: value, ...props, disableRipple: true }) }));
+const ThemeSettings = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [appearance, setAppearance] = (0, stores_1.useAppearance)();
+    const { hiddenUI } = (0, providers_1.useWidgetConfig)();
+    if (hiddenUI?.includes(types_1.HiddenUI.Appearance)) {
+        return null;
+    }
+    const ThemeIcon = themeIcons[appearance];
+    const handleThemeChange = (_, appearance) => {
+        setAppearance(appearance);
+    };
+    return ((0, jsx_runtime_1.jsx)(SettingsCard_1.SettingCardExpandable, { value: (0, jsx_runtime_1.jsxs)(SettingsCard_1.SummaryValue, { children: [t(`button.${appearance}`), " "] }), icon: (0, jsx_runtime_1.jsx)(ThemeIcon, {}), title: t('settings.theme'), children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs, { value: appearance, "aria-label": "tabs", indicatorColor: "primary", onChange: handleThemeChange, sx: { mt: 1.5 }, children: Object.entries(themeIcons).map(([theme, Icon]) => {
+                const supportedThemeOption = theme;
+                return ((0, jsx_runtime_1.jsx)(ThemeTab, { title: t(`button.${supportedThemeOption}`), value: supportedThemeOption, Icon: (0, jsx_runtime_1.jsx)(Icon, {}) }, supportedThemeOption));
+            }) }) }));
+};
+exports.ThemeSettings = ThemeSettings;

package/cjs/pages/TransactionDetailsPage/ContactSupportButton.js

@@ -10,14 +10,14 @@ const ContactSupportButton = ({ supportId, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const widgetEvents = (0, hooks_1.useWidgetEvents)();
     const handleClick = () => {
-        if (!widgetEvents.all.has(events_1.WidgetEvent.RouteContactSupport)) {
+        if (!widgetEvents.all.has(events_1.WidgetEvent.ContactSupport)) {
             const url = 'https://discord.gg/lifi';
             const target = '_blank';
             const rel = 'nofollow noreferrer';
             window.open(url, target, rel);
         }
         else {
-            widgetEvents.emit(events_1.WidgetEvent.RouteContactSupport, { supportId });
+            widgetEvents.emit(events_1.WidgetEvent.ContactSupport, { supportId });
         }
     };
     return ((0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClick, fullWidth: true, children: t('button.contactSupport') }));

package/cjs/pages/TransactionDetailsPage/TransactionDetailsPage.js

@@ -3,64 +3,69 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransactionDetailsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
-const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 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 shallow_1 = require("zustand/shallow");
 const Card_1 = require("../../components/Card");
 const ContractComponent_1 = require("../../components/ContractComponent");
-const Dialog_1 = require("../../components/Dialog");
 const Insurance_1 = require("../../components/Insurance");
 const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
+const converters_1 = require("../../utils/converters");
 const ContactSupportButton_1 = require("./ContactSupportButton");
 const TransactionDetailsPage_style_1 = require("./TransactionDetailsPage.style");
+const TransactionDetailsSkeleton_1 = require("./TransactionDetailsSkeleton");
 const TransactionDetailsPage = () => {
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
-    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { navigate } = (0, hooks_1.useNavigateBack)();
     const { subvariant, contractComponent, contractSecondaryComponent } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
-    const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state?.routeId], store.deleteRoute], shallow_1.shallow);
-    const headerStoreContext = (0, stores_1.useHeaderStoreContext)();
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const toggleDialog = (0, react_1.useCallback)(() => {
-        setOpen((open) => !open);
-    }, []);
-    const handleDeleteRoute = () => {
-        navigateBack();
-        if (routeExecution) {
-            deleteRoute(routeExecution.route.id);
+    const { tools } = (0, hooks_1.useTools)();
+    const storedRouteExecution = (0, stores_1.useRouteExecutionStore)((store) => store.routes[state?.routeId]);
+    const { transaction, isLoading } = (0, hooks_1.useTransactionDetails)(state?.transactionHash);
+    const routeExecution = (0, react_1.useMemo)(() => {
+        if (storedRouteExecution) {
+            return storedRouteExecution;
         }
+        if (isLoading) {
+            return;
+        }
+        if (transaction) {
+            const routeExecution = (0, converters_1.buildRouteFromTxHistory)(transaction, tools);
+            return routeExecution;
+        }
+    }, [isLoading, storedRouteExecution, tools, transaction]);
+    (0, react_1.useEffect)(() => {
+        if (!isLoading && !routeExecution) {
+            navigate(utils_1.navigationRoutes.home);
+        }
+    }, [isLoading, navigate, routeExecution]);
+    const copySupportId = async () => {
+        await navigator.clipboard.writeText(supportId);
     };
-    const sourceTxHash = routeExecution?.route.steps[0].execution?.process
-        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
-        .find((process) => process.txHash)?.txHash;
+    const sourceTxHash = (0, stores_1.getSourceTxHash)(routeExecution?.route);
     const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress;
     let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
     if (process.env.NODE_ENV === 'development') {
         supportId += `_${routeExecution?.route.id}`;
     }
-    const copySupportId = async () => {
-        await navigator.clipboard.writeText(supportId);
-    };
-    (0, react_1.useEffect)(() => {
-        return headerStoreContext.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
-    }, [headerStoreContext, toggleDialog]);
-    const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
-    return ((0, jsx_runtime_1.jsxs)(TransactionDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    const startedAt = new Date((routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0) *
+        (storedRouteExecution ? 1 : 1000));
+    return isLoading && !storedRouteExecution ? ((0, jsx_runtime_1.jsx)(TransactionDetailsSkeleton_1.TransactionDetailsSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(TransactionDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
-                }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
+                }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
+                            dateStyle: 'long',
+                        }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route, subvariant), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route, subvariant), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(BigInt(routeExecution.route.toAmountMin), routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('main.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(ContactSupportButton_1.ContactSupportButton, { supportId: supportId }) }), (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.deleteTransaction') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), (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: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('main.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, mb: 2.5, children: (0, jsx_runtime_1.jsx)(ContactSupportButton_1.ContactSupportButton, { supportId: supportId }) })] }));
 };
 exports.TransactionDetailsPage = TransactionDetailsPage;

package/cjs/pages/TransactionDetailsPage/TransactionDetailsSkeleton.d.ts

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