import { Suspense , memo } from 'react' ; import { useSwitchAccount } from '@app/common/hooks/account/use-switch-account' ; import { useLoading } from '@app/common/hooks/use-loading' ; import { AccountBalanceCaption } from '@app/components/account-balance-caption' ; import { Caption } from '@app/components/typography' ; import { AccountName , AccountNameFallback } from './account-name' ; import { useAddressAvailableStxBalance } from '@app/query/balance/balance.hooks' ; import { AccountWithAddress } from '@app/store/accounts/account.models' ; import { AccountListItemLayout } from './account-list-item-layout' ; import { AccountAvatarItem } from './account-avatar' ; interface AccountBalanceLabelProps { address : string ; } const AccountBalanceLabel = memo ( ( { address } ) => { const availableStxBalance = useAddressAvailableStxBalance ( address ) ; return < AccountBalanceCaption availableBalance = { availableStxBalance } />; } ) ; interface AccountListItemProps { account : AccountWithAddress ; handleClose ( ) : void ; } export const AccountListItem = memo ( ( { account , handleClose } ) => { const { isLoading , setIsLoading , setIsIdle } = useLoading ( 'SWITCH_ACCOUNTS' + account . address ) ; const { handleSwitchAccount , getIsActive } = useSwitchAccount ( handleClose ) ; const handleClick = async ( ) => { setIsLoading ( ) ; setTimeout ( async ( ) => { await handleSwitchAccount ( account . index ) ; setIsIdle ( ) ; } , 80 ) ; } ; return ( < AccountListItemLayout account = { account } isLoading = { isLoading } isActive = { getIsActive ( account . index ) } avatar = { < AccountAvatarItem account = { account } / > } onSelectAccount = { handleClick } accountName = { < Suspense fallback = { < AccountNameFallback account = { account } / > } > < AccountName account = { account } /> < /Suspense>} balanceLabel={<Suspense fallback={<Caption>Loading…</Caption > } > < AccountBalanceLabel address = { account . address } /> < /Suspense>}/ > ) ; } ) ;