import { useCallback, useEffect, useState } from 'react' import { CheckCircleIcon, ArrowTopRightOnSquareIcon, InformationCircleIcon, XCircleIcon, XMarkIcon, } from '@heroicons/react/20/solid' import mangoStore, { CLUSTER } from '@store/mangoStore' import { Notification, notify } from '../../utils/notifications' import Loading from './Loading' import { Transition } from '@headlessui/react' import { CLIENT_TX_TIMEOUT, NOTIFICATION_POSITION_KEY, PREFERRED_EXPLORER_KEY, } from '../../utils/constants' import useLocalStorageState from 'hooks/useLocalStorageState' import { useTranslation } from 'next-i18next' import useSolBalance from 'hooks/useSolBalance' import { EXPLORERS } from '@components/settings/PreferredExplorerSettings' const setMangoStore = mangoStore.getState().set const NotificationList = () => { const { t } = useTranslation() const notifications = mangoStore((s) => s.notifications) const walletTokens = mangoStore((s) => s.wallet.tokens) const notEnoughSoLMessage = t('deposit-more-sol') const [notificationPosition] = useLocalStorageState( NOTIFICATION_POSITION_KEY, 'bottom-left' ) const [mounted, setMounted] = useState(false) const { maxSolDeposit } = useSolBalance() // if a notification is shown with {"InstructionError":[0,{"Custom":1}]} then // add a notification letting the user know they may not have enough SOL useEffect(() => { if (notifications.length) { const customErrorNotification = notifications.find( (n) => n.description && n.description.includes('"Custom":1') ) const notEnoughSolNotification = notifications.find( (n) => n.title && n.title.includes(notEnoughSoLMessage) ) if ( !notEnoughSolNotification && customErrorNotification && maxSolDeposit <= 0 ) { notify({ title: notEnoughSoLMessage, type: 'info', }) } } }, [notifications, walletTokens, maxSolDeposit]) const clearAll = useCallback(() => { setMangoStore((s) => { const newNotifications = s.notifications.map((n) => ({ ...n, show: false, })) s.notifications = newNotifications }) }, [notifications]) const reversedNotifications = [...notifications].reverse() const getPosition = (position: string) => { const sharedClasses = 'pointer-events-none fixed z-50 flex items-end p-4 text-th-fgd-1 md:p-6' switch (position) { case 'Bottom-Left': return 'flex-col bottom-0 left-0 ' + sharedClasses case 'Bottom-Right': return 'flex-col w-full bottom-0 right-0 ' + sharedClasses case 'Top-Left': return 'flex-col-reverse top-0 left-0 ' + sharedClasses case 'Top-Right': return 'flex-col-reverse w-full top-0 right-0 ' + sharedClasses default: return 'flex-col bottom-0 left-0 ' + sharedClasses } } useEffect(() => setMounted(true), []) if (!mounted) return null return (
{parsedTitle || title}
{parsedDescription ? ({parsedDescription}
) : null} {txid ? (