import React, { FunctionComponent, useEffect, useState } from 'react' import { RadioGroup } from '@headlessui/react' import { CheckCircleIcon, HeartIcon, PlusCircleIcon, UsersIcon, } from '@heroicons/react/outline' import useMangoStore from '../stores/useMangoStore' import { MangoAccount, MangoGroup } from '@blockworks-foundation/mango-client' import { abbreviateAddress, formatUsdValue } from '../utils' import useLocalStorageState from '../hooks/useLocalStorageState' import Modal from './Modal' import { ElementTitle } from './styles' import Button, { LinkButton } from './Button' import NewAccount from './NewAccount' import { useTranslation } from 'next-i18next' import Tooltip from './Tooltip' import { useWallet } from '@solana/wallet-adapter-react' export const LAST_ACCOUNT_KEY = 'lastAccountViewed-3.0' interface AccountsModalProps { onClose: () => void isOpen: boolean } const AccountsModal: FunctionComponent = ({ isOpen, onClose, }) => { const { t } = useTranslation('common') const { publicKey } = useWallet() const [showNewAccountForm, setShowNewAccountForm] = useState(false) const [newAccPublicKey, setNewAccPublicKey] = useState(null) const mangoAccounts = useMangoStore((s) => s.mangoAccounts) const selectedMangoAccount = useMangoStore( (s) => s.selectedMangoAccount.current ) const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const setMangoStore = useMangoStore((s) => s.set) const actions = useMangoStore((s) => s.actions) const [, setLastAccountViewed] = useLocalStorageState(LAST_ACCOUNT_KEY) const handleMangoAccountChange = (mangoAccount: MangoAccount) => { setLastAccountViewed(mangoAccount.publicKey.toString()) setMangoStore((state) => { state.selectedMangoAccount.current = mangoAccount }) actions.fetchTradeHistory() onClose() } useEffect(() => { if (newAccPublicKey) { setMangoStore((state) => { state.selectedMangoAccount.current = mangoAccounts.find( (ma) => ma.publicKey.toString() === newAccPublicKey ) ?? null }) } }, [mangoAccounts, newAccPublicKey]) const handleNewAccountCreation = (newAccPublicKey) => { if (newAccPublicKey) { setNewAccPublicKey(newAccPublicKey) } setShowNewAccountForm(false) } const handleShowNewAccountForm = () => { setNewAccPublicKey(null) setShowNewAccountForm(true) } return ( {mangoAccounts.length > 0 ? ( !showNewAccountForm ? ( <> {t('mango-accounts')}

{mangoAccounts.length > 1 ? t('select-account') : t('your-account')}

{ if (acc) { handleMangoAccountChange(acc) } }} > {t('select-account')}
{mangoAccounts.map((account) => ( `border ${ checked ? 'border-th-primary' : 'border-th-fgd-4' } default-transition mb-2 flex cursor-pointer items-center rounded-md p-3 text-th-fgd-1 hover:border-th-primary` } > {({ checked }) => ( <>
{account?.name || abbreviateAddress(account.publicKey)} {publicKey && !account?.owner.equals(publicKey) ? ( ) : ( '' )}
{mangoGroup && (
)}
)}
))}
) : ( <> setShowNewAccountForm(false)} > {t('cancel')} ) ) : ( )}
) } const AccountInfo = ({ mangoGroup, mangoAccount, }: { mangoGroup: MangoGroup mangoAccount: MangoAccount }) => { const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache) if (!mangoCache) { return null } const accountEquity = mangoAccount.computeValue(mangoGroup, mangoCache) const health = mangoAccount.getHealthRatio(mangoGroup, mangoCache, 'Maint') return (
{formatUsdValue(accountEquity.toNumber())} | {Number(health) > 100 ? '>100' : health.toFixed(2)}%
) } export default React.memo(AccountsModal)