import { MangoAccount } from '@blockworks-foundation/mango-client' import { RadioGroup } from '@headlessui/react' import { CheckCircleIcon } from '@heroicons/react/outline' import useLocalStorageState from 'hooks/useLocalStorageState' import { useTranslation } from 'next-i18next' import useMangoStore, { LAST_ACCOUNT_KEY } from 'stores/useMangoStore' import MangoAccountCard from './MangoAccountCard' const SelectMangoAccount = ({ onClose, className, }: { onClose?: () => void className?: string }) => { const { t } = useTranslation('common') const selectedMangoAccount = useMangoStore( (s) => s.selectedMangoAccount.current ) const mangoAccounts = useMangoStore((s) => s.mangoAccounts) const actions = useMangoStore((s) => s.actions) const setMangoStore = useMangoStore((s) => s.set) const [, setLastAccountViewed] = useLocalStorageState(LAST_ACCOUNT_KEY) const handleMangoAccountChange = (mangoAccount: MangoAccount) => { setLastAccountViewed(mangoAccount.publicKey.toString()) setMangoStore((state) => { state.selectedMangoAccount.current = mangoAccount }) actions.fetchTradeHistory() if (onClose) { onClose() } } return ( { if (acc) { handleMangoAccountChange(acc) } }} > {t('select-account')}
{mangoAccounts.map((account) => ( `${ checked ? 'ring-1 ring-inset ring-th-green' : 'ring-1 ring-inset ring-th-fgd-4 hover:ring-th-fgd-2' } default-transition relative flex w-full cursor-pointer rounded-md px-3 py-3 focus:outline-none` } > {({ checked }) => ( <>
{checked && (
)}
)}
))}
) } export default SelectMangoAccount