61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { CLUSTER } from '@store/mangoStore'
|
|
import { formatNumericValue } from 'utils/numbers'
|
|
import { tpsAlertThreshold, tpsWarningThreshold } from './StatusBar'
|
|
|
|
const Tps = ({ tps }: { tps: number }) => {
|
|
if (CLUSTER == 'mainnet-beta') {
|
|
return (
|
|
<div>
|
|
<div className="flex items-center">
|
|
<StatusDot
|
|
status={tps}
|
|
alert={tpsAlertThreshold}
|
|
warning={tpsWarningThreshold}
|
|
isLessThan
|
|
/>
|
|
<span className="font-mono text-xs text-th-fgd-2">
|
|
{formatNumericValue(tps, 0)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
|
|
export default Tps
|
|
|
|
export const StatusDot = ({
|
|
status,
|
|
alert,
|
|
warning,
|
|
isLessThan,
|
|
}: {
|
|
status: number
|
|
alert: number
|
|
warning: number
|
|
isLessThan?: boolean
|
|
}) => {
|
|
const greaterOrLessThan = (status: number, threshold: number) => {
|
|
if (isLessThan) {
|
|
return status < threshold
|
|
} else return status > threshold
|
|
}
|
|
|
|
const dotColor = greaterOrLessThan(status, warning)
|
|
? 'bg-th-error'
|
|
: greaterOrLessThan(status, alert)
|
|
? 'bg-th-warning'
|
|
: 'bg-th-success'
|
|
|
|
return (
|
|
<div className="relative mr-1 h-3 w-3">
|
|
<div
|
|
className={`absolute left-0.5 top-0.5 h-2 w-2 rounded-full ${dotColor}`}
|
|
/>
|
|
<div className={`absolute h-3 w-3 rounded-full opacity-40 ${dotColor}`} />
|
|
</div>
|
|
)
|
|
}
|