@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
77 lines • 4.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Percent from '@mui/icons-material/Percent';
import WarningRounded from '@mui/icons-material/WarningRounded';
import { Box, Typography } from '@mui/material';
import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js';
import { defaultSlippage } from '../../../stores/settings/createSettingsStore.js';
import { useSettings } from '../../../stores/settings/useSettings.js';
import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js';
import { formatInputAmount, formatSlippage } from '../../../utils/format.js';
import { BadgedValue } from '../SettingsCard/BadgedValue.js';
import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js';
import { SettingsFieldSet, SlippageCustomInput, SlippageDefaultButton, SlippageLimitsWarningContainer, } from './SlippageSettings.style.js';
const defaultSlippageInputValue = '0.5';
const maxFractionDigits = 5;
export const SlippageSettings = () => {
const { t } = useTranslation();
const { isSlippageNotRecommended, isSlippageUnderRecommendedLimits, isSlippageOutsideRecommendedLimits, isSlippageChanged, } = useSettingMonitor();
const { slippage } = useSettings(['slippage']);
const { setValue } = useSettingsActions();
const defaultValue = useRef(slippage);
const [focused, setFocused] = useState();
const customInputValue = !slippage || slippage === defaultSlippage
? defaultSlippageInputValue
: slippage;
const [inputValue, setInputValue] = useState(customInputValue);
const handleDefaultClick = () => {
setValue('slippage', defaultSlippage);
};
const formatAndSetSlippage = (value, returnInitial = false) => {
const formattedSlippage = formatSlippage(value, defaultValue.current, returnInitial);
const formattedValue = Number(formattedSlippage) === 0 && !returnInitial
? '0'
: formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial);
const maxLength = Number(formattedValue) < 10
? maxFractionDigits + 2
: maxFractionDigits + 3;
const slicedValue = formattedValue.slice(0, maxLength);
setInputValue(slicedValue);
setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage);
};
const handleInputUpdate = (event) => {
formatAndSetSlippage(event.target.value, true);
};
const handleInputFocus = (event) => {
setFocused('input');
formatAndSetSlippage(event.target.value);
};
const handleInputBlur = (event) => {
setFocused(undefined);
formatAndSetSlippage(event.target.value);
};
const badgeColor = isSlippageNotRecommended
? 'warning'
: isSlippageChanged
? 'info'
: undefined;
const slippageWarningText = isSlippageOutsideRecommendedLimits
? t('warning.message.slippageOutsideRecommendedLimits')
: isSlippageUnderRecommendedLimits
? t('warning.message.slippageUnderRecommendedLimits')
: '';
return (_jsx(SettingCardExpandable, { value: _jsx(BadgedValue, { badgeColor: badgeColor, showBadge: !!badgeColor, children: slippage ? `${slippage}%` : t('button.auto') }), icon: _jsx(Percent, {}), title: t('settings.slippage'), children: _jsxs(Box, { sx: {
mt: 1.5,
}, children: [_jsxs(SettingsFieldSet, { children: [_jsx(SlippageDefaultButton, { selected: defaultSlippage === slippage && focused !== 'input', onFocus: () => {
setFocused('button');
}, onBlur: () => {
setFocused(undefined);
}, onClick: handleDefaultClick, disableRipple: true, children: t('button.auto') }), _jsx(SlippageCustomInput, { selected: defaultSlippage !== slippage && focused !== 'button', placeholder: focused === 'input' ? '' : t('settings.custom'), inputProps: {
inputMode: 'decimal',
}, onChange: handleInputUpdate, onFocus: handleInputFocus, value: inputValue, autoComplete: "off", onBlur: handleInputBlur })] }), isSlippageNotRecommended && (_jsxs(SlippageLimitsWarningContainer, { children: [_jsx(WarningRounded, { color: "warning" }), _jsx(Typography, { sx: {
fontSize: 13,
fontWeight: 400,
}, children: slippageWarningText })] }))] }) }));
};
//# sourceMappingURL=SlippageSettings.js.map