From 0fbed22677c8db19078804397ea3e1ca1786edcf Mon Sep 17 00:00:00 2001 From: UTTKARSHCODER Date: Sat, 13 Dec 2025 16:49:28 +0530 Subject: [PATCH 1/6] Implemented a dynamic theme toggle in the top right, featuring a sun icon for light mode and a moon icon for dark mode. --- app/page.tsx | 387 ++++++++++++++++----------------------------------- 1 file changed, 121 insertions(+), 266 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index e20d650..11f0685 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,284 +1,139 @@ -'use client' +import React, { createContext, useContext, useEffect, useState } from 'react'; +import { Moon, Sun } from 'lucide-react'; -import Link from 'next/link' -import Image from 'next/image' -import { Button } from '@/components/ui/button' -import { Card } from '@/components/ui/card' -import { useMatrixEffect } from '@/hooks/useMatrixEffect' +// Theme Context +const ThemeContext = createContext({ + theme: 'dark', + toggleTheme: () => {}, + mounted: false +}); -export default function HomePage() { - const heroMatrixRef = useMatrixEffect(0.2, 2) // Matrix effect for hero section - const sectionMatrixRef = useMatrixEffect(0.15, 1.5) // Matrix effect for lower section +// Theme Provider Component +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState('dark'); + const [mounted, setMounted] = useState(false); + + // Initialize theme from localStorage before first render + useEffect(() => { + const stored = localStorage.getItem('theme'); + const initial = stored || + (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); + + setTheme(initial); + document.documentElement.classList.toggle('dark', initial === 'dark'); + setMounted(true); + }, []); + + // Update theme + const toggleTheme = () => { + const newTheme = theme === 'light' ? 'dark' : 'light'; + setTheme(newTheme); + localStorage.setItem('theme', newTheme); + document.documentElement.classList.toggle('dark', newTheme === 'dark'); + }; return ( - <> -
- {/* Background gradient */} -
- - {/* Matrix background effect */} -
-
- - {/* Additional purple glow effects */} -
-
-
- - {/* Subtle overlay for depth */} -
-
+ + {children} + + ); +} -
- {/* Logo Animation */} -
-
+// Hook to use theme +export function useTheme() { + const context = useContext(ThemeContext); + if (!context) { + throw new Error('useTheme must be used within ThemeProvider'); + } + return context; +} - {/* Main Content */} -
-

- hodlCoin Staking Platform -

-

- Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
- Unstaking fees benefit vault creators and those who keep staking longer. -

-
+// Theme Toggle Button Component +export function ThemeToggle() { + const { theme, toggleTheme, mounted } = useTheme(); -
-

- Choose the blockchain where you would like to stake: -

-
+ // Prevent rendering until mounted to avoid hydration mismatch + if (!mounted) { + return ( + + ); + } - {/* Action Buttons */} -
- - - - - - - - - + return ( + + ); +} + +// Demo App Component +export default function App() { + return ( + +
+ {/* Header with Theme Toggle */} +
+
+

hodlCoin

+
-
-
+ -
- {/* Matrix background effect */} -
-
- - {/* Additional purple glow effects */} -
-
-
- - {/* Subtle grid overlay */} -
-
+ {/* Main Content */} +
+
+
+

Theme Fix Applied

+

+ This implementation fixes the theme flicker issue by: +

+
    +
  • ✓ Reading theme from localStorage immediately
    • +
  • ✓ Preventing hydration mismatch with mounted state
    • +
  • ✓ Syncing toggle icon with actual theme
    • +
  • ✓ Applying theme class before first paint
    • +
+
-
- {/* How HodlCoin Works Section */} -
- {/* Paper Image */} -
- - -
- Research Paper -
-
- - +
+

Instructions

+
    +
  1. Toggle to light mode (sun icon should appear)
    2. +
  2. Reload the page
    3. +
  3. Page stays in light mode with sun icon
    4. +
  4. No flicker on reload!
    5. +
- {/* Content */} -
-
-

- How hodlCoin Works -

-
-
- -
-

- HodlCoin is a staking protocol that encourages staking ("hodling") - assets for long periods of time. When hodling, users deposit coins of - a given asset in a vault and receive a proportional amount of corresponding hodlCoins. -

-

- When unhodling, users must pay an unstaking fee that benefits the vault's creator and users - who continue hodling longer. Moreover, anyone (especially vault creators) can - distribute rewards to hodlers, to further incentivize hodling. +

+
+

Light Mode

+

+ Clean, bright interface

- -
- - Read the Research Paper - - - - +
+

Dark Mode

+

+ Easy on the eyes +

- - {/* Why HodlCoin Section */} -
-
-

- Why hodlCoin -

-
- -
- {/* For Vault Creators */} - -
-
-

For Vault Creators

-
-
- -
    -
  • -
    -
    -

    Reward your Loyal Tokenholders

    -

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    -
    -
    • -
  • -
    -
    -

    Signal your Long-Term Commitment

    -

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    -
    -
    • -
  • -
    -
    -

    Earn Unstaking Fees

    -

    Receive a portion of fees when users unstake early.

    -
    -
    • -
  • -
    -
    -

    Protect your Token from Sell Pressure

    -

    The unstaking fee disincentivizes sellers and incentivizes holders without inflation.

    -
    -
    • -
-
- - - {/* For Stakers */} - -
-
-

For Stakers

-
-
- -
    -
  • -
    -
    -

    Earn from Others' Impatience

    -

    Benefit from unstaking fees paid by users who exit early.

    -
    -
    • -
  • -
    -
    -

    Long-Term Value Growth

    -

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    -
    -
    • -
  • -
    -
    -

    Receive Rewards

    -

    Get additional rewards distributed by vault creators who want to incentivize staking.

    -
    -
    • -
  • -
    -
    -

    Flexible Participation

    -

    Stake and unstake at any time, choosing from a wide variety of vaults for various tokens.

    -
    -
    • -
-
- -
-
-
-
- - ) -} + +
+ + ); +} \ No newline at end of file From 3c17437490dad08e9ea5b8fae959ae9e169f5d66 Mon Sep 17 00:00:00 2001 From: UTTKARSHCODER Date: Sat, 13 Dec 2025 17:13:28 +0530 Subject: [PATCH 2/6] Updated the main content as demanded --- app/page.tsx | 310 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 241 insertions(+), 69 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 11f0685..a73caf5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,35 +1,78 @@ import React, { createContext, useContext, useEffect, useState } from 'react'; import { Moon, Sun } from 'lucide-react'; +// Types +interface ThemeContextType { + theme: 'light' | 'dark'; + toggleTheme: () => void; + mounted: boolean; +} + +interface ThemeProviderProps { + children: React.ReactNode; +} + // Theme Context -const ThemeContext = createContext({ +const ThemeContext = createContext({ theme: 'dark', toggleTheme: () => {}, mounted: false }); // Theme Provider Component -export function ThemeProvider({ children }) { - const [theme, setTheme] = useState('dark'); +export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element { + const [theme, setTheme] = useState<'light' | 'dark'>('dark'); const [mounted, setMounted] = useState(false); - // Initialize theme from localStorage before first render + // Initialize theme on mount useEffect(() => { - const stored = localStorage.getItem('theme'); + // SSR safety check + if (typeof window === 'undefined') return; + + const stored = localStorage.getItem('theme') as 'light' | 'dark' | null; const initial = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); setTheme(initial); - document.documentElement.classList.toggle('dark', initial === 'dark'); + applyTheme(initial); setMounted(true); }, []); - // Update theme - const toggleTheme = () => { + const applyTheme = (newTheme: 'light' | 'dark'): void => { + if (typeof window === 'undefined') return; + + const root = document.documentElement; + + if (newTheme === 'dark') { + root.style.setProperty('--bg-primary', '#111827'); + root.style.setProperty('--bg-secondary', '#1f2937'); + root.style.setProperty('--bg-tertiary', '#374151'); + root.style.setProperty('--text-primary', '#f9fafb'); + root.style.setProperty('--text-secondary', '#d1d5db'); + root.style.setProperty('--border-color', '#4b5563'); + root.style.backgroundColor = '#111827'; + root.style.color = '#f9fafb'; + } else { + root.style.setProperty('--bg-primary', '#ffffff'); + root.style.setProperty('--bg-secondary', '#f9fafb'); + root.style.setProperty('--bg-tertiary', '#f3f4f6'); + root.style.setProperty('--text-primary', '#111827'); + root.style.setProperty('--text-secondary', '#6b7280'); + root.style.setProperty('--border-color', '#e5e7eb'); + root.style.backgroundColor = '#ffffff'; + root.style.color = '#111827'; + } + }; + + // Toggle theme function + const toggleTheme = (): void => { const newTheme = theme === 'light' ? 'dark' : 'light'; + setTheme(newTheme); - localStorage.setItem('theme', newTheme); - document.documentElement.classList.toggle('dark', newTheme === 'dark'); + if (typeof window !== 'undefined') { + localStorage.setItem('theme', newTheme); + } + applyTheme(newTheme); }; return ( @@ -40,7 +83,7 @@ export function ThemeProvider({ children }) { } // Hook to use theme -export function useTheme() { +export function useTheme(): ThemeContextType { const context = useContext(ThemeContext); if (!context) { throw new Error('useTheme must be used within ThemeProvider'); @@ -49,14 +92,13 @@ export function useTheme() { } // Theme Toggle Button Component -export function ThemeToggle() { +export function ThemeToggle(): JSX.Element { const { theme, toggleTheme, mounted } = useTheme(); - // Prevent rendering until mounted to avoid hydration mismatch if (!mounted) { return ( - ); } @@ -64,76 +106,206 @@ export function ThemeToggle() { return ( ); } -// Demo App Component -export default function App() { +// Styles object +const styles = { + button: { + padding: '8px', + borderRadius: '8px', + border: '1px solid var(--border-color)', + backgroundColor: 'var(--bg-secondary)', + cursor: 'pointer', + transition: 'all 0.2s', + display: 'flex', + alignItems: 'center', + justifyContent: 'center' + } +}; + +// HomePage Component (renamed from App for Next.js conventions) +export default function HomePage(): JSX.Element { return ( -
- {/* Header with Theme Toggle */} -
-
-

hodlCoin

+ + + ); +} + +function HomePageContent(): JSX.Element { + const { theme, mounted } = useTheme(); + + const containerStyle: React.CSSProperties = { + minHeight: '100vh', + backgroundColor: 'var(--bg-primary)', + color: 'var(--text-primary)', + transition: 'all 0.3s ease' + }; + + const headerStyle: React.CSSProperties = { + borderBottom: '1px solid var(--border-color)', + backgroundColor: 'var(--bg-secondary)', + padding: '16px 0' + }; + + const cardStyle: React.CSSProperties = { + backgroundColor: 'var(--bg-secondary)', + border: '1px solid var(--border-color)', + borderRadius: '8px', + padding: '24px', + marginBottom: '24px' + }; + + if (!mounted) { + return
; + } + + return ( +
+ {/* Header */} +
+
+

hodlCoin

+
+ + Theme Toggle → +
-
- - {/* Main Content */} -
-
-
-

Theme Fix Applied

-

- This implementation fixes the theme flicker issue by: -

-
    -
  • ✓ Reading theme from localStorage immediately
    • -
  • ✓ Preventing hydration mismatch with mounted state
    • -
  • ✓ Syncing toggle icon with actual theme
    • -
  • ✓ Applying theme class before first paint
    • -
-
+
+
+ + {/* Main Content */} +
+ + {/* Hero Section */} +
+

+ hodlCoin Staking Platform +

+

+ Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
+ Unstaking fees benefit vault creators and those who keep staking longer. +

+ +

+ Choose the blockchain where you would like to stake: +

+ +
+ + + +
+
+ + {/* How HodlCoin Works */} +
+
+

+ How hodlCoin Works +

+
+ +

+ HodlCoin is a staking protocol that encourages staking ("hodling") assets for long periods of time. When hodling, users deposit coins of a given asset in a vault and receive a proportional amount of corresponding hodlCoins. +

+

+ When unhodling, users must pay an unstaking fee that benefits the vault's creator and users who continue hodling longer. Moreover, anyone (especially vault creators) can distribute rewards to hodlers, to further incentivize hodling. +

+
+
-
-

Instructions

-
    -
  1. Toggle to light mode (sun icon should appear)
    2. -
  2. Reload the page
    3. -
  3. Page stays in light mode with sun icon
    4. -
  4. No flicker on reload!
    5. -
+ {/* Why HodlCoin Section */} +
+

+ Why hodlCoin +

+ +
+ {/* For Vault Creators */} +
+

+ For Vault Creators +

+
+ +
    +
  • +
    +
    +

    Reward your Loyal Tokenholders

    +

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    +
    +
    • +
  • +
    +
    +

    Signal your Long-Term Commitment

    +

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    +
    +
    • +
  • +
    +
    +

    Earn Unstaking Fees

    +

    Receive a portion of fees when users unstake early.

    +
    +
    • +
-
-
-

Light Mode

-

- Clean, bright interface -

-
-
-

Dark Mode

-

- Easy on the eyes -

-
+ {/* For Stakers */} +
+

+ For Stakers +

+
+ +
    +
  • +
    +
    +

    Earn from Others' Impatience

    +

    Benefit from unstaking fees paid by users who exit early.

    +
    +
    • +
  • +
    +
    +

    Long-Term Value Growth

    +

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    +
    +
    • +
  • +
    +
    +

    Receive Rewards

    +

    Get additional rewards distributed by vault creators who want to incentivize staking.

    +
    +
    • +
-
-
- +
+ + +
); } \ No newline at end of file From 33cf723983e254048b9f7c73ea6037d99e5b4180 Mon Sep 17 00:00:00 2001 From: UTTKARSHCODER Date: Sat, 13 Dec 2025 17:44:19 +0530 Subject: [PATCH 3/6] added use client and updated from mixed inline CSS to tailwind CSS --- app/page.tsx | 514 ++++++++++++++++++++++++--------------------------- 1 file changed, 240 insertions(+), 274 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index a73caf5..a219e26 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,311 +1,277 @@ +'use client'; import React, { createContext, useContext, useEffect, useState } from 'react'; import { Moon, Sun } from 'lucide-react'; -// Types + interface ThemeContextType { - theme: 'light' | 'dark'; - toggleTheme: () => void; - mounted: boolean; +  theme: 'light' | 'dark'; +  toggleTheme: () => void; +  mounted: boolean; } interface ThemeProviderProps { - children: React.ReactNode; +  children: React.ReactNode; } -// Theme Context -const ThemeContext = createContext({ - theme: 'dark', - toggleTheme: () => {}, - mounted: false -}); -// Theme Provider Component +const ThemeContext = createContext(null); + + export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element { - const [theme, setTheme] = useState<'light' | 'dark'>('dark'); - const [mounted, setMounted] = useState(false); +  const [theme, setTheme] = useState<'light' | 'dark'>('dark'); +  const [mounted, setMounted] = useState(false); - // Initialize theme on mount - useEffect(() => { - // SSR safety check - if (typeof window === 'undefined') return; - - const stored = localStorage.getItem('theme') as 'light' | 'dark' | null; - const initial = stored || - (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); - - setTheme(initial); - applyTheme(initial); - setMounted(true); - }, []); +  +  const setRootClass = (newTheme: 'light' | 'dark'): void => { +    if (typeof document !== 'undefined') { +      document.documentElement.classList.toggle('dark', newTheme === 'dark'); +    } +  }; - const applyTheme = (newTheme: 'light' | 'dark'): void => { - if (typeof window === 'undefined') return; - - const root = document.documentElement; - - if (newTheme === 'dark') { - root.style.setProperty('--bg-primary', '#111827'); - root.style.setProperty('--bg-secondary', '#1f2937'); - root.style.setProperty('--bg-tertiary', '#374151'); - root.style.setProperty('--text-primary', '#f9fafb'); - root.style.setProperty('--text-secondary', '#d1d5db'); - root.style.setProperty('--border-color', '#4b5563'); - root.style.backgroundColor = '#111827'; - root.style.color = '#f9fafb'; - } else { - root.style.setProperty('--bg-primary', '#ffffff'); - root.style.setProperty('--bg-secondary', '#f9fafb'); - root.style.setProperty('--bg-tertiary', '#f3f4f6'); - root.style.setProperty('--text-primary', '#111827'); - root.style.setProperty('--text-secondary', '#6b7280'); - root.style.setProperty('--border-color', '#e5e7eb'); - root.style.backgroundColor = '#ffffff'; - root.style.color = '#111827'; - } - }; +  +  useEffect(() => { +    +    if (typeof window === 'undefined') return; - // Toggle theme function - const toggleTheme = (): void => { - const newTheme = theme === 'light' ? 'dark' : 'light'; - - setTheme(newTheme); - if (typeof window !== 'undefined') { - localStorage.setItem('theme', newTheme); - } - applyTheme(newTheme); - }; +    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null; +    const initial = stored ||  +      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); +     +    setTheme(initial); +    // Use the class toggling function +    setRootClass(initial); +    setMounted(true); +  }, []); - return ( - - {children} - - ); +  // Toggle theme function +  const toggleTheme = (): void => { +    const newTheme = theme === 'light' ? 'dark' : 'light'; +     +    setTheme(newTheme); +    if (typeof window !== 'undefined') { +      localStorage.setItem('theme', newTheme); +    } +    // Use the class toggling function +    setRootClass(newTheme); +  }; + +  return ( +    +      {children} +    +  ); } // Hook to use theme export function useTheme(): ThemeContextType { - const context = useContext(ThemeContext); - if (!context) { - throw new Error('useTheme must be used within ThemeProvider'); - } - return context; +  const context = useContext(ThemeContext); +  if (!context) { +    // This now correctly throws an error if used outside the provider (Line 80) +    throw new Error('useTheme must be used within ThemeProvider'); +  } +  return context; } -// Theme Toggle Button Component +// --- THEME TOGGLE COMPONENT (TAILWIND STYLED) --- export function ThemeToggle(): JSX.Element { - const { theme, toggleTheme, mounted } = useTheme(); +  const { theme, toggleTheme, mounted } = useTheme(); - if (!mounted) { - return ( - - ); - } +  // Show a loading state until mounted +  if (!mounted) { +    return ( +      +      +       
+      +    ); +  } - return ( - - ); +  return ( +    +  ); } -// Styles object -const styles = { - button: { - padding: '8px', - borderRadius: '8px', - border: '1px solid var(--border-color)', - backgroundColor: 'var(--bg-secondary)', - cursor: 'pointer', - transition: 'all 0.2s', - display: 'flex', - alignItems: 'center', - justifyContent: 'center' - } -}; +// --- MAIN PAGE COMPONENTS (CONSOLIDATED AND TAILWIND STYLED) --- + // HomePage Component (renamed from App for Next.js conventions) export default function HomePage(): JSX.Element { - return ( - - - - ); +  return ( +    +      +    +  ); } function HomePageContent(): JSX.Element { - const { theme, mounted } = useTheme(); - - const containerStyle: React.CSSProperties = { - minHeight: '100vh', - backgroundColor: 'var(--bg-primary)', - color: 'var(--text-primary)', - transition: 'all 0.3s ease' - }; +  const { mounted } = useTheme();  +   +  if (!mounted) { +    +    return
; +  } - const headerStyle: React.CSSProperties = { - borderBottom: '1px solid var(--border-color)', - backgroundColor: 'var(--bg-secondary)', - padding: '16px 0' - }; +  return ( +    +   
+       +      {/* Header */} +     
+       
+         

hodlCoin

+         
+            +              Theme Toggle → +            +            +         
+       
+     
- const cardStyle: React.CSSProperties = { - backgroundColor: 'var(--bg-secondary)', - border: '1px solid var(--border-color)', - borderRadius: '8px', - padding: '24px', - marginBottom: '24px' - }; +      {/* Main Content */} +     
+         +        {/* Hero Section */} +       
+         

+            hodlCoin Staking Platform +         

+         

+            Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
+            Unstaking fees benefit vault creators and those who keep staking longer. +         

+           +         

+            Choose the blockchain where you would like to stake: +         

+           +         
+            +            +            +         
+       
- if (!mounted) { - return
; - } +        {/* How HodlCoin Works */} +       
+          {/* Equivalent of cardStyle (Line 198) */} +         
+           

+              How hodlCoin Works +           

+           
+             +           

+              HodlCoin is a staking protocol that encourages staking ("hodling") assets for long periods of time. When hodling, users deposit coins of a given asset in a vault and receive a proportional amount of corresponding hodlCoins. +           

+           

+              When unhodling, users must pay an unstaking fee that benefits the vault's creator and users who continue hodling longer. Moreover, anyone (especially vault creators) can distribute rewards to hodlers, to further incentivize hodling. +           

+         
+       
- return ( -
- {/* Header */} -
-
-

hodlCoin

-
- - Theme Toggle → - - -
-
-
+        {/* Why HodlCoin Section */} +       
+         

+            Why hodlCoin +         

+           +          {/* This grid layout was already partially converted and is correct */} +         
+             +            {/* For Vault Creators */} +            {/* Equivalent of cardStyle (Line 227) */} +           
+             

+                For Vault Creators +             

+             
+               +             
    +               
  • +                 
    +                 
    +                   

    Reward your Loyal Tokenholders

    +                   

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    +                 
    +               
    • +               
  • +                 
    +                 
    +                   

    Signal your Long-Term Commitment

    +                   

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    +                 
    +               
    • +               
  • +                 
    +                 
    +                   

    Earn Unstaking Fees

    +                   

    Receive a portion of fees when users unstake early.

    +                 
    +               
    • +             
+           
- {/* Main Content */} -
- - {/* Hero Section */} -
-

- hodlCoin Staking Platform -

-

- Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
- Unstaking fees benefit vault creators and those who keep staking longer. -

- -

- Choose the blockchain where you would like to stake: -

- -
- - - -
-
- - {/* How HodlCoin Works */} -
-
-

- How hodlCoin Works -

-
- -

- HodlCoin is a staking protocol that encourages staking ("hodling") assets for long periods of time. When hodling, users deposit coins of a given asset in a vault and receive a proportional amount of corresponding hodlCoins. -

-

- When unhodling, users must pay an unstaking fee that benefits the vault's creator and users who continue hodling longer. Moreover, anyone (especially vault creators) can distribute rewards to hodlers, to further incentivize hodling. -

-
-
- - {/* Why HodlCoin Section */} -
-

- Why hodlCoin -

- -
- {/* For Vault Creators */} -
-

- For Vault Creators -

-
- -
    -
  • -
    -
    -

    Reward your Loyal Tokenholders

    -

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    -
    -
    • -
  • -
    -
    -

    Signal your Long-Term Commitment

    -

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    -
    -
    • -
  • -
    -
    -

    Earn Unstaking Fees

    -

    Receive a portion of fees when users unstake early.

    -
    -
    • -
-
- - {/* For Stakers */} -
-

- For Stakers -

-
- -
    -
  • -
    -
    -

    Earn from Others' Impatience

    -

    Benefit from unstaking fees paid by users who exit early.

    -
    -
    • -
  • -
    -
    -

    Long-Term Value Growth

    -

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    -
    -
    • -
  • -
    -
    -

    Receive Rewards

    -

    Get additional rewards distributed by vault creators who want to incentivize staking.

    -
    -
    • -
-
-
-
- -
-
- ); -} \ No newline at end of file +            {/* For Stakers */} +            {/* Equivalent of cardStyle (Line 276) */} +           
+             

+                For Stakers +             

+             
+               +             
    +               
  • +                 
    +                 
    +                   

    Earn from Others' Impatience

    +                   

    Benefit from unstaking fees paid by users who exit early.

    +                 
    +               
    • +               
  • +                 
    +                 
    +                   

    Long-Term Value Growth

    +                   

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    +                 
    +               
    • +               
  • +                 
    +                 
    +                   

    Receive Rewards

    +                   

    Get additional rewards distributed by vault creators who want to incentivize staking.

    +                 
    +               
    • +             
+           
+         
+       
+     
+   
+  ); +} +Is this code correct ? \ No newline at end of file From 0103f20bac9081dd059dde6bb8174988e83183f5 Mon Sep 17 00:00:00 2001 From: UTTKARSHCODER Date: Sat, 13 Dec 2025 17:51:02 +0530 Subject: [PATCH 4/6] Validated the localStorage and fix the span or h2 tag error --- app/page.tsx | 465 +++++++++++++++++++++++++-------------------------- 1 file changed, 229 insertions(+), 236 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index a219e26..2fdada0 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,276 +2,269 @@ import React, { createContext, useContext, useEffect, useState } from 'react'; import { Moon, Sun } from 'lucide-react'; - +// --- TYPES AND CONTEXT --- interface ThemeContextType { -  theme: 'light' | 'dark'; -  toggleTheme: () => void; -  mounted: boolean; + theme: 'light' | 'dark'; + toggleTheme: () => void; + mounted: boolean; } interface ThemeProviderProps { -  children: React.ReactNode; + children: React.ReactNode; } - +// Theme Context const ThemeContext = createContext(null); - +// --- THEME PROVIDER LOGIC --- export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element { -  const [theme, setTheme] = useState<'light' | 'dark'>('dark'); -  const [mounted, setMounted] = useState(false); + const [theme, setTheme] = useState<'light' | 'dark'>('dark'); + const [mounted, setMounted] = useState(false); -  -  const setRootClass = (newTheme: 'light' | 'dark'): void => { -    if (typeof document !== 'undefined') { -      document.documentElement.classList.toggle('dark', newTheme === 'dark'); -    } -  }; + // Function to apply the 'dark' class to the root element + const setRootClass = (newTheme: 'light' | 'dark'): void => { + if (typeof document !== 'undefined') { + document.documentElement.classList.toggle('dark', newTheme === 'dark'); + } + }; -  -  useEffect(() => { -    -    if (typeof window === 'undefined') return; + // Initialize theme on mount + useEffect(() => { + // SSR safety check is already here + if (typeof window === 'undefined') return; -    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null; -    const initial = stored ||  -      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); -     -    setTheme(initial); -    // Use the class toggling function -    setRootClass(initial); -    setMounted(true); -  }, []); + // FIX 1: Safely validate localStorage value instead of relying on unsafe type assertion + const storedRaw = localStorage.getItem('theme'); + const stored = (storedRaw === 'light' || storedRaw === 'dark') ? storedRaw : null; -  // Toggle theme function -  const toggleTheme = (): void => { -    const newTheme = theme === 'light' ? 'dark' : 'light'; -     -    setTheme(newTheme); -    if (typeof window !== 'undefined') { -      localStorage.setItem('theme', newTheme); -    } -    // Use the class toggling function -    setRootClass(newTheme); -  }; + // Use nullish coalescing (??) which is cleaner than || for null/undefined + const initial = stored ?? + (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); + + setTheme(initial); + setRootClass(initial); + setMounted(true); + }, []); -  return ( -    -      {children} -    -  ); + // Toggle theme function + const toggleTheme = (): void => { + const newTheme = theme === 'light' ? 'dark' : 'light'; + + setTheme(newTheme); + if (typeof window !== 'undefined') { + localStorage.setItem('theme', newTheme); + } + setRootClass(newTheme); + }; + + return ( + + {children} + + ); } // Hook to use theme export function useTheme(): ThemeContextType { -  const context = useContext(ThemeContext); -  if (!context) { -    // This now correctly throws an error if used outside the provider (Line 80) -    throw new Error('useTheme must be used within ThemeProvider'); -  } -  return context; + const context = useContext(ThemeContext); + if (!context) { + throw new Error('useTheme must be used within ThemeProvider'); + } + return context; } // --- THEME TOGGLE COMPONENT (TAILWIND STYLED) --- export function ThemeToggle(): JSX.Element { -  const { theme, toggleTheme, mounted } = useTheme(); + const { theme, toggleTheme, mounted } = useTheme(); -  // Show a loading state until mounted -  if (!mounted) { -    return ( -      -      -       
-      -    ); -  } + // Show a loading state until mounted + if (!mounted) { + return ( + + ); + } -  return ( -    -  ); + return ( + + ); } -// --- MAIN PAGE COMPONENTS (CONSOLIDATED AND TAILWIND STYLED) --- - +// --- MAIN PAGE COMPONENTS (TAILWIND STYLED) --- // HomePage Component (renamed from App for Next.js conventions) export default function HomePage(): JSX.Element { -  return ( -    -      -    -  ); + return ( + + + + ); } function HomePageContent(): JSX.Element { -  const { mounted } = useTheme();  -   -  if (!mounted) { -    -    return
; -  } + const { mounted } = useTheme(); + + if (!mounted) { + // Fallback loading screen + return
; + } -  return ( -    -   
-       -      {/* Header */} -     
-       
-         

hodlCoin

-         
-            -              Theme Toggle → -            -            -         
-       
-     
+ return ( +
+ + {/* Header */} +
+
+ {/* Demoted to for single

rule (SEO/Accessibility) */} + hodlCoin +
+ + Theme Toggle → + + +
+

+
-      {/* Main Content */} -     
-         -        {/* Hero Section */} -       
-         

-            hodlCoin Staking Platform -         

-         

-            Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
-            Unstaking fees benefit vault creators and those who keep staking longer. -         

-           -         

-            Choose the blockchain where you would like to stake: -         

-           -         
-            -            -            -         
-       
+ {/* Main Content */} +
+ + {/* Hero Section */} +
+ {/* The main

heading for the page */} +

+ hodlCoin Staking Platform +

+

+ Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
+ Unstaking fees benefit vault creators and those who keep staking longer. +

+ +

+ Choose the blockchain where you would like to stake: +

+ +
+ + + +
+
-        {/* How HodlCoin Works */} -       
-          {/* Equivalent of cardStyle (Line 198) */} -         
-           

-              How hodlCoin Works -           

-           
-             -           

-              HodlCoin is a staking protocol that encourages staking ("hodling") assets for long periods of time. When hodling, users deposit coins of a given asset in a vault and receive a proportional amount of corresponding hodlCoins. -           

-           

-              When unhodling, users must pay an unstaking fee that benefits the vault's creator and users who continue hodling longer. Moreover, anyone (especially vault creators) can distribute rewards to hodlers, to further incentivize hodling. -           

-         
-       
+ {/* How HodlCoin Works */} +
+
+

+ How hodlCoin Works +

+
+ +

+ HodlCoin is a staking protocol that encourages staking ("hodling") assets for long periods of time. When hodling, users deposit coins of a given asset in a vault and receive a proportional amount of corresponding hodlCoins. +

+

+ When unhodling, users must pay an unstaking fee that benefits the vault's creator and users who continue hodling longer. Moreover, anyone (especially vault creators) can distribute rewards to hodlers, to further incentivize hodling. +

+
+
-        {/* Why HodlCoin Section */} -       
-         

-            Why hodlCoin -         

-           -          {/* This grid layout was already partially converted and is correct */} -         
-             -            {/* For Vault Creators */} -            {/* Equivalent of cardStyle (Line 227) */} -           
-             

-                For Vault Creators -             

-             
-               -             
    -               
  • -                 
    -                 
    -                   

    Reward your Loyal Tokenholders

    -                   

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    -                 
    -               
    • -               
  • -                 
    -                 
    -                   

    Signal your Long-Term Commitment

    -                   

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    -                 
    -               
    • -               
  • -                 
    -                 
    -                   

    Earn Unstaking Fees

    -                   

    Receive a portion of fees when users unstake early.

    -                 
    -               
    • -             
-           
+ {/* Why HodlCoin Section */} +
+

+ Why hodlCoin +

+ +
+ + {/* For Vault Creators */} +
+

+ For Vault Creators +

+
+ +
    +
  • +
    +
    +

    Reward your Loyal Tokenholders

    +

    Efficiently distribute rewards to all your tokenholders with a single transaction.

    +
    +
    • +
  • +
    +
    +

    Signal your Long-Term Commitment

    +

    Stake your own tokens in a vault with a high unstaking fee, to show your community that you are holding for the long run.

    +
    +
    • +
  • +
    +
    +

    Earn Unstaking Fees

    +

    Receive a portion of fees when users unstake early.

    +
    +
    • +
+
-            {/* For Stakers */} -            {/* Equivalent of cardStyle (Line 276) */} -           
-             

-                For Stakers -             

-             
-               -             
    -               
  • -                 
    -                 
    -                   

    Earn from Others' Impatience

    -                   

    Benefit from unstaking fees paid by users who exit early.

    -                 
    -               
    • -               
  • -                 
    -                 
    -                   

    Long-Term Value Growth

    -                   

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    -                 
    -               
    • -               
  • -                 
    -                 
    -                   

    Receive Rewards

    -                   

    Get additional rewards distributed by vault creators who want to incentivize staking.

    -                 
    -               
    • -             
-           
-         
-       
-     
-   
-  ); -} -Is this code correct ? \ No newline at end of file + {/* For Stakers */} +
+

+ For Stakers +

+
+ +
    +
  • +
    +
    +

    Earn from Others' Impatience

    +

    Benefit from unstaking fees paid by users who exit early.

    +
    +
    • +
  • +
    +
    +

    Long-Term Value Growth

    +

    The price of the hodlCoin is mathematically guaranteed to grow w.r.t. the price of the underlying coin, if you hodl longer than others.

    +
    +
    • +
  • +
    +
    +

    Receive Rewards

    +

    Get additional rewards distributed by vault creators who want to incentivize staking.

    +
    +
    • +
+
+
+
+ +
+ ); +} \ No newline at end of file From 8a5cef6f385912fa9ef26f6fdeb02d6fa0d55ca4 Mon Sep 17 00:00:00 2001 From: UTTKARSHCODER Date: Sat, 13 Dec 2025 18:01:13 +0530 Subject: [PATCH 5/6] Updated the changes --- app/page.tsx | 62 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 40 insertions(+), 22 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 2fdada0..bb3c403 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -25,19 +25,26 @@ export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element { const setRootClass = (newTheme: 'light' | 'dark'): void => { if (typeof document !== 'undefined') { document.documentElement.classList.toggle('dark', newTheme === 'dark'); + // Ensure the smooth transition class is applied after initial render + document.documentElement.classList.add('transition-colors', 'duration-300'); } }; // Initialize theme on mount useEffect(() => { - // SSR safety check is already here if (typeof window === 'undefined') return; - // FIX 1: Safely validate localStorage value instead of relying on unsafe type assertion - const storedRaw = localStorage.getItem('theme'); - const stored = (storedRaw === 'light' || storedRaw === 'dark') ? storedRaw : null; + // FIX 1A: Harden theme persistence read with try/catch + let storedRaw: string | null = null; + try { + storedRaw = localStorage.getItem('theme'); + } catch { + // Ignore storage read failures (privacy modes / denied storage) + } - // Use nullish coalescing (??) which is cleaner than || for null/undefined + const stored = (storedRaw === 'light' || storedRaw === 'dark') ? storedRaw : null; + + // Use system preference if no valid stored theme is found const initial = stored ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); @@ -47,14 +54,22 @@ export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element { }, []); // Toggle theme function + // FIX 1B: Use functional state update for race-safe toggling const toggleTheme = (): void => { - const newTheme = theme === 'light' ? 'dark' : 'light'; - - setTheme(newTheme); - if (typeof window !== 'undefined') { - localStorage.setItem('theme', newTheme); - } - setRootClass(newTheme); + setTheme((prev) => { + const next = prev === 'light' ? 'dark' : 'light'; + setRootClass(next); + + // FIX 1C: Harden theme persistence write with try/catch + try { + if (typeof window !== 'undefined') { + localStorage.setItem('theme', next); + } + } catch { + // Ignore storage write failures + } + return next; + }); }; return ( @@ -81,6 +96,8 @@ export function ThemeToggle(): JSX.Element { if (!mounted) { return ( - -
From 20a727cce871db88536191025e5d1b4c4b1d4758 Mon Sep 17 00:00:00 2001 From: UTTKARSHCODER Date: Sat, 13 Dec 2025 18:56:58 +0530 Subject: [PATCH 6/6] Divided the work in two file the updated the needfulls --- app/page.tsx | 163 ++++------------------------ components/ThemeProvider.client.tsx | 136 +++++++++++++++++++++++ 2 files changed, 156 insertions(+), 143 deletions(-) create mode 100644 components/ThemeProvider.client.tsx diff --git a/app/page.tsx b/app/page.tsx index bb3c403..424b575 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,134 +1,11 @@ -'use client'; -import React, { createContext, useContext, useEffect, useState } from 'react'; -import { Moon, Sun } from 'lucide-react'; - -// --- TYPES AND CONTEXT --- -interface ThemeContextType { - theme: 'light' | 'dark'; - toggleTheme: () => void; - mounted: boolean; -} - -interface ThemeProviderProps { - children: React.ReactNode; -} - -// Theme Context -const ThemeContext = createContext(null); - -// --- THEME PROVIDER LOGIC --- -export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element { - const [theme, setTheme] = useState<'light' | 'dark'>('dark'); - const [mounted, setMounted] = useState(false); - - // Function to apply the 'dark' class to the root element - const setRootClass = (newTheme: 'light' | 'dark'): void => { - if (typeof document !== 'undefined') { - document.documentElement.classList.toggle('dark', newTheme === 'dark'); - // Ensure the smooth transition class is applied after initial render - document.documentElement.classList.add('transition-colors', 'duration-300'); - } - }; - - // Initialize theme on mount - useEffect(() => { - if (typeof window === 'undefined') return; - - // FIX 1A: Harden theme persistence read with try/catch - let storedRaw: string | null = null; - try { - storedRaw = localStorage.getItem('theme'); - } catch { - // Ignore storage read failures (privacy modes / denied storage) - } - - const stored = (storedRaw === 'light' || storedRaw === 'dark') ? storedRaw : null; - - // Use system preference if no valid stored theme is found - const initial = stored ?? - (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); - - setTheme(initial); - setRootClass(initial); - setMounted(true); - }, []); - - // Toggle theme function - // FIX 1B: Use functional state update for race-safe toggling - const toggleTheme = (): void => { - setTheme((prev) => { - const next = prev === 'light' ? 'dark' : 'light'; - setRootClass(next); - - // FIX 1C: Harden theme persistence write with try/catch - try { - if (typeof window !== 'undefined') { - localStorage.setItem('theme', next); - } - } catch { - // Ignore storage write failures - } - return next; - }); - }; - - return ( - - {children} - - ); -} - -// Hook to use theme -export function useTheme(): ThemeContextType { - const context = useContext(ThemeContext); - if (!context) { - throw new Error('useTheme must be used within ThemeProvider'); - } - return context; -} - -// --- THEME TOGGLE COMPONENT (TAILWIND STYLED) --- -export function ThemeToggle(): JSX.Element { - const { theme, toggleTheme, mounted } = useTheme(); - - // Show a loading state until mounted - if (!mounted) { - return ( - - ); - } - - return ( - - ); -} +import React from 'react'; +// Import the client components from the new file +import { ThemeProvider } from './components/ThemeProvider.client'; // --- MAIN PAGE COMPONENTS (TAILWIND STYLED) --- // HomePage Component (renamed from App for Next.js conventions) +// The ThemeProvider is now a client component wrapping the rest of the page. export default function HomePage(): JSX.Element { return ( @@ -138,22 +15,22 @@ export default function HomePage(): JSX.Element { } function HomePageContent(): JSX.Element { - const { mounted } = useTheme(); - - // FIX 3 (Major SSR/Performance): Removed the early return that blanked the page - // The 'mounted' check is now only used where truly necessary (ThemeToggle) - // The main div ensures the necessary base classes are present for Tailwind SSR + // We no longer need 'mounted' check here due to FIX 3. + // const { mounted } = useTheme(); + + // + // The 'mounted' check is only necessary inside ThemeToggle. + return ( // Base classes for full screen, dark mode transition, and text color + // The transition-colors class here now handles the smooth theme change.
- + {/* Header */}
hodlCoin
- {/* Conditional visibility for the label until mounted, if needed, - but keeping it visible is generally fine since it uses base classes */} Theme Toggle → @@ -164,7 +41,7 @@ function HomePageContent(): JSX.Element { {/* Main Content */}
- + {/* Hero Section */}

@@ -174,11 +51,11 @@ function HomePageContent(): JSX.Element { Self-Stabilizing Staking vaults where the price is mathematically proven to always increase!
Unstaking fees benefit vault creators and those who keep staking longer.

- +

Choose the blockchain where you would like to stake:

- +
+ ); + } + + return ( + + ); +} \ No newline at end of file