add solana tps

components/SolanaTps.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react'
+import sumBy from 'lodash/sumBy'
+import { useTranslation } from 'next-i18next'
+import { Connection } from '@solana/web3.js'
+import mangoStore, { CLUSTER } from '@store/mangoStore'
+import useInterval from './shared/useInterval'
+
+const tpsAlertThreshold = 1000
+const tpsWarningThreshold = 1300
+
+const getRecentPerformance = async (
+  connection: Connection,
+  setTps: (x: number) => void
+) => {
+  try {
+    const samples = 2
+    const response = await connection.getRecentPerformanceSamples(samples)
+    const totalSecs = sumBy(response, 'samplePeriodSecs')
+    const totalTransactions = sumBy(response, 'numTransactions')
+    const tps = totalTransactions / totalSecs
+
+    setTps(tps)
+  } catch {
+    console.log('Unable to fetch TPS')
+  }
+}
+
+const SolanaTps = () => {
+  const connection = mangoStore((s) => s.connection)
+  const [tps, setTps] = useState(0)
+  const { t } = useTranslation('common')
+
+  useEffect(() => {
+    getRecentPerformance(connection, setTps)
+  }, [])
+
+  useInterval(() => {
+    getRecentPerformance(connection, setTps)
+  }, 45 * 1000)
+
+  if (CLUSTER == 'mainnet-beta') {
+    return (
+      <div>
+        <p className="text-xs">{t('solana-tps')}</p>
+        <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-orange'
+                  : tps < tpsAlertThreshold
+                  ? 'bg-th-red'
+                  : 'bg-th-green'
+              }`}
+            />
+            <div
+              className={`absolute h-3 w-3 rounded-full opacity-40 ${
+                tps < tpsWarningThreshold
+                  ? 'bg-th-orange'
+                  : tps < tpsAlertThreshold
+                  ? 'bg-th-red'
+                  : 'bg-th-green'
+              }`}
+            />
+          </div>
+          <span className="font-mono text-th-fgd-2">
+            {tps?.toLocaleString(undefined, {
+              maximumFractionDigits: 0,
+            })}
+          </span>
+        </div>
+      </div>
+    )
+  } else {
+    return null
+  }
+}
+
+export default SolanaTps

components/TopBar.tsx

@@ -13,6 +13,7 @@ import UserSetupModal from './modals/UserSetupModal'
 import CreateAccountModal from './modals/CreateAccountModal'
 import MangoAccountsListModal from './modals/MangoAccountsListModal'
 import { useRouter } from 'next/router'
+import SolanaTps from './SolanaTps'
 
 const TopBar = () => {
   const { t } = useTranslation('common')
@@ -44,6 +45,7 @@ const TopBar = () => {
   return (
     <>
       <div className="flex w-full items-center justify-between space-x-4">
+        {connected ? <SolanaTps /> : null}
         <span className="mb-0 flex items-center">
           {query.token ? (
             <div

public/locales/en/common.json

@@ -79,6 +79,7 @@
   "sell": "Sell",
   "settings": "Settings",
   "show-zero-balances": "Show Zero Balances",
+  "solana-tps": "Solana TPS",
   "spot": "Spot",
   "stats": "Stats",
   "swap": "Swap",

public/locales/es/common.json

@@ -79,6 +79,7 @@
   "sell": "Sell",
   "settings": "Settings",
   "show-zero-balances": "Show Zero Balances",
+  "solana-tps": "Solana TPS",
   "spot": "Spot",
   "stats": "Stats",
   "swap": "Swap",

public/locales/ru/common.json

@@ -80,6 +80,7 @@
   "sell": "Sell",
   "settings": "Settings",
   "show-zero-balances": "Show Zero Balances",
+  "solana-tps": "Solana TPS",
   "spot": "Spot",
   "stats": "Stats",
   "swap": "Swap",

public/locales/zh/common.json

@@ -79,6 +79,7 @@
   "sell": "Sell",
   "settings": "Settings",
   "show-zero-balances": "Show Zero Balances",
+  "solana-tps": "Solana TPS",
   "spot": "Spot",
   "stats": "Stats",
   "swap": "Swap",

public/locales/zh_tw/common.json

@@ -80,6 +80,7 @@
   "settings": "Settings",
   "show-zero-balances": "Show Zero Balances",
   "spot": "Spot",
+  "solana-tps": "Solana TPS",
   "stats": "Stats",
   "swap": "Swap",
   "time": "Time",