@relayprotocol/relay-kit-ui 7.1.5 → 8.0.0

package/_esm/src/components/common/PercentageButtons.js

@@ -2,7 +2,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import {} from 'react';
 import { Button, Flex } from '../primitives/index.js';
 import { MAX_INPUT_BUFFER_BPS, MIN_INPUT_BUFFER_UNITS } from '../../constants/maxAmountBuffer.js';
-export const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmount, fromChain, publicClient, isFromNative, variant = 'desktop', percentages = [20, 50], buttonStyles: customButtonStyles }) => {
+import { cn } from '../../utils/cn.js';
+export const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmount, fromChain, publicClient, isFromNative, variant = 'desktop', percentages = [20, 50], buttonClassName: customButtonClassName }) => {
     const getExecutionBuffer = (amount) => {
         if (amount <= 0n)
             return 0n;
@@ -11,23 +12,9 @@ export const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmou
         return bpsBuffer > minimumBuffer ? bpsBuffer : minimumBuffer;
     };
     const isMobile = variant === 'mobile';
-    const defaultButtonStyles = {
-        fontSize: isMobile ? 14 : 12,
-        fontWeight: '500',
-        px: '1',
-        py: isMobile ? '6px' : '1',
-        minHeight: isMobile ? 'auto' : '23px',
-        lineHeight: '100%',
-        backgroundColor: 'widget-selector-background',
-        border: 'none',
-        borderRadius: isMobile ? '6px' : '12px',
-        flex: isMobile ? '1' : 'none',
-        justifyContent: 'center',
-        _hover: {
-            backgroundColor: 'widget-selector-hover-background'
-        }
-    };
-    const buttonStyles = customButtonStyles || defaultButtonStyles;
+    const defaultButtonClassName = cn('relay:font-medium', isMobile ? 'relay:px-[4px] relay:py-[6px]' : 'relay:p-[4px]', isMobile ? 'relay:h-[26px]' : 'relay:h-[23px]', 'relay:min-h-0', 'relay:leading-none', 'relay:bg-[var(--relay-colors-widget-selector-background)]', 'relay:border-none', isMobile ? 'relay:rounded-[6px]' : 'relay:rounded-[12px]', isMobile ? 'relay:flex-1' : '', 'relay:justify-center', 'relay:hover:bg-[var(--relay-colors-widget-selector-hover-background)]');
+    const buttonFontSize = isMobile ? '14px' : '12px';
+    const buttonClassName = customButtonClassName || defaultButtonClassName;
     const handleMaxClick = async () => {
         if (!balance || !fromChain)
             return;
@@ -54,15 +41,11 @@ export const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmou
             getFeeBufferAmount(fromChain.vmType, fromChain.id, 0n, null);
         }
     };
-    return (_jsxs(Flex, { css: {
-            gap: '1',
-            width: isMobile ? '100%' : 'auto',
-            mb: isMobile ? '1' : '0'
-        }, children: [percentages.map((percent) => (_jsxs(Button, { "aria-label": `${percent}%`, css: buttonStyles, color: "white", disabled: !balance || balance === 0n, onClick: () => {
+    return (_jsxs(Flex, { className: cn('relay:gap-1', isMobile ? 'relay:w-full' : 'relay:w-auto', isMobile ? 'relay:mb-1' : 'relay:mb-0'), children: [percentages.map((percent) => (_jsxs(Button, { "aria-label": `${percent}%`, className: buttonClassName, color: "white", size: "none", style: { fontSize: buttonFontSize }, disabled: !balance || balance === 0n, onClick: () => {
                     if (balance && balance > 0n) {
                         const percentageBuffer = (balance * BigInt(percent)) / 100n;
                         onPercentageClick(percentageBuffer, `${percent}%`);
                     }
-                }, children: [percent, "%"] }, percent))), _jsx(Button, { "aria-label": "MAX", css: buttonStyles, color: "white", disabled: !balance || balance === 0n, onMouseEnter: handleMaxMouseEnter, onClick: handleMaxClick, children: "MAX" })] }));
+                }, children: [percent, "%"] }, percent))), _jsx(Button, { "aria-label": "MAX", className: buttonClassName, color: "white", size: "none", style: { fontSize: buttonFontSize }, disabled: !balance || balance === 0n, onMouseEnter: handleMaxMouseEnter, onClick: handleMaxClick, children: "MAX" })] }));
 };
 //# sourceMappingURL=PercentageButtons.js.map

package/_esm/src/components/common/PercentageButtons.js.map

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

package/_esm/src/components/common/SlippageToleranceConfig.js

@@ -2,85 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { Dropdown } from '../primitives/Dropdown.js';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGear, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
 import { Button, Flex, Input, Text, Box } from '../primitives/index.js';
 import Tooltip from '../primitives/Tooltip.js';
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '../primitives/Tabs.js';
 import { getSlippageRating, ratingToColor } from '../../utils/slippage.js';
+const tokenToColor = (token) => {
+    if (!token)
+        return undefined;
+    return `var(--relay-colors-${token})`;
+};
 import { EventNames } from '../../constants/events.js';
 import { useDebounceValue, useMediaQuery } from 'usehooks-ts';
 import useFallbackState from '../../hooks/useFallbackState.js';
 import { Modal } from './Modal.js';
 import { convertBpsToPercent } from '../../utils/numbers.js';
-const SlippageTabs = ({ mode, setMode, displayValue, setDisplayValue, handleInputChange, handleKeyDown, handleClose, slippageRating, slippageRatingColor, inputRef, widgetType }) => {
+import { cn } from '../../utils/cn.js';
+const SlippageTabs = ({ mode, setMode, displayValue, setDisplayValue, handleInputChange, handleKeyDown, handleClose, slippageRating, slippageRatingColor, inputRef }) => {
     const isMobile = useMediaQuery('(max-width: 520px)');
-    const isTokenWidget = widgetType === 'token';
     return (_jsxs(TabsRoot, { value: mode, onValueChange: (value) => {
             setMode(value);
             if (value === 'Auto') {
                 setDisplayValue(undefined);
             }
-        }, css: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            gap: isTokenWidget ? '4px' : '3',
-            sm: {
-                gap: isTokenWidget ? '4px' : '2'
-            }
-        }, children: [_jsxs(TabsList, { css: { width: '100%' }, children: [_jsx(TabsTrigger, { value: "Auto", css: { width: '50%' }, children: "Auto" }), _jsx(TabsTrigger, { value: "Custom", css: { width: '50%' }, children: "Custom" })] }), _jsx(TabsContent, { value: "Auto", css: { width: '100%' }, children: _jsx(Text, { style: isTokenWidget ? 'body3' : 'body2', color: "subtle", css: isTokenWidget
-                        ? { lineHeight: 'normal', fontSize: '12px' }
-                        : { lineHeight: '14px', sm: { fontSize: '12px' } }, children: "We'll set the slippage automatically to minimize the failure rate." }) }), _jsxs(TabsContent, { value: "Custom", css: {
-                    display: 'flex',
-                    width: '100%',
-                    overflow: 'hidden',
-                    flexDirection: 'column',
-                    gap: '1'
-                }, children: [_jsxs(Flex, { css: {
-                            display: 'none',
-                            smDown: {
-                                display: 'flex',
-                                width: '100%',
-                                gap: '2',
-                                mb: '2'
-                            }
-                        }, children: [_jsx(Button, { color: "ghost", size: "small", css: {
-                                    flex: 1,
-                                    minHeight: 32,
-                                    backgroundColor: 'gray3',
-                                    fontWeight: 500,
-                                    fontSize: 14,
-                                    py: 2,
-                                    borderRadius: '6px',
-                                    justifyContent: 'center',
-                                    '&:hover': {
-                                        backgroundColor: 'gray5'
-                                    }
-                                }, onClick: () => handleInputChange('1'), children: "1%" }), _jsx(Button, { color: "ghost", size: "small", css: {
-                                    flex: 1,
-                                    minHeight: 32,
-                                    backgroundColor: 'gray3',
-                                    fontWeight: 500,
-                                    fontSize: 14,
-                                    py: 2,
-                                    borderRadius: '6px',
-                                    justifyContent: 'center',
-                                    '&:hover': {
-                                        backgroundColor: 'gray5'
-                                    }
-                                }, onClick: () => handleInputChange('2'), children: "2%" }), _jsx(Button, { color: "ghost", size: "small", css: {
-                                    flex: 1,
-                                    minHeight: 32,
-                                    backgroundColor: 'gray3',
-                                    fontWeight: 500,
-                                    fontSize: 14,
-                                    py: 2,
-                                    borderRadius: '6px',
-                                    justifyContent: 'center',
-                                    '&:hover': {
-                                        backgroundColor: 'gray5'
-                                    }
-                                }, onClick: () => handleInputChange('5'), children: "5%" })] }), _jsxs(Flex, { css: { display: 'flex', width: '100%', position: 'relative' }, children: [_jsx(Input, { ref: inputRef, value: displayValue || '', onChange: (e) => handleInputChange(e.target.value), onKeyDown: handleKeyDown, onBlur: handleClose, onFocus: (e) => {
+        }, className: "relay:flex relay:flex-col relay:w-full relay:gap-3 relay:sm:gap-2", children: [_jsxs(TabsList, { className: "relay:w-full", children: [_jsx(TabsTrigger, { value: "Auto", className: "relay:w-1/2", children: "Auto" }), _jsx(TabsTrigger, { value: "Custom", className: "relay:w-1/2", children: "Custom" })] }), _jsx(TabsContent, { value: "Auto", className: "relay:w-full", children: _jsx(Text, { style: "body2", color: "subtle", className: "relay:leading-[14px] relay:sm:text-xs", children: "We'll set the slippage automatically to minimize the failure rate." }) }), _jsxs(TabsContent, { value: "Custom", className: "relay:flex relay:w-full relay:overflow-hidden relay:flex-col relay:gap-1", children: [_jsxs(Flex, { className: "relay:hidden relay:max-[520px]:flex relay:max-[520px]:w-full relay:max-[520px]:gap-2 relay:max-[520px]:mb-2", children: [_jsx(Button, { color: "grey", size: "none", className: "relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center", onClick: () => handleInputChange('1'), children: "1%" }), _jsx(Button, { color: "grey", size: "none", className: "relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center", onClick: () => handleInputChange('2'), children: "2%" }), _jsx(Button, { color: "grey", size: "none", className: "relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center", onClick: () => handleInputChange('5'), children: "5%" })] }), _jsxs(Flex, { className: "relay:flex relay:w-full relay:relative", children: [_jsx(Input, { ref: inputRef, value: displayValue || '', onChange: (e) => handleInputChange(e.target.value), onKeyDown: handleKeyDown, onBlur: handleClose, onFocus: (e) => {
                                     // Move cursor to end of input on focus for better mobile UX
                                     if (isMobile) {
                                         const input = e.target;
@@ -88,29 +34,9 @@ const SlippageTabs = ({ mode, setMode, displayValue, setDisplayValue, handleInpu
                                             input.setSelectionRange(input.value.length, input.value.length);
                                         }, 0);
                                     }
-                                }, placeholder: "2", containerCss: {
-                                    width: '100%'
-                                }, css: {
-                                    height: '36px',
-                                    pr: '28px !important',
-                                    border: 'none',
-                                    textAlign: 'right',
-                                    width: '100%',
-                                    smDown: {
-                                        backgroundColor: 'transparent',
-                                        '--borderColor': 'colors.gray.5',
-                                        border: '1px solid var(--borderColor)'
-                                    },
-                                    color: slippageRatingColor
-                                } }), _jsx(Box, { css: {
-                                    position: 'absolute',
-                                    right: 8,
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    color: slippageRatingColor
-                                }, children: "%" })] }), slippageRating === 'very-high' ? (_jsx(Text, { style: "body3", css: { color: 'red11' }, children: "Very high slippage" })) : null, slippageRating === 'high' ? (_jsx(Text, { style: "body3", css: { color: 'amber11' }, children: "High slippage" })) : null] })] }));
+                                }, placeholder: "2", containerClassName: "relay:w-full", className: cn('relay:h-9 relay:!pr-7 relay:border-none relay:text-right relay:w-full', 'relay:max-[520px]:bg-transparent relay:max-[520px]:border relay:max-[520px]:border-solid relay:max-[520px]:border-[var(--relay-colors-gray-5)]'), inputStyle: { color: tokenToColor(slippageRatingColor) } }), _jsx(Box, { className: "relay:absolute relay:right-2 relay:top-1/2 relay:-translate-y-1/2", children: _jsx("span", { style: { color: tokenToColor(slippageRatingColor) }, children: "%" }) })] }), slippageRating === 'very-high' ? (_jsx(Text, { style: "body3", color: "red", children: "Very high slippage" })) : null, slippageRating === 'high' ? (_jsx(Text, { style: "body3", color: "warningSecondary", children: "High slippage" })) : null] })] }));
 };
-export const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSlippageTolerance: externalSetValue, onAnalyticEvent, currentSlippageTolerance, variant = 'dropdown', label = 'Slippage', onOpenSlippageConfig, showGearIcon = true, showLabel = false, widgetType }) => {
+export const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSlippageTolerance: externalSetValue, onAnalyticEvent, currentSlippageTolerance, variant = 'dropdown', label = 'Slippage', onOpenSlippageConfig, showGearIcon = true, showLabel = false }) => {
     const isMobile = useMediaQuery('(max-width: 520px)');
     const [displayValue, setDisplayValue] = useState(() => currentSlippageTolerance !== undefined
         ? convertBpsToPercent(currentSlippageTolerance)
@@ -191,27 +117,10 @@ export const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSli
             value: isAutoMode ? 'auto' : displayValue
         });
     };
-    const triggerButton = widgetType === 'token' ? (_jsxs(Button, { "aria-label": "Slippage Tolerance Configuration", color: "ghost", size: "none", css: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '4px',
-            borderRadius: '8px',
-            padding: '4px 6px',
-            backgroundColor: 'gray3'
-        }, children: [_jsx(Text, { style: "subtitle3", color: "subtle", children: "Slippage" }), _jsx(Text, { style: "subtitle3", children: displayValue ? `${displayValue}%` : 'Auto' })] })) : (_jsxs(Button, { "aria-label": "Slippage Tolerance Configuration", color: "ghost", size: "none", css: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '1',
-            bg: 'subtle-background-color',
-            color: slippageRatingColor ?? 'gray9',
-            p: '2',
-            borderRadius: 12,
-            border: '1px solid',
-            borderColor: 'gray5',
-            height: '36px',
-            px: '10px'
-        }, children: [open === false && displayValue && (_jsxs(Text, { style: "subtitle2", css: { color: slippageRatingColor }, children: [displayValue, "%"] })), _jsx(FontAwesomeIcon, { icon: faGear })] }));
+    const triggerButton = (_jsxs(Button, { "aria-label": "Slippage Tolerance Configuration", color: "ghost", size: "none", className: "relay:items-center relay:justify-center relay:gap-1 relay:p-2 relay:rounded-[12px] relay:border relay:border-solid relay:border-[var(--relay-colors-gray5)] relay:h-9 relay:px-[10px]", style: {
+            color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)',
+            backgroundColor: 'var(--relay-colors-widget-card-background)'
+        }, children: [open === false && displayValue && (_jsxs(Text, { style: "subtitle2", color: slippageRatingColor === 'red11' ? 'red' : slippageRatingColor === 'amber11' ? 'warningSecondary' : undefined, children: [displayValue, "%"] })), _jsx(FontAwesomeIcon, { icon: faGear })] }));
     const slippageTabsProps = {
         mode,
         setMode,
@@ -222,19 +131,14 @@ export const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSli
         handleClose,
         slippageRating,
         slippageRatingColor,
-        inputRef,
-        widgetType
+        inputRef
     };
-    return (_jsx("div", { className: "relay-kit-reset", children: isMobile ? (_jsx(Modal, { open: open, onOpenChange: (isOpen) => {
+    return (_jsx("div", { className: "relay-kit-reset relay:inline-flex", children: isMobile ? (_jsx(Modal, { open: open, onOpenChange: (isOpen) => {
                 setOpen(isOpen);
                 if (!isOpen) {
                     handleClose();
                 }
-            }, trigger: triggerButton, css: {
-                width: '100%',
-                minHeight: '262px',
-                maxHeight: '90vh'
-            }, children: _jsxs(Flex, { direction: "column", css: { width: '100%', gap: '4' }, children: [_jsx(Text, { style: "h6", children: "Max Slippage" }), _jsx(Text, { style: "body3", color: "subtle", children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), _jsx(SlippageTabs, { ...slippageTabsProps })] }) })) : (_jsx(Dropdown, { open: open, onOpenChange: (isOpen) => {
+            }, trigger: triggerButton, className: "relay:w-full relay:min-h-[262px] relay:max-h-[90vh]", children: _jsxs(Flex, { direction: "column", className: "relay:w-full relay:gap-4", children: [_jsx(Text, { style: "h6", children: "Max Slippage" }), _jsx(Text, { style: "body3", color: "subtle", children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), _jsx(SlippageTabs, { ...slippageTabsProps })] }) })) : (_jsx(Dropdown, { open: open, onOpenChange: (isOpen) => {
                 setOpen(isOpen);
                 if (!isOpen) {
                     handleClose();
@@ -242,11 +146,11 @@ export const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSli
             }, trigger: triggerButton, contentProps: {
                 align: 'end',
                 sideOffset: 5,
-                css: { maxWidth: 188, mx: 0 },
+                className: 'relay:max-w-[188px] relay:mx-0 relay:p-3',
                 avoidCollisions: false,
                 onCloseAutoFocus: (e) => {
                     e.preventDefault();
                 }
-            }, children: _jsxs(Flex, { direction: "column", css: { width: '100%', gap: '2', maxWidth: 188 }, children: [_jsxs(Flex, { direction: "row", css: { gap: '1', alignItems: 'center' }, children: [_jsx(Text, { style: "subtitle3", children: "Max Slippage" }), _jsx(Tooltip, { content: _jsx(Text, { style: "tiny", css: { display: 'inline-block', maxWidth: 190 }, children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), children: _jsx(Box, { css: { color: 'gray8' }, children: _jsx(FontAwesomeIcon, { icon: faInfoCircle, width: 14, height: 14 }) }) })] }), _jsx(SlippageTabs, { ...slippageTabsProps })] }) })) }));
+            }, children: _jsxs(Flex, { direction: "column", className: "relay:w-full relay:gap-2 relay:max-w-[188px]", children: [_jsxs(Flex, { direction: "row", className: "relay:gap-1 relay:items-center", children: [_jsx(Text, { style: "subtitle3", children: "Max Slippage" }), _jsx(Tooltip, { content: _jsx(Text, { style: "tiny", className: "relay:inline-block relay:max-w-[190px]", children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), children: _jsx(Box, { className: "relay:text-[color:var(--relay-colors-gray8)]", children: _jsx(FontAwesomeIcon, { icon: faInfoCircle, width: 14, height: 14 }) }) })] }), _jsx(SlippageTabs, { ...slippageTabsProps })] }) })) }));
 };
 //# sourceMappingURL=SlippageToleranceConfig.js.map

package/_esm/src/components/common/SlippageToleranceConfig.js.map

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

package/_esm/src/components/common/StepIcon.js

@@ -25,12 +25,6 @@ export const StepIcon = ({ stepId, chainId }) => {
         }
         return _jsx(ChainIcon, { chainId: chainId, square: false, width: 14, height: 16 });
     };
-    return (_jsx(Flex, { css: {
-            borderRadius: '100px',
-            padding: '8px',
-            width: '32px',
-            height: '32px',
-            gap: '2'
-        }, children: getIconForStep() }));
+    return (_jsx(Flex, { className: "relay:rounded-[100px] relay:p-2 relay:w-8 relay:h-8 relay:gap-2", children: getIconForStep() }));
 };
 //# sourceMappingURL=StepIcon.js.map

package/_esm/src/components/common/StepIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIcon.js","sourceRoot":"","sources":["../../../../src/components/common/StepIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EACL,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,eAAe,EAChB,MAAM,sBAAsB,CAAA;AAO7B,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;IACjE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACrE,CAAC;QACD,IACE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YACvB,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC1B,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EACvB,CAAC;YACD,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClC,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC/D,CAAC;iBAAM,CAAC;gBACN,OAAO,KAAC,kBAAkB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC1E,CAAC;QACH,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QAC/D,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,KAAC,eAAe,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACvE,CAAC;QACD,OAAO,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAA;IAC9E,CAAC,CAAA;IAED,OAAO,CACL,KAAC,IAAI,IACH,GAAG,EAAE;YACH,YAAY,EAAE,OAAO;YACrB,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,GAAG;SACT,YAEA,cAAc,EAAE,GACZ,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"StepIcon.js","sourceRoot":"","sources":["../../../../src/components/common/StepIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EACL,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,eAAe,EAChB,MAAM,sBAAsB,CAAA;AAO7B,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;IACjE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,KAAC,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACrE,CAAC;QACD,IACE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YACvB,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC1B,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EACvB,CAAC;YACD,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClC,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC/D,CAAC;iBAAM,CAAC;gBACN,OAAO,KAAC,kBAAkB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC1E,CAAC;QACH,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,OAAO,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QAC/D,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,KAAC,eAAe,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACvE,CAAC;QACD,OAAO,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAA;IAC9E,CAAC,CAAA;IAED,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAC,iEAAiE,YAE1E,cAAc,EAAE,GACZ,CACR,CAAA;AACH,CAAC,CAAA"}

package/_esm/src/components/common/TokenSelector/ChainFilter.js

@@ -4,7 +4,9 @@ import { Dropdown } from '../../primitives/Dropdown.js';
 import { Button, Flex, Text, Box } from '../../primitives/index.js';
 import ChainIcon from '../../primitives/ChainIcon.js';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown, faInfoCircle, faStar } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
+import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
 import AllChainsLogo from '../../../img/AllChainsLogo.js';
 import { TagPill } from './TagPill.js';
 import Fuse from 'fuse.js';
@@ -13,6 +15,7 @@ import { isChainStarred, toggleStarredChain } from '../../../utils/localStorage.
 import Tooltip from '../../../components/primitives/Tooltip.js';
 import { EventNames } from '../../../constants/events.js';
 import { ChainSearchInput } from './ChainFilterRow.js';
+import { cn } from '../../../utils/cn.js';
 const fuseSearchOptions = {
     includeScore: true,
     includeMatches: true,
@@ -37,97 +40,39 @@ const ChainFilter = ({ options, value, onSelect, popularChainIds, onChainStarTog
         });
         return Array.from(uniqueChains.values());
     }, [chainSearchInput, chainFuse]);
-    return (_jsx(Dropdown, { open: open, onOpenChange: (open) => setOpen(open), trigger: _jsxs(Button, { "aria-label": `Chain filter`, color: "ghost", size: "none", css: {
-                gap: '2',
-                height: 40,
-                width: '100%',
-                px: '4 !important',
-                cursor: 'pointer',
-                display: 'flex',
-                alignContent: 'center',
-                lineHeight: '20px',
-                backgroundColor: 'dropdown-background',
-                borderRadius: 'dropdown-border-radius'
-            }, children: [_jsxs(Flex, { align: "center", css: { gap: '2' }, children: [value.id ? (_jsx(ChainIcon, { chainId: value.id, width: 20, height: 20, css: { borderRadius: 4, overflow: 'hidden' } })) : (_jsx(AllChainsLogo, { style: { width: 20, height: 20 } })), _jsx(Text, { style: "subtitle1", children: ('displayName' in value && value.displayName) || value.name })] }), _jsx(Text, { style: "body1", css: {
-                        color: 'gray9',
-                        marginLeft: 'auto',
-                        transform: open ? 'rotate(180deg)' : 'rotate(0)',
-                        width: 12
-                    }, children: _jsx(FontAwesomeIcon, { icon: faChevronDown }) })] }), contentProps: {
+    return (_jsx(Dropdown, { open: open, onOpenChange: (open) => setOpen(open), trigger: _jsxs(Button, { "aria-label": `Chain filter`, color: "ghost", size: "none", className: "relay:gap-2 relay:h-[40px] relay:w-full relay:!px-4 relay:cursor-pointer relay:flex relay:content-center relay:leading-[20px] relay:bg-[var(--relay-colors-dropdown-background)] relay:rounded-dropdown", children: [_jsxs(Flex, { align: "center", className: "relay:gap-2", children: [value.id ? (_jsx(ChainIcon, { chainId: value.id, width: 20, height: 20, className: "relay:rounded-[4px] relay:overflow-hidden" })) : (_jsx(AllChainsLogo, { style: { width: 20, height: 20 } })), _jsx(Text, { style: "subtitle1", children: ('displayName' in value && value.displayName) || value.name })] }), _jsx(Text, { style: "body1", className: cn('relay:text-[color:var(--relay-colors-gray9)] relay:ml-auto relay:w-[12px]', open ? 'relay:rotate-180' : 'relay:rotate-0'), children: _jsx(FontAwesomeIcon, { icon: faChevronDown }) })] }), contentProps: {
             align: 'start',
             avoidCollisions: false,
-            css: {
-                p: 0,
-                width: 'var(--radix-dropdown-menu-trigger-width)',
-                minWidth: 'var(--radix-dropdown-menu-trigger-width)',
-                mx: '0'
-            },
+            className: 'relay:p-0 relay:mx-0',
             style: {
                 width: 'var(--radix-popper-anchor-width)',
                 minWidth: 'var(--radix-popper-anchor-width)'
             }
-        }, children: _jsxs(Flex, { direction: "column", css: { p: '2' }, children: [_jsx(ChainSearchInput, { value: chainSearchInput, onChange: setChainSearchInput, onKeyDown: (event) => event.stopPropagation() }), _jsx(Flex, { direction: "column", css: {
-                        overflowY: 'auto',
-                        borderRadius: 8,
-                        maxHeight: 290,
-                        scrollbarColor: 'var(--relay-colors-gray5) transparent'
-                    }, children: filteredChains ? (filteredChains.length > 0 ? (filteredChains.map((chain) => {
+        }, children: _jsxs(Flex, { direction: "column", className: "relay:p-2", children: [_jsx(ChainSearchInput, { value: chainSearchInput, onChange: setChainSearchInput, onKeyDown: (event) => event.stopPropagation() }), _jsx(Flex, { direction: "column", className: "relay:overflow-y-auto relay:rounded-[8px] relay:max-h-[290px]", style: { scrollbarColor: 'var(--relay-colors-gray5) transparent' }, children: filteredChains ? (filteredChains.length > 0 ? (filteredChains.map((chain) => {
                         const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
                         return (_jsx(Flex, { onClick: () => {
                                 setOpen(false);
                                 onSelect(chain);
                                 setChainSearchInput('');
-                            }, css: {
-                                padding: '8px',
-                                borderRadius: 4,
-                                cursor: 'pointer',
-                                backgroundColor: 'modal-background',
-                                _hover: {
-                                    backgroundColor: 'gray3'
-                                }
-                            }, children: _jsx(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
-                    })) : (_jsx(Text, { style: "body1", css: { p: '2', textAlign: 'center' }, children: "No results." }))) : (_jsxs(_Fragment, { children: [allChainsOption && (_jsx(Flex, { onClick: () => {
+                            }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: _jsx(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
+                    })) : (_jsx(Text, { style: "body1", className: "relay:p-2 relay:text-center", children: "No results." }))) : (_jsxs(_Fragment, { children: [allChainsOption && (_jsx(Flex, { onClick: () => {
                                     setOpen(false);
                                     onSelect(allChainsOption);
                                     setChainSearchInput('');
-                                }, css: {
-                                    padding: '8px',
-                                    borderRadius: 4,
-                                    cursor: 'pointer',
-                                    backgroundColor: 'modal-background',
-                                    _hover: {
-                                        backgroundColor: 'gray3'
-                                    }
-                                }, children: _jsx(ChainFilterRow, { chain: allChainsOption, onAnalyticEvent: onAnalyticEvent }) })), starredChains.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", css: { px: '2', py: '1', gap: '1' }, children: [_jsx(Box, { css: { color: 'primary9' }, children: _jsx(FontAwesomeIcon, { icon: faStar, width: 12, height: 12 }) }), _jsx(Text, { style: "subtitle2", color: "subtle", children: "Starred Chains" }), _jsx(Tooltip, { content: _jsx(Text, { style: "body3", children: "Long-press to star a chain" }), children: _jsx(Box, { css: { color: 'gray9' }, children: _jsx(FontAwesomeIcon, { icon: faInfoCircle, width: 12, height: 12 }) }) })] }), starredChains.map((chain) => {
+                                }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: _jsx(ChainFilterRow, { chain: allChainsOption, onAnalyticEvent: onAnalyticEvent }) })), starredChains.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", className: "relay:px-2 relay:py-1 relay:gap-1", children: [_jsx(Box, { className: "relay:text-[color:var(--relay-colors-primary9)]", children: _jsx(FontAwesomeIcon, { icon: faStar, width: 12, height: 12 }) }), _jsx(Text, { style: "subtitle2", color: "subtle", children: "Starred Chains" }), _jsx(Tooltip, { content: _jsx(Text, { style: "body3", children: "Long-press to star a chain" }), children: _jsx(Box, { className: "relay:text-[color:var(--relay-colors-gray9)]", children: _jsx(FontAwesomeIcon, { icon: faInfoCircle, width: 12, height: 12 }) }) })] }), starredChains.map((chain) => {
                                         const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
                                         return (_jsx(Flex, { onClick: () => {
                                                 setOpen(false);
                                                 onSelect(chain);
                                                 setChainSearchInput('');
-                                            }, css: {
-                                                padding: '8px',
-                                                borderRadius: 4,
-                                                cursor: 'pointer',
-                                                backgroundColor: 'modal-background',
-                                                _hover: {
-                                                    backgroundColor: 'gray3'
-                                                }
-                                            }, children: _jsx(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, showStar: false, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
-                                    })] })), _jsx(Text, { style: "subtitle2", color: "subtle", css: { px: '2', py: '1' }, children: "Chains A-Z" }), alphabeticalChains.map((chain) => {
+                                            }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: _jsx(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, showStar: false, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
+                                    })] })), _jsx(Text, { style: "subtitle2", color: "subtle", className: "relay:px-2 relay:py-1", children: "Chains A-Z" }), alphabeticalChains.map((chain) => {
                                 const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
                                 return (_jsx(Flex, { onClick: () => {
                                         setOpen(false);
                                         onSelect(chain);
                                         setChainSearchInput('');
-                                    }, css: {
-                                        padding: '8px',
-                                        borderRadius: 4,
-                                        cursor: 'pointer',
-                                        backgroundColor: 'modal-background',
-                                        _hover: {
-                                            backgroundColor: 'gray3'
-                                        }
-                                    }, children: _jsx(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
+                                    }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: _jsx(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
                             })] })) })] }) }));
 };
 const ChainFilterRow = ({ chain, tag, onToggleStar, showStar = true, onAnalyticEvent }) => {
@@ -207,15 +152,9 @@ const ChainFilterRow = ({ chain, tag, onToggleStar, showStar = true, onAnalyticE
     };
     // Don't show context menu for "All Chains" option
     if (!chain.id) {
-        return (_jsxs(Flex, { align: "center", css: {
-                gap: '2',
-                cursor: 'pointer',
-                flexShrink: 0,
-                alignContent: 'center',
-                width: '100%'
-            }, children: [_jsx(AllChainsLogo, { style: { width: 24, height: 24 } }), _jsx(Text, { style: "subtitle2", children: chain.name })] }));
+        return (_jsxs(Flex, { align: "center", className: "relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full", children: [_jsx(AllChainsLogo, { style: { width: 24, height: 24 } }), _jsx(Text, { style: "subtitle2", children: chain.name })] }));
     }
-    return (_jsxs("div", { style: { position: 'relative', width: '100%' }, children: [_jsxs(Flex, { align: "center", onContextMenu: (e) => {
+    return (_jsxs("div", { className: "relay:relative relay:w-full", children: [_jsxs(Flex, { align: "center", onContextMenu: (e) => {
                     e.preventDefault();
                     setDropdownOpen(true);
                 }, onKeyDown: (e) => {
@@ -223,41 +162,12 @@ const ChainFilterRow = ({ chain, tag, onToggleStar, showStar = true, onAnalyticE
                         e.preventDefault();
                         setDropdownOpen(true);
                     }
-                }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchMove: handleTouchMove, css: {
-                    gap: '2',
-                    cursor: 'pointer',
-                    flexShrink: 0,
-                    alignContent: 'center',
-                    width: '100%',
-                    position: 'relative',
-                    userSelect: 'none'
-                }, style: {
-                    WebkitUserSelect: 'none'
-                }, children: [_jsx(ChainIcon, { chainId: chain.id, square: true, width: 24, height: 24 }), _jsx(Text, { style: "subtitle2", children: ('displayName' in chain && chain.displayName) || chain.name }), showStar && isStarred && (_jsx(Box, { css: { color: 'primary9' }, children: _jsx(FontAwesomeIcon, { icon: faStar, width: 12, height: 12 }) })), tag && _jsx(TagPill, { tag: tag })] }), dropdownOpen && (_jsx("div", { ref: dropdownRef, style: {
-                    position: 'absolute',
-                    top: '100%',
-                    left: 0,
-                    marginTop: '4px',
-                    minWidth: 160,
-                    zIndex: 999999
-                }, onClick: (e) => {
+                }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchMove: handleTouchMove, className: "relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full relay:relative relay:select-none", children: [_jsx(ChainIcon, { chainId: chain.id, square: true, width: 24, height: 24 }), _jsx(Text, { style: "subtitle2", children: ('displayName' in chain && chain.displayName) || chain.name }), showStar && isStarred && (_jsx(Box, { className: "relay:text-[color:var(--relay-colors-primary9)]", children: _jsx(FontAwesomeIcon, { icon: faStar, width: 12, height: 12 }) })), tag && _jsx(TagPill, { tag: tag })] }), dropdownOpen && (_jsx("div", { ref: dropdownRef, className: "relay:absolute relay:top-full relay:left-0 relay:mt-1 relay:min-w-[160px] relay:z-[999999]", onClick: (e) => {
                     e.stopPropagation();
                     handleToggleStar();
-                }, onMouseDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), children: _jsxs(Flex, { css: {
-                        alignItems: 'center',
-                        gap: '8px',
-                        padding: '8px',
-                        borderRadius: 12,
-                        cursor: 'pointer',
-                        backgroundColor: 'gray1',
-                        '--borderColor': 'colors.subtle-border-color',
-                        border: '1px solid var(--borderColor)',
-                        _hover: {
-                            backgroundColor: 'gray2'
-                        }
-                    }, children: [_jsx(Box, { css: {
-                                color: isStarred ? 'gray8' : 'primary9'
-                            }, children: _jsx(FontAwesomeIcon, { icon: faStar, width: 16, height: 16 }) }), _jsx(Text, { style: "subtitle1", css: { lineHeight: '20px' }, children: isStarred ? 'Unstar chain' : 'Star chain' })] }) }))] }));
+                }, onMouseDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), children: _jsxs(Flex, { className: "relay:items-center relay:gap-[8px] relay:p-[8px] relay:rounded-[12px] relay:cursor-pointer relay:bg-[var(--relay-colors-gray1)] relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:hover:bg-[var(--relay-colors-gray2)]", children: [_jsx(Box, { className: cn(isStarred
+                                ? 'relay:text-[color:var(--relay-colors-gray8)]'
+                                : 'relay:text-[color:var(--relay-colors-primary9)]'), children: _jsx(FontAwesomeIcon, { icon: faStar, width: 16, height: 16 }) }), _jsx(Text, { style: "subtitle1", className: "relay:leading-[20px]", children: isStarred ? 'Unstar chain' : 'Star chain' })] }) }))] }));
 };
 export default ChainFilter;
 //# sourceMappingURL=ChainFilter.js.map