mango-ui-v3/components/GlobalNotification.tsx

64 lines
1.7 KiB
TypeScript

import { useEffect, useState } from 'react'
import { XIcon } from '@heroicons/react/solid'
import { Connection } from '@solana/web3.js'
import { sumBy } from 'lodash'
import useInterval from '../hooks/useInterval'
import { SECONDS } from '../stores/useMangoStore'
import { useTranslation } from 'next-i18next'
const connection = new Connection('https://solana-api.projectserum.com/')
const getRecentPerformance = async (setShow, setTps) => {
try {
const samples = 3
const response = await connection.getRecentPerformanceSamples(samples)
const totalSecs = sumBy(response, 'samplePeriodSecs')
const totalTransactions = sumBy(response, 'numTransactions')
const tps = totalTransactions / totalSecs
if (tps < 1900) {
setShow(true)
setTps(tps)
} else {
setShow(false)
}
} catch {
console.log('Unable to fetch TPS')
}
}
const GlobalNotification = () => {
const [show, setShow] = useState(false)
const [tps, setTps] = useState(0)
const { t } = useTranslation('common')
useEffect(() => {
getRecentPerformance(setShow, setTps)
}, [])
useInterval(() => {
getRecentPerformance(setShow, setTps)
}, 60 * SECONDS)
if (show) {
return (
<div className="flex items-center bg-th-bkg-4 text-th-primary">
<div className="w-full p-1 text-center">
<span>{t('degraded-performance', { tps: tps?.toFixed(0) })}</span>
</div>
<button
className="mr-4 text-th-primary hover:text-th-primary"
onClick={() => setShow(false)}
>
<XIcon className="h-5 w-5" />
</button>
</div>
)
} else {
return null
}
}
export default GlobalNotification