import { Body, Drawer, Box, MenuItem, TextInput, } from '@biom3/react'; import { useTranslation } from 'react-i18next'; import { useMemo, useState } from 'react'; import { CoinSelectorOption, CoinSelectorOptionProps } from './CoinSelectorOption'; import { selectOptionsContainerStyles, selectOptionsLoadingIconStyles } from './CoinSelectorStyles'; type CoinSelectorProps = { onCloseDrawer?: () => void; heading: string; options: CoinSelectorOptionProps[]; defaultTokenImage: string; optionsLoading?: boolean; children?: any; visible?: boolean; drawerBackground: string | undefined; }; const filterOptions = (filterBy: string, options: CoinSelectorOptionProps[]) => { const filterByLower = filterBy.toLowerCase(); return options.filter((option) => option.name.toLowerCase().includes(filterByLower) || option.symbol.toLowerCase().includes(filterByLower) || option.id.toLowerCase().endsWith(filterByLower)); }; export function CoinSelector({ heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, drawerBackground, }: CoinSelectorProps) { const { t } = useTranslation(); const [searchValue, setSearchValue] = useState(''); const handleOnChange = (event: React.ChangeEvent) => { setSearchValue(event.target.value); }; const filteredOptions = useMemo(() => { if (!searchValue) { return options; } return filterOptions(searchValue, options); }, [options, searchValue]); const handleCloseDrawer = () => { setSearchValue(''); onCloseDrawer?.(); }; return ( {children} {optionsLoading && options.length === 0 && ( )} {!optionsLoading && options.length === 0 && ( {t('drawers.coinSelector.noCoins')} )} {/* Add a search box when !optionsLoading */} {!optionsLoading ? ( <> handleOnChange(event)} sizeVariant="large" value={searchValue} inputMode="search" placeholder="name/symbol/contract address" onClearValue={() => setSearchValue('')} hideClearValueButton={false} autoFocus > {filteredOptions.map(({ onClick, icon, name, symbol, balance, id, testId, }) => ( ))} ) : null} ); }