import { useMemo, useState } from 'react' import { Listbox } from '@headlessui/react' import { ChevronDownIcon } from '@heroicons/react/solid' import { abbreviateAddress } from '../utils' import useMangoStore, { WalletToken } from '../stores/useMangoStore' import { RefreshClockwiseIcon } from './icons' import { useTranslation } from 'next-i18next' import { LinkButton } from './Button' import { Label } from './Input' import { useWallet } from '@solana/wallet-adapter-react' type AccountSelectProps = { accounts: WalletToken[] selectedAccount: WalletToken onSelectAccount: (WalletToken) => any hideAddress?: boolean } const AccountSelect = ({ accounts, selectedAccount, onSelectAccount, hideAddress = false, }: AccountSelectProps) => { const { wallet } = useWallet() const { t } = useTranslation('common') const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config) const tokenSymbols = useMemo( () => groupConfig?.tokens.map((t) => t.symbol), [groupConfig] ) const missingTokenSymbols = useMemo(() => { const symbolsForAccounts = accounts.map((a) => a.config.symbol) return tokenSymbols?.filter((sym) => !symbolsForAccounts.includes(sym)) }, [accounts, tokenSymbols]) const actions = useMangoStore((s) => s.actions) const [loading, setLoading] = useState(false) const handleChange = (value: string) => { const newAccount = accounts.find( (a) => a.account.publicKey.toBase58() === value ) onSelectAccount(newAccount) } const handleRefreshBalances = async () => { if (!wallet) return setLoading(true) await actions.fetchWalletTokens(wallet) setLoading(false) } return (