import React , { useRef } from 'react' ; import { utils } from 'ethers' ; import { TokenDetails , TokenDetailsWithBalance , ValueRounder } from '@unilogin/commons' ; import UniLoginSdk from '@unilogin/sdk' ; import { TransferDropdownItem } from './TransferDropdownItem' ; import { useToggler } from '../../hooks/useToggler' ; import { useOutsideClick } from '../../hooks/useClickOutside' ; import '../../styles/themes/Jarvis/components/currencyDropdownThemeJarvis.sass' ; interface TransferDropdownProps { sdk : UniLoginSdk ; tokenDetailsWithBalance : TokenDetailsWithBalance [ ] ; tokenDetails : TokenDetails ; setToken : ( token : TokenDetails ) => void ; } export const TransferDropdown = ( { sdk , tokenDetailsWithBalance , tokenDetails , setToken } ) => { const { visible , toggle } = useToggler ( ) ; const ref = useRef ( null ) ; useOutsideClick ( ref , ( ) => toggle ( false ) ) ; const onClick = ( token ) => { toggle ( ) ; setToken ( token ) ; } ; const renderTransferDropdownItems = ( tokensDetails , predicate , dropdownClassName ) => tokensDetails . filter ( predicate ) . map ( ( tokenDetails ) => renderTransferDropdownItem ( tokenDetails , dropdownClassName ) ) ; const renderTransferDropdownItem = ( tokenDetails , dropdownClassName ) => ( < TransferDropdownItem key = { `${ tokenDetails . name }-${ tokenDetails . symbol }` } sdk = { sdk } dropdownClassName = { dropdownClassName } tokenDetails = { tokenDetails } balance = { ValueRounder . floor ( utils . formatUnits ( tokenDetails . balance , tokenDetails . decimals ) ) } onClick = { onClick } / > ) ; return ( < div ref = { ref } className = "currency-accordion" > { renderTransferDropdownItems ( tokenDetailsWithBalance , ( { symbol } ) => symbol === tokenDetails . symbol , `currency-accordion-btn currency-accordion-item ${ visible ? 'expaned' : '' }` ) } { visible && < div className = { `currency-scrollable-list ${ tokenDetailsWithBalance . length <= 2 ? 'one' : 'many' }` } > { renderTransferDropdownItems ( tokenDetailsWithBalance , ( { symbol } ) => symbol !== tokenDetails . symbol , 'currency-accordion-item currency-accordion-item-list' ) } < /div>} < /div>); } ;