@lifi/widget 1.0.0

package/pages/SelectWalletPage/SelectWalletPage.js

@@ -0,0 +1,68 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { supportedWallets } from '@lifi/wallet-management';
+import { Avatar, Button, Container, Dialog, DialogActions, DialogContent, DialogContentText, List, ListItemAvatar, } from '@mui/material';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useScrollableContainer } from '../../hooks';
+import { useWallet } from '../../providers/WalletProvider';
+import { WalletListItemButton, WalletListItemText, } from './SelectWalletPage.style';
+export const SelectWalletPage = () => {
+    var _a;
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { connect } = useWallet();
+    const containerElement = useScrollableContainer();
+    const [walletIdentity, setWalletIdentity] = useState({ show: false });
+    const closeDialog = () => {
+        setWalletIdentity({
+            show: false,
+        });
+    };
+    const handleConnect = useCallback((event, wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        const { ethereum } = window;
+        const identityCheckPassed = wallet.checkProviderIdentity({
+            provider: ethereum,
+        });
+        if (!identityCheckPassed) {
+            setWalletIdentity({
+                show: true,
+                wallet,
+            });
+            return;
+        }
+        navigate(-1);
+        yield connect(wallet);
+    }), [connect, navigate]);
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsx(List, Object.assign({ sx: {
+                    paddingLeft: 2,
+                    paddingRight: 2,
+                } }, { children: supportedWallets.map((wallet) => (_jsxs(WalletListItemButton, Object.assign({ onClick: (event) => handleConnect(event, wallet), disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: wallet.icon, alt: wallet.name }, { children: wallet.name[0] })) }), _jsx(WalletListItemText, { primary: wallet.name })] }), wallet.name))) })), _jsxs(Dialog, Object.assign({ open: walletIdentity.show, onClose: closeDialog, container: containerElement, sx: {
+                    position: 'absolute',
+                    overflow: 'hidden',
+                }, PaperProps: {
+                    sx: (theme) => ({
+                        position: 'absolute',
+                        backgroundImage: 'none',
+                        borderTopLeftRadius: theme.shape.borderRadius,
+                        borderTopRightRadius: theme.shape.borderRadius,
+                    }),
+                }, BackdropProps: {
+                    sx: {
+                        position: 'absolute',
+                        backgroundColor: 'rgb(0 0 0 / 48%)',
+                        backdropFilter: 'blur(3px)',
+                    },
+                } }, { children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('wallet.extensionNotFound', {
+                                name: (_a = walletIdentity.wallet) === null || _a === void 0 ? void 0 : _a.name,
+                            }) }) }), _jsx(DialogActions, { children: _jsx(Button, Object.assign({ onClick: closeDialog, autoFocus: true }, { children: t('button.ok') })) })] }))] })));
+};

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+export declare const WalletListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "selected" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletListItem: import("@emotion/styled").StyledComponent<{
+    button?: false | undefined;
+} & import("@mui/material").ListItemBaseProps & {
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "components" | "componentsProps" | "selected" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WalletIdentityPopoverContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SelectWalletPage/SelectWalletPage.style.js

@@ -0,0 +1,27 @@
+import { ListItem, ListItemButton, ListItemText, Typography, } from '@mui/material';
+import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
+import { listItemTextClasses } from '@mui/material/ListItemText';
+import { styled } from '@mui/material/styles';
+import { getContrastAlphaColor } from '../../utils/colors';
+export const WalletListItemButton = styled(ListItemButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusSecondary,
+    paddingLeft: theme.spacing(1.5),
+    height: 64,
+    '&:hover': {
+        backgroundColor: getContrastAlphaColor(theme, '4%'),
+    },
+}));
+export const WalletListItem = styled(ListItem)(({ theme }) => ({
+    padding: theme.spacing(1.5),
+    [`.${listItemSecondaryActionClasses.root}`]: {
+        right: theme.spacing(3),
+    },
+}));
+export const WalletListItemText = styled(ListItemText)(({ theme }) => ({
+    [`.${listItemTextClasses.primary}`]: {
+        fontWeight: 400,
+    },
+}));
+export const WalletIdentityPopoverContent = styled(Typography)({
+    maxWidth: 400,
+});

package/pages/SelectWalletPage/index.d.ts

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

package/pages/SelectWalletPage/index.js

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

package/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -0,0 +1 @@
+export declare const AdvancedPreferences: () => JSX.Element;

package/pages/SettingsPage/AdvancedPreferences.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Switch } from '../../components/Switch';
+import { EnabledBridgesSelect } from './EnabledBridgesSelect';
+import { EnabledExchangesSelect } from './EnabledExchangesSelect';
+export const AdvancedPreferences = () => {
+    const { t } = useTranslation();
+    const [advancedPreferences, setAdvancedPreferences] = useState(false);
+    const handleAdvancedPreferences = (_, checked) => {
+        setAdvancedPreferences(checked);
+    };
+    return (_jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                } }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1", color: "text.primary", lineHeight: "normal" }, { children: t(`settings.advancedPreferences`) })) })), _jsx(Switch, { value: advancedPreferences, onChange: handleAdvancedPreferences })] })), advancedPreferences && (_jsxs(Box, Object.assign({ mt: 3, mb: 1 }, { children: [_jsx(EnabledBridgesSelect, {}), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EnabledExchangesSelect, {}) }))] })))] })));
+};

package/pages/SettingsPage/ColorSchemeButtonGroup.d.ts

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

package/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Brightness4 as Brightness4Icon, DarkMode as DarkModeIcon, LightMode as LightModeIcon, } from '@mui/icons-material';
+import { Box, ToggleButtonGroup } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useAppearance } from '../../hooks';
+import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { ToggleButton } from './ColorSchemeButtonGroup.style';
+export const ColorSchemeButtonGroup = () => {
+    const { t } = useTranslation();
+    const { disableAppearance } = useWidgetConfig();
+    const [appearance, setAppearance] = useAppearance();
+    if (disableAppearance) {
+        return null;
+    }
+    return (_jsx(Box, Object.assign({ pb: 2 }, { children: _jsxs(ToggleButtonGroup, Object.assign({ color: "primary", value: appearance, onChange: (_, value) => {
+                if (value) {
+                    setAppearance(value);
+                }
+            }, exclusive: true, fullWidth: true }, { children: [_jsxs(ToggleButton, Object.assign({ value: "light" }, { children: [_jsx(LightModeIcon, { sx: { marginRight: 1 } }), t('button.light')] })), _jsxs(ToggleButton, Object.assign({ value: "dark" }, { children: [_jsx(DarkModeIcon, { sx: { marginRight: 1 } }), t('button.dark')] })), _jsxs(ToggleButton, Object.assign({ value: "auto" }, { children: [_jsx(Brightness4Icon, { sx: { marginRight: 1 } }), t('button.auto')] }))] })) })));
+};

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

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

package/pages/SettingsPage/ColorSchemeButtonGroup.style.js

@@ -0,0 +1,16 @@
+import { ToggleButton as MuiToggleButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { toggleButtonClasses } from '@mui/material/ToggleButton';
+export const ToggleButton = styled(MuiToggleButton)(({ theme }) => ({
+    textTransform: 'none',
+    borderRadius: theme.shape.borderRadius,
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    [`&.${toggleButtonClasses.selected}`]: {
+        color: theme.palette.mode === 'light'
+            ? theme.palette.primary.main
+            : theme.palette.primary.light,
+        borderColor: 'currentColor !important',
+    },
+}));

package/pages/SettingsPage/EnabledBridgesSelect.d.ts

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

package/pages/SettingsPage/EnabledBridgesSelect.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { Select } from '../../components/Select';
+import { useBridges } from '../../hooks';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+export const EnabledBridgesSelect = () => {
+    const { t } = useTranslation();
+    const { register } = useFormContext();
+    const bridges = useBridges();
+    return bridges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledBridges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledBridges`), defaultValue: bridges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledBridges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: bridges.map((bridge) => (_jsx(MenuItem, Object.assign({ value: bridge }, { children: bridge }), bridge))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 134, sx: { borderRadius: 1 } }));
+};

package/pages/SettingsPage/EnabledExchangesSelect.d.ts

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

package/pages/SettingsPage/EnabledExchangesSelect.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { Select } from '../../components/Select';
+import { useExchanges } from '../../hooks';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+export const EnabledExchangesSelect = () => {
+    const { t } = useTranslation();
+    const { register } = useFormContext();
+    const exchanges = useExchanges();
+    return exchanges.length ? (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.enabledExchanges`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ multiple: true, placeholder: t(`settings.selectEnabledExchanges`), defaultValue: exchanges, MenuProps: { elevation: 2 }, IconComponent: KeyboardArrowDownIcon, inputProps: Object.assign({}, register(SwapFormKey.EnabledExchanges)), renderValue: (selected) => (_jsx(Box, Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 } }, { children: selected.map((value) => (_jsx(Chip, { label: value }, value))) }))) }, { children: exchanges.map((exchange) => (_jsx(MenuItem, Object.assign({ value: exchange }, { children: exchange }), exchange))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 206, sx: { borderRadius: 1 } }));
+};

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -0,0 +1 @@
+export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import { FormControl, MenuItem } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { Select } from '../../components/Select';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+export const GasPriceSelect = () => {
+    const { t } = useTranslation();
+    const { register } = useFormContext();
+    return (_jsxs(CardContainer, Object.assign({ flex: 1 }, { children: [_jsx(CardTitle, { children: t(`settings.gasPrice.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsxs(Select, Object.assign({ defaultValue: "normal", MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.GasPrice)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: [_jsx(MenuItem, Object.assign({ value: "slow" }, { children: t(`settings.gasPrice.slow`) })), _jsx(MenuItem, Object.assign({ value: "normal" }, { children: t(`settings.gasPrice.normal`) })), _jsx(MenuItem, Object.assign({ value: "fast" }, { children: t(`settings.gasPrice.fast`) }))] })) }))] })));
+};

package/pages/SettingsPage/RoutePrioritySelect.d.ts

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

package/pages/SettingsPage/RoutePrioritySelect.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import { FormControl, MenuItem } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { Select } from '../../components/Select';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+export const RoutePrioritySelect = () => {
+    const { t } = useTranslation();
+    const { register } = useFormContext();
+    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.routePriority.title`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ defaultValue: 1, MenuProps: { elevation: 2 }, inputProps: Object.assign({}, register(SwapFormKey.RoutePriority)), IconComponent: KeyboardArrowDownIcon, dense: true }, { children: _jsx(MenuItem, Object.assign({ value: 1 }, { children: t(`settings.routePriority.recommended`) })) })) }))] }));
+};

package/pages/SettingsPage/SettingsPage.d.ts

@@ -0,0 +1 @@
+export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/SettingsPage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container } from '@mui/material';
+import { AdvancedPreferences } from './AdvancedPreferences';
+import { ColorSchemeButtonGroup } from './ColorSchemeButtonGroup';
+import { GasPriceSelect } from './GasPriceSelect';
+import { RoutePrioritySelect } from './RoutePrioritySelect';
+import { SlippageInput } from './SlippageInput';
+export const SettingsPage = () => {
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ px: 3, pt: 1 }, { children: [_jsx(ColorSchemeButtonGroup, {}), _jsx(RoutePrioritySelect, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mt: 2 }, { children: [_jsx(Box, Object.assign({ pr: 2, flex: 1 }, { children: _jsx(SlippageInput, {}) })), _jsx(GasPriceSelect, {})] }))] })), _jsx(AdvancedPreferences, {})] })));
+};

package/pages/SettingsPage/SlippageInput.d.ts

@@ -0,0 +1 @@
+export declare const SlippageInput: () => JSX.Element;

package/pages/SettingsPage/SlippageInput.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputAdornment } from '@mui/material';
+import { useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { CardContainer, CardTitle } from '../../components/Card';
+import { Input } from '../../components/Input';
+import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { formatSlippage } from '../../utils/format';
+export const SlippageInput = () => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const value = useWatch({
+        name: SwapFormKey.Slippage,
+    });
+    const defaultValue = useRef(value);
+    const handleChange = (event) => {
+        const { value } = event.target;
+        setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current, true));
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        setValue(SwapFormKey.Slippage, formatSlippage(value, defaultValue.current));
+    };
+    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t(`settings.slippage`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`settings.slippage`), endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: "%" })), autoComplete: "off", inputProps: {
+                        inputMode: 'decimal',
+                    }, onChange: handleChange, onBlur: handleBlur, value: value, name: SwapFormKey.Slippage }) }))] }));
+};

package/pages/SettingsPage/index.d.ts

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

package/pages/SettingsPage/index.js

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

package/pages/SwapPage/CircularProgress.d.ts

@@ -0,0 +1,4 @@
+import { Status } from '@lifinance/sdk';
+export declare function CircularProgress({ status }: {
+    status: Status;
+}): JSX.Element;

package/pages/SwapPage/CircularProgress.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
+import { Box } from '@mui/material';
+import { CircularProgress as CircularProgressStyled, CircularProgressPending, } from './CircularProgress.style';
+export function CircularProgress({ status }) {
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'grid',
+            position: 'relative',
+            placeItems: 'center',
+        } }, { children: [_jsx(CircularProgressStyled, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "primary", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, status === 'DONE' ? (_jsx(DoneIcon, { color: "success", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, status === 'FAILED' ? (_jsx(WarningIcon, { color: "error", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null] })));
+}

package/pages/SwapPage/CircularProgress.style.d.ts

@@ -0,0 +1,6 @@
+import { Status } from '@lifinance/sdk';
+import { Theme } from '@mui/material';
+export declare const CircularProgress: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    status: Status;
+}, {}, {}>;
+export declare const CircularProgressPending: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/pages/SwapPage/CircularProgress.style.js

@@ -0,0 +1,51 @@
+import { CircularProgress as MuiCircularProgress } from '@mui/material';
+import { circularProgressClasses } from '@mui/material/CircularProgress';
+import { keyframes, styled } from '@mui/material/styles';
+const circleAnimation = keyframes({
+    '0%': {
+        strokeDashoffset: 129,
+        transform: 'rotate(0)',
+    },
+    '50%': {
+        strokeDashoffset: 56,
+        transform: 'rotate(45deg)',
+    },
+    '100%': {
+        strokeDashoffset: 129,
+        transform: 'rotate(360deg)',
+    },
+});
+const getStatusColor = (status, theme) => {
+    switch (status) {
+        case 'ACTION_REQUIRED':
+            return theme.palette.primary.main;
+        case 'DONE':
+            return theme.palette.success.main;
+        case 'FAILED':
+            return theme.palette.error.main;
+        default:
+            return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
+    }
+};
+export const CircularProgress = styled(MuiCircularProgress, {
+    shouldForwardProp: (prop) => prop !== 'status',
+})(({ theme, status }) => ({
+    color: getStatusColor(status, theme),
+}));
+export const CircularProgressPending = styled(MuiCircularProgress)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? theme.palette.primary.main
+        : theme.palette.primary.light,
+    animationDuration: '3s',
+    position: 'absolute',
+    left: 0,
+    [`.${circularProgressClasses.circle}`]: {
+        animationDuration: '2s',
+        animationTimingFunction: 'linear',
+        animationName: circleAnimation,
+        strokeDasharray: 129,
+        strokeDashoffset: 129,
+        strokeLinecap: 'round',
+        transformOrigin: '100% 100%',
+    },
+}));

package/pages/SwapPage/ExecutionItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Process, Step } from '@lifinance/sdk';
+export declare const ExecutionItem: React.FC<{
+    step: Step;
+    process: Process;
+}>;

package/pages/SwapPage/ExecutionItem.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link as LinkIcon } from '@mui/icons-material';
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useChains } from '../../hooks';
+import { CircularProgress } from './CircularProgress';
+import { LinkButton } from './ExecutionItem.style';
+import { getProcessMessage } from './utils';
+export const ExecutionItem = ({ step, process }) => {
+    const { t } = useTranslation();
+    const { getChainById } = useChains();
+    const { title, message } = getProcessMessage(t, getChainById, step, process);
+    return (_jsxs(Box, Object.assign({ px: 2, py: 1 }, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                } }, { children: [_jsx(CircularProgress, { status: process.status }), _jsx(Typography, Object.assign({ ml: 2, fontWeight: process.error ? 700 : 500 }, { children: title })), process.txLink ? (_jsx(Box, Object.assign({ ml: 2, sx: {
+                            display: 'flex',
+                            flex: 1,
+                            justifyContent: 'flex-end',
+                        } }, { children: _jsx(LinkButton, Object.assign({ size: "small", "aria-label": "settings", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: _jsx(LinkIcon, {}) })) }))) : null] })), message ? (_jsx(Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
+};

package/pages/SwapPage/ExecutionItem.style.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export declare const LinkButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "default" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Omit<import("@mui/material").LinkBaseProps, "classes"> & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").LinkClasses> | undefined;
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined>);
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
+    underline?: "none" | "always" | "hover" | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses">, {}, {}>;

package/pages/SwapPage/ExecutionItem.style.js

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

package/pages/SwapPage/StatusBottomSheet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RouteExecution } from '../../hooks';
+export declare const StatusBottomSheet: React.FC<RouteExecution>;