Add Light/Dark Mode and remove unnecessary files

.gitignore

@@ -1,7 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-package-lock.json
-
 # dependencies
 /node_modules
 /.pnp

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>
+  )
+}

app/globals.css

@@ -44,7 +44,6 @@ html {
   }
   line-height: 100%;
   letter-spacing: -0.03em;
-  color: #FFFFFF;
   text-align: center;
 }
 
@@ -57,36 +56,32 @@ 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%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: #efeded;
+    --card-foreground: black;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: #efeded;
+    --popover-foreground: black;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: #efeded;
+    --primary-foreground: black;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: #efeded;
+    --secondary-foreground: black;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: #efeded;
+    --muted-foreground: black;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: #efeded;
+    --accent-foreground: black;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive:#efeded;
+    --destructive-foreground: black;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
@@ -96,41 +91,50 @@ html {
   }
 
   .dark {
-    --background: 229, 15%, 15%;
-    --foreground:229, 15%, 15%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: #1E2129;
+    --card-foreground: white;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: #1E2129;
+    --popover-foreground: white;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: #1E2129;
+    --primary-foreground: white;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: #1E2129;
+    --secondary-foreground: white;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: #1E2129;
+    --muted-foreground: white;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: #1E2129;
+    --accent-foreground: white;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: #1E2129;
+    --destructive-foreground: white;
 
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
+
+:root {
+  --background: #efeded;
+  --foreground: black;
+}
+
+[data-theme='dark'] {
+  --background: #1E2129;
+  --foreground: white;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
 
 @layer base {
   * {
     @apply border-border;
   }
-  body {
-    @apply bg-background text-foreground;
-  }
 }

app/layout.tsx

@@ -1,14 +1,14 @@
 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'] })
 
 export const metadata: Metadata = {
   title: 'Avail Light Client',
-  description: 'Generated by create next app',
+  description: 'Run Avail Light Client on Your Browser',
 }
 
 export default function RootLayout({
@@ -23,7 +23,7 @@ export default function RootLayout({
       </Suspense>
       <PHProvider>
         <body className={inter.className}>
-          {children}
+        <Providers>{children}</Providers>
         </body>
       </PHProvider>
     </html>

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 { theme, setTheme } = useTheme();
+  const [isTransitioning, setIsTransitioning] = useState(false);
   const [latestBlock, setLatestBlock] = useState<Block | null>(null);
   const [blockList, setBlockList] = useState<Array<Block>>([]);
   const [matrix, setMatrix] = useState<Matrix>({
@@ -26,6 +29,18 @@ export default function Home() {
   const [stop, setStop] = useState<Function | null>(null);
   const [processingBlock, setProcessingBlock] = useState<boolean>(false);
 
+
+  const handleThemeChange = () => {
+    setIsTransitioning(true);
+
+    setTimeout(() => {
+      const newTheme = theme === 'dark' ? 'light' : 'dark';
+      setTheme(newTheme);
+      setIsTransitioning(false);
+    }, 0);
+  };
+
+
   useEffect(() => {
     init();
   }, []);
@@ -133,23 +148,58 @@ 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={handleThemeChange} variant="ghost">
+              <img
+                src="/static/theme.png"
+                alt="theme"
+                width={40}
+                height={40}
+                style={{
+                  opacity: isTransitioning ? 0 : 1,
+                }}
+              />
+            </Button>
+          </div>
+        } />
+      <main className="">
+        <div className="md:hidden flex flex-row items-center justify-center py-8">
+          <button onClick={handleThemeChange}>
+            <img
+              src="/static/theme.png"
+              alt="theme"
+              width={40}
+              height={40}
+              style={{
+                opacity: isTransitioning ? 0 : 1,
+                position: 'absolute',
+                top: 30,
+                right: 10,
+              }}
+            />
+          </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"
+            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 +223,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 +250,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/ !"}

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>
+}

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>

components/block.tsx

@@ -1,17 +1,29 @@
 /* eslint-disable @next/next/no-img-element */
+"use client"
 
 import { useState, useEffect } from "react";
 import { Progress } from "./ui/progress";
 import { Block } from "@/types/light-client";
+import { useTheme } from "next-themes";
 
 type Props = {
     progress: number
 }
 
 
 export default function Block(props: Props) {
+    const { theme } = useTheme();
+    const [blockImage, setBlockImage] = useState("/images/block.png");
     const [value, setValue] = useState(0);
 
+    useEffect(() => {
+        if (theme === "dark") {
+          setBlockImage("/images/block-dark.png");
+        } else {
+          setBlockImage("/images/block-light.png");
+        }
+      }, [theme]);
+
     useEffect(() => {
         setValue(props.progress)
     }, [props.progress])
@@ -26,7 +38,7 @@ export default function Block(props: Props) {
         <div className="">
             <div className="flex flex-row items-center justify-center">
                 <img
-                    src="/images/block.png"
+                    src={blockImage}
                     alt="block"
                     className="2xl:max-h-[350px] lg:max-h-[250px] max-h-[120px] aspect-auto overflow-scroll overflow-y-auto"
                 />