import React, { FunctionComponent, useEffect, useState } from 'react' import { PlusCircleIcon, TrashIcon } from '@heroicons/react/solid' import Modal from './Modal' import Input, { Label } from './Input' import { ElementTitle } from './styles' import useMangoStore, { AlertRequest } from '../stores/useMangoStore' import Button, { LinkButton } from './Button' import { notify } from '../utils/notifications' import { useTranslation } from 'next-i18next' import ButtonGroup from './ButtonGroup' import InlineNotification from './InlineNotification' interface CreateAlertModalProps { onClose: () => void isOpen: boolean repayAmount?: string tokenSymbol?: string } const CreateAlertModal: FunctionComponent = ({ isOpen, onClose, }) => { const { t } = useTranslation(['common', 'alerts']) const actions = useMangoStore((s) => s.actions) const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current) const activeAlerts = useMangoStore((s) => s.alerts.activeAlerts) const loading = useMangoStore((s) => s.alerts.loading) const submitting = useMangoStore((s) => s.alerts.submitting) const error = useMangoStore((s) => s.alerts.error) const [email, setEmail] = useState('') const [invalidAmountMessage, setInvalidAmountMessage] = useState('') const [health, setHealth] = useState('') const [showCustomHealthForm, setShowCustomHealthForm] = useState(false) const [showAlertForm, setShowAlertForm] = useState(false) const healthPresets = ['5', '10', '15', '25', '30'] const validateEmailInput = (amount) => { if (Number(amount) <= 0) { setInvalidAmountMessage(t('enter-amount')) } } const onChangeEmailInput = (amount) => { setEmail(amount) setInvalidAmountMessage('') } async function onCreateAlert() { if (!mangoGroup || !mangoAccount) return const parsedHealth = parseFloat(health) if (!email) { notify({ title: t('alerts:email-address-required'), type: 'error', }) return } else if (typeof parsedHealth !== 'number') { notify({ title: t('alerts:alert-health-required'), type: 'error', }) return } const body: AlertRequest = { mangoGroupPk: mangoGroup.publicKey.toString(), mangoAccountPk: mangoAccount.publicKey.toString(), health: parsedHealth, alertProvider: 'mail', email, } const success: any = await actions.createAlert(body) if (success) { setShowAlertForm(false) } } const handleCancelCreateAlert = () => { if (activeAlerts.length > 0) { setShowAlertForm(false) } else { onClose() } } useEffect(() => { if (mangoAccount) { actions.loadAlerts(mangoAccount?.publicKey) } }, []) return ( {!loading && !submitting ? ( <> {activeAlerts.length > 0 && !showAlertForm ? ( <>
{t('alerts:active-alerts')}
{activeAlerts.map((alert, index) => (
{t('alerts:alert-info', { health: alert.health })}
actions.deleteAlert(alert._id)} />
))}
{activeAlerts.length >= 3 ? (
{t('alerts:alerts-max')}
) : null} ) : showAlertForm ? ( <> {t('alerts:create-alert')}

{t('alerts:alerts-disclaimer')}

{error ? (
) : null} validateEmailInput(e.target.value)} value={email || ''} onChange={(e) => onChangeEmailInput(e.target.value)} />
setShowCustomHealthForm(!showCustomHealthForm) } > {showCustomHealthForm ? t('presets') : t('custom')}
{showCustomHealthForm ? ( setHealth(e.target.value)} suffix={
%
} value={health} /> ) : ( setHealth(p)} unit="%" values={healthPresets} /> )}
{t('cancel')} ) : error ? (
) : (
{t('alerts:no-alerts')}

{t('alerts:no-alerts-desc')}

)} ) : (
)} ) } export default React.memo(CreateAlertModal)