fix: theme hydration issues in various browsers #153
Conversation
WalkthroughThe changes in this pull request involve significant updates across various components, primarily focusing on theme management and wallet connection states. The Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #153 +/- ##
==========================================
+ Coverage 57.01% 58.13% +1.12%
==========================================
Files 145 147 +2
Lines 14436 14842 +406
==========================================
+ Hits 8230 8628 +398
- Misses 6206 6214 +8 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
contexts/theme.tsx (1)
47-49: Simplified theme toggle implementationThe theme toggle is now implemented using a functional state update, making it more reliable and easier to maintain.
Consider adding a comment explaining the theme toggle behavior:
const toggleTheme = () => { + // Toggle between light and dark theme using functional state update setTheme(current => (current === 'light' ? 'dark' : 'light')); };pages/_app.tsx (1)
51-58: Theme debugging enhancementThe added logging helps debug theme-related issues across browsers. However, consider using a development flag for these logs.
Consider wrapping the logs with a development check:
useEffect(() => { if (typeof window !== 'undefined') { - console.log({ localStorageTheme: localStorage?.getItem('theme') }); + if (process.env.NODE_ENV === 'development') { + console.log({ localStorageTheme: localStorage?.getItem('theme') }); + console.log({ theme }); + } } - console.log({ theme }); }, [theme]);components/wallet.tsx (2)
Line range hint
38-52: LGTM! Robust connection status handling.The implementation of
localStatuswith a 10-second timeout effectively prevents infinite "connecting" states, with proper cleanup to prevent memory leaks.Consider adding an error message or notification when the connection times out to improve user feedback:
if (status === WalletStatus.Connecting) { timeoutId = setTimeout(() => { setLocalStatus(WalletStatus.Error); + // Optional: Show error notification + console.warn('Wallet connection timed out after 10 seconds'); }, 10000); }🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 38-38: components/wallet.tsx#L38
Added line #L38 was not covered by tests
Line range hint
171-251: Consider improving accessibility and code reusability.While the implementation is solid, there are opportunities for improvement:
- Extract the connection status handling logic into a custom hook to avoid duplication:
function useWalletConnection(chainName: string) { const { status, connect, openView } = useChain(chainName); const [localStatus, setLocalStatus] = useState(status); // ... timeout logic ... return { localStatus, connect, openView }; }
- Add ARIA labels for better accessibility:
<button className="p-2 hover:text-primary rounded-t-md w-full flex justify-center items-center" id="copyButton" + aria-label="Copy wallet address" onClick={() => {🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 38-38: components/wallet.tsx#L38
Added line #L38 was not covered by testscomponents/react/sideNav.tsx (1)
85-88: Enhanced UX with accessible tooltips.The addition of tooltips improves user experience by providing clear context for navigation items.
Consider adding aria-label attributes for better accessibility:
<span className="tooltip fixed z-[9999] left-[6.8rem] px-3 py-2 bg-primary text-white text-sm font-medium rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out whitespace-nowrap" + role="tooltip" + aria-label="Navigation tooltip">Also applies to: 95-97
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
components/react/sideNav.tsx(6 hunks)components/wallet.tsx(1 hunks)contexts/theme.tsx(2 hunks)pages/_app.tsx(4 hunks)tailwind.config.js(1 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
components/wallet.tsx
[warning] 38-38: components/wallet.tsx#L38
Added line #L38 was not covered by tests
contexts/theme.tsx
[warning] 13-16: contexts/theme.tsx#L13-L16
Added lines #L13 - L16 were not covered by tests
[warning] 21-22: contexts/theme.tsx#L21-L22
Added lines #L21 - L22 were not covered by tests
[warning] 24-24: contexts/theme.tsx#L24
Added line #L24 was not covered by tests
[warning] 26-28: contexts/theme.tsx#L26-L28
Added lines #L26 - L28 were not covered by tests
[warning] 30-31: contexts/theme.tsx#L30-L31
Added lines #L30 - L31 were not covered by tests
[warning] 33-33: contexts/theme.tsx#L33
Added line #L33 was not covered by tests
[warning] 36-36: contexts/theme.tsx#L36
Added line #L36 was not covered by tests
[warning] 38-50: contexts/theme.tsx#L38-L50
Added lines #L38 - L50 were not covered by tests
🔇 Additional comments (8)
contexts/theme.tsx (3)
13-18: Improved server-side rendering compatibility
The new getInitialTheme function ensures consistent initial theme rendering by defaulting to 'light' during SSR, preventing hydration mismatches.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 13-16: contexts/theme.tsx#L13-L16
Added lines #L13 - L16 were not covered by tests
21-33: Enhanced client-side theme initialization
The initialization logic now properly handles:
- Local storage theme preference
- System color scheme preference
- State initialization tracking
This change fixes the theme hydration issues by ensuring proper theme initialization on the client side.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 21-22: contexts/theme.tsx#L21-L22
Added lines #L21 - L22 were not covered by tests
[warning] 24-24: contexts/theme.tsx#L24
Added line #L24 was not covered by tests
[warning] 26-28: contexts/theme.tsx#L26-L28
Added lines #L26 - L28 were not covered by tests
[warning] 30-31: contexts/theme.tsx#L30-L31
Added lines #L30 - L31 were not covered by tests
[warning] 33-33: contexts/theme.tsx#L33
Added line #L33 was not covered by tests
36-45: Robust theme application with initialization check
The theme application is now guarded by isInitialized check, preventing unwanted theme flashes during hydration. The DOM updates are comprehensive, updating both classList and data-theme attribute.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 36-36: contexts/theme.tsx#L36
Added line #L36 was not covered by tests
tailwind.config.js (1)
126-132: Proper theme configuration for DaisyUI
The DaisyUI configuration is now properly set up with:
- Explicit dark theme specification
- Base styling enabled
- Logging disabled to reduce noise
- Theme root properly set to
:root
This helps ensure consistent theme application across the application.
pages/_app.tsx (1)
158-167: LGTM: Additional authentication methods
The new email and SMS authentication methods enhance accessibility while maintaining the existing theme context.
components/wallet.tsx (1)
Line range hint 53-95: Well-structured wallet content rendering with proper optimization.
The memoized rendering logic with clear visual feedback and consistent button states is well-implemented. The use of useMemo helps prevent unnecessary re-renders.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 38-38: components/wallet.tsx#L38
Added line #L38 was not covered by tests
components/react/sideNav.tsx (2)
106-110: Good improvement in theme state management.
Removing the redundant isdark state in favor of direct theme checks helps prevent hydration mismatches between server and client rendering.
198-202: Smooth theme toggle transition implementation.
The theme toggle transition is well-implemented with proper duration and easing.
fixes #129
Summary by CodeRabbit
Release Notes
New Features
Improvements
Bug Fixes