Merge pull request #945 from polkadot-fellows/nik-replace-sidebar

Author: wirednkod

src/App.tsx

@@ -1,4 +1,3 @@
-import { Navigation } from '@/navigation'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { Header } from '@/header'
 import { Theme, ThemeProvider } from './components/theme-provider'
@@ -21,9 +20,8 @@ const App = () => {
         <AccountContextProvider>
           <TooltipProvider>
             <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-              <Navigation />
-              <div className="mb-24 flex flex-col pb-24 sm:gap-4 sm:py-4 sm:pl-56">
-                <Header />
+              <Header />
+              <div className="mt-24 mb-24 flex flex-col">
                 <Content />
                 <Footer />
               </div>

src/footer.tsx

@@ -1,17 +1,35 @@
 import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 import { useTheme } from '@/components/theme-provider'
 import { openInNewTab } from '@/lib/utils'
 import { Moon, Sun } from 'lucide-react'
 import { FaGithub } from 'react-icons/fa'
+import { useEffect, useState } from 'react'
+import { polkadotClient } from './clients'
 
 export const Footer = () => {
   const { theme, setTheme } = useTheme()
+  const [latestBlockNumber, setLatestBlockNumber] = useState<number | null>(
+    null,
+  )
 
   const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light')
 
+  useEffect(() => {
+    const subscription = polkadotClient.finalizedBlock$.subscribe(
+      (finalizedBlock) => {
+        if (typeof finalizedBlock.number === 'number') {
+          setLatestBlockNumber(finalizedBlock.number)
+        }
+      },
+    )
+
+    return () => subscription.unsubscribe()
+  }, [])
+
   return (
     <footer className="bg-background/80 w-fill supports-backdrop-filter:bg-background/60 fixed bottom-0 border-t backdrop-blur">
-      <div className="text-muted-foreground flex flex-col justify-between gap-4 px-4 py-6 text-sm sm:flex-row sm:items-center sm:px-6">
+      <div className="text-muted-foreground mx-auto flex w-full max-w-7xl flex-col items-center justify-between gap-4 px-4 py-6 text-sm sm:flex-row sm:items-center sm:px-6">
         <div className="text-center sm:text-left">
           <p className="text-foreground text-base font-semibold">
             Polkadot Technical Fellowship
@@ -41,6 +59,11 @@ export const Footer = () => {
             <Moon className="h-[1.1rem] w-[1.1rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
             <span className="sr-only">Toggle theme</span>
           </Button>
+          <Badge variant="secondary" className="p-3 text-nowrap">
+            {latestBlockNumber
+              ? `#${latestBlockNumber.toLocaleString()}`
+              : 'Syncing block...'}
+          </Badge>
         </div>
       </div>
     </footer>