@relayprotocol/relay-kit-ui 2.17.2

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

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Dropdown } from '../primitives/Dropdown.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGear, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+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';
+import { EventNames } from '../../constants/events.js';
+import { useDebounceValue } from 'usehooks-ts';
+export const SlippageToleranceConfig = ({ setSlippageTolerance: externalSetValue, onAnalyticEvent }) => {
+    const [displayValue, setDisplayValue] = useState(undefined);
+    const [debouncedDisplayValue] = useDebounceValue(displayValue, 500);
+    const bpsValue = debouncedDisplayValue
+        ? Number((Number(debouncedDisplayValue) * 100).toFixed(2)).toString()
+        : undefined;
+    useEffect(() => {
+        externalSetValue(bpsValue);
+    }, [bpsValue, externalSetValue]);
+    const [mode, setMode] = useState('Auto');
+    const [open, setOpen] = useState(false);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (open && mode === 'Custom') {
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+    }, [open, mode]);
+    const slippageRating = displayValue
+        ? getSlippageRating(displayValue)
+        : undefined;
+    const slippageRatingColor = slippageRating
+        ? ratingToColor[slippageRating]
+        : undefined;
+    const handleInputChange = (value) => {
+        // Remove non-numeric characters except decimal point
+        const sanitizedValue = value.replace(/[^0-9.]/g, '');
+        // Handle empty input
+        if (sanitizedValue === '') {
+            setDisplayValue(undefined);
+            return;
+        }
+        // Handle single decimal point input
+        if (sanitizedValue === '.') {
+            setDisplayValue('0.');
+            return;
+        }
+        // Validate format (numbers with up to 2 decimal places)
+        if (!/^[0-9]*\.?[0-9]{0,2}$/.test(sanitizedValue)) {
+            return;
+        }
+        // Prevent multiple leading zeros unless followed by a decimal
+        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?.(EventNames.SWAP_SLIPPAGE_TOLERANCE_SET, {
+            value: isAuto ? 'auto' : displayValue
+        });
+    };
+    return (_jsx("div", { className: "relay-kit-reset", children: _jsx(Dropdown, { open: open, onOpenChange: (isOpen) => {
+                setOpen(isOpen);
+                if (!isOpen) {
+                    handleClose();
+                }
+            }, trigger: _jsxs(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 && (_jsxs(Text, { style: "subtitle2", css: { color: slippageRatingColor }, children: [displayValue, "%"] })), _jsx(FontAwesomeIcon, { icon: faGear })] }), contentProps: {
+                align: 'end',
+                sideOffset: 5,
+                css: { maxWidth: 188, mx: 0 },
+                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 }) }) })] }), _jsxs(TabsRoot, { value: mode, onValueChange: (value) => {
+                            setMode(value);
+                            if (value === 'Auto') {
+                                setDisplayValue(undefined);
+                            }
+                        }, css: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: '100%',
+                            gap: '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: "body3", color: "subtle", css: { lineHeight: '14px' }, 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: 'flex', width: '100%', position: 'relative' }, children: [_jsx(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
+                                                } }), _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] })] })] }) }) }));
+};
+//# sourceMappingURL=SlippageToleranceConfig.js.map

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

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

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Dropdown, DropdownMenuItem } from '../../primitives/Dropdown.js';
+import { Button, Flex, Text, Input, Box } from '../../primitives/index.js';
+import ChainIcon from '../../primitives/ChainIcon.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import AllChainsLogo from '../../../img/AllChainsLogo.js';
+import { TagPill } from './TagPill.js';
+import Fuse from 'fuse.js';
+import { groupChains } from '../../../utils/tokenSelector.js';
+const fuseSearchOptions = {
+    includeScore: true,
+    includeMatches: true,
+    threshold: 0.2,
+    keys: ['id', 'name', 'displayName']
+};
+const ChainFilter = ({ options, value, onSelect, popularChainIds }) => {
+    const [open, setOpen] = useState(false);
+    const [chainSearchInput, setChainSearchInput] = useState('');
+    const chainFuse = new Fuse(options, fuseSearchOptions);
+    const { allChainsOption, popularChains, alphabeticalChains } = useMemo(() => groupChains(options, popularChainIds), [options, popularChainIds]);
+    const filteredChains = useMemo(() => {
+        if (chainSearchInput.trim() === '') {
+            return null;
+        }
+        const results = chainFuse.search(chainSearchInput);
+        const uniqueChains = new Map();
+        results.forEach((result) => {
+            if (!uniqueChains.has(result.item.id)) {
+                uniqueChains.set(result.item.id, result.item);
+            }
+        });
+        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: {
+            align: 'start',
+            avoidCollisions: false,
+            css: {
+                p: 0,
+                width: 'var(--radix-dropdown-menu-trigger-width)',
+                minWidth: 'var(--radix-dropdown-menu-trigger-width)',
+                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(Input, { placeholder: "Search for a chain", icon: _jsx(Box, { css: { color: 'gray9' }, children: _jsx(FontAwesomeIcon, { icon: faMagnifyingGlass, width: 16, height: 16 }) }), containerCss: {
+                        width: '100%',
+                        height: 40,
+                        mb: '2'
+                    }, css: {
+                        width: '100%',
+                        _placeholder_parent: {
+                            textOverflow: 'ellipsis'
+                        },
+                        '--borderColor': 'colors.subtle-border-color',
+                        border: '1px solid var(--borderColor)',
+                        backgroundColor: 'modal-background'
+                    }, value: chainSearchInput, onChange: (e) => setChainSearchInput(e.target.value), onKeyDown: (e) => e.stopPropagation() }), _jsx(Flex, { direction: "column", css: { overflowY: 'scroll', borderRadius: 8, maxHeight: 290 }, children: filteredChains ? (filteredChains.length > 0 ? (filteredChains.map((chain, idx) => {
+                        const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                        return (_jsx(DropdownMenuItem, { onClick: () => {
+                                setOpen(false);
+                                onSelect(chain);
+                                setChainSearchInput('');
+                            }, css: {
+                                p: '2'
+                            }, children: _jsx(ChainFilterRow, { chain: chain, tag: tag }) }, chain.id?.toString() ?? 'all-chains'));
+                    })) : (_jsx(Text, { style: "body1", css: { p: '2', textAlign: 'center' }, children: "No results." }))) : (_jsxs(_Fragment, { children: [allChainsOption && (_jsx(_Fragment, { children: _jsx(DropdownMenuItem, { onClick: () => {
+                                        setOpen(false);
+                                        onSelect(allChainsOption);
+                                        setChainSearchInput('');
+                                    }, css: { p: '2' }, children: _jsx(ChainFilterRow, { chain: allChainsOption }) }) })), popularChains.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { style: "subtitle2", color: "subtle", css: { px: '2', py: '1' }, children: "Popular Chains" }), popularChains.map((chain) => {
+                                        const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                                        return (_jsx(DropdownMenuItem, { onClick: () => {
+                                                setOpen(false);
+                                                onSelect(chain);
+                                                setChainSearchInput('');
+                                            }, css: { p: '2' }, children: _jsx(ChainFilterRow, { chain: chain, tag: tag }) }, chain.id?.toString() ?? 'all-chains'));
+                                    })] })), _jsx(Text, { style: "subtitle2", color: "subtle", css: { px: '2', py: '1' }, children: "Chains A-Z" }), alphabeticalChains.map((chain) => {
+                                const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                                return (_jsx(DropdownMenuItem, { onClick: () => {
+                                        setOpen(false);
+                                        onSelect(chain);
+                                        setChainSearchInput('');
+                                    }, css: { p: '2' }, children: _jsx(ChainFilterRow, { chain: chain, tag: tag }) }, chain.id?.toString() ?? 'all-chains'));
+                            })] })) })] }) }));
+};
+const ChainFilterRow = ({ chain, tag }) => {
+    return (_jsxs(Flex, { align: "center", css: {
+            gap: '2',
+            cursor: 'pointer',
+            flexShrink: 0,
+            alignContent: 'center',
+            width: '100%'
+        }, children: [chain.id ? (_jsx(ChainIcon, { chainId: chain.id, square: true, width: 24, height: 24 })) : (_jsx(AllChainsLogo, { style: { width: 24, height: 24 } })), _jsx(Text, { style: "subtitle2", children: ('displayName' in chain && chain.displayName) || chain.name }), tag && _jsx(TagPill, { tag: tag })] }));
+};
+export default ChainFilter;
+//# sourceMappingURL=ChainFilter.js.map

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

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

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

@@ -0,0 +1,150 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { Flex, Box, Input, ChainIcon, Text, Button, AccessibleList, AccessibleListItem } from '../../primitives/index.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import Fuse from 'fuse.js';
+import { EventNames } from '../../../constants/events.js';
+import AllChainsLogo from '../../../img/AllChainsLogo.js';
+import { TagPill } from './TagPill.js';
+import { groupChains } from '../../../utils/tokenSelector.js';
+const fuseSearchOptions = {
+    includeScore: true,
+    includeMatches: true,
+    threshold: 0.2,
+    keys: ['id', 'name', 'displayName']
+};
+export const ChainFilterSidebar = ({ options, value, isOpen, onSelect, onAnalyticEvent, onInputRef, tokenSearchInputRef, popularChainIds, context }) => {
+    const [chainSearchInput, setChainSearchInput] = useState('');
+    const chainFuse = new Fuse(options, fuseSearchOptions);
+    const activeChainRef = useRef(null);
+    const [hasScrolledOnOpen, setHasScrolledOnOpen] = useState(false);
+    const { allChainsOption, popularChains, alphabeticalChains } = useMemo(() => groupChains(options, popularChainIds), [options, popularChainIds]);
+    const filteredChains = useMemo(() => {
+        if (chainSearchInput.trim() === '') {
+            return null; // Return null to show organized sections
+        }
+        // Remove duplicates from search results
+        const results = chainFuse.search(chainSearchInput);
+        const uniqueChains = new Map();
+        results.forEach((result) => {
+            if (!uniqueChains.has(result.item.id)) {
+                uniqueChains.set(result.item.id, result.item);
+            }
+        });
+        return Array.from(uniqueChains.values());
+    }, [chainSearchInput, chainFuse]);
+    useEffect(() => {
+        if (activeChainRef.current && isOpen && !hasScrolledOnOpen) {
+            activeChainRef.current.scrollIntoView({
+                behavior: 'instant',
+                block: 'nearest'
+            });
+            setHasScrolledOnOpen(true);
+        }
+        else if (!isOpen) {
+            setHasScrolledOnOpen(false);
+            activeChainRef.current = null;
+        }
+    }, [isOpen, hasScrolledOnOpen]);
+    return (_jsx(Flex, { direction: "column", css: {
+            maxWidth: 212,
+            flexShrink: 0,
+            gap: '1',
+            bg: 'gray3',
+            borderRadius: 12,
+            p: '3'
+        }, children: _jsxs(AccessibleList, { onSelect: (selectedValue) => {
+                if (selectedValue === 'input')
+                    return;
+                if (selectedValue) {
+                    const chain = selectedValue === 'all-chains'
+                        ? { id: undefined, name: 'All Chains' }
+                        : options.find((chain) => chain.id?.toString() === selectedValue);
+                    if (chain) {
+                        onSelect(chain);
+                        onAnalyticEvent?.(EventNames.CURRENCY_STEP_CHAIN_FILTER, {
+                            chain: chain.name,
+                            chain_id: chain.id,
+                            search_term: chainSearchInput,
+                            context
+                        });
+                    }
+                }
+            }, css: {
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%'
+            }, children: [_jsx(AccessibleListItem, { value: "input", asChild: true, children: _jsx(Input, { ref: onInputRef, placeholder: "Search chains", icon: _jsx(Box, { css: { color: 'gray9' }, children: _jsx(FontAwesomeIcon, { icon: faMagnifyingGlass, width: 16, height: 16 }) }), containerCss: {
+                            width: '100%',
+                            height: 40,
+                            mb: '2'
+                        }, css: {
+                            width: '100%',
+                            _placeholder_parent: {
+                                textOverflow: 'ellipsis'
+                            },
+                            '--borderColor': 'colors.subtle-border-color',
+                            border: '1px solid var(--borderColor)',
+                            backgroundColor: 'modal-background'
+                        }, value: chainSearchInput, onChange: (e) => setChainSearchInput(e.target.value) }) }), _jsx(Flex, { direction: "column", css: {
+                        flex: 1,
+                        overflowY: 'auto',
+                        gap: '1',
+                        scrollbarColor: 'var(--relay-colors-gray5) transparent'
+                    }, children: filteredChains ? (
+                    // Show search results without sections
+                    filteredChains.map((chain) => {
+                        const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                        const active = value.id === chain.id;
+                        return (_jsx(ChainFilterRow, { chain: chain, isActive: active, tag: tag, onClick: (e) => {
+                                if (e.detail > 0) {
+                                    tokenSearchInputRef?.focus();
+                                }
+                            }, value: chain.id?.toString() ?? 'all-chains' }, chain.id?.toString() ?? 'all-chains'));
+                    })) : (
+                    // Show organized sections
+                    _jsxs(_Fragment, { children: [allChainsOption && (_jsx(_Fragment, { children: _jsx(ChainFilterRow, { chain: allChainsOption, isActive: value.id === undefined, onClick: (e) => {
+                                        if (e.detail > 0) {
+                                            tokenSearchInputRef?.focus();
+                                        }
+                                    }, value: "all-chains" }, "all-chains") })), popularChains.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { style: "subtitle2", color: "subtle", css: { px: '2', py: '1' }, children: "Popular Chains" }), popularChains.map((chain) => {
+                                        const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                                        const active = value.id === chain.id;
+                                        return chain.id ? (_jsx(ChainFilterRow, { chain: chain, isActive: active, tag: tag, onClick: (e) => {
+                                                if (e.detail > 0) {
+                                                    tokenSearchInputRef?.focus();
+                                                }
+                                            }, activeChainRef: active ? activeChainRef : undefined, value: chain.id?.toString() }, chain.id?.toString())) : null;
+                                    })] })), _jsx(Text, { style: "subtitle2", color: "subtle", css: { px: '2', py: '1' }, children: "Chains A-Z" }), alphabeticalChains.map((chain) => {
+                                const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                                const active = value.id === chain.id;
+                                return chain.id ? (_jsx(ChainFilterRow, { chain: chain, isActive: active, tag: tag, onClick: (e) => {
+                                        if (e.detail > 0) {
+                                            tokenSearchInputRef?.focus();
+                                        }
+                                    }, activeChainRef: active ? activeChainRef : undefined, value: chain.id?.toString() }, chain.id?.toString())) : null;
+                            })] })) })] }) }));
+};
+const ChainFilterRow = ({ chain, isActive, onClick, tag, value, activeChainRef }) => {
+    return (_jsx(AccessibleListItem, { value: value, asChild: true, children: _jsxs(Button, { color: "ghost", size: "none", onClick: onClick, ref: isActive ? activeChainRef : null, css: {
+                p: '2',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '2',
+                position: 'relative',
+                ...(isActive && {
+                    backgroundColor: 'gray6'
+                }),
+                transition: 'backdrop-filter 250ms linear',
+                _hover: {
+                    backgroundColor: isActive ? 'gray6' : 'gray/10'
+                },
+                '--focusColor': 'colors.focus-color',
+                _focus: {
+                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                }
+            }, children: [chain.id ? (_jsx(ChainIcon, { chainId: chain.id, square: true, width: 24, height: 24 })) : (_jsx(AllChainsLogo, { style: { width: 24, height: 24 } })), _jsx(Text, { style: "subtitle1", ellipsify: true, children: ('displayName' in chain && chain.displayName) || chain.name }), tag && _jsx(TagPill, { tag: tag })] }) }));
+};
+//# sourceMappingURL=ChainFilterSidebar.js.map

package/_esm/src/components/common/TokenSelector/ChainFilterSidebar.js.map

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

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccessibleListItem, Button, ChainTokenIcon, Flex, Text } from '../../primitives/index.js';
+import { useMemo } from 'react';
+import { useInternalRelayChains } from '../../../hooks/index.js';
+export const SuggestedTokens = ({ chainId, depositAddressOnly, onSelect }) => {
+    const { chains } = useInternalRelayChains();
+    const chain = chains?.find((c) => c.id === chainId);
+    const suggestedTokens = useMemo(() => {
+        if (!chain?.featuredTokens)
+            return [];
+        return chain.featuredTokens
+            .filter((token) => (depositAddressOnly ? token.supportsBridging : true))
+            .map((currency) => {
+            return {
+                ...currency,
+                chainId: Number(chainId),
+                verified: true,
+                logoURI: currency?.metadata?.logoURI ?? ''
+            };
+        });
+    }, [chain?.featuredTokens, chainId, depositAddressOnly]);
+    if (!suggestedTokens.length) {
+        return null;
+    }
+    return (_jsx(Flex, { css: {
+            width: '100%',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '1',
+            my: '2'
+        }, children: suggestedTokens.map((token, idx) => (_jsx(AccessibleListItem, { asChild: true, value: `${token.chainId}:${token.address}`, children: _jsxs(Button, { onClick: (e) => {
+                    e.preventDefault();
+                    onSelect({
+                        ...token
+                    });
+                }, color: "ghost", size: "none", css: {
+                    display: 'flex',
+                    flexShrink: 0,
+                    cursor: 'pointer',
+                    outline: 'none',
+                    p: '1',
+                    pr: '2',
+                    gap: 1,
+                    alignItems: 'center',
+                    '--borderColor': 'colors.gray5',
+                    border: '1px solid var(--borderColor)',
+                    borderRadius: '100px',
+                    '--focusColor': 'colors.focus-color',
+                    _focusVisible: {
+                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                    },
+                    '&[data-state="on"]': {
+                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                    },
+                    _active: {
+                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                    },
+                    _focusWithin: {
+                        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
+                    }
+                }, children: [_jsx(ChainTokenIcon, { chainId: token.chainId, tokenlogoURI: token?.metadata?.logoURI, tokenSymbol: token.symbol }), _jsx(Text, { style: "h6", ellipsify: true, children: token.symbol })] }) }, `${token.chainId}:${token.address}:${idx}`))) }));
+};
+//# sourceMappingURL=SuggestedTokens.js.map

package/_esm/src/components/common/TokenSelector/SuggestedTokens.js.map

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
+import { Text } from '../../primitives/index.js';
+export const TagPill = ({ tag }) => {
+    return (_jsx(Text, { style: "subtitle3", css: {
+            backgroundColor: 'primary5',
+            color: 'primary11',
+            px: '6px',
+            py: '4px',
+            borderRadius: '100px',
+            fontStyle: 'italic',
+            lineHeight: '100%'
+        }, children: tag }));
+};
+//# sourceMappingURL=TagPill.js.map

package/_esm/src/components/common/TokenSelector/TagPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagPill.js","sourceRoot":"","sources":["../../../../../src/components/common/TokenSelector/TagPill.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAMhD,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IACnD,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE;YACH,eAAe,EAAE,UAAU;YAC3B,KAAK,EAAE,WAAW;YAClB,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,KAAK;YACT,YAAY,EAAE,OAAO;YACrB,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,MAAM;SACnB,YAEA,GAAG,GACC,CACR,CAAA;AACH,CAAC,CAAA"}