@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.5

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

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

@@ -0,0 +1,50 @@
+import { Box, ButtonBase, Badge as MuiBadge, Typography } from '@mui/material';
+import { badgeClasses } from '@mui/material/Badge';
+import { styled } from '@mui/material/styles';
+export const SettingsList = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    padding: theme.spacing(1, 3, 2),
+}));
+export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+}));
+export const SummaryRowContainer = styled(Box)({
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
+export const SummaryRowButton = styled(ButtonBase)({
+    background: 'none',
+    color: 'inherit',
+    border: 'none',
+    padding: 0,
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'inherit',
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+});
+export const SummaryValue = styled(Typography)({
+    lineHeight: '1.25',
+    fontWeight: 500,
+});
+export const Badge = styled(MuiBadge)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1.25),
+    [`.${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/_esm/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/_esm/pages/SettingsPage/SettingsCard/SettingCardButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SettingCard } from './SettingCard';
+import { SummaryRowButton, SummaryValue, SummaryTitleContainer, } from './SettingCard.style';
+export const SettingCardButton = ({ onClick, icon, title, children }) => (_jsx(SettingCard, { children: _jsxs(SummaryRowButton, { onClick: onClick, disableRipple: true, children: [_jsxs(SummaryTitleContainer, { children: [icon, _jsx(SummaryValue, { children: title })] }), children] }) }));

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Collapse } from '@mui/material';
+import { SettingCard } from './SettingCard';
+import { SummaryRowButton, SummaryValue, SummaryTitleContainer, } from './SettingCard.style';
+import { useSettingsCardExpandable } from './SettingsAccordian';
+export const SettingCardExpandable = ({ icon, title, value, children }) => {
+    const { expanded, toggleExpanded } = useSettingsCardExpandable();
+    const buttonId = useId();
+    const collapseId = useId();
+    return (_jsxs(SettingCard, { children: [_jsxs(SummaryRowButton, { id: buttonId, "aria-expanded": expanded, "aria-controls": collapseId, onClick: toggleExpanded, disableRipple: true, children: [_jsxs(SummaryTitleContainer, { children: [icon, _jsx(SummaryValue, { children: title })] }), !expanded && value] }), _jsx(Collapse, { id: collapseId, role: "region", "aria-labelledby": buttonId, in: expanded, children: children })] }));
+};

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

@@ -0,0 +1,31 @@
+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,
+    };
+};

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

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

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

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

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

@@ -0,0 +1 @@
+export {};

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

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

package/_esm/pages/SettingsPage/SettingsPage.js

@@ -0,0 +1,14 @@
+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, {})] }));
+};

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

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

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

@@ -0,0 +1,47 @@
+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') })] }))] }) }));
+};

package/_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?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | 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;
+}, "children" | "sx" | "style" | "className" | "tabIndex" | "disabled" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "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?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export {};

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

@@ -0,0 +1,71 @@
+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),
+}));

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

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

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

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

package/_esm/pages/SettingsPage/ThemeSettings.js

@@ -0,0 +1,35 @@
+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));
+            }) }) }));
+};

package/_esm/pages/SettingsPage/index.js

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

package/_esm/pages/TransactionDetailsPage/ContactSupportButton.d.ts

@@ -0,0 +1,5 @@
+interface ContactSupportButtonProps {
+    supportId?: string;
+}
+export declare const ContactSupportButton: ({ supportId, }: ContactSupportButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/_esm/pages/TransactionDetailsPage/ContactSupportButton.js

@@ -0,0 +1,21 @@
+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') }));
+};

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

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

package/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.js

@@ -0,0 +1,67 @@
+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 }) })] }));
+};

package/_esm/pages/TransactionDetailsPage/TransactionDetailsPage.style.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/material").ContainerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "fixed" | "maxWidth" | "children" | "sx" | "style" | "className" | "classes" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

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

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

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

package/_esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js

@@ -0,0 +1,27 @@
+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, {})] })] })] }));
+};

package/_esm/pages/TransactionDetailsPage/index.js

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

package/_esm/pages/TransactionHistoryPage/TransactionHistoryEmpty.d.ts

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

package/_esm/pages/TransactionHistoryPage/TransactionHistoryEmpty.js

@@ -0,0 +1,15 @@
+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') })] }));
+};

package/_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;
+}>;