2022-12-29 16:03:32 -08:00
|
|
|
import { Fragment, ReactNode, useMemo, useState } from 'react'
|
2022-07-15 04:09:23 -07:00
|
|
|
import Button, { LinkButton } from '../shared/Button'
|
2022-07-28 05:13:42 -07:00
|
|
|
import {
|
2022-12-29 16:31:13 -08:00
|
|
|
AdjustmentsHorizontalIcon,
|
2022-12-18 04:30:49 -08:00
|
|
|
ArrowDownRightIcon,
|
|
|
|
ArrowUpLeftIcon,
|
2022-11-02 08:50:03 -07:00
|
|
|
DocumentDuplicateIcon,
|
2022-12-29 15:29:44 -08:00
|
|
|
PencilIcon,
|
|
|
|
TrashIcon,
|
|
|
|
UsersIcon,
|
2022-09-06 21:36:35 -07:00
|
|
|
} from '@heroicons/react/20/solid'
|
2022-07-15 04:09:23 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-12-29 15:29:44 -08:00
|
|
|
import CloseAccountModal from '../modals/CloseAccountModal'
|
|
|
|
import AccountNameModal from '../modals/AccountNameModal'
|
2022-11-02 08:50:03 -07:00
|
|
|
import { copyToClipboard } from 'utils'
|
|
|
|
import { notify } from 'utils/notifications'
|
2022-11-09 18:35:12 -08:00
|
|
|
import { abbreviateAddress } from 'utils/formatting'
|
2022-11-20 18:22:45 -08:00
|
|
|
import {
|
|
|
|
HealthType,
|
2022-12-18 16:54:30 -08:00
|
|
|
MangoAccount,
|
2022-11-20 18:22:45 -08:00
|
|
|
toUiDecimalsForQuote,
|
|
|
|
} from '@blockworks-foundation/mango-v4'
|
2022-12-29 15:29:44 -08:00
|
|
|
import DelegateModal from '@components/modals/DelegateModal'
|
2022-11-18 09:09:39 -08:00
|
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
2022-11-20 12:32:38 -08:00
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
2022-12-18 04:30:49 -08:00
|
|
|
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
|
2022-12-20 15:38:56 -08:00
|
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
|
|
|
import CreateAccountModal from '@components/modals/CreateAccountModal'
|
2022-12-29 16:03:32 -08:00
|
|
|
import { Menu, Transition } from '@headlessui/react'
|
2022-06-21 03:58:57 -07:00
|
|
|
|
2022-12-18 16:54:30 -08:00
|
|
|
export const handleCopyAddress = (
|
|
|
|
mangoAccount: MangoAccount,
|
|
|
|
successMessage: string
|
|
|
|
) => {
|
|
|
|
copyToClipboard(mangoAccount.publicKey.toString())
|
|
|
|
notify({
|
|
|
|
title: successMessage,
|
|
|
|
type: 'success',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2022-06-21 03:58:57 -07:00
|
|
|
const AccountActions = () => {
|
2022-07-15 04:09:23 -07:00
|
|
|
const { t } = useTranslation(['common', 'close-account'])
|
2022-11-20 12:32:38 -08:00
|
|
|
const { group } = useMangoGroup()
|
2022-11-18 09:09:39 -08:00
|
|
|
const { mangoAccount } = useMangoAccount()
|
2022-12-29 15:29:44 -08:00
|
|
|
const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
|
|
|
|
const [showEditAccountModal, setShowEditAccountModal] = useState(false)
|
2022-12-17 04:37:00 -08:00
|
|
|
const [showBorrowModal, setShowBorrowModal] = useState(false)
|
2022-11-16 04:14:53 -08:00
|
|
|
const [showRepayModal, setShowRepayModal] = useState(false)
|
2022-12-29 15:29:44 -08:00
|
|
|
const [showDelegateModal, setShowDelegateModal] = useState(false)
|
2022-12-20 15:38:56 -08:00
|
|
|
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
|
|
|
const { connected } = useWallet()
|
2022-06-21 03:58:57 -07:00
|
|
|
|
2022-11-16 04:14:53 -08:00
|
|
|
const hasBorrows = useMemo(() => {
|
2022-11-20 18:22:45 -08:00
|
|
|
if (!mangoAccount || !group) return false
|
|
|
|
return (
|
|
|
|
toUiDecimalsForQuote(
|
|
|
|
mangoAccount.getLiabsValue(group, HealthType.init).toNumber()
|
2022-12-18 04:30:49 -08:00
|
|
|
) >= 1
|
2022-11-20 18:22:45 -08:00
|
|
|
)
|
2022-11-16 04:14:53 -08:00
|
|
|
}, [mangoAccount, group])
|
|
|
|
|
2022-12-20 15:38:56 -08:00
|
|
|
const handleBorrowModal = () => {
|
|
|
|
if (!connected || mangoAccount) {
|
|
|
|
setShowBorrowModal(true)
|
|
|
|
} else {
|
|
|
|
setShowCreateAccountModal(true)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-21 03:58:57 -07:00
|
|
|
return (
|
2022-07-12 19:02:36 -07:00
|
|
|
<>
|
2022-12-29 16:31:13 -08:00
|
|
|
<div className="flex items-center space-x-2">
|
2022-07-20 21:50:56 -07:00
|
|
|
<Button
|
2022-12-29 16:31:13 -08:00
|
|
|
className="flex w-1/3 items-center justify-center sm:w-auto"
|
|
|
|
disabled={!mangoAccount}
|
|
|
|
onClick={() => setShowRepayModal(true)}
|
|
|
|
secondary={!hasBorrows}
|
|
|
|
>
|
|
|
|
<ArrowDownRightIcon className="mr-2 h-5 w-5" />
|
|
|
|
{t('repay')}
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
className="flex w-1/3 items-center justify-center sm:w-auto"
|
2022-12-20 15:38:56 -08:00
|
|
|
onClick={handleBorrowModal}
|
2022-12-20 15:30:00 -08:00
|
|
|
secondary
|
2022-07-12 20:58:13 -07:00
|
|
|
>
|
2022-12-18 04:30:49 -08:00
|
|
|
<ArrowUpLeftIcon className="mr-2 h-5 w-5" />
|
2022-12-17 04:37:00 -08:00
|
|
|
{t('borrow')}
|
2022-07-12 20:58:13 -07:00
|
|
|
</Button>
|
2022-12-29 16:03:32 -08:00
|
|
|
<Menu>
|
|
|
|
{({ open }) => (
|
2022-12-29 16:31:13 -08:00
|
|
|
<div className="relative w-1/3 sm:w-auto">
|
|
|
|
<Menu.Button
|
|
|
|
className={`default-transition w-full focus:outline-none`}
|
|
|
|
>
|
2022-12-29 16:03:32 -08:00
|
|
|
<Button
|
2022-12-29 16:31:13 -08:00
|
|
|
className="flex w-full items-center justify-center"
|
2022-12-29 16:03:32 -08:00
|
|
|
secondary
|
|
|
|
>
|
2022-12-29 16:31:13 -08:00
|
|
|
<AdjustmentsHorizontalIcon className="mr-2 h-4 w-4" />
|
|
|
|
{t('settings')}
|
2022-12-29 16:03:32 -08:00
|
|
|
</Button>
|
|
|
|
</Menu.Button>
|
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
show={open}
|
|
|
|
as={Fragment}
|
|
|
|
enter="transition ease-in duration-200"
|
|
|
|
enterFrom="opacity-0 scale-75"
|
|
|
|
enterTo="opacity-100 scale-100"
|
|
|
|
leave="transition ease-out duration-200"
|
|
|
|
leaveFrom="opacity-100"
|
|
|
|
leaveTo="opacity-0"
|
|
|
|
>
|
2022-12-29 16:31:13 -08:00
|
|
|
<Menu.Items className="absolute right-0 top-10 mt-1 space-y-1.5 rounded-md bg-th-bkg-2 px-4 py-2.5">
|
2022-12-29 16:03:32 -08:00
|
|
|
<Menu.Item>
|
|
|
|
<ActionsButton
|
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() =>
|
|
|
|
handleCopyAddress(
|
|
|
|
mangoAccount!,
|
|
|
|
t('copy-address-success', {
|
|
|
|
pk: abbreviateAddress(mangoAccount!.publicKey),
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<DocumentDuplicateIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('copy-address')}</span>
|
|
|
|
</ActionsButton>
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<ActionsButton
|
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() => setShowEditAccountModal(true)}
|
|
|
|
>
|
|
|
|
<PencilIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('edit-account')}</span>
|
|
|
|
</ActionsButton>
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<ActionsButton
|
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() => setShowDelegateModal(true)}
|
|
|
|
>
|
|
|
|
<UsersIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('delegate-account')}</span>
|
|
|
|
</ActionsButton>
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<ActionsButton
|
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() => setShowCloseAccountModal(true)}
|
|
|
|
>
|
|
|
|
<TrashIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('close-account')}</span>
|
|
|
|
</ActionsButton>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu.Items>
|
|
|
|
</Transition>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Menu>
|
2022-06-21 03:58:57 -07:00
|
|
|
</div>
|
2022-12-29 15:29:44 -08:00
|
|
|
{showCloseAccountModal ? (
|
|
|
|
<CloseAccountModal
|
|
|
|
isOpen={showCloseAccountModal}
|
|
|
|
onClose={() => setShowCloseAccountModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
{showEditAccountModal ? (
|
|
|
|
<AccountNameModal
|
|
|
|
isOpen={showEditAccountModal}
|
|
|
|
onClose={() => setShowEditAccountModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
2022-12-17 04:37:00 -08:00
|
|
|
{showBorrowModal ? (
|
2022-12-18 04:30:49 -08:00
|
|
|
<BorrowRepayModal
|
|
|
|
action="borrow"
|
2022-12-17 04:37:00 -08:00
|
|
|
isOpen={showBorrowModal}
|
|
|
|
onClose={() => setShowBorrowModal(false)}
|
2022-06-21 03:58:57 -07:00
|
|
|
/>
|
|
|
|
) : null}
|
2022-11-16 04:14:53 -08:00
|
|
|
{showRepayModal ? (
|
2022-12-18 04:30:49 -08:00
|
|
|
<BorrowRepayModal
|
|
|
|
action="repay"
|
2022-11-16 04:14:53 -08:00
|
|
|
isOpen={showRepayModal}
|
|
|
|
onClose={() => setShowRepayModal(false)}
|
2022-11-17 14:08:45 -08:00
|
|
|
/>
|
|
|
|
) : null}
|
2022-12-29 15:29:44 -08:00
|
|
|
{showDelegateModal ? (
|
|
|
|
<DelegateModal
|
|
|
|
isOpen={showDelegateModal}
|
|
|
|
onClose={() => setShowDelegateModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
2022-12-20 15:38:56 -08:00
|
|
|
{showCreateAccountModal ? (
|
|
|
|
<CreateAccountModal
|
|
|
|
isOpen={showCreateAccountModal}
|
|
|
|
onClose={() => setShowCreateAccountModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
2022-07-12 19:02:36 -07:00
|
|
|
</>
|
2022-06-21 03:58:57 -07:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AccountActions
|
2022-12-18 17:47:01 -08:00
|
|
|
|
|
|
|
const ActionsButton = ({
|
|
|
|
children,
|
|
|
|
mangoAccount,
|
|
|
|
onClick,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
mangoAccount: MangoAccount
|
|
|
|
onClick: () => void
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<LinkButton
|
|
|
|
className="whitespace-nowrap font-normal no-underline md:hover:text-th-fgd-1"
|
|
|
|
disabled={!mangoAccount}
|
|
|
|
onClick={onClick}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</LinkButton>
|
|
|
|
)
|
|
|
|
}
|