diff --git a/.gitignore b/.gitignore index 8b286e4..8f322f0 100644 --- a/.gitignore +++ b/.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 diff --git a/app/_app.tsx b/app/_app.tsx new file mode 100644 index 0000000..1b73561 --- /dev/null +++ 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 ( + + + + ) +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index 631f07f..8f2bd1e 100644 --- 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,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; - } } \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index b18e4b3..33f01b1 100644 --- a/app/layout.tsx +++ b/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({ - {children} + {children} diff --git a/app/page.tsx b/app/page.tsx index 4bc10de..693d689 100644 --- 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 { theme, setTheme } = useTheme(); + const [isTransitioning, setIsTransitioning] = useState(false); const [latestBlock, setLatestBlock] = useState(null); const [blockList, setBlockList] = useState>([]); const [matrix, setMatrix] = useState({ @@ -26,6 +29,18 @@ export default function Home() { const [stop, setStop] = useState(null); const [processingBlock, setProcessingBlock] = useState(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 ( <> - + + + + } /> +
+
+ - } - /> -
-
-
{running || (latestBlock != null) ? (
@@ -173,16 +223,16 @@ export default function Home() {
) : (
-

+

Avail Light Client (Web)

-

+

This is an experimental light client for Avail. It runs entirely in your browser to verify that block data is available, by verifying Avail's KZG commitment proofs locally. Click the button above to see it in action!

-

+

Check out the{" "}

-

+

P.S. Do you want to share the awesomeness?{" "} {children} } + +export function Providers({ children }: { + children: React.ReactNode +}) { + return {children} +} \ No newline at end of file diff --git a/components/availchain.tsx b/components/availchain.tsx index f59fb18..1c68aab 100644 --- a/components/availchain.tsx +++ b/components/availchain.tsx @@ -35,7 +35,7 @@ export default function AvailChain(props: Props) {

{ blockList.map((block: BlockType, index: number) => (
-

index + 1 ? 'text-white' : 'text-[#3CBBF9] animate-pulse'} text-opacity-70`}>#{block.number}

+

index + 1 ? '' : 'text-blue-600 animate-pulse'} text-opacity-70`}>#{block.number}

index + 1 ? 100 : 0} /> 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"> diff --git a/components/block.tsx b/components/block.tsx index eba70e8..50fa4ec 100644 --- a/components/block.tsx +++ b/components/block.tsx @@ -1,8 +1,10 @@ /* 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 @@ -10,8 +12,18 @@ type Props = { 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) {
block diff --git a/components/blockdata.tsx b/components/blockdata.tsx index 4ff7674..1b3cc2b 100644 --- a/components/blockdata.tsx +++ b/components/blockdata.tsx @@ -17,13 +17,13 @@ export default function BlockData(props: Props) {
{ running && -

Block data Block data (Latest Block)

}
-

Confidence Factor

+

Confidence Factor

{ latestBlock && latestBlock.confidence && latestBlock.confidence > 90 ? @@ -36,19 +36,19 @@ export default function BlockData(props: Props) {
-

Block Hash

+

Block Hash

{latestBlock?.hash?.toString().slice(0, 6) || ''}...

-

Block Number

+

Block Number

#{latestBlock?.number || '0000'}

-

Total Cell Count

+

Total Cell Count

{latestBlock?.totalCellCount || '000'}

-

Sample Cell Count

+

Sample Cell Count

{latestBlock?.sampleCount?.toString() || '0'}

diff --git a/components/header.tsx b/components/header.tsx index fedfeff..be84717 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,6 +1,4 @@ /* 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({ @@ -13,18 +11,18 @@ export default function Navbar({ return (