diff --git a/app/_app.tsx b/app/_app.tsx new file mode 100644 index 0000000..5e47de4 --- /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..5d6f63c 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,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 index b18e4b3..59ddd68 100644 --- 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({ - {children} + {children} diff --git a/app/page.tsx b/app/page.tsx index 4bc10de..dea93f5 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 { systemTheme, theme, setTheme } = useTheme(); + const currentTheme = theme === 'system' ? systemTheme : theme; const [latestBlock, setLatestBlock] = useState(null); const [blockList, setBlockList] = useState>([]); const [matrix, setMatrix] = useState({ @@ -133,23 +136,51 @@ export default function Home() { return ( <> - + + + + } /> +
+
+ - } - /> -
-
-
{running || (latestBlock != null) ? (
@@ -173,16 +204,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/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..9abdf51 100644 --- 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" > diff --git a/package-lock.json b/package-lock.json index d686f87..bf06d25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,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", @@ -6593,6 +6594,16 @@ } } }, + "node_modules/next-themes": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz", + "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==", + "peerDependencies": { + "next": "*", + "react": "*", + "react-dom": "*" + } + }, "node_modules/nock": { "version": "13.3.8", "resolved": "https://registry.npmjs.org/nock/-/nock-13.3.8.tgz", diff --git a/package.json b/package.json index 787820c..4d9d1e3 100644 --- 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 new file mode 100644 index 0000000..7ca2735 Binary files /dev/null and b/public/images/avail.png differ diff --git a/tailwind.config.ts b/tailwind.config.ts deleted file mode 100644 index 914b73f..0000000 --- a/tailwind.config.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { Config } from 'tailwindcss'; - -const config: Config = { - content: [ - './pages/**/*.{js,ts,jsx,tsx,mdx}', - './components/**/*.{js,ts,jsx,tsx,mdx}', - './app/**/*.{js,ts,jsx,tsx,mdx}', - ], - theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, - }, - plugins: [], -} -export default config