availproject · Megumiiiiii · Dec 8, 2023 · Dec 9, 2023 · Dec 9, 2023 · Dec 11, 2023
diff --git a/app/_app.tsx b/app/_app.tsx
@@ -0,0 +1,11 @@
+import './globals.css'
+import type { AppProps } from 'next/app'
+import { ThemeProvider } from "next-themes"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider attribute="class">
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}
diff --git a/app/globals.css b/app/globals.css
@@ -44,7 +44,6 @@ html {
   }
   line-height: 100%;
   letter-spacing: -0.03em;
-  color: #FFFFFF;
   text-align: center;
 }
 
@@ -57,36 +56,35 @@ html {
       font-size: 20px;
   }
   letter-spacing: -0.03em;
-  color: #FFFFFF;
   text-align: left;
   justify-content: flex-start;
 }
 
 @layer base {
   :root {
-    --background:223.6,15.5%,13.9%;
-    --foreground:229, 15%, 15%;
+    --background: white;
+    --foreground: black;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: white;
+    --card-foreground: black;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: white;
+    --popover-foreground: black;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: white;
+    --primary-foreground: black;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: white;
+    --secondary-foreground: black;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: white;
+    --muted-foreground: black;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: white;
+    --accent-foreground: black;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive:white;
+    --destructive-foreground: black;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
@@ -96,29 +94,29 @@ html {
   }
 
   .dark {
-    --background: 229, 15%, 15%;
-    --foreground:229, 15%, 15%;
+    --background: black;
+    --foreground: white;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: black;
+    --card-foreground: white;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: black;
+    --popover-foreground: white;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: black;
+    --primary-foreground: white;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: black;
+    --secondary-foreground: white;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: black;
+    --muted-foreground: white;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: black;
+    --accent-foreground: white;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: black;
+    --destructive-foreground: white;
 
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import { PHProvider, PostHogPageview } from './providers'
+import { PHProvider, PostHogPageview, Providers } from './providers'
 import { Suspense } from 'react'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -23,7 +23,7 @@ export default function RootLayout({
       </Suspense>
       <PHProvider>
         <body className={inter.className}>
-          {children}
+        <Providers>{children}</Providers>
         </body>
       </PHProvider>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -12,8 +12,11 @@ import { sleep } from "@/utils/helper";
 import { Block, Matrix, Cell } from "@/types/light-client";
 import { runLC } from "@/repository/avail-light.repository";
 import Link from "next/link";
+import { useTheme } from "next-themes";
 
 export default function Home() {
+  const { systemTheme, theme, setTheme } = useTheme();
+  const currentTheme = theme === 'system' ? systemTheme : theme;
   const [latestBlock, setLatestBlock] = useState<Block | null>(null);
   const [blockList, setBlockList] = useState<Array<Block>>([]);
   const [matrix, setMatrix] = useState<Matrix>({
@@ -133,23 +136,51 @@ export default function Home() {
 
   return (
     <>
-      <Navbar
-        showButton
+      <Navbar showButton
         button={
+          <div className="flex space-x-4">
+            <Button
+              onClick={() => {
+                running ? (stop?.(), setRunning(false)) : run();
+              }}
+              variant={"outline"}
+              className="rounded-full border-opacity-70 bg-opacity-50 lg:px-8 lg:py-6 px-6 py-4 font-thicccboibold"
+            >
+              {running ? "Stop Running the LC" : "Start Running the LC"}
+            </Button>
+            <Button
+              onClick={() =>
+                theme == "dark" ? setTheme('light') : setTheme("dark")
+              }
+              variant={"default"}
+              className="rounded-full border-opacity-70 bg-opacity-50 lg:px-8 lg:py-6 px-6 py-4 font-thicccboibold"
+            >
+              Switch Theme Mode
+            </Button>
+          </div>
+        } />
+      <main className="">
+        <div className="md:hidden flex flex-row items-center justify-center py-8">
+          <Button
+            onClick={() =>
+              theme == "dark" ? setTheme('light') : setTheme("dark")
+            }
+            variant={"default"}
+            className="rounded-full border-opacity-70 bg-opacity-50 lg:px-5 lg:py-6 px-6 py-4 font-thicccboibold"
+          >
+            Switch Theme
+          </Button>
           <Button
             onClick={() => {
-              running ? (stop?.(), setRunning(false)) : run();
+              running ? (stop?.(), setRunning(false)) : (run(), scrollToBlocks())
             }}
-            variant={"outline"}
-            className="text-white rounded-full border-opacity-70 bg-opacity-50 lg:px-8 lg:py-6 px-6 py-4 font-thicccboibold"
+            variant={'outline'}
+            className='rounded-full border-opacity-70 bg-opacity-50 px-8 py-6  font-thicccboibold'
           >
-            {running ? "Stop Running the LC" : "Start Running the LC"}
+            {
+              running ? 'Stop Running the LC' : 'Start Running the LC'
+            }
           </Button>
-        }
-      />
-      <main className="">
-        <div className="md:hidden flex flex-col items-center justify-center py-8">
-          <Button onClick={() => { running ? (stop?.(), setRunning(false)) : (run(), scrollToBlocks()) }} variant={'outline'} className='text-white rounded-full border-opacity-70 bg-opacity-50 px-8 py-6  font-thicccboibold'>{running ? 'Stop Running the LC' : 'Start Running the LC'}</Button>
         </div>
         {running || (latestBlock != null) ? (
           <div className="flex lg:flex-row flex-col-reverse lg:h-screen w-screen">
@@ -173,16 +204,16 @@ export default function Home() {
           </div>
         ) : (
           <div className="flex flex-col p-16 2xl:p-20 space-y-10 2xl:space-y-14 ">
-            <h2 className="text-5xl 2xl:text-7xl font-thicccboibold leading-tight text-white !text-left lg:block ">
+            <h2 className="text-5xl 2xl:text-7xl font-thicccboibold leading-tight  !text-left lg:block ">
               Avail Light Client (Web)
             </h2>
-            <p className="text-xl font-ppmori  text-white !text-left lg:block text-opacity-80 ">
+            <p className="text-xl font-ppmori   !text-left lg:block text-opacity-80 ">
               This is an experimental light client for Avail. It runs <i>entirely
                 in your browser</i> to verify that block data is available, by
               verifying Avail&#39;s KZG commitment proofs locally. Click
               the button above to see it in action!
             </p>
-            <p className="text-xl  font-ppmori  text-white !text-left lg:block text-opacity-80 ">
+            <p className="text-xl  font-ppmori   !text-left lg:block text-opacity-80 ">
               Check out the{" "}
               <Link
                 href={"https://github.com/availproject/light-client-web"}
@@ -200,7 +231,7 @@ export default function Home() {
                 availproject.org
               </Link>
             </p>
-            <p className="text-xl  2xl:text-4xl  font-ppmori text-white !text-left lg:block text-opacity-80 ">
+            <p className="text-xl  2xl:text-4xl  font-ppmori  !text-left lg:block text-opacity-80 ">
               P.S. Do you want to share the awesomeness?{" "}
               <Link
                 href={"https://twitter.com/intent/tweet?text=Check out @AvailProject's new Web Light Client at https://light.avail.tools/ !"}

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -4,6 +4,7 @@ import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
+import { ThemeProvider } from "next-themes"
 
 if (typeof window !== 'undefined') {
   if (process.env.NEXT_PUBLIC_POSTHOG_KEY) {
@@ -41,3 +42,9 @@ export function PHProvider({ children }: {
 }) {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>
 }
+
+export function Providers({ children }: {
+  children: React.ReactNode
+}) {
+  return <ThemeProvider>{children}</ThemeProvider>
+}
diff --git a/components/availchain.tsx b/components/availchain.tsx
@@ -35,7 +35,7 @@ export default function AvailChain(props: Props) {
     <div className="flex flex-row  overflow-auto whitespace-nowrap ">{
       blockList.map((block: BlockType, index: number) => (
         <div key={index} className="flex flex-col items-center justify-center">
-          <h3 className={`z-50 text-md ${blockList.length > index + 1 ? 'text-white' : 'text-[#3CBBF9] animate-pulse'} text-opacity-70`}>#{block.number}</h3>
+          <h3 className={`z-50 text-md ${blockList.length > index + 1 ? '' : 'text-blue-600 animate-pulse'} text-opacity-70`}>#{block.number}</h3>
           <div className="relative">
             <Block key={index} progress={blockList.length > index + 1 ? 100 : 0} />
             <Progress value={blockList.length > index + 1 ? 100 : progress} className="lg:h-2 lg:w-14 h-1 w-6 absolute right-0 top-1/2 transform -translate-y-1/2 !rounded-md"></Progress>

diff --git a/components/blockdata.tsx b/components/blockdata.tsx
@@ -17,13 +17,13 @@ export default function BlockData(props: Props) {
             <div className="flex flex-col space-y-2">
                 {
                     running &&
-                    <h2 className="text-white text-3xl font-thicccboisemibold 2xl:text-6xl pt-6 lg:pt-0 2xl:pt-4 ">Block data <span className="text-opacity-80 text-white font-thicccboisemibold 2xl:text-xl lg:text-lg text-sm"
+                    <h2 className=" text-3xl font-thicccboisemibold 2xl:text-6xl pt-6 lg:pt-0 2xl:pt-4 ">Block data <span className="text-opacity-80  font-thicccboisemibold 2xl:text-xl lg:text-lg text-sm"
                     >(Latest Block)</span></h2>
                 }
             </div>
             <div className="flex flex-row justify-between lg:mr-4 items-start ">
                 <div className="flex flex-col items-start">
-                    <h3 className="text-[#F5F5F5] font-thicccboisemibold text-xl lg:text-2xl 2xl:text-4xl 2xl:mt-4">Confidence Factor</h3>
+                    <h3 className="font-thicccboisemibold text-xl lg:text-2xl 2xl:text-4xl 2xl:mt-4">Confidence Factor</h3>
 
                     {
                         latestBlock && latestBlock.confidence && latestBlock.confidence > 90 ?
@@ -36,19 +36,19 @@ export default function BlockData(props: Props) {
                 <div>
                     <div className="flex flex-col items-end space-y-4">
                         <div className="flex flex-col ">
-                            <h3 className="text-[#F5F5F5] text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Block Hash</h3>
+                            <h3 className="text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Block Hash</h3>
                             <p className="text-green-500 font-thicccboibold text-3xl 2xl:text-5xl text-right">{latestBlock?.hash?.toString().slice(0, 6) || ''}...</p>
                         </div>
                         <div className="flex flex-col ">
-                            <h3 className="text-[#F5F5F5] text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Block Number</h3>
+                            <h3 className="text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Block Number</h3>
                             <p className="text-green-500 font-thicccboibold text-3xl 2xl:text-5xl text-right">#{latestBlock?.number || '0000'}</p>
                         </div>
                         <div className="flex flex-col ">
-                            <h3 className="text-[#F5F5F5] text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Total Cell Count</h3>
+                            <h3 className="text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Total Cell Count</h3>
                             <p className="text-green-500 font-thicccboibold text-3xl 2xl:text-5xl text-right">{latestBlock?.totalCellCount || '000'}</p>
                         </div>
                         <div className="md:flex flex-col hidden">
-                            <h3 className="text-[#F5F5F5] text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Sample Cell Count</h3>
+                            <h3 className="text-opacity-80 font-thicccboisemibold text-xl lg:text-2xl text-right 2xl:text-4xl 2xl:mt-4">Sample Cell Count</h3>
                             <p className="text-green-500 font-thicccboibold text-3xl 2xl:text-5xl text-right">{latestBlock?.sampleCount?.toString() || '0'}</p>
                         </div>
                     </div>

diff --git a/components/header.tsx b/components/header.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
-import Image from "next/image";
 import { ReactNode } from "react";
 
 export default function Navbar({
@@ -18,8 +17,8 @@ export default function Navbar({
           className="text-mono btn-ghost btn text-xl normal-case md:text-3xl"
         >
           <img
-            src="/images/availlogo.png"
-            alt=""
+            src="/images/avail.png"
+            alt="avail"
             className="max-h-[40px]"
           />
           <span className="text-mono hidden text-xl normal-case md:inline-flex md:text-2xl ml-2">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "framer-motion": "^10.16.4",
     "lucide-react": "^0.292.0",
     "next": "14.0.1",
+    "next-themes": "^0.2.1",
     "postcss": "8.4.31",
     "posthog-js": "^1.88.4",
     "react": "18.2.0",

diff --git a/public/images/avail.png b/public/images/avail.png
diff --git a/tailwind.config.ts b/tailwind.config.ts