added theme toggler button to switch in-between dark and light mode i… #173
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| PRIVATE_KEY=011d4ba8e7b549ee9cd718df4c25abed | ||
| RPC_URL_SEPOLIA=https://eth-mainnet.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk | ||
| RPC_URL_FUJI=https://avax-fuji.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk | ||
| ETHERSCAN_KEY=WCU9BD1WA1835GAU9VBTGSPA2DGEPQHYSF | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| NEXT_PUBLIC_SEPOLIA_RPC_URL = https://eth-mainnet.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk | ||
| NEXT_PUBLIC_AMOY_RPC_URL = https://polygon-amoy.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk | ||
| NEXT_PUBLIC_FUJI_RPC_URL = https://avax-fuji.g.alchemy.com/v2/MBGDHRRT3_qjtqKzM2DZk | ||
| NEXT_PUBLIC_PINATA_JWT = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5mb3JtYXRpb24iOnsiaWQiOiI3Zjc0NGIzYi03NGZlLTQyOGMtYTY2NS1kMGFjODkwNTE0N2YiLCJlbWFpbCI6ImhlbWFudC5rQGFkeXB1LmVkdS5pbiIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJwaW5fcG9saWN5Ijp7InJlZ2lvbnMiOlt7ImRlc2lyZWRSZXBsaWNhdGlvbkNvdW50IjoxLCJpZCI6IkZSQTEifSx7ImRlc2lyZWRSZXBsaWNhdGlvbkNvdW50IjoxLCJpZCI6Ik5ZQzEifV0sInZlcnNpb24iOjF9LCJtZmFfZW5hYmxlZCI6ZmFsc2UsInN0YXR1cyI6IkFDVElWRSJ9LCJhdXRoZW50aWNhdGlvblR5cGUiOiJzY29wZWRLZXkiLCJzY29wZWRLZXlLZXkiOiIzNDRlMDU0ZTRiMDhkZWZjOTlmNiIsInNjb3BlZEtleVNlY3JldCI6IjE2MTcyZWM2YTMyYjVkMTlkZjUzNWE4ZjM2OTZlNzg5NGExMjY4MjViMTBmNTA2OWYzZDM4MWY4ZDBhMWZjNzQiLCJleHAiOjE3OTEzMDUwOTB9.c8lfSqJIUNh4F4DOvys5qI07pMwUc1H91dUBwt8emfI | ||
|
Comment on lines
+1
to
+4
There was a problem hiding this comment. Remove hard-coded credentials immediately. Lines [1-4] check in live Alchemy API keys and a Pinata JWT. These values grant direct access to third-party services and must never be stored in the repo. Purge the file from git history (or replace with placeholder/env.example) and provision fresh keys that haven’t been exposed. 🧰 Tools🪛 dotenv-linter (3.3.0)[warning] 1-1: [SpaceCharacter] The line has spaces around equal sign (SpaceCharacter) [warning] 2-2: [SpaceCharacter] The line has spaces around equal sign (SpaceCharacter) [warning] 2-2: [UnorderedKey] The NEXT_PUBLIC_AMOY_RPC_URL key should go before the NEXT_PUBLIC_SEPOLIA_RPC_URL key (UnorderedKey) [warning] 3-3: [SpaceCharacter] The line has spaces around equal sign (SpaceCharacter) [warning] 3-3: [UnorderedKey] The NEXT_PUBLIC_FUJI_RPC_URL key should go before the NEXT_PUBLIC_SEPOLIA_RPC_URL key (UnorderedKey) [warning] 4-4: [EndingBlankLine] No blank line at the end of the file (EndingBlankLine) [warning] 4-4: [SpaceCharacter] The line has spaces around equal sign (SpaceCharacter) [warning] 4-4: [UnorderedKey] The NEXT_PUBLIC_PINATA_JWT key should go before the NEXT_PUBLIC_SEPOLIA_RPC_URL key (UnorderedKey) 🤖 Prompt for AI Agents |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| "use client"; | ||
|
|
||
| import React, { useEffect } from "react"; | ||
| import { useThemeStore } from "@/app/store/themeStore"; | ||
|
|
||
| export default function ThemeProvider({ | ||
| children, | ||
| }: { | ||
| children: React.ReactNode; | ||
| }) { | ||
| const theme = useThemeStore((state) => state.theme); | ||
|
|
||
| useEffect(() => { | ||
| // Apply theme class to html element | ||
| const root = document.documentElement; | ||
| if (theme === "dark") { | ||
| root.classList.add("dark"); | ||
| root.setAttribute("data-theme", "dark"); | ||
| } else { | ||
| root.classList.remove("dark"); | ||
| root.setAttribute("data-theme", "light"); | ||
| } | ||
| }, [theme]); | ||
|
|
||
| return <>{children}</>; | ||
| } |
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,61 @@ | ||||||||||||||||||||||
| "use client"; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| import React, { useEffect } from "react"; | ||||||||||||||||||||||
| import { motion } from "framer-motion"; | ||||||||||||||||||||||
| import { SunIcon, MoonIcon } from "@heroicons/react/24/outline"; | ||||||||||||||||||||||
| import { useThemeStore } from "@/app/store/themeStore"; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| const ThemeToggle = () => { | ||||||||||||||||||||||
| const { theme, toggleTheme } = useThemeStore(); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| useEffect(() => { | ||||||||||||||||||||||
| // Apply theme to document | ||||||||||||||||||||||
| if (theme === "dark") { | ||||||||||||||||||||||
| document.documentElement.classList.add("dark"); | ||||||||||||||||||||||
| document.documentElement.setAttribute("data-theme", "dark"); | ||||||||||||||||||||||
| } else { | ||||||||||||||||||||||
| document.documentElement.classList.remove("dark"); | ||||||||||||||||||||||
| document.documentElement.setAttribute("data-theme", "light"); | ||||||||||||||||||||||
| } | ||||||||||||||||||||||
| }, [theme]); | ||||||||||||||||||||||
|
Comment on lines
+11
to
+20
There was a problem hiding this comment. 🧩 Analysis chainRemove duplicate theme application logic. The The ThemeToggle should only call Apply this diff to remove the duplicate logic: - useEffect(() => {
- // Apply theme to document
- if (theme === "dark") {
- document.documentElement.classList.add("dark");
- document.documentElement.setAttribute("data-theme", "dark");
- } else {
- document.documentElement.classList.remove("dark");
- document.documentElement.setAttribute("data-theme", "light");
- }
- }, [theme]);
-
return (Verify that ThemeProvider handles theme application: 🏁 Script executed: #!/bin/bash
# Verify ThemeProvider applies the theme to document root
rg -A 10 -B 2 'documentElement' client/app/components/ThemeProvider/ThemeProvider.tsxLength of output: 358 Remove duplicate theme application in ThemeToggle - useEffect(() => {
- // Apply theme to document
- if (theme === "dark") {
- document.documentElement.classList.add("dark");
- document.documentElement.setAttribute("data-theme", "dark");
- } else {
- document.documentElement.classList.remove("dark");
- document.documentElement.setAttribute("data-theme", "light");
- }
- }, [theme]);📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| return ( | ||||||||||||||||||||||
| <motion.button | ||||||||||||||||||||||
| onClick={toggleTheme} | ||||||||||||||||||||||
| className="relative inline-flex items-center justify-center p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" | ||||||||||||||||||||||
| whileHover={{ scale: 1.05 }} | ||||||||||||||||||||||
| whileTap={{ scale: 0.95 }} | ||||||||||||||||||||||
| aria-label="Toggle theme" | ||||||||||||||||||||||
| title={`Switch to ${theme === "light" ? "dark" : "light"} mode`} | ||||||||||||||||||||||
| > | ||||||||||||||||||||||
| <motion.div | ||||||||||||||||||||||
| initial={false} | ||||||||||||||||||||||
| animate={{ | ||||||||||||||||||||||
| rotate: theme === "dark" ? 180 : 0, | ||||||||||||||||||||||
| scale: theme === "dark" ? 0 : 1, | ||||||||||||||||||||||
| }} | ||||||||||||||||||||||
| transition={{ duration: 0.3 }} | ||||||||||||||||||||||
| className="absolute" | ||||||||||||||||||||||
| > | ||||||||||||||||||||||
| <SunIcon className="h-5 w-5 text-yellow-500" /> | ||||||||||||||||||||||
| </motion.div> | ||||||||||||||||||||||
| <motion.div | ||||||||||||||||||||||
| initial={false} | ||||||||||||||||||||||
| animate={{ | ||||||||||||||||||||||
| rotate: theme === "dark" ? 0 : -180, | ||||||||||||||||||||||
| scale: theme === "dark" ? 1 : 0, | ||||||||||||||||||||||
| }} | ||||||||||||||||||||||
| transition={{ duration: 0.3 }} | ||||||||||||||||||||||
| className="absolute" | ||||||||||||||||||||||
| > | ||||||||||||||||||||||
| <MoonIcon className="h-5 w-5 text-indigo-400" /> | ||||||||||||||||||||||
| </motion.div> | ||||||||||||||||||||||
| {/* Invisible spacer to maintain button size */} | ||||||||||||||||||||||
| <div className="h-5 w-5 opacity-0"> | ||||||||||||||||||||||
| <SunIcon /> | ||||||||||||||||||||||
| </div> | ||||||||||||||||||||||
| </motion.button> | ||||||||||||||||||||||
| ); | ||||||||||||||||||||||
| }; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| export default ThemeToggle; | ||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Strip secrets from tracked
.env.Lines [1-4] embed a blockchain private key, Alchemy RPC URLs with API keys, and an Etherscan key. These are sensitive credentials that must remain local only. Remove this committed
.env, add placeholders/examples instead, rotate every exposed key, and scrub the repository history before merging.🧰 Tools
🪛 dotenv-linter (3.3.0)
[warning] 1-1: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 2-2: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 3-3: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 3-3: [UnorderedKey] The RPC_URL_FUJI key should go before the RPC_URL_SEPOLIA key
(UnorderedKey)
[warning] 4-4: [EndingBlankLine] No blank line at the end of the file
(EndingBlankLine)
[warning] 4-4: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 4-4: [UnorderedKey] The ETHERSCAN_KEY key should go before the PRIVATE_KEY key
(UnorderedKey)
🤖 Prompt for AI Agents