Fix Providers QueryClient lifecycle and client-only mount gating

[SIDDHANTCOOKIE]

Addressed Issues:

Closes #42
This PR applies only the requested changes in components/providers.tsx to fix two critical issues:

1. Global QueryClient anti-pattern

• Removed the global const queryClient = new QueryClient();
• Added useState import from React
• Instantiated QueryClient inside Providers with:
  • const [queryClient] = useState(() => new QueryClient());

2. SSR indexedDB is not defined error (Wagmi/RainbowKit)

• Added mounted state:
  • const [mounted, setMounted] = useState(false);
• Added client-mount effect:
  • useEffect(() => { setMounted(true); }, []);
• Guarded render on server:
  • if (!mounted) return null;
• <WagmiProvider> tree now renders only after client mount.

Scope is strictly limited to components/providers.tsx with no other file changes.

Screenshots/Recordings:

TODO: If applicable, add screenshots or recordings that demonstrate the interface before and after the changes.

Additional Notes:

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

• This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: GPT

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• Refactor
  • Provider initialization now creates its client lazily per component instance rather than sharing a single global client, improving isolation and lifecycle handling.
  • Providers track component mount status and use that to gate reconnection behavior and to delay rendering until after mount, reducing unexpected reconnects during initial load.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 95039f31-51c1-4060-af72-c8d2567afe83

📥 Commits

Reviewing files that changed from the base of the PR and between d284294 and 936750f.

📒 Files selected for processing (1)

• components/providers.tsx

---

Walkthrough

Providers now lazily creates a per-instance QueryClient and tracks mount state; it passes the mount flag into WagmiProvider via reconnectOnMount={mounted}, changing reconnection behavior and avoiding server-side hydration issues.

Changes

Cohort / File(s)	Summary
SSR Hydration & Provider Behavior components/providers.tsx	Replaced module-level singleton QueryClient with instance-level lazy initialization via useState(() => new QueryClient()). Added mounted state set in useEffect and passed as reconnectOnMount={mounted} to WagmiProvider. Updated React hooks imports accordingly.

Sequence Diagram(s)

sequenceDiagram
    participant App as App (renders)
    participant Providers as Providers
    participant QueryClient as QueryClient (instance)
    participant Wagmi as WagmiProvider
    participant QueryProv as QueryClientProvider
    participant Rainbow as RainbowKitProvider

    App->>Providers: mount
    Providers->>QueryClient: create via useState(() => new QueryClient())
    Providers->>Providers: useEffect -> set mounted = true
    Providers->>Wagmi: render with reconnectOnMount = mounted
    Providers->>QueryProv: wrap children with QueryClientProvider(QueryClient)
    QueryProv->>Rainbow: wrap children
    Rainbow->>App: children + Toaster rendered

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

Typescript Lang

Poem

🐰 A lazy rabbit makes a client new,
Waits to mount before reconnecting true,
No SSR fright, hydration's light,
Providers hum through day and night,
Hopping code that's safe and bright! 🎉

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: fixing QueryClient lifecycle management and implementing client-only mount gating to prevent SSR errors.
Linked Issues check	✅ Passed	The PR directly addresses issue #42's core objective to prevent SSR errors by deferring client-side initialization, though it does not address all objectives like dependency updates or UI enhancements listed in the issue.
Out of Scope Changes check	✅ Passed	All changes are scoped to components/providers.tsx and directly address SSR and client-mount lifecycle concerns specified in issue #42; no unrelated changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@components/providers.tsx`:
- Line 18: The Providers component currently returns null when the local state
variable mounted is false, which hides the entire app shell; change it so only
wallet-dependent initialization is gated: keep rendering the full Providers tree
(including Navbar, main, Footer) regardless of mounted, and move the
wallet-specific logic or client-only wallet providers (references: Providers
component, mounted state, any useWallet/WalletProvider instances) behind the
mounted check or into a child component that renders after mount; alternatively
relocate wallet providers lower in the tree so SSR output is preserved while
still deferring client-only wallet initialization.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4c45379d-8498-481e-9433-df4bda28097a

📥 Commits

Reviewing files that changed from the base of the PR and between a954222 and d284294.

📒 Files selected for processing (1)

• components/providers.tsx