import { Fragment, useEffect } from 'react' import { CheckCircleIcon, ArrowTopRightOnSquareIcon, InformationCircleIcon, XCircleIcon, } 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 { TokenInstructions } from '@project-serum/serum' import { CLIENT_TX_TIMEOUT } from '../../utils/constants' const setMangoStore = mangoStore.getState().set const NotificationList = () => { const notifications = mangoStore((s) => s.notifications) const walletTokens = mangoStore((s) => s.wallet.tokens) const notEnoughSoLMessage = 'Not enough SOL' // 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) ) const solBalance = walletTokens.find((t) => t.mint.equals(TokenInstructions.WRAPPED_SOL_MINT) )?.uiAmount if ( !notEnoughSolNotification && customErrorNotification && solBalance && solBalance < 0.04 ) { notify({ title: notEnoughSoLMessage, type: 'info', }) } } }, [notifications, walletTokens]) const reversedNotifications = [...notifications].reverse() return (
{parsedTitle || title}
{description ? ({description}
) : null} {txid ? (