add rpc ping and tooltips

2023-08-09 22:33:42 +10:00 · 2023-08-09 22:33:42 +10:00 · 87ed0f79e4
parent 1d73cc2bff
commit 87ed0f79e4
8 changed files with 148 additions and 31 deletions
--- a/components/RpcPing.tsx
+++ b/components/RpcPing.tsx
@ -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
--- a/components/StatusBar.tsx
+++ b/components/StatusBar.tsx
@ -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">
--- a/components/Tps.tsx
+++ b/components/Tps.tsx
@ -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>
+  )
+}
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -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",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -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",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -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",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -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": "现货市场",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -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": "現貨市場",