@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
143 lines • 8.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SlippageToleranceConfig = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Dropdown_js_1 = require("../primitives/Dropdown.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const index_js_1 = require("../primitives/index.js");
const Tooltip_js_1 = tslib_1.__importDefault(require("../primitives/Tooltip.js"));
const Tabs_js_1 = require("../primitives/Tabs.js");
const slippage_js_1 = require("../../utils/slippage.js");
const events_js_1 = require("../../constants/events.js");
const usehooks_ts_1 = require("usehooks-ts");
const SlippageToleranceConfig = ({ setSlippageTolerance: externalSetValue, onAnalyticEvent }) => {
const [displayValue, setDisplayValue] = (0, react_1.useState)(undefined);
const [debouncedDisplayValue] = (0, usehooks_ts_1.useDebounceValue)(displayValue, 500);
const bpsValue = debouncedDisplayValue
? Number((Number(debouncedDisplayValue) * 100).toFixed(2)).toString()
: undefined;
(0, react_1.useEffect)(() => {
externalSetValue(bpsValue);
}, [bpsValue, externalSetValue]);
const [mode, setMode] = (0, react_1.useState)('Auto');
const [open, setOpen] = (0, react_1.useState)(false);
const inputRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
if (open && mode === 'Custom') {
setTimeout(() => {
inputRef.current?.focus();
}, 0);
}
}, [open, mode]);
const slippageRating = displayValue
? (0, slippage_js_1.getSlippageRating)(displayValue)
: undefined;
const slippageRatingColor = slippageRating
? slippage_js_1.ratingToColor[slippageRating]
: undefined;
const handleInputChange = (value) => {
const sanitizedValue = value.replace(/[^0-9.]/g, '');
if (sanitizedValue === '') {
setDisplayValue(undefined);
return;
}
if (sanitizedValue === '.') {
setDisplayValue('0.');
return;
}
if (!/^[0-9]*\.?[0-9]{0,2}$/.test(sanitizedValue)) {
return;
}
if (sanitizedValue.startsWith('0') &&
sanitizedValue.length > 1 &&
sanitizedValue[1] !== '.') {
return;
}
const numValue = parseFloat(sanitizedValue);
if (!isNaN(numValue)) {
if (numValue > 100) {
setDisplayValue('100');
return;
}
}
setDisplayValue(sanitizedValue);
};
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
};
const handleClose = () => {
const value = parseFloat(displayValue ?? '0');
const isAuto = mode === 'Auto' ||
displayValue === undefined ||
isNaN(value) ||
value < 0.01;
if (isAuto) {
setDisplayValue(undefined);
}
onAnalyticEvent?.(events_js_1.EventNames.SWAP_SLIPPAGE_TOLERANCE_SET, {
value: isAuto ? 'auto' : displayValue
});
};
return ((0, jsx_runtime_1.jsx)("div", { className: "relay-kit-reset", children: (0, jsx_runtime_1.jsx)(Dropdown_js_1.Dropdown, { open: open, onOpenChange: (isOpen) => {
setOpen(isOpen);
if (!isOpen) {
handleClose();
}
}, trigger: (0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": "Slippage Tolerance Configuration", color: "ghost", size: "none", css: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '1',
bg: 'subtle-background-color',
color: slippageRatingColor ?? 'gray9',
p: '2',
borderRadius: 12,
border: 'widget-card-border',
height: '36px',
px: '10px'
}, children: [open === false && displayValue && ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", css: { color: slippageRatingColor }, children: [displayValue, "%"] })), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faGear })] }), contentProps: {
align: 'end',
sideOffset: 5,
css: { maxWidth: 188, mx: 0 },
avoidCollisions: false,
onCloseAutoFocus: (e) => {
e.preventDefault();
}
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { width: '100%', gap: '2', maxWidth: 188 }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "row", css: { gap: '1', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", children: "Max Slippage" }), (0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { content: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "tiny", css: { display: 'inline-block', maxWidth: 190 }, children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray8' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faInfoCircle, width: 14, height: 14 }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsRoot, { value: mode, onValueChange: (value) => {
setMode(value);
if (value === 'Auto') {
setDisplayValue(undefined);
}
}, css: {
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '2'
}, children: [(0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsList, { css: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_js_1.TabsTrigger, { value: "Auto", css: { width: '50%' }, children: "Auto" }), (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsTrigger, { value: "Custom", css: { width: '50%' }, children: "Custom" })] }), (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsContent, { value: "Auto", css: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "subtle", css: { lineHeight: '14px' }, children: "We'll set the slippage automatically to minimize the failure rate." }) }), (0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsContent, { value: "Custom", css: {
display: 'flex',
width: '100%',
overflow: 'hidden',
flexDirection: 'column',
gap: '1'
}, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { display: 'flex', width: '100%', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Input, { ref: inputRef, value: displayValue || '', onChange: (e) => handleInputChange(e.target.value), onKeyDown: handleKeyDown, onBlur: handleClose, placeholder: "2", css: {
height: '36px',
pr: '28px !important',
border: 'none',
textAlign: 'right',
width: '100%',
color: slippageRatingColor
} }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
position: 'absolute',
right: 8,
top: '50%',
transform: 'translateY(-50%)',
color: slippageRatingColor
}, children: "%" })] }), slippageRating === 'very-high' ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", css: { color: 'red11' }, children: "Very high slippage" })) : null, slippageRating === 'high' ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", css: { color: 'amber11' }, children: "High slippage" })) : null] })] })] }) }) }));
};
exports.SlippageToleranceConfig = SlippageToleranceConfig;
//# sourceMappingURL=SlippageToleranceConfig.js.map