@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/_esm/pages/SettingsPage/SettingsCard/SettingsAccordian.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useState } from 'react';
+const SettingsAccordionContext = createContext({
+    setOpenCard: (id) => { },
+    openCard: '',
+});
+export const SettingsCardAccordion = ({ children, }) => {
+    const [openCard, setOpenCard] = useState('');
+    return (_jsx(SettingsAccordionContext.Provider, { value: { openCard, setOpenCard }, children: children }));
+};
+export const useSettingsCardExpandable = () => {
+    const settingCardExpandableId = useId();
+    const [expanded, setExpanded] = useState(false);
+    const { openCard, setOpenCard } = useContext(SettingsAccordionContext);
+    const toggleExpanded = () => {
+        const newExpanded = !expanded;
+        setExpanded(newExpanded);
+        if (newExpanded && openCard !== settingCardExpandableId) {
+            setOpenCard(settingCardExpandableId);
+        }
+    };
+    useEffect(() => {
+        if (openCard !== settingCardExpandableId) {
+            setExpanded(false);
+        }
+    }, [settingCardExpandableId, openCard]);
+    return {
+        expanded,
+        toggleExpanded,
+    };
+};
+//# sourceMappingURL=SettingsAccordian.js.map

package/src/_esm/pages/SettingsPage/SettingsCard/SettingsAccordian.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsAccordian.js","sourceRoot":"","sources":["../../../../../../src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9E,MAAM,wBAAwB,GAAG,aAAa,CAAC;IAC7C,WAAW,EAAE,CAAC,EAAU,EAAE,EAAE,GAAE,CAAC;IAC/B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAgC,CAAC,EACjE,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,OAAO,CACL,KAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,YAChE,QAAQ,GACyB,CACrC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,MAAM,uBAAuB,GAAG,KAAK,EAAE,CAAC;IACxC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,WAAW,GAAG,CAAC,QAAQ,CAAC;QAC9B,WAAW,CAAC,WAAW,CAAC,CAAC;QAEzB,IAAI,WAAW,IAAI,QAAQ,KAAK,uBAAuB,EAAE,CAAC;YACxD,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,KAAK,uBAAuB,EAAE,CAAC;YACzC,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,OAAO;QACL,QAAQ;QACR,cAAc;KACf,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/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/src/_esm/pages/SettingsPage/SettingsCard/index.js

@@ -0,0 +1,7 @@
+export * from './SettingCard';
+export * from './SettingCard.style';
+export * from './SettingCardButton';
+export * from './SettingCardExpandable';
+export * from './BadgedValue';
+export * from './SettingsAccordian';
+//# sourceMappingURL=index.js.map

package/src/_esm/pages/SettingsPage/SettingsCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/pages/SettingsPage/SettingsCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC"}

package/src/_esm/pages/SettingsPage/SettingsCard/types.d.ts

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

package/src/_esm/pages/SettingsPage/SettingsCard/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/src/_esm/pages/SettingsPage/SettingsCard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/pages/SettingsPage/SettingsCard/types.ts"],"names":[],"mappings":""}

package/src/_esm/pages/SettingsPage/SettingsPage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container } from '@mui/material';
+import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings';
+import { LanguageSetting } from './LanguageSetting';
+import { ResetSettingsButton } from './ResetSettingsButton';
+import { SendToWalletOptionSetting } from './SendToWalletOptionSetting';
+import { GasPriceSettings } from './GasPriceSettings';
+import { RoutePrioritySettings } from './RoutePrioritySettings';
+import { ThemeSettings } from './ThemeSettings';
+import { SlippageSettings } from './SlippageSettings';
+import { SettingsList, SettingsCardAccordion } from './SettingsCard';
+export const SettingsPage = () => {
+    return (_jsxs(Container, { disableGutters: true, children: [_jsx(SettingsList, { children: _jsxs(SettingsCardAccordion, { children: [_jsx(ThemeSettings, {}), _jsx(LanguageSetting, {}), _jsx(RoutePrioritySettings, {}), _jsx(GasPriceSettings, {}), _jsx(SlippageSettings, {}), _jsx(BridgeAndExchangeSettings, { type: "Bridges" }), _jsx(BridgeAndExchangeSettings, { type: "Exchanges" }), _jsx(SendToWalletOptionSetting, {})] }) }), _jsx(ResetSettingsButton, {})] }));
+};
+//# sourceMappingURL=SettingsPage.js.map

package/src/_esm/pages/SettingsPage/SettingsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPage.js","sourceRoot":"","sources":["../../../../../src/pages/SettingsPage/SettingsPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAErE,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,MAAC,SAAS,IAAC,cAAc,mBACvB,KAAC,YAAY,cACX,MAAC,qBAAqB,eACpB,KAAC,aAAa,KAAG,EACjB,KAAC,eAAe,KAAG,EACnB,KAAC,qBAAqB,KAAG,EACzB,KAAC,gBAAgB,KAAG,EACpB,KAAC,gBAAgB,KAAG,EACpB,KAAC,yBAAyB,IAAC,IAAI,EAAC,SAAS,GAAG,EAC5C,KAAC,yBAAyB,IAAC,IAAI,EAAC,WAAW,GAAG,EAC9C,KAAC,yBAAyB,KAAG,IACP,GACX,EACf,KAAC,mBAAmB,KAAG,IACb,CACb,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/pages/SettingsPage/SlippageSettings/SlippageSettings.d.ts

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

package/src/_esm/pages/SettingsPage/SlippageSettings/SlippageSettings.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import PercentIcon from '@mui/icons-material/Percent';
+import { useSettings, useSettingsStore } from '../../../stores';
+import { useSettingMonitor } from '../../../hooks';
+import { formatSlippage } from '../../../utils';
+import { SettingsFieldSet, SlippageCustomInput, SlippageDefaultButton, SlippageLimitsWarningContainer, } from './SlippageSettings.style';
+import { Box, Typography } from '@mui/material';
+import { SettingCardExpandable, BadgedValue } from '../SettingsCard';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+const slippageDefault = '0.5';
+export const SlippageSettings = () => {
+    const { t } = useTranslation();
+    const { isSlippageOutsideRecommendedLimits, isSlippageChanged } = useSettingMonitor();
+    const { slippage } = useSettings(['slippage']);
+    const setValue = useSettingsStore((state) => state.setValue);
+    const defaultValue = useRef(slippage);
+    const [focused, setFocused] = useState();
+    const handleDefaultClick = () => {
+        setValue('slippage', formatSlippage(slippageDefault, defaultValue.current));
+    };
+    const handleInputUpdate = (event) => {
+        const { value } = event.target;
+        setValue('slippage', formatSlippage(value || slippageDefault, defaultValue.current, true));
+    };
+    const handleInputBlur = (event) => {
+        setFocused(undefined);
+        const { value } = event.target;
+        setValue('slippage', formatSlippage(value || slippageDefault, defaultValue.current));
+    };
+    const customInputValue = !slippage || slippage === slippageDefault ? '' : slippage;
+    const badgeColor = isSlippageOutsideRecommendedLimits
+        ? 'warning'
+        : isSlippageChanged
+            ? 'info'
+            : undefined;
+    return (_jsx(SettingCardExpandable, { value: _jsx(BadgedValue, { badgeColor: badgeColor, showBadge: !!badgeColor, children: `${slippage}%` }), icon: _jsx(PercentIcon, {}), title: t(`settings.slippage`), children: _jsxs(Box, { mt: 1.5, children: [_jsxs(SettingsFieldSet, { children: [_jsx(SlippageDefaultButton, { selected: slippageDefault === slippage && focused !== 'input', onFocus: () => {
+                                setFocused('button');
+                            }, onBlur: () => {
+                                setFocused(undefined);
+                            }, onClick: handleDefaultClick, disableRipple: true, children: slippageDefault }), _jsx(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 && (_jsxs(SlippageLimitsWarningContainer, { children: [_jsx(WarningRoundedIcon, { color: "warning" }), _jsx(Typography, { fontSize: 13, fontWeight: 400, children: t('warning.message.slippageOutsideRecommendedLimits') })] }))] }) }));
+};
+//# sourceMappingURL=SlippageSettings.js.map

package/src/_esm/pages/SettingsPage/SlippageSettings/SlippageSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlippageSettings.js","sourceRoot":"","sources":["../../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx"],"names":[],"mappings":"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"}

package/src/_esm/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/src/_esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js

@@ -0,0 +1,72 @@
+import { alpha, styled } from '@mui/material/styles';
+import { Box, ButtonBase, InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { getCardFieldsetBackgroundColor } from '../../../utils';
+export const SettingsFieldSet = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    backgroundColor: 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 ${alpha(theme.palette.common.black, 0.04)}`,
+});
+export const SlippageDefaultButton = styled(ButtonBase)(({ theme, selected, }) => {
+    const selectedStyle = selected
+        ? {
+            '&:not(:focus)': {
+                ...slippageControlSelected(theme),
+            },
+        }
+        : {};
+    return {
+        height: '100%',
+        width: '100%',
+        fontSize: '1rem',
+        fontWeight: 700,
+        '&:focus': {
+            ...slippageControlSelected(theme),
+        },
+        ...selectedStyle,
+    };
+});
+export const SlippageCustomInput = styled(InputBase)(({ theme, selected, }) => {
+    const selectedStyle = selected
+        ? {
+            '&:not(:focus)': {
+                ...slippageControlSelected(theme),
+            },
+        }
+        : {};
+    return {
+        height: '100%',
+        width: '100%',
+        [`.${inputBaseClasses.input}`]: {
+            height: '100%',
+            width: '100%',
+            padding: 0,
+            textAlign: 'center',
+            '&::placeholder': {
+                fontSize: '1rem',
+                fontWeight: 700,
+                opacity: 1,
+            },
+            '&:focus': {
+                ...slippageControlSelected(theme),
+            },
+            ...selectedStyle,
+        },
+    };
+});
+export const SlippageLimitsWarningContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1.25),
+    marginTop: theme.spacing(1.5),
+}));
+//# sourceMappingURL=SlippageSettings.style.js.map

package/src/_esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlippageSettings.style.js","sourceRoot":"","sources":["../../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx"],"names":[],"mappings":"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"}

package/src/_esm/pages/SettingsPage/SlippageSettings/index.d.ts

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

package/src/_esm/pages/SettingsPage/SlippageSettings/index.js

@@ -0,0 +1,2 @@
+export * from './SlippageSettings';
+//# sourceMappingURL=index.js.map

package/src/_esm/pages/SettingsPage/SlippageSettings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/pages/SettingsPage/SlippageSettings/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/src/_esm/pages/SettingsPage/ThemeSettings.d.ts

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

package/src/_esm/pages/SettingsPage/ThemeSettings.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiddenUI } from '../../types';
+import { useWidgetConfig } from '../../providers';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import BrightnessAuto from '@mui/icons-material/BrightnessAuto';
+import Nightlight from '@mui/icons-material/Nightlight';
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useAppearance } from '../../stores';
+import { SettingCardExpandable, SummaryValue } from './SettingsCard';
+import { Tab, Tabs } from '../../components/Tabs';
+const themeIcons = {
+    light: LightModeIcon,
+    dark: Nightlight,
+    auto: BrightnessAuto,
+};
+// 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 }) => (_jsx(Tooltip, { title: title, arrow: true, children: _jsx(Tab, { icon: Icon, value: value, ...props, disableRipple: true }) }));
+export const ThemeSettings = () => {
+    const { t } = useTranslation();
+    const [appearance, setAppearance] = useAppearance();
+    const { hiddenUI } = useWidgetConfig();
+    if (hiddenUI?.includes(HiddenUI.Appearance)) {
+        return null;
+    }
+    const ThemeIcon = themeIcons[appearance];
+    const handleThemeChange = (_, appearance) => {
+        setAppearance(appearance);
+    };
+    return (_jsx(SettingCardExpandable, { value: _jsxs(SummaryValue, { children: [t(`button.${appearance}`), " "] }), icon: _jsx(ThemeIcon, {}), title: t('settings.theme'), children: _jsx(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 (_jsx(ThemeTab, { title: t(`button.${supportedThemeOption}`), value: supportedThemeOption, Icon: _jsx(Icon, {}) }, supportedThemeOption));
+            }) }) }));
+};
+//# sourceMappingURL=ThemeSettings.js.map

package/src/_esm/pages/SettingsPage/ThemeSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSettings.js","sourceRoot":"","sources":["../../../../../src/pages/SettingsPage/ThemeSettings.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,cAAc;CACrB,CAAC;AAQF,uFAAuF;AACvF,8EAA8E;AAC9E,MAAM,QAAQ,GAA4B,CAAC,EACzC,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,kBAC1B,KAAC,GAAG,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,EAAE,aAAa,SAAG,GAClD,CACX,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,aAAa,EAAE,CAAC;IACpD,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAI,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,SAAS,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,CACxB,CAAuB,EACvB,UAAsB,EACtB,EAAE;QACF,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,IACpB,KAAK,EAAE,MAAC,YAAY,eAAE,CAAC,CAAC,UAAU,UAAU,EAAE,CAAC,SAAiB,EAChE,IAAI,EAAE,KAAC,SAAS,KAAG,EACnB,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,YAE1B,KAAC,IAAI,IACH,KAAK,EAAE,UAAU,gBACN,MAAM,EACjB,cAAc,EAAC,SAAS,EACxB,QAAQ,EAAE,iBAAiB,EAC3B,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAEd,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE;gBAChD,MAAM,oBAAoB,GAAG,KAAmB,CAAC;gBAEjD,OAAO,CACL,KAAC,QAAQ,IAEP,KAAK,EAAE,CAAC,CAAC,UAAU,oBAAoB,EAAE,CAAC,EAC1C,KAAK,EAAE,oBAAoB,EAC3B,IAAI,EAAE,KAAC,IAAI,KAAG,IAHT,oBAAoB,CAIzB,CACH,CAAC;YACJ,CAAC,CAAC,GACG,GACe,CACzB,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/pages/SettingsPage/index.js

@@ -0,0 +1,2 @@
+export * from './SettingsPage';
+//# sourceMappingURL=index.js.map

package/src/_esm/pages/SettingsPage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/pages/SettingsPage/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/src/_esm/pages/TransactionDetailsPage/ContactSupportButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useWidgetEvents } from '../../hooks/';
+import { WidgetEvent } from '../../types/events';
+export const ContactSupportButton = ({ supportId, }) => {
+    const { t } = useTranslation();
+    const widgetEvents = useWidgetEvents();
+    const handleClick = () => {
+        if (!widgetEvents.all.has(WidgetEvent.ContactSupport)) {
+            const url = 'https://discord.gg/lifi';
+            const target = '_blank';
+            const rel = 'nofollow noreferrer';
+            window.open(url, target, rel);
+        }
+        else {
+            widgetEvents.emit(WidgetEvent.ContactSupport, { supportId });
+        }
+    };
+    return (_jsx(Button, { onClick: handleClick, fullWidth: true, children: t('button.contactSupport') }));
+};
+//# sourceMappingURL=ContactSupportButton.js.map

package/src/_esm/pages/TransactionDetailsPage/ContactSupportButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSupportButton.js","sourceRoot":"","sources":["../../../../../src/pages/TransactionDetailsPage/ContactSupportButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAMjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,SAAS,GACiB,EAAE,EAAE;IAC9B,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,CAAC;YACtD,MAAM,GAAG,GAAG,yBAAyB,CAAC;YACtC,MAAM,MAAM,GAAG,QAAQ,CAAC;YACxB,MAAM,GAAG,GAAG,qBAAqB,CAAC;YAClC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,kBACpC,CAAC,CAAC,uBAAuB,CAAC,GACpB,CACV,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
+import { Box, IconButton, Typography } from '@mui/material';
+import { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { Card, CardTitle } from '../../components/Card';
+import { ContractComponent } from '../../components/ContractComponent';
+import { Insurance } from '../../components/Insurance';
+import { getStepList } from '../../components/Step';
+import { useNavigateBack, useTools, useTransactionDetails } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { getSourceTxHash, useRouteExecutionStore } from '../../stores';
+import { formatTokenAmount, navigationRoutes } from '../../utils';
+import { buildRouteFromTxHistory } from '../../utils/converters';
+import { ContactSupportButton } from './ContactSupportButton';
+import { Container } from './TransactionDetailsPage.style';
+import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton';
+export const TransactionDetailsPage = () => {
+    const { t, i18n } = useTranslation();
+    const { navigate } = useNavigateBack();
+    const { subvariant, contractComponent, contractSecondaryComponent } = useWidgetConfig();
+    const { state } = useLocation();
+    const { tools } = useTools();
+    const storedRouteExecution = useRouteExecutionStore((store) => store.routes[state?.routeId]);
+    const { transaction, isLoading } = useTransactionDetails(state?.transactionHash);
+    const routeExecution = useMemo(() => {
+        if (storedRouteExecution) {
+            return storedRouteExecution;
+        }
+        if (isLoading) {
+            return;
+        }
+        if (transaction) {
+            const routeExecution = buildRouteFromTxHistory(transaction, tools);
+            return routeExecution;
+        }
+    }, [isLoading, storedRouteExecution, tools, transaction]);
+    useEffect(() => {
+        if (!isLoading && !routeExecution) {
+            navigate(navigationRoutes.home);
+        }
+    }, [isLoading, navigate, routeExecution]);
+    const copySupportId = async () => {
+        await navigator.clipboard.writeText(supportId);
+    };
+    const sourceTxHash = 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 startedAt = new Date((routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0) *
+        (storedRouteExecution ? 1 : 1000));
+    return isLoading && !storedRouteExecution ? (_jsx(TransactionDetailsSkeleton, {})) : (_jsxs(Container, { children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pb: 1, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
+                            dateStyle: 'long',
+                        }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
+                            timeStyle: 'short',
+                        }).format(startedAt) })] }), getStepList(routeExecution?.route, subvariant), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? (_jsx(Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(BigInt(routeExecution.route.toAmountMin), routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, _jsxs(Card, { mt: 2, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            flex: 1,
+                        }, children: [_jsx(CardTitle, { flex: 1, children: t('main.supportId') }), _jsx(Box, { mr: 1, mt: 1, children: _jsx(IconButton, { size: "medium", onClick: copySupportId, children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), _jsx(Box, { mt: 2, mb: 2.5, children: _jsx(ContactSupportButton, { supportId: supportId }) })] }));
+};
+//# sourceMappingURL=TransactionDetailsPage.js.map

package/src/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetailsPage.js","sourceRoot":"","sources":["../../../../../src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx"],"names":[],"mappings":"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"}

package/src/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.style.js

@@ -0,0 +1,6 @@
+import { Container as MuiContainer } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Container = styled(MuiContainer)(({ theme }) => ({
+    padding: theme.spacing(1, 3),
+}));
+//# sourceMappingURL=TransactionDetailsPage.style.js.map

package/src/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetailsPage.style.js","sourceRoot":"","sources":["../../../../../src/pages/TransactionDetailsPage/TransactionDetailsPage.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5D,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;CAC7B,CAAC,CAAC,CAAC"}

package/src/_esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.d.ts

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

package/src/_esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container, Skeleton } from '@mui/material';
+import { Card } from '../../components/Card';
+const DetailedTextSkeleton = () => {
+    return (_jsxs(Box, { display: "flex", ml: 6, children: [_jsx(Skeleton, { width: 64, height: 16, variant: "text" }), _jsx(Skeleton, { width: 96, height: 16, variant: "text", sx: { marginLeft: 0.5 } })] }));
+};
+const TransactionDetailsTokenSkeleton = () => {
+    return (_jsxs(Box, { py: 1, children: [_jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [_jsx(Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                            borderRadius: '100%',
+                        } }), _jsx(Box, { display: "flex", flexDirection: "column", flex: 1, ml: 2, children: _jsx(Skeleton, { width: 64, height: 32, variant: "text" }) })] }), _jsx(DetailedTextSkeleton, {})] }));
+};
+export const TransactionDetailsSkeleton = () => {
+    return (_jsxs(Container, { children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pb: 1, pt: 0.75, children: [_jsx(Skeleton, { width: 96, height: 20, variant: "text" }), _jsx(Skeleton, { width: 40, height: 20, variant: "text" })] }), _jsxs(Card, { mb: 3, variant: "default", sx: { paddingX: 2 }, children: [_jsx(Box, { pt: 2.5, children: _jsx(Skeleton, { width: 64, height: 12, variant: "rounded" }) }), _jsxs(Box, { py: 1, children: [_jsx(TransactionDetailsTokenSkeleton, {}), _jsxs(Box, { py: 1, children: [_jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [_jsx(Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                                                    borderRadius: '100%',
+                                                } }), _jsx(Box, { display: "flex", flexDirection: "column", flex: 1, ml: 2, children: _jsx(Skeleton, { width: 96, height: 32, variant: "text" }) })] }), _jsx(DetailedTextSkeleton, {}), _jsx(DetailedTextSkeleton, {})] }), Array.from({ length: 3 }).map((_, key) => (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }, py: 1, children: [_jsx(Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                                            borderRadius: '100%',
+                                        } }), _jsx(Skeleton, { sx: {
+                                            ml: 2,
+                                        }, width: 96, height: 32, variant: "text" })] }, key))), _jsx(TransactionDetailsTokenSkeleton, {})] })] })] }));
+};
+//# sourceMappingURL=TransactionDetailsSkeleton.js.map

package/src/_esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionDetailsSkeleton.js","sourceRoot":"","sources":["../../../../../src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx"],"names":[],"mappings":"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"}

package/src/_esm/pages/TransactionDetailsPage/index.js

@@ -0,0 +1,2 @@
+export * from './TransactionDetailsPage';
+//# sourceMappingURL=index.js.map

package/src/_esm/pages/TransactionDetailsPage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/pages/TransactionDetailsPage/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/src/_esm/pages/TransactionHistoryPage/TransactionHistoryEmpty.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReceiptLongRoundedIcon from '@mui/icons-material/ReceiptLongRounded';
+import { Container, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const TransactionHistoryEmpty = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Container, { sx: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingY: 12,
+        }, children: [_jsx(Typography, { fontSize: 48, children: _jsx(ReceiptLongRoundedIcon, { fontSize: "inherit" }) }), _jsx(Typography, { fontSize: 18, fontWeight: 700, children: t('info.title.emptyTransactionHistory') }), _jsx(Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, children: t('info.message.emptyTransactionHistory') })] }));
+};
+//# sourceMappingURL=TransactionHistoryEmpty.js.map

package/src/_esm/pages/TransactionHistoryPage/TransactionHistoryEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionHistoryEmpty.js","sourceRoot":"","sources":["../../../../../src/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,CAAC,MAAM,uBAAuB,GAAa,GAAG,EAAE;IACpD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE;YACF,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,CAAC;YACP,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,EAAE;SACb,aAED,KAAC,UAAU,IAAC,QAAQ,EAAE,EAAE,YACtB,KAAC,sBAAsB,IAAC,QAAQ,EAAC,SAAS,GAAG,GAClC,EACb,KAAC,UAAU,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,YACtC,CAAC,CAAC,oCAAoC,CAAC,GAC7B,EACb,KAAC,UAAU,IACT,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAC,gBAAgB,EACtB,SAAS,EAAC,QAAQ,EAClB,EAAE,EAAE,CAAC,YAEJ,CAAC,CAAC,sCAAsC,CAAC,GAC/B,IACH,CACb,CAAC;AACJ,CAAC,CAAC"}

package/src/_esm/pages/TransactionHistoryPage/TransactionHistoryItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { StatusResponse } from '@lifi/sdk';
+export declare const TransactionHistoryItem: React.FC<{
+    transaction: StatusResponse;
+    size: number;
+    start: number;
+}>;

package/src/_esm/pages/TransactionHistoryPage/TransactionHistoryItem.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Card } from '../../components/Card';
+import { Token, TokenDivider } from '../../components/Token';
+import { navigationRoutes } from '../../utils';
+export const TransactionHistoryItem = ({ transaction, size, start }) => {
+    const { i18n } = useTranslation();
+    const navigate = useNavigate();
+    const sending = transaction.sending;
+    const receiving = transaction.receiving;
+    const handleClick = () => {
+        navigate(navigationRoutes.transactionDetails, {
+            state: {
+                transactionHash: transaction.sending.txHash,
+            },
+        });
+    };
+    const startedAt = new Date((sending.timestamp ?? 0) * 1000);
+    if (!sending.token?.chainId || !receiving.token?.chainId) {
+        return null;
+    }
+    const fromToken = {
+        ...sending.token,
+        amount: BigInt(sending.amount ?? '0'),
+        priceUSD: sending.token.priceUSD ?? '0',
+        symbol: sending.token?.symbol ?? '',
+        decimals: sending.token?.decimals ?? 0,
+        name: sending.token?.name ?? '',
+        chainId: sending.token?.chainId,
+    };
+    const toToken = {
+        ...receiving.token,
+        amount: BigInt(receiving.amount ?? '0'),
+        priceUSD: receiving.token.priceUSD ?? '0',
+        symbol: receiving.token?.symbol ?? '',
+        decimals: receiving.token?.decimals ?? 0,
+        name: receiving.token?.name ?? '',
+        chainId: receiving.token?.chainId,
+    };
+    return (_jsxs(Card, { onClick: handleClick, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            // height: `${size}px`,
+            transform: `translateY(${start}px)`,
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pt: 1.75, px: 2, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
+                            timeStyle: 'short',
+                        }).format(startedAt) })] }), _jsxs(Box, { py: 1, children: [_jsx(Token, { token: fromToken, px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] })] }));
+};
+//# sourceMappingURL=TransactionHistoryItem.js.map

package/src/_esm/pages/TransactionHistoryPage/TransactionHistoryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionHistoryItem.js","sourceRoot":"","sources":["../../../../../src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx"],"names":[],"mappings":"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"}