c4f8f4eab0
* MP-1757: implemented the WalletProvider and connect buttons * tidy: tidy up the search * MP-1691: moved modals outside of the DOM * MP-1691: changed CreditManager into AccountDetails * fix: fixed the naming * MP-1691: UX approvements * MP-1691: global confirm and delete modal added * fix: merged the credit-account and wallet branch * MP-1757: added the status store * fix: updated the store interaction * MP-1757: major cleanup of stores * tidy: format
97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import { useEffect } from 'react'
|
|
|
|
import Button from 'components/Button'
|
|
import PlusIcon from 'components/Icons/add.svg'
|
|
import ArrowDown from 'components/Icons/arrow-down.svg'
|
|
import ArrowUp from 'components/Icons/arrow-up.svg'
|
|
import ArrowsLeftRight from 'components/Icons/arrows-left-right.svg'
|
|
import DeleteIcon from 'components/Icons/rubbish.svg'
|
|
import Overlay from 'components/Overlay/Overlay'
|
|
import OverlayAction from 'components/Overlay/OverlayLink'
|
|
import Text from 'components/Text'
|
|
import useCreateCreditAccount from 'hooks/mutations/useCreateCreditAccount'
|
|
import useDeleteCreditAccount from 'hooks/mutations/useDeleteCreditAccount'
|
|
import { useAccountDetailsStore, useModalStore } from 'stores'
|
|
|
|
interface Props {
|
|
className?: string
|
|
setShow: (show: boolean) => void
|
|
show: boolean
|
|
}
|
|
|
|
const AccountManageOverlay = ({ className, setShow, show }: Props) => {
|
|
const selectedAccount = useAccountDetailsStore((s) => s.selectedAccount)
|
|
|
|
const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount()
|
|
const { mutate: deleteCreditAccount, isLoading: isLoadingDelete } = useDeleteCreditAccount(
|
|
selectedAccount || '',
|
|
)
|
|
|
|
useEffect(() => {
|
|
useModalStore.setState({ createAccountModal: isLoadingCreate })
|
|
}, [isLoadingCreate])
|
|
|
|
useEffect(() => {
|
|
useModalStore.setState({ deleteAccountModal: isLoadingDelete })
|
|
}, [isLoadingDelete])
|
|
|
|
return (
|
|
<Overlay className={className} show={show} setShow={setShow}>
|
|
<div className='flex w-[274px] flex-wrap'>
|
|
<Text size='sm' uppercase={true} className='w-full px-4 pt-4 text-center text-accent-dark'>
|
|
Manage
|
|
</Text>
|
|
<div className='flex w-full justify-between border-b border-b-black/10 p-4'>
|
|
<Button
|
|
className='flex w-[115px] items-center justify-center pl-0 pr-2'
|
|
onClick={() => {
|
|
useModalStore.setState({ fundAccountModal: true })
|
|
setShow(false)
|
|
}}
|
|
>
|
|
<span className='mr-1 w-3'>
|
|
<ArrowUp />
|
|
</span>
|
|
Fund
|
|
</Button>
|
|
<Button
|
|
className='flex w-[115px] items-center justify-center pl-0 pr-2'
|
|
color='secondary'
|
|
onClick={() => {
|
|
useModalStore.setState({ withdrawModal: true })
|
|
setShow(false)
|
|
}}
|
|
>
|
|
<span className='mr-1 w-3'>
|
|
<ArrowDown />
|
|
</span>
|
|
Withdraw
|
|
</Button>
|
|
</div>
|
|
<div className='flex w-full flex-wrap p-4'>
|
|
<OverlayAction
|
|
setShow={setShow}
|
|
text='Create New Account'
|
|
onClick={createCreditAccount}
|
|
icon={<PlusIcon />}
|
|
/>
|
|
<OverlayAction
|
|
setShow={setShow}
|
|
text='Close Account'
|
|
onClick={deleteCreditAccount}
|
|
icon={<DeleteIcon />}
|
|
/>
|
|
<OverlayAction
|
|
setShow={setShow}
|
|
text='Transfer Balance'
|
|
onClick={() => alert('TODO')}
|
|
icon={<ArrowsLeftRight />}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Overlay>
|
|
)
|
|
}
|
|
|
|
export default AccountManageOverlay
|