2023-10-12 20:11:24 -07:00
|
|
|
import { useState } from 'react'
|
2022-07-15 04:09:23 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-11-02 08:50:03 -07:00
|
|
|
import { copyToClipboard } from 'utils'
|
|
|
|
import { notify } from 'utils/notifications'
|
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-02-12 18:46:41 -08:00
|
|
|
import useUnownedAccount from 'hooks/useUnownedAccount'
|
2023-10-17 04:28:43 -07:00
|
|
|
import DepositWithdrawModal from '@components/modals/DepositWithdrawModal'
|
|
|
|
import {
|
|
|
|
ArrowDownRightIcon,
|
|
|
|
ArrowDownTrayIcon,
|
|
|
|
ArrowUpLeftIcon,
|
|
|
|
ArrowUpTrayIcon,
|
|
|
|
} from '@heroicons/react/20/solid'
|
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',
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2023-10-17 04:28:43 -07:00
|
|
|
type ActionType = 'deposit' | 'withdraw' | 'borrow' | 'repay'
|
|
|
|
|
|
|
|
const ACTION_BUTTON_CLASSES =
|
|
|
|
'flex h-10 items-center justify-center space-x-1 sm:space-x-2 font-bold focus:outline-none md:hover:bg-th-bkg-2 text-xs sm:text-sm'
|
|
|
|
|
|
|
|
const ACTION_BUTTON_ICON_CLASSES = 'h-3.5 w-3.5 sm:h-5 sm:w-5'
|
|
|
|
|
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()
|
2023-10-17 04:28:43 -07:00
|
|
|
const [modalToShow, setModalToShow] = useState('')
|
2022-12-20 15:38:56 -08:00
|
|
|
const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
|
|
|
|
const { connected } = useWallet()
|
2023-10-17 04:28:43 -07:00
|
|
|
const { isUnownedAccount } = useUnownedAccount()
|
2022-11-16 04:14:53 -08:00
|
|
|
|
2023-10-17 04:28:43 -07:00
|
|
|
const handleActionModal = (type: ActionType) => {
|
2023-02-12 18:46:41 -08:00
|
|
|
if (mangoAccountAddress || !connected) {
|
2023-10-17 04:28:43 -07:00
|
|
|
setModalToShow(type)
|
2022-12-20 15:38:56 -08:00
|
|
|
} 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-10-18 17:12:15 -07:00
|
|
|
<div className="grid grid-cols-4 border-t border-th-bkg-3">
|
2023-10-17 04:28:43 -07:00
|
|
|
<button
|
|
|
|
className={`${ACTION_BUTTON_CLASSES} border-r border-th-bkg-3`}
|
|
|
|
onClick={() => handleActionModal('deposit')}
|
|
|
|
>
|
|
|
|
<ArrowDownTrayIcon className={ACTION_BUTTON_ICON_CLASSES} />
|
|
|
|
<span>{t('deposit')}</span>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={`${ACTION_BUTTON_CLASSES} border-r border-th-bkg-3`}
|
|
|
|
onClick={() => handleActionModal('withdraw')}
|
|
|
|
>
|
|
|
|
<ArrowUpTrayIcon className={ACTION_BUTTON_ICON_CLASSES} />
|
|
|
|
<span>{t('withdraw')}</span>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={`${ACTION_BUTTON_CLASSES} border-r border-th-bkg-3`}
|
|
|
|
onClick={() => handleActionModal('borrow')}
|
2023-01-05 00:52:16 -08:00
|
|
|
>
|
2023-10-17 04:28:43 -07:00
|
|
|
<ArrowUpLeftIcon className={ACTION_BUTTON_ICON_CLASSES} />
|
|
|
|
<span>{t('borrow')}</span>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={ACTION_BUTTON_CLASSES}
|
|
|
|
onClick={() => handleActionModal('repay')}
|
2023-01-05 00:52:16 -08:00
|
|
|
>
|
2023-10-17 04:28:43 -07:00
|
|
|
<ArrowDownRightIcon className={ACTION_BUTTON_ICON_CLASSES} />
|
|
|
|
<span>{t('repay')}</span>
|
|
|
|
</button>
|
2023-01-05 00:52:16 -08:00
|
|
|
</div>
|
|
|
|
)}
|
2023-10-17 04:28:43 -07:00
|
|
|
{modalToShow === 'deposit' ? (
|
|
|
|
<DepositWithdrawModal
|
|
|
|
action="deposit"
|
|
|
|
isOpen={modalToShow === 'deposit'}
|
|
|
|
onClose={() => setModalToShow('')}
|
2022-12-29 15:29:44 -08:00
|
|
|
/>
|
|
|
|
) : null}
|
2023-10-17 04:28:43 -07:00
|
|
|
{modalToShow === 'withdraw' ? (
|
|
|
|
<DepositWithdrawModal
|
|
|
|
action="withdraw"
|
|
|
|
isOpen={modalToShow === 'withdraw'}
|
|
|
|
onClose={() => setModalToShow('')}
|
2022-12-29 15:29:44 -08:00
|
|
|
/>
|
|
|
|
) : null}
|
2023-10-17 04:28:43 -07:00
|
|
|
{modalToShow === 'borrow' ? (
|
2022-12-18 04:30:49 -08:00
|
|
|
<BorrowRepayModal
|
|
|
|
action="borrow"
|
2023-10-17 04:28:43 -07:00
|
|
|
isOpen={modalToShow === 'borrow'}
|
|
|
|
onClose={() => setModalToShow('')}
|
2022-06-21 03:58:57 -07:00
|
|
|
/>
|
|
|
|
) : null}
|
2023-10-17 04:28:43 -07:00
|
|
|
{modalToShow === 'repay' ? (
|
2022-12-18 04:30:49 -08:00
|
|
|
<BorrowRepayModal
|
|
|
|
action="repay"
|
2023-10-17 04:28:43 -07:00
|
|
|
isOpen={modalToShow === 'repay'}
|
|
|
|
onClose={() => setModalToShow('')}
|
2022-12-29 15:29:44 -08:00
|
|
|
/>
|
|
|
|
) : 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
|