2023-08-14 20:06:00 -07:00
|
|
|
import { Fragment, useState } from 'react'
|
2023-05-29 22:49:26 -07:00
|
|
|
import Button, { IconButton } from '../shared/Button'
|
2022-07-28 05:13:42 -07:00
|
|
|
import {
|
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,
|
2023-08-06 21:08:35 -07:00
|
|
|
SquaresPlusIcon,
|
2022-12-29 15:29:44 -08:00
|
|
|
TrashIcon,
|
2023-01-19 19:48:14 -08:00
|
|
|
UserPlusIcon,
|
2022-12-31 01:46:26 -08:00
|
|
|
WrenchIcon,
|
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-12-31 01:46:26 -08:00
|
|
|
import { MangoAccount } 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-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'
|
2023-01-29 02:05:32 -08:00
|
|
|
import { Popover, Transition } from '@headlessui/react'
|
2023-01-05 01:04:09 -08:00
|
|
|
import ActionsLinkButton from './ActionsLinkButton'
|
2023-02-12 18:46:41 -08:00
|
|
|
import useUnownedAccount from 'hooks/useUnownedAccount'
|
2023-05-29 22:49:26 -07:00
|
|
|
import { useViewport } from 'hooks/useViewport'
|
|
|
|
import { breakpoints } from 'utils/theme'
|
2023-08-06 21:08:35 -07:00
|
|
|
import MangoAccountSizeModal from '@components/modals/MangoAccountSizeModal'
|
2023-08-14 20:06:00 -07:00
|
|
|
import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
|
2022-06-21 03:58:57 -07:00
|
|
|
|
2022-12-18 16:54:30 -08:00
|
|
|
export const handleCopyAddress = (
|
|
|
|
mangoAccount: MangoAccount,
|
2023-07-21 11:47:53 -07:00
|
|
|
successMessage: string,
|
2022-12-18 16:54:30 -08:00
|
|
|
) => {
|
|
|
|
copyToClipboard(mangoAccount.publicKey.toString())
|
|
|
|
notify({
|
|
|
|
title: successMessage,
|
|
|
|
type: 'success',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2022-06-21 03:58:57 -07:00
|
|
|
const AccountActions = () => {
|
2023-08-06 21:08:35 -07:00
|
|
|
const { t } = useTranslation(['common', 'close-account', 'settings'])
|
2023-02-12 18:46:41 -08:00
|
|
|
const { mangoAccount, mangoAccountAddress } = 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)
|
2023-08-06 21:08:35 -07:00
|
|
|
const [showAccountSizeModal, setShowAccountSizeModal] = useState(false)
|
2022-12-20 15:38:56 -08:00
|
|
|
const { connected } = useWallet()
|
2023-07-08 04:41:10 -07:00
|
|
|
const { isDelegatedAccount, isUnownedAccount } = useUnownedAccount()
|
2023-05-29 22:49:26 -07:00
|
|
|
const { width } = useViewport()
|
|
|
|
const isMobile = width ? width < breakpoints.sm : false
|
2023-08-14 20:06:00 -07:00
|
|
|
const { isAccountFull } = useMangoAccountAccounts()
|
2022-11-16 04:14:53 -08:00
|
|
|
|
2022-12-20 15:38:56 -08:00
|
|
|
const handleBorrowModal = () => {
|
2023-02-12 18:46:41 -08:00
|
|
|
if (mangoAccountAddress || !connected) {
|
2022-12-20 15:38:56 -08:00
|
|
|
setShowBorrowModal(true)
|
|
|
|
} else {
|
|
|
|
setShowCreateAccountModal(true)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-21 03:58:57 -07:00
|
|
|
return (
|
2022-07-12 19:02:36 -07:00
|
|
|
<>
|
2023-02-12 18:46:41 -08:00
|
|
|
{isUnownedAccount ? null : (
|
2023-01-05 00:52:16 -08:00
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
<Button
|
2023-05-29 22:49:26 -07:00
|
|
|
className="flex w-full items-center justify-center sm:w-1/3 md:w-auto"
|
2023-02-12 18:46:41 -08:00
|
|
|
disabled={!mangoAccountAddress}
|
2023-01-05 00:52:16 -08:00
|
|
|
onClick={() => setShowRepayModal(true)}
|
|
|
|
secondary
|
|
|
|
>
|
2023-05-29 22:49:26 -07:00
|
|
|
<ArrowDownRightIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
2023-01-05 00:52:16 -08:00
|
|
|
{t('repay')}
|
|
|
|
</Button>
|
|
|
|
<Button
|
2023-05-29 22:49:26 -07:00
|
|
|
className="flex w-full items-center justify-center sm:w-1/3 md:w-auto"
|
2023-01-05 00:52:16 -08:00
|
|
|
onClick={handleBorrowModal}
|
|
|
|
secondary
|
|
|
|
>
|
2023-05-29 22:49:26 -07:00
|
|
|
<ArrowUpLeftIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
2023-01-05 00:52:16 -08:00
|
|
|
{t('borrow')}
|
|
|
|
</Button>
|
2023-05-29 22:49:26 -07:00
|
|
|
<Popover className="relative sm:w-1/3 md:w-auto">
|
2023-01-05 00:52:16 -08:00
|
|
|
{({ open }) => (
|
2023-02-01 15:15:01 -08:00
|
|
|
<>
|
2023-01-29 02:05:32 -08:00
|
|
|
<Popover.Button
|
2023-04-19 18:12:45 -07:00
|
|
|
className={`w-full focus:outline-none`}
|
2023-01-07 12:52:22 -08:00
|
|
|
as="div"
|
2022-12-29 16:03:32 -08:00
|
|
|
>
|
2023-05-29 22:49:26 -07:00
|
|
|
{!isMobile ? (
|
|
|
|
<Button
|
|
|
|
className="flex w-full items-center justify-center"
|
|
|
|
secondary
|
|
|
|
>
|
|
|
|
<WrenchIcon className="mr-2 h-4 w-4 flex-shrink-0" />
|
|
|
|
{t('actions')}
|
|
|
|
</Button>
|
|
|
|
) : (
|
|
|
|
<IconButton size="medium">
|
|
|
|
<WrenchIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
|
|
|
)}
|
2023-01-29 02:05:32 -08:00
|
|
|
</Popover.Button>
|
2023-01-05 00:52:16 -08:00
|
|
|
<Transition
|
|
|
|
appear={true}
|
|
|
|
show={open}
|
|
|
|
as={Fragment}
|
2023-02-03 13:38:49 -08:00
|
|
|
enter="transition ease-in duration-75"
|
|
|
|
enterFrom="opacity-0 nice scale-75"
|
2023-01-05 00:52:16 -08:00
|
|
|
enterTo="opacity-100 scale-100"
|
2023-02-03 13:38:49 -08:00
|
|
|
leave="transition ease-out duration-100"
|
2023-01-05 00:52:16 -08:00
|
|
|
leaveFrom="opacity-100"
|
|
|
|
leaveTo="opacity-0"
|
|
|
|
>
|
2023-02-03 13:38:49 -08:00
|
|
|
<Popover.Panel className="absolute right-0 top-10 mt-1 space-y-2 rounded-md bg-th-bkg-2 px-4 py-2.5">
|
2023-01-29 02:05:32 -08:00
|
|
|
<ActionsLinkButton
|
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() =>
|
|
|
|
handleCopyAddress(
|
|
|
|
mangoAccount!,
|
|
|
|
t('copy-address-success', {
|
|
|
|
pk: abbreviateAddress(mangoAccount!.publicKey),
|
2023-07-21 11:47:53 -07:00
|
|
|
}),
|
2023-01-29 02:05:32 -08:00
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<DocumentDuplicateIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('copy-address')}</span>
|
|
|
|
</ActionsLinkButton>
|
|
|
|
<ActionsLinkButton
|
2023-07-08 04:41:10 -07:00
|
|
|
disabled={isDelegatedAccount}
|
2023-01-29 02:05:32 -08:00
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() => setShowEditAccountModal(true)}
|
|
|
|
>
|
|
|
|
<PencilIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('edit-account')}</span>
|
|
|
|
</ActionsLinkButton>
|
|
|
|
<ActionsLinkButton
|
2023-08-19 03:37:52 -07:00
|
|
|
disabled={isDelegatedAccount && isUnownedAccount}
|
2023-01-29 02:05:32 -08:00
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() => setShowDelegateModal(true)}
|
|
|
|
>
|
|
|
|
<UserPlusIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('delegate-account')}</span>
|
|
|
|
</ActionsLinkButton>
|
2023-08-10 20:06:38 -07:00
|
|
|
{!isAccountFull ? (
|
|
|
|
<ActionsLinkButton
|
|
|
|
disabled={isDelegatedAccount}
|
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() => setShowAccountSizeModal(true)}
|
|
|
|
>
|
|
|
|
<SquaresPlusIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">
|
|
|
|
{t('settings:increase-account-size')}
|
|
|
|
</span>
|
|
|
|
</ActionsLinkButton>
|
|
|
|
) : null}
|
2023-01-29 02:05:32 -08:00
|
|
|
<ActionsLinkButton
|
2023-07-08 04:41:10 -07:00
|
|
|
disabled={isDelegatedAccount}
|
2023-01-29 02:05:32 -08:00
|
|
|
mangoAccount={mangoAccount!}
|
|
|
|
onClick={() => setShowCloseAccountModal(true)}
|
|
|
|
>
|
|
|
|
<TrashIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('close-account')}</span>
|
|
|
|
</ActionsLinkButton>
|
|
|
|
</Popover.Panel>
|
2023-01-05 00:52:16 -08:00
|
|
|
</Transition>
|
2023-02-01 15:15:01 -08:00
|
|
|
</>
|
2023-01-05 00:52:16 -08:00
|
|
|
)}
|
2023-01-29 02:05:32 -08:00
|
|
|
</Popover>
|
2023-01-05 00:52:16 -08: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}
|
2023-08-06 21:08:35 -07:00
|
|
|
{showAccountSizeModal ? (
|
|
|
|
<MangoAccountSizeModal
|
|
|
|
isOpen={showAccountSizeModal}
|
|
|
|
onClose={() => setShowAccountSizeModal(false)}
|
|
|
|
/>
|
|
|
|
) : null}
|
2022-07-12 19:02:36 -07:00
|
|
|
</>
|
2022-06-21 03:58:57 -07:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AccountActions
|