fix: navbarcleanup#71
Merged
DengreSarthak merged 3 commits intoMar 27, 2026
Merged
Conversation
Contributor
WalkthroughRemoved pathname-based active navigation and animations from the Navbar, replacing the desktop link list with two static action buttons. Introduced environment-aware wagmi configuration: server builds use explicit createConfig with per-chain transports; client uses getDefaultConfig with chains and ssr enabled. Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Server as Server (build/SSR)
participant Client as Client (browser)
participant Chains as Chains list
participant WC as WalletConnect
Dev->>Server: Import config.ts on server
Server->>Chains: read chains constant
Server->>WC: read NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
Server->>Server: makeServerConfig() -> createConfig(ssr: true, transports per-chain)
Server-->>Dev: export wagmi_config (server config)
Dev->>Client: Bundle served to browser
Client->>Chains: read chains constant
Client->>WC: read NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
Client->>Client: getDefaultConfig({ chains, ssr: true, projectId })
Client-->>Dev: export wagmi_config (client config)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/layout/navbar.tsx`:
- Around line 24-45: Three user-facing labels in the navbar are hardcoded
("HAH!", "Create Auction", "Dashboard"); replace them with i18n resource
lookups: import and use your translation function/hook (e.g., useTranslation/t
or i18n.t) inside the component and replace the literal strings used in the Link
that renders the brand (currently "HAH!") and the Link children for
href="/create" and href="/dashboard" with translation keys (e.g., navbar.brand,
navbar.createAuction, navbar.dashboard). Add those keys to the locale resource
files for all supported locales and ensure the component renders the translated
values.
In `@config.ts`:
- Around line 49-57: The wagmi_config currently hardcodes projectId inside the
getDefaultConfig call; change it to read from an environment variable (e.g.
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID) instead, update the getDefaultConfig call
in config.ts to use process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID (with an
optional fallback or throw if missing), and add the suggested
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID entry to your .env file so different
environments can override the WalletConnect projectId; reference wagmi_config,
getDefaultConfig, and projectId when making the change.
🪄 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: 22fcc596-4ca5-4d29-b649-e9f434d10f13
📒 Files selected for processing (2)
components/layout/navbar.tsxconfig.ts
Comment on lines
+24
to
+45
| <span className="text-3xl font-bold text-primary">HAH!</span> | ||
| </Link> | ||
| <nav className="hidden md:flex items-center space-x-4"> | ||
| {navItems.map((item) => { | ||
| const isActive = item.path === "/" | ||
| ? pathname === "/" | ||
| : pathname === item.path || pathname.startsWith(`${item.path}/`); | ||
| return ( | ||
| <Link | ||
| key={item.path} | ||
| href={item.path} | ||
| className={cn( | ||
| "text-sm font-medium transition-colors hover:text-primary relative py-1.5", | ||
| isActive | ||
| ? "text-foreground" | ||
| : "text-muted-foreground" | ||
| )} | ||
| > | ||
| {item.name} | ||
| {isActive && ( | ||
| <motion.div | ||
| className="absolute -bottom-px left-0 h-[2px] w-full bg-primary" | ||
| layoutId="navbar-underline" | ||
| /> | ||
| )} | ||
| </Link> | ||
| ); | ||
| })} | ||
| </nav> | ||
| </div> | ||
|
|
||
| <div className="flex items-center gap-2"> | ||
| <ConnectButton accountStatus={"address"} showBalance={false} /> | ||
| <ModeToggle /> | ||
| <Button | ||
| size="sm" | ||
| variant="default" | ||
| asChild | ||
| className="hidden md:flex" | ||
| > | ||
| <Link href="/create">Create Auction</Link> | ||
| </Button> | ||
| <div className="flex items-center gap-2"> | ||
| <ConnectButton accountStatus={"address"} showBalance={false} /> | ||
| <ModeToggle /> | ||
| <Button | ||
| size="sm" | ||
| variant="default" | ||
| asChild | ||
| className="hidden md:flex" | ||
| > | ||
| <Link href="/create">Create Auction</Link> | ||
| </Button> | ||
| <Button | ||
| size="sm" | ||
| variant="outline" | ||
| asChild | ||
| className="hidden md:flex" | ||
| > | ||
| <Link href="/dashboard">Dashboard</Link> |
Contributor
There was a problem hiding this comment.
Externalize newly changed UI labels for i18n compliance.
Line 24, Line 37, and Line 45 use hardcoded user-facing strings ("HAH!", "Create Auction", "Dashboard"). These should come from locale resources instead of inline literals.
As per coding guidelines, "User-visible strings should be externalized to resource files (i18n)".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/layout/navbar.tsx` around lines 24 - 45, Three user-facing labels
in the navbar are hardcoded ("HAH!", "Create Auction", "Dashboard"); replace
them with i18n resource lookups: import and use your translation function/hook
(e.g., useTranslation/t or i18n.t) inside the component and replace the literal
strings used in the Link that renders the brand (currently "HAH!") and the Link
children for href="/create" and href="/dashboard" with translation keys (e.g.,
navbar.brand, navbar.createAuction, navbar.dashboard). Add those keys to the
locale resource files for all supported locales and ensure the component renders
the translated values.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
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 `@config.ts`:
- Around line 36-47: The config currently sets ssr: true but does not persist
wallet state across SSR boundaries; update makeServerConfig/createConfig to
include cookie-backed storage by calling createStorage({ storage: cookieStorage
}) and pass that storage into the config, then in app/layout.tsx read cookies
from request headers and call cookieToInitialState(cookie) to produce an
initialState, and finally pass that initialState into WagmiProvider in
components/providers.tsx so connected wallets survive full-page SSR renders;
ensure you import cookieStorage, createStorage, and cookieToInitialState from
wagmi and wire them to makeServerConfig, app/layout.tsx, and WagmiProvider
respectively.
🪄 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: 97457cd2-8260-4c49-a888-07b24536e428
📒 Files selected for processing (1)
config.ts
Contributor
There was a problem hiding this comment.
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 `@config.ts`:
- Around line 36-47: The current dual-config pattern creates different objects
at module-eval time (makeServerConfig / createConfig vs getDefaultConfig) and
causes hydration mismatches when components/providers.tsx imports wagmi_config
and passes it to WagmiProvider; refactor to a single config factory (use
createConfig with ssr: true) and lazy-initialize on the client inside the
provider (e.g. initialize the config in components/providers.tsx using
useState/useEffect) or expose a getConfig() factory that always returns the same
shape and only calls client-only code inside an effect so WagmiProvider always
receives a consistent config object between server and client.
🪄 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: 1b57420e-ae43-4345-81f0-8e8e51ddb33d
📒 Files selected for processing (1)
config.ts
Comment on lines
+36
to
+47
| const makeServerConfig = () => | ||
| createConfig({ | ||
| chains, | ||
| transports: { | ||
| [mordor.id]: http(mordor.rpcUrls.default.http[0]), | ||
| [citrea_testnet.id]: http(citrea_testnet.rpcUrls.default.http[0]), | ||
| [mainnet.id]: http(), | ||
| [polygon.id]: http(), | ||
| [base.id]: http(), | ||
| }, | ||
| ssr: true, | ||
| }); |
Contributor
There was a problem hiding this comment.
Dual-config architecture risks hydration mismatch.
The typeof window === 'undefined' check at module evaluation time creates fundamentally different config objects: createConfig() on server vs getDefaultConfig() on client. Since components/providers.tsx imports wagmi_config at module scope and passes it directly to WagmiProvider, the server-rendered output and client hydration use incompatible configs. This can cause React hydration warnings and potential runtime inconsistencies with wallet state.
A safer approach is to use a single config factory with ssr: true and lazy-initialize on the client, or wrap the client-specific initialization in a useState/useEffect pattern within the provider component.
#!/bin/bash
# Check if providers.tsx handles the config in a way that could mitigate hydration issues
rg -n "wagmi_config|useState|useEffect" components/providers.tsx -A 3 -B 1Also applies to: 49-57
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@config.ts` around lines 36 - 47, The current dual-config pattern creates
different objects at module-eval time (makeServerConfig / createConfig vs
getDefaultConfig) and causes hydration mismatches when components/providers.tsx
imports wagmi_config and passes it to WagmiProvider; refactor to a single config
factory (use createConfig with ssr: true) and lazy-initialize on the client
inside the provider (e.g. initialize the config in components/providers.tsx
using useState/useEffect) or expose a getConfig() factory that always returns
the same shape and only calls client-only code inside an effect so WagmiProvider
always receives a consistent config object between server and client.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Home,Auctions,Create,Dashboard) from the navbar./), so no separate home button is needed.Create Auctionon the right and added aDashboardbutton to its right.Imageusage for logo to remove legacyobjectFitprop warning.indexedDB is not defined) by makingwagmi_configserver-safe:createConfig + transports(no browser wallet init).getDefaultConfig(RainbowKit connectors as expected).Files changed
components/layout/navbar.tsxconfig.tsScreenshots/Recordings:
After:
Before:
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:
I have used the following AI models and tools: Gemini
Checklist
Summary by CodeRabbit
New Features
Refactor