add rpc ping and tooltips
This commit is contained in:
parent
1d73cc2bff
commit
87ed0f79e4
|
@ -0,0 +1,62 @@
|
|||
import { Connection } from '@solana/web3.js'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { useEffect, useState } from 'react'
|
||||
import useInterval from './shared/useInterval'
|
||||
import { formatNumericValue } from 'utils/numbers'
|
||||
import Tooltip from './shared/Tooltip'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { StatusDot } from './Tps'
|
||||
|
||||
const rpcAlertThreshold = 250
|
||||
const rpcWarningThreshold = 500
|
||||
|
||||
const getPingTime = async (
|
||||
connection: Connection,
|
||||
setRpcPing: (x: number) => void,
|
||||
) => {
|
||||
const startTime = Date.now()
|
||||
try {
|
||||
await connection.getSlot()
|
||||
|
||||
const endTime = Date.now()
|
||||
const pingTime = endTime - startTime
|
||||
setRpcPing(pingTime)
|
||||
} catch (error) {
|
||||
console.error('Error pinging the RPC:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const RpcPing = () => {
|
||||
const { t } = useTranslation('common')
|
||||
const connection = mangoStore((s) => s.connection)
|
||||
const [rpcPing, setRpcPing] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
getPingTime(connection, setRpcPing)
|
||||
}, [])
|
||||
|
||||
useInterval(() => {
|
||||
getPingTime(connection, setRpcPing)
|
||||
}, 30 * 1000)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<StatusDot
|
||||
status={rpcPing}
|
||||
alert={rpcAlertThreshold}
|
||||
warning={rpcWarningThreshold}
|
||||
/>
|
||||
<Tooltip content={t('rpc-ping')}>
|
||||
<span className="font-mono text-th-fgd-2 text-xs">
|
||||
<span className="mr-1">{formatNumericValue(rpcPing, 0)}</span>
|
||||
<span className="font-normal text-th-fgd-4">MS</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RpcPing
|
|
@ -5,6 +5,8 @@ import { TwitterIcon } from './icons/TwitterIcon'
|
|||
import { DocumentTextIcon } from '@heroicons/react/20/solid'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { IDL } from '@blockworks-foundation/mango-v4'
|
||||
import RpcPing from './RpcPing'
|
||||
import Tooltip from './shared/Tooltip'
|
||||
|
||||
const DEFAULT_LATEST_COMMIT = { sha: '', url: '' }
|
||||
|
||||
|
@ -46,13 +48,17 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
|
|||
collapsed ? 'w-[calc(100vw-64px)]' : 'w-[calc(100vw-200px)]'
|
||||
} bottom-0 bg-th-input-bkg md:grid md:grid-cols-3 px-4 md:px-6 py-1`}
|
||||
>
|
||||
<div className="col-span-1 flex items-center">
|
||||
<div className="col-span-1 flex items-center space-x-2">
|
||||
<Tps />
|
||||
<span className="text-th-fgd-4">|</span>
|
||||
<RpcPing />
|
||||
</div>
|
||||
<div className="col-span-1 text-center">
|
||||
<span className="text-th-fgd-3 text-xs">v{IDL.version}</span>
|
||||
<div className="col-span-1 flex items-center justify-center">
|
||||
<Tooltip content={t('program-version')}>
|
||||
<span className="text-th-fgd-3 text-xs">v{IDL.version}</span>
|
||||
</Tooltip>
|
||||
{latestCommit.sha && latestCommit.url ? (
|
||||
<>
|
||||
<Tooltip content={t('latest-ui-commit')}>
|
||||
<span className="mx-1.5 text-th-fgd-4">|</span>
|
||||
<a
|
||||
className="text-th-fgd-3 text-xs focus:outline-none md:hover:text-th-fgd-2"
|
||||
|
@ -62,7 +68,7 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
|
|||
>
|
||||
{latestCommit.sha}
|
||||
</a>
|
||||
</>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="col-span-1 flex items-center justify-end space-x-4 text-xs">
|
||||
|
|
|
@ -3,6 +3,9 @@ import sumBy from 'lodash/sumBy'
|
|||
import { Connection } from '@solana/web3.js'
|
||||
import mangoStore, { CLUSTER } from '@store/mangoStore'
|
||||
import useInterval from './shared/useInterval'
|
||||
import { formatNumericValue } from 'utils/numbers'
|
||||
import Tooltip from './shared/Tooltip'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const tpsAlertThreshold = 1000
|
||||
const tpsWarningThreshold = 1300
|
||||
|
@ -25,6 +28,7 @@ const getRecentPerformance = async (
|
|||
}
|
||||
|
||||
const Tps = () => {
|
||||
const { t } = useTranslation('common')
|
||||
const connection = mangoStore((s) => s.connection)
|
||||
const [tps, setTps] = useState(0)
|
||||
|
||||
|
@ -40,32 +44,18 @@ const Tps = () => {
|
|||
return (
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<div className="relative mr-1 h-3 w-3">
|
||||
<div
|
||||
className={`absolute top-0.5 left-0.5 h-2 w-2 rounded-full ${
|
||||
tps < tpsWarningThreshold
|
||||
? 'bg-th-warning'
|
||||
: tps < tpsAlertThreshold
|
||||
? 'bg-th-error'
|
||||
: 'bg-th-success'
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`absolute h-3 w-3 rounded-full opacity-40 ${
|
||||
tps < tpsWarningThreshold
|
||||
? 'bg-th-warning'
|
||||
: tps < tpsAlertThreshold
|
||||
? 'bg-th-error'
|
||||
: 'bg-th-success'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<span className="font-mono text-th-fgd-2 text-xs">
|
||||
{tps?.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 0,
|
||||
})}
|
||||
<span className="font-normal text-th-fgd-4"> TPS</span>
|
||||
</span>
|
||||
<StatusDot
|
||||
status={tps}
|
||||
alert={tpsAlertThreshold}
|
||||
warning={tpsWarningThreshold}
|
||||
isLessThan
|
||||
/>
|
||||
<Tooltip content={t('solana-tps-desc')}>
|
||||
<span className="font-mono text-th-fgd-2 text-xs">
|
||||
<span className="mr-1">{formatNumericValue(tps, 0)}</span>
|
||||
<span className="font-normal text-th-fgd-4">TPS</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -75,3 +65,42 @@ const Tps = () => {
|
|||
}
|
||||
|
||||
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 = isLessThan
|
||||
? greaterOrLessThan(status, alert)
|
||||
? 'bg-th-warning'
|
||||
: greaterOrLessThan(status, warning)
|
||||
? 'bg-th-error'
|
||||
: 'bg-th-success'
|
||||
: 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 top-0.5 left-0.5 h-2 w-2 rounded-full ${dotColor}`}
|
||||
/>
|
||||
<div className={`absolute h-3 w-3 rounded-full opacity-40 ${dotColor}`} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -91,6 +91,7 @@
|
|||
"insufficient-sol": "Solana requires 0.0695 SOL rent to create a Mango Account. This will be returned if you close your account.",
|
||||
"interest-earned": "Interest Earned",
|
||||
"interest-earned-paid": "Interest Earned",
|
||||
"latest-ui-commit": "Latest UI Commit",
|
||||
"leaderboard": "Leaderboard",
|
||||
"learn": "Learn",
|
||||
"learn-more": "Learn More",
|
||||
|
@ -121,6 +122,7 @@
|
|||
"perp-markets": "Perp Markets",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"program-version": "Program Version",
|
||||
"quantity": "Quantity",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
|
@ -134,6 +136,7 @@
|
|||
"risks": "Risks",
|
||||
"rolling-change": "24h Change",
|
||||
"route": "Route",
|
||||
"rpc-ping": "Ping time with the RPC node",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
|
@ -145,6 +148,7 @@
|
|||
"settings": "Settings",
|
||||
"show-more": "Show More",
|
||||
"solana-tps": "Solana TPS",
|
||||
"solana-tps-desc": "Solana Network – transactions per second",
|
||||
"soon": "Soon",
|
||||
"spot": "Spot",
|
||||
"spot-markets": "Spot Markets",
|
||||
|
|
|
@ -91,6 +91,7 @@
|
|||
"insufficient-sol": "Solana requires 0.0695 SOL rent to create a Mango Account. This will be returned if you close your account.",
|
||||
"interest-earned": "Interest Earned",
|
||||
"interest-earned-paid": "Interest Earned",
|
||||
"latest-ui-commit": "Latest UI Commit",
|
||||
"leaderboard": "Leaderboard",
|
||||
"learn": "Learn",
|
||||
"learn-more": "Learn More",
|
||||
|
@ -121,6 +122,7 @@
|
|||
"perp-markets": "Perp Markets",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"program-version": "Program Version",
|
||||
"quantity": "Quantity",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
|
@ -134,6 +136,7 @@
|
|||
"risks": "Risks",
|
||||
"rolling-change": "24h Change",
|
||||
"route": "Route",
|
||||
"rpc-ping": "Ping time with the RPC node",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
|
@ -145,6 +148,7 @@
|
|||
"settings": "Settings",
|
||||
"show-more": "Show More",
|
||||
"solana-tps": "Solana TPS",
|
||||
"solana-tps-desc": "Solana Network – transactions per second",
|
||||
"soon": "Soon",
|
||||
"spot": "Spot",
|
||||
"spot-markets": "Spot Markets",
|
||||
|
|
|
@ -91,6 +91,7 @@
|
|||
"insufficient-sol": "Solana requires 0.0695 SOL rent to create a Mango Account. This will be returned if you close your account.",
|
||||
"interest-earned": "Interest Earned",
|
||||
"interest-earned-paid": "Interest Earned",
|
||||
"latest-ui-commit": "Latest UI Commit",
|
||||
"leaderboard": "Leaderboard",
|
||||
"learn": "Learn",
|
||||
"learn-more": "Learn More",
|
||||
|
@ -121,6 +122,7 @@
|
|||
"perp-markets": "Perp Markets",
|
||||
"pnl": "PnL",
|
||||
"price": "Price",
|
||||
"program-version": "Program Version",
|
||||
"quantity": "Quantity",
|
||||
"rate": "Rate (APR)",
|
||||
"rates": "Rates (APR)",
|
||||
|
@ -134,6 +136,7 @@
|
|||
"risks": "Risks",
|
||||
"rolling-change": "24h Change",
|
||||
"route": "Route",
|
||||
"rpc-ping": "Ping time with the RPC node",
|
||||
"save": "Save",
|
||||
"select": "Select",
|
||||
"select-borrow-token": "Select Borrow Token",
|
||||
|
@ -145,6 +148,7 @@
|
|||
"settings": "Settings",
|
||||
"show-more": "Show More",
|
||||
"solana-tps": "Solana TPS",
|
||||
"solana-tps-desc": "Solana Network – transactions per second",
|
||||
"soon": "Soon",
|
||||
"spot": "Spot",
|
||||
"spot-markets": "Spot Markets",
|
||||
|
|
|
@ -90,6 +90,7 @@
|
|||
"insufficient-sol": "Solana需要0.0695 SOL租金才能创建Mango账户。您关闭帐户时租金将被退还。",
|
||||
"interest-earned": "获取利息",
|
||||
"interest-earned-paid": "获取利息",
|
||||
"latest-ui-commit": "Latest UI Commit",
|
||||
"leaderboard": "排行榜",
|
||||
"learn": "学",
|
||||
"learn-more": "Learn More",
|
||||
|
@ -120,6 +121,7 @@
|
|||
"perp-markets": "合约市场",
|
||||
"pnl": "盈亏",
|
||||
"price": "价格",
|
||||
"program-version": "Program Version",
|
||||
"quantity": "数量",
|
||||
"rate": "利率(APR)",
|
||||
"rates": "利率(APR)",
|
||||
|
@ -132,6 +134,7 @@
|
|||
"repayment-amount": "还贷额",
|
||||
"risks": "Risks",
|
||||
"rolling-change": "24小时变化",
|
||||
"rpc-ping": "Ping time with the RPC node",
|
||||
"route": "Route",
|
||||
"save": "存",
|
||||
"select": "选择",
|
||||
|
@ -144,6 +147,7 @@
|
|||
"settings": "设置",
|
||||
"show-more": "显示更多",
|
||||
"solana-tps": "Solana TPS",
|
||||
"solana-tps-desc": "Solana Network – transactions per second",
|
||||
"soon": "Soon",
|
||||
"spot": "现货",
|
||||
"spot-markets": "现货市场",
|
||||
|
|
|
@ -90,6 +90,7 @@
|
|||
"insufficient-sol": "Solana需要0.0695 SOL租金才能創建Mango賬戶。您關閉帳戶時租金將被退還。",
|
||||
"interest-earned": "獲取利息",
|
||||
"interest-earned-paid": "獲取利息",
|
||||
"latest-ui-commit": "Latest UI Commit",
|
||||
"leaderboard": "排行榜",
|
||||
"learn": "學",
|
||||
"learn-more": "Learn More",
|
||||
|
@ -120,6 +121,7 @@
|
|||
"perp-markets": "合約市場",
|
||||
"pnl": "盈虧",
|
||||
"price": "價格",
|
||||
"program-version": "Program Version",
|
||||
"quantity": "數量",
|
||||
"rate": "利率(APR)",
|
||||
"rates": "利率(APR)",
|
||||
|
@ -132,6 +134,7 @@
|
|||
"repayment-amount": "還貸額",
|
||||
"risks": "Risks",
|
||||
"rolling-change": "24小時變化",
|
||||
"rpc-ping": "Ping time with the RPC node",
|
||||
"route": "Route",
|
||||
"save": "存",
|
||||
"select": "選擇",
|
||||
|
@ -144,6 +147,7 @@
|
|||
"settings": "設置",
|
||||
"show-more": "顯示更多",
|
||||
"solana-tps": "Solana TPS",
|
||||
"solana-tps-desc": "Solana Network – transactions per second",
|
||||
"soon": "Soon",
|
||||
"spot": "現貨",
|
||||
"spot-markets": "現貨市場",
|
||||
|
|
Loading…
Reference in New Issue