Beautify light client case

delegit-xyz · Aug 20, 2024 · 0b250e5 · 0b250e5
1 parent 99de1dd
commit 0b250e5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 21 deletions.
diff --git a/src/Content.tsx b/src/Content.tsx
@@ -1,7 +1,9 @@
 import { Route, Routes } from 'react-router-dom'
 
 import { Home } from '@/pages/Home'
-
+import { toast } from 'sonner'
+import { useEffect } from 'react'
+import { useNetwork } from './contexts/NetworkContext'
 const pages = [
   {
     path: '',
@@ -14,6 +16,10 @@ const pages = [
 ]
 
 export const Content = () => {
+  const { lightClientLoaded, isLight } = useNetwork()
+  useEffect(() => {
+    isLight && lightClientLoaded && toast.success('Light client: Synced')
+  }, [isLight, lightClientLoaded])
   return (
     <>
       <Routes>

diff --git a/src/contexts/NetworkContext.tsx b/src/contexts/NetworkContext.tsx
@@ -18,6 +18,8 @@ type NetworkContextProps = {
 export type NetworkProps = 'polkadot' | 'kusama' | 'polkadot-lc' | 'kusama-lc'
 
 export interface INetworkContext {
+  lightClientLoaded: boolean
+  isLight: boolean
   network: NetworkProps
   setNetwork: React.Dispatch<React.SetStateAction<NetworkProps>>
   client: PolkadotClient | undefined
@@ -27,6 +29,8 @@ export interface INetworkContext {
 const NetworkContext = createContext<INetworkContext | undefined>(undefined)
 
 const NetworkContextProvider = ({ children }: NetworkContextProps) => {
+  const [lightClientLoaded, setLightClientLoaded] = useState<boolean>(false)
+  const [isLight, setIsLight] = useState<boolean>(false)
   const [client, setClient] = useState<PolkadotClient>()
   const [api, setApi] = useState<TypedApi<typeof dot | typeof ksm>>()
   const [network, setNetwork] = useState<NetworkProps>('polkadot')
@@ -36,10 +40,12 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
     let typedApi: TypedApi<typeof dot | typeof ksm>
     switch (network) {
       case 'kusama':
+        setIsLight(false)
         cl = createClient(getWsProvider('wss://rpc.ibp.network/kusama'))
         typedApi = cl.getTypedApi(ksm)
         break
       case 'polkadot-lc': {
+        setIsLight(true)
         const smoldot = startFromWorker(new SmWorker())
         const dotRelayChain = import('polkadot-api/chains/polkadot').then(
           ({ chainSpec }) => smoldot.addChain({ chainSpec }),
@@ -49,6 +55,7 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
         break
       }
       case 'kusama-lc': {
+        setIsLight(true)
         const smoldot = startFromWorker(new SmWorker())
         const ksmRelayChain = import('polkadot-api/chains/ksmcc3').then(
           ({ chainSpec }) => smoldot.addChain({ chainSpec }),
@@ -58,15 +65,27 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
         break
       }
       default:
+        setIsLight(false)
         cl = createClient(getWsProvider('wss://rpc.ibp.network/polkadot'))
         typedApi = cl.getTypedApi(dot)
     }
     setClient(cl)
     setApi(typedApi)
   }, [network])
 
+  useEffect(() => {
+    isLight &&
+      client?.finalizedBlock$.subscribe((finalizedBlock) => {
+        if (finalizedBlock.number && !lightClientLoaded) {
+          setLightClientLoaded(true)
+        }
+      })
+  }, [client?.finalizedBlock$, isLight, lightClientLoaded])
+
   return (
-    <NetworkContext.Provider value={{ network, setNetwork, client, api }}>
+    <NetworkContext.Provider
+      value={{ lightClientLoaded, isLight, network, setNetwork, client, api }}
+    >
       {children}
     </NetworkContext.Provider>
   )

diff --git a/src/header.tsx b/src/header.tsx
@@ -64,13 +64,6 @@ export const Header = () => {
                 {r.name}
               </a>
             ))}
-            <a
-              href="#"
-              className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-            >
-              <Settings2 className="h-5 w-5" />
-              Settings
-            </a>
           </nav>
         </SheetContent>
       </Sheet>

diff --git a/src/navigation.tsx b/src/navigation.tsx
@@ -7,10 +7,13 @@ import {
 import { routes } from '@/lib/utils'
 import { useLocation } from 'react-router-dom'
 import PolkadotIcon from '@/assets/img/polkadotIcon.svg?react'
+import { TbLoaderQuarter } from 'react-icons/tb'
+import { FaCheckCircle } from 'react-icons/fa'
 
 import { Github, Moon, Sun } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { useTheme } from '@/components/theme-provider'
+import { useNetwork } from './contexts/NetworkContext'
 
 const linkStyle = (pathname: string, link: string) => {
   return `link ${
@@ -21,6 +24,7 @@ const linkStyle = (pathname: string, link: string) => {
 }
 
 export const Navigation = () => {
+  const { lightClientLoaded, isLight } = useNetwork()
   const { pathname } = useLocation()
   const { theme, setTheme } = useTheme()
 
@@ -51,6 +55,28 @@ export const Navigation = () => {
         ))}
       </nav>
       <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
+        {isLight && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <a
+                href="#"
+                className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+              >
+                {!lightClientLoaded ? (
+                  <TbLoaderQuarter className="h-5 w-5 animate-spin" />
+                ) : (
+                  <FaCheckCircle className="text-[#00b300]" />
+                )}
+                <span className="sr-only">
+                  Light Client {!lightClientLoaded ? `syncing` : `synced`}
+                </span>
+              </a>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              Light Client {!lightClientLoaded ? `syncing` : `synced`}
+            </TooltipContent>
+          </Tooltip>
+        )}
         <Tooltip>
           <TooltipTrigger asChild>
             <a
@@ -78,18 +104,6 @@ export const Navigation = () => {
           </TooltipTrigger>
           <TooltipContent side="right">Toggle theme</TooltipContent>
         </Tooltip>
-        {/* <Tooltip>
-          <TooltipTrigger asChild>
-            <a
-              href="#"
-              className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
-            >
-              <Settings className="h-5 w-5" />
-              <span className="sr-only">Settings</span>
-            </a>
-          </TooltipTrigger>
-          <TooltipContent side="right">Settings</TooltipContent>
-        </Tooltip> */}
       </nav>
     </aside>
   )