2023-10-12 20:11:24 -07:00
|
|
|
import { useState } from 'react'
|
|
|
|
import Button from '../shared/Button'
|
2022-07-28 05:13:42 -07:00
|
|
|
import {
|
2022-12-18 04:30:49 -08:00
|
|
|
ArrowDownRightIcon,
|
|
|
|
ArrowUpLeftIcon,
|
2023-10-12 20:11:24 -07:00
|
|
|
// DocumentDuplicateIcon,
|
|
|
|
// EyeIcon,
|
|
|
|
// EyeSlashIcon,
|
|
|
|
// PencilIcon,
|
|
|
|
// SquaresPlusIcon,
|
|
|
|
// TrashIcon,
|
|
|
|
// UserPlusIcon,
|
|
|
|
// 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-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-10-12 20:11:24 -07:00
|
|
|
// import { Popover, Transition } from '@headlessui/react'
|
|
|
|
// import ActionsLinkButton from './ActionsLinkButton'
|
2023-02-12 18:46:41 -08:00
|
|
|
import useUnownedAccount from 'hooks/useUnownedAccount'
|
2023-10-12 20:11:24 -07:00
|
|
|
// import { useViewport } from 'hooks/useViewport'
|
2023-08-06 21:08:35 -07:00
|
|
|
import MangoAccountSizeModal from '@components/modals/MangoAccountSizeModal'
|
2023-10-12 20:11:24 -07:00
|
|
|
// import useMangoAccountAccounts from 'hooks/useMangoAccountAccounts'
|
|
|
|
// import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
|
|
// import { PRIVACY_MODE } from 'utils/constants'
|
2022-06-21 03:58:57 -07:00
|
|
|
|
2022-12-18 16:54:30 -08:00
|
|
|
export const handleCopyAddress = (
|
2023-10-03 22:05:16 -07:00
|
|
|
mangoAccountAddress: string,
|
2023-07-21 11:47:53 -07:00
|
|
|
successMessage: string,
|
2022-12-18 16:54:30 -08:00
|
|
|
) => {
|
2023-10-03 22:05:16 -07:00
|
|
|
copyToClipboard(mangoAccountAddress)
|
2022-12-18 16:54:30 -08:00
|
|
|
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-10-03 22:05:16 -07:00
|
|
|
const { 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)
|
2023-10-12 20:11:24 -07:00
|
|
|
// const [privacyMode, setPrivacyMode] = useLocalStorageState(PRIVACY_MODE)
|
2022-12-20 15:38:56 -08:00
|
|
|
const { connected } = useWallet()
|
2023-10-12 20:11:24 -07:00
|
|
|
const {
|
|
|
|
// isDelegatedAccount,
|
|
|
|
isUnownedAccount,
|
|
|
|
} = useUnownedAccount()
|
|
|
|
// const { isMobile } = useViewport()
|
|
|
|
// 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-10-12 20:11:24 -07:00
|
|
|
className="flex w-1/2 items-center justify-center 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-10-12 20:11:24 -07:00
|
|
|
className="flex w-1/2 items-center justify-center 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-10-12 20:11:24 -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
|
|
|
|
onClick={() =>
|
|
|
|
handleCopyAddress(
|
2023-10-03 22:05:16 -07:00
|
|
|
mangoAccountAddress,
|
2023-01-29 02:05:32 -08:00
|
|
|
t('copy-address-success', {
|
2023-10-03 22:05:16 -07:00
|
|
|
pk: `${mangoAccountAddress.slice(
|
|
|
|
0,
|
|
|
|
4,
|
|
|
|
)}...${mangoAccountAddress.slice(-4)}`,
|
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
|
|
|
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
|
|
|
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}
|
|
|
|
onClick={() => setShowAccountSizeModal(true)}
|
|
|
|
>
|
|
|
|
<SquaresPlusIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">
|
2023-09-03 20:43:34 -07:00
|
|
|
{t('settings:increase-account-slots')}
|
2023-08-10 20:06:38 -07:00
|
|
|
</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
|
|
|
onClick={() => setShowCloseAccountModal(true)}
|
|
|
|
>
|
|
|
|
<TrashIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">{t('close-account')}</span>
|
|
|
|
</ActionsLinkButton>
|
2023-08-18 09:23:25 -07:00
|
|
|
<ActionsLinkButton
|
|
|
|
onClick={() => setPrivacyMode(!privacyMode)}
|
|
|
|
>
|
|
|
|
{privacyMode ? (
|
|
|
|
<>
|
|
|
|
<EyeIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">
|
|
|
|
{t('settings:privacy-disable')}
|
|
|
|
</span>
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<EyeSlashIcon className="h-4 w-4" />
|
|
|
|
<span className="ml-2">
|
|
|
|
{t('settings:privacy-enable')}
|
|
|
|
</span>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</ActionsLinkButton>
|
2023-01-29 02:05:32 -08:00
|
|
|
</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-10-12 20:11:24 -07: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
|