add bottom status bar

components/Layout.tsx

@@ -30,6 +30,7 @@ import TermsOfUseModal from './modals/TermsOfUseModal'
 import { useTheme } from 'next-themes'
 import PromoBanner from './rewards/PromoBanner'
 import { useRouter } from 'next/router'
+import StatusBar from './StatusBar'
 
 export const sideBarAnimationDuration = 300
 const termsLastUpdated = 1679441610978
@@ -132,9 +133,12 @@ const Layout = ({ children }: { children: ReactNode }) => {
             isCollapsed ? 'md:pl-[64px]' : 'pl-[200px]'
           }`}
         >
-          <TopBar />
-          {asPath !== '/rewards' ? <PromoBanner /> : null}
-          {children}
+          <div className="min-h-[calc(100vh-36px)]">
+            <TopBar />
+            {asPath !== '/rewards' ? <PromoBanner /> : null}
+            {children}
+          </div>
+          <StatusBar />
         </div>
         <DeployRefreshManager />
         <TermsOfUse />

components/SideNav.tsx

@@ -2,7 +2,6 @@ import Link from 'next/link'
 import {
   EllipsisHorizontalIcon,
   BuildingLibraryIcon,
-  LightBulbIcon,
   ArrowTopRightOnSquareIcon,
   ChevronDownIcon,
   CurrencyDollarIcon,
@@ -16,6 +15,7 @@ import {
   PlusCircleIcon,
   ArchiveBoxArrowDownIcon,
   ExclamationTriangleIcon,
+  DocumentTextIcon,
   // ClipboardDocumentIcon,
 } from '@heroicons/react/20/solid'
 import { useRouter } from 'next/router'
@@ -222,7 +222,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
               />
               <MenuItem
                 collapsed={false}
-                icon={<LightBulbIcon className="h-5 w-5" />}
+                icon={<DocumentTextIcon className="h-5 w-5" />}
                 title={t('documentation')}
                 pagePath="https://docs.mango.markets"
                 hideIconBg

components/StatusBar.tsx

@@ -0,0 +1,92 @@
+import { useTranslation } from 'react-i18next'
+import Tps from './Tps'
+import DiscordIcon from './icons/DiscordIcon'
+import { TwitterIcon } from './icons/TwitterIcon'
+import { DocumentTextIcon } from '@heroicons/react/20/solid'
+import { useEffect, useState } from 'react'
+
+const DEFAULT_LATEST_COMMIT = { sha: '', url: '' }
+
+const getLatestCommit = async () => {
+  try {
+    const response = await fetch(
+      `https://api.github.com/repos/blockworks-foundation/mango-v4/commits`,
+    )
+    const data = await response.json()
+
+    if (data && data.length) {
+      const { sha, html_url } = data[0]
+      return {
+        sha: sha.slice(0, 7),
+        url: html_url,
+      }
+    }
+    return DEFAULT_LATEST_COMMIT
+  } catch (error) {
+    console.error('Error fetching latest commit:', error)
+    return DEFAULT_LATEST_COMMIT
+  }
+}
+
+const StatusBar = () => {
+  const { t } = useTranslation('common')
+  const [latestCommit, setLatestCommit] = useState(DEFAULT_LATEST_COMMIT)
+
+  useEffect(() => {
+    const { sha } = latestCommit
+    if (!sha) {
+      getLatestCommit().then((commit) => setLatestCommit(commit))
+    }
+  }, [latestCommit])
+
+  return (
+    <div className="hidden relative bottom-0 bg-th-bkg-2 md:grid md:grid-cols-3 px-4 md:px-6 py-2">
+      <div className="col-span-1 flex items-center">
+        <Tps />
+      </div>
+      <div className="col-span-1 text-center">
+        {latestCommit.sha && latestCommit.url ? (
+          <a
+            className="text-th-fgd-3 text-xs focus:outline-none md:hover:text-th-fgd-2"
+            href={latestCommit.url}
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            {latestCommit.sha}
+          </a>
+        ) : null}
+      </div>
+      <div className="col-span-1 flex items-center justify-end space-x-4 text-xs">
+        <a
+          className="text-th-fgd-3 focus:outline-none flex items-center md:hover:text-th-fgd-2"
+          href="https://docs.mango.markets"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <DocumentTextIcon className="h-3 w-3 mr-1" />
+          <span>{t('docs')}</span>
+        </a>
+        <a
+          className="text-th-fgd-3 focus:outline-none flex items-center md:hover:text-th-fgd-2"
+          href="https://discord.gg/2uwjsBc5yw"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <DiscordIcon className="h-3 w-3 mr-1" />
+          <span>{t('discord')}</span>
+        </a>
+        <a
+          className="text-th-fgd-3 focus:outline-none flex items-center md:hover:text-th-fgd-2"
+          href="https://twitter.com/mangomarkets"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <TwitterIcon className="h-3 w-3 mr-1" />
+          <span>{t('twitter')}</span>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default StatusBar

components/TopBar.tsx

@@ -15,7 +15,7 @@ import ConnectedMenu from './wallet/ConnectedMenu'
 import ConnectWalletButton from './wallet/ConnectWalletButton'
 import CreateAccountModal from './modals/CreateAccountModal'
 import { useRouter } from 'next/router'
-import SolanaTps from './SolanaTps'
+// import SolanaTps from './SolanaTps'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useOnlineStatus from 'hooks/useOnlineStatus'
 import { abbreviateAddress } from 'utils/formatting'
@@ -103,11 +103,11 @@ const TopBar = () => {
               <ArrowLeftIcon className="h-5 w-5" />
             </button>
           ) : null}
-          {connected ? (
+          {/* {connected ? (
             <div className="hidden h-[63px] bg-th-bkg-1 md:flex md:items-center md:pl-6 md:pr-8">
               <SolanaTps />
             </div>
-          ) : null}
+          ) : null} */}
           <img
             className="mr-4 h-9 w-9 flex-shrink-0 md:hidden"
             src={themeData.logoPath}

components/Tps.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react'
+import sumBy from 'lodash/sumBy'
+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.warn('Unable to fetch TPS')
+  }
+}
+
+const Tps = () => {
+  const connection = mangoStore((s) => s.connection)
+  const [tps, setTps] = useState(0)
+
+  useEffect(() => {
+    getRecentPerformance(connection, setTps)
+  }, [])
+
+  useInterval(() => {
+    getRecentPerformance(connection, setTps)
+  }, 60 * 1000)
+
+  if (CLUSTER == 'mainnet-beta') {
+    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>
+        </div>
+      </div>
+    )
+  } else {
+    return null
+  }
+}
+
+export default Tps

components/icons/DiscordIcon.tsx

@@ -0,0 +1,14 @@
+const DiscordIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 28 20"
+      fill="currentColor"
+    >
+      <path d="M23.7187 1.67497C21.9061 0.89249 19.9681 0.323786 17.9421 0C17.6932 0.41511 17.4025 0.973432 17.2021 1.4176C15.0482 1.11872 12.9142 1.11872 10.8 1.4176C10.5996 0.973432 10.3023 0.41511 10.0513 0C8.02293 0.323786 6.08271 0.894565 4.27023 1.67912C0.614418 6.77668 -0.376613 11.7477 0.118903 16.648C2.54363 18.3188 4.89347 19.3337 7.20367 19.9979C7.77407 19.2736 8.2828 18.5036 8.72106 17.692C7.88639 17.3993 7.08696 17.0382 6.33156 16.6189C6.53197 16.482 6.72798 16.3387 6.91738 16.1914C11.5246 18.1797 16.5304 18.1797 21.0826 16.1914C21.2741 16.3387 21.4701 16.482 21.6683 16.6189C20.9107 17.0402 20.1091 17.4014 19.2744 17.6941C19.7127 18.5036 20.2192 19.2757 20.7918 20C23.1042 19.3358 25.4563 18.3209 27.881 16.648C28.4624 10.9672 26.8878 6.04193 23.7187 1.67497ZM9.34871 13.6343C7.96567 13.6343 6.83149 12.4429 6.83149 10.9922C6.83149 9.54132 7.94144 8.34791 9.34871 8.34791C10.756 8.34791 11.8901 9.53924 11.8659 10.9922C11.8682 12.4429 10.756 13.6343 9.34871 13.6343ZM18.6512 13.6343C17.2682 13.6343 16.1339 12.4429 16.1339 10.9922C16.1339 9.54132 17.2439 8.34791 18.6512 8.34791C20.0584 8.34791 21.1926 9.53924 21.1684 10.9922C21.1684 12.4429 20.0584 13.6343 18.6512 13.6343Z" />
+    </svg>
+  )
+}
+
+export default DiscordIcon

components/mobile/BottomBar.tsx

@@ -8,7 +8,6 @@ import {
   Bars3Icon,
   XMarkIcon,
   ChevronRightIcon,
-  LightBulbIcon,
   ArrowsRightLeftIcon,
   CurrencyDollarIcon,
   Cog8ToothIcon,
@@ -21,6 +20,7 @@ import {
   // ClipboardDocumentIcon,
   NewspaperIcon,
   ExclamationTriangleIcon,
+  DocumentTextIcon,
 } from '@heroicons/react/20/solid'
 import SolanaTps from '@components/SolanaTps'
 import LeaderboardIcon from '@components/icons/LeaderboardIcon'
@@ -158,7 +158,7 @@ const MoreMenuPanel = ({
         <MoreMenuItem
           title={t('learn')}
           path="https://docs.mango.markets/"
-          icon={<LightBulbIcon className="h-5 w-5" />}
+          icon={<DocumentTextIcon className="h-5 w-5" />}
           isExternal
         />
         <MoreMenuItem

public/locales/en/common.json

@@ -69,6 +69,8 @@
   "deposit-rate": "Deposit APR",
   "details": "Details",
   "disconnect": "Disconnect",
+  "discord": "Discord",
+  "docs": "Docs",
   "documentation": "Documentation",
   "edit": "Edit",
   "edit-account": "Edit Account Name",
@@ -167,6 +169,7 @@
   "trade": "Trade",
   "trade-history": "Trade History",
   "transaction": "Transaction",
+  "twitter": "Twitter",
   "unavailable": "Unavailable",
   "unowned-helper": "Currently viewing account {{accountPk}}",
   "update": "Update",

public/locales/es/common.json

@@ -69,6 +69,8 @@
   "deposit-rate": "Deposit APR",
   "details": "Details",
   "disconnect": "Disconnect",
+  "discord": "Discord",
+  "docs": "Docs",
   "documentation": "Documentation",
   "edit": "Edit",
   "edit-account": "Edit Account Name",
@@ -77,6 +79,7 @@
   "fee": "Fee",
   "feedback-survey": "Feedback Survey",
   "fees": "Fees",
+  "fetching-route": "Finding Route",
   "free-collateral": "Free Collateral",
   "get-started": "Get Started",
   "governance": "Governance",
@@ -166,6 +169,7 @@
   "trade": "Trade",
   "trade-history": "Trade History",
   "transaction": "Transaction",
+  "twitter": "Twitter",
   "unavailable": "Unavailable",
   "unowned-helper": "Currently viewing account {{accountPk}}",
   "update": "Update",

public/locales/ru/common.json

@@ -69,6 +69,8 @@
   "deposit-rate": "Deposit APR",
   "details": "Details",
   "disconnect": "Disconnect",
+  "discord": "Discord",
+  "docs": "Docs",
   "documentation": "Documentation",
   "edit": "Edit",
   "edit-account": "Edit Account Name",
@@ -77,6 +79,7 @@
   "fee": "Fee",
   "feedback-survey": "Feedback Survey",
   "fees": "Fees",
+  "fetching-route": "Finding Route",
   "free-collateral": "Free Collateral",
   "get-started": "Get Started",
   "governance": "Governance",
@@ -166,6 +169,7 @@
   "trade": "Trade",
   "trade-history": "Trade History",
   "transaction": "Transaction",
+  "twitter": "Twitter",
   "unavailable": "Unavailable",
   "unowned-helper": "Currently viewing account {{accountPk}}",
   "update": "Update",

public/locales/zh/common.json

@@ -69,6 +69,8 @@
   "deposit-rate": "存款APR",
   "details": "细节",
   "disconnect": "断开连接",
+  "discord": "Discord",
+  "docs": "Docs",
   "documentation": "文档",
   "edit": "编辑",
   "edit-account": "编辑帐户标签",
@@ -166,6 +168,7 @@
   "trade": "交易",
   "trade-history": "交易纪录",
   "transaction": "交易",
+  "twitter": "Twitter",
   "unavailable": "不可用",
   "unowned-helper": "目前查看帐户 {{accountPk}}",
   "update": "更新",

public/locales/zh_tw/common.json

@@ -69,6 +69,8 @@
   "deposit-rate": "存款APR",
   "details": "細節",
   "disconnect": "斷開連接",
+  "discord": "Discord",
+  "docs": "Docs",
   "documentation": "文檔",
   "edit": "編輯",
   "edit-account": "編輯帳戶標籤",
@@ -166,6 +168,7 @@
   "trade": "交易",
   "trade-history": "交易紀錄",
   "transaction": "交易",
+  "twitter": "Twitter",
   "unavailable": "不可用",
   "unowned-helper": "目前查看帳戶 {{accountPk}}",
   "update": "更新",