From 89cf797ce5cbd5ad101d7cbb36f52df06cc87225 Mon Sep 17 00:00:00 2001 From: saml33 Date: Mon, 7 Aug 2023 15:57:02 +1000 Subject: [PATCH] add bottom status bar --- components/Layout.tsx | 10 ++-- components/SideNav.tsx | 4 +- components/StatusBar.tsx | 92 ++++++++++++++++++++++++++++++++ components/TopBar.tsx | 6 +-- components/Tps.tsx | 77 ++++++++++++++++++++++++++ components/icons/DiscordIcon.tsx | 14 +++++ components/mobile/BottomBar.tsx | 4 +- public/locales/en/common.json | 3 ++ public/locales/es/common.json | 4 ++ public/locales/ru/common.json | 4 ++ public/locales/zh/common.json | 3 ++ public/locales/zh_tw/common.json | 3 ++ 12 files changed, 214 insertions(+), 10 deletions(-) create mode 100644 components/StatusBar.tsx create mode 100644 components/Tps.tsx create mode 100644 components/icons/DiscordIcon.tsx diff --git a/components/Layout.tsx b/components/Layout.tsx index 84486086..677fcd64 100644 --- a/components/Layout.tsx +++ b/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]' }`} > - - {asPath !== '/rewards' ? : null} - {children} +
+ + {asPath !== '/rewards' ? : null} + {children} +
+ diff --git a/components/SideNav.tsx b/components/SideNav.tsx index 7b4ce4c1..e387a4fd 100644 --- a/components/SideNav.tsx +++ b/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 }) => { /> } + icon={} title={t('documentation')} pagePath="https://docs.mango.markets" hideIconBg diff --git a/components/StatusBar.tsx b/components/StatusBar.tsx new file mode 100644 index 00000000..4bee05ec --- /dev/null +++ b/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 ( +
+
+ +
+
+ {latestCommit.sha && latestCommit.url ? ( + + {latestCommit.sha} + + ) : null} +
+ +
+ ) +} + +export default StatusBar diff --git a/components/TopBar.tsx b/components/TopBar.tsx index 94a295ff..a52bcbe9 100644 --- a/components/TopBar.tsx +++ b/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 = () => { ) : null} - {connected ? ( + {/* {connected ? (
- ) : null} + ) : null} */} 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 ( +
+
+
+
+
+
+ + {tps?.toLocaleString(undefined, { + maximumFractionDigits: 0, + })} + TPS + +
+
+ ) + } else { + return null + } +} + +export default Tps diff --git a/components/icons/DiscordIcon.tsx b/components/icons/DiscordIcon.tsx new file mode 100644 index 00000000..60a80b6d --- /dev/null +++ b/components/icons/DiscordIcon.tsx @@ -0,0 +1,14 @@ +const DiscordIcon = ({ className }: { className?: string }) => { + return ( + + + + ) +} + +export default DiscordIcon diff --git a/components/mobile/BottomBar.tsx b/components/mobile/BottomBar.tsx index 4d04ac34..ec9e367d 100644 --- a/components/mobile/BottomBar.tsx +++ b/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 = ({ } + icon={} isExternal />