fix: wrong network indicator invisible on migrate#710
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR fixes wallet state getting lost when navigating between / and /migrate by keeping a single stable Wagmi/RainbowKit provider across routes, and introduces a route-aware “Wrong Network” pill so the UI still warns when the connected chain doesn’t match the expected chain for the current page.
Changes:
- Removes route-based provider remounting and uses a stable Web3 provider configuration that supports both Ethereum (L1) and Arbitrum (L2).
- Updates
Web3Providersto always include both supported chains in the RainbowKit/Wagmi config. - Adds a custom, route-aware “Wrong Network” indicator in the ConnectButton.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| pages/_app.tsx | Stops remounting providers per route; passes only locale to a stable Web3Providers wrapper. |
| components/Web3Providers/index.tsx | Builds a single Wagmi/RainbowKit config containing both supported chains (no per-route config swapping). |
| components/ConnectButton/index.tsx | Adds route-aware wrong-network UI (custom pill) intended to replace RainbowKit’s default behavior under multi-chain support. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Warning Review limit reached
More reviews will be available in 50 minutes and 57 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe app now keeps provider state stable across route changes, derives an expected chain from the current route, and uses that state to show wrong-network handling in the connect button and delegating widget. ChangesRoute-aware wallet chain handling
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/Web3Providers/index.tsx (1)
28-58: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd a route-transition regression test for the stable wagmi config.
- Problem: This change removes the route-driven remount and makes the wagmi config stable, but the diff does not add regression coverage for navigating between
/and/migratewhile a wallet is already connected.- Why it matters: The original bug was a route-change reconnect race. Without a navigation test, a later provider/layout change can silently reintroduce lost wallet state or the missing “Wrong Network” state.
- Suggested fix: Add an integration test that mounts the app with a mocked connected wallet, navigates
/→/migrate→/, and asserts the account stays connected while the route-specific wrong-network UI updates correctly.As per path instructions, code quality comments here should focus on reliability and future changes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/Web3Providers/index.tsx` around lines 28 - 58, Add regression coverage for the stable wagmi config by adding an integration test around Web3Providers that mounts the app with a mocked connected wallet, navigates from “/” to “/migrate” and back, and verifies the connection state is preserved while the route-specific wrong-network UI still updates correctly. Use the unique symbols Web3Providers and getDefaultConfig to locate the provider setup, and assert the route transition does not trigger a wallet reconnect or lose the connected account.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@components/Web3Providers/index.tsx`:
- Around line 28-58: Add regression coverage for the stable wagmi config by
adding an integration test around Web3Providers that mounts the app with a
mocked connected wallet, navigates from “/” to “/migrate” and back, and verifies
the connection state is preserved while the route-specific wrong-network UI
still updates correctly. Use the unique symbols Web3Providers and
getDefaultConfig to locate the provider setup, and assert the route transition
does not trigger a wallet reconnect or lose the connected account.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: bda596cf-5561-4cca-aa24-825baeac948b
📒 Files selected for processing (3)
components/ConnectButton/index.tsxcomponents/Web3Providers/index.tsxpages/_app.tsx
|
In e7010ca, ensured that the delegation widget was disabled when using the wrong network. 
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/DelegatingWidget/Footer.tsx`:
- Around line 64-71: The wrong-network footer branch in Footer is unreachable
because useAccountAddress() returns null on unsupported chains and the existing
!accountAddress early return fires first. Update the Footer component logic so
isWrongRouteChain is checked before the unauthenticated branch, or use
useAccount() to determine connection state while keeping useAccountAddress()
only for address-dependent reads. This ensures connected users on an unsupported
network see the wrong-network guidance instead of the generic connect-wallet
state.
🪄 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: 714e4786-60d1-4040-87a3-aa28ee5d7589
📒 Files selected for processing (4)
components/ConnectButton/index.tsxcomponents/DelegatingWidget/Footer.tsxcomponents/DelegatingWidget/index.tsxhooks/wallet.tsx
Description
Fixes wallet state getting lost when navigating between
/and/migrate.The app now keeps one stable wagmi/RainbowKit provider with both supported chains instead of remounting providers per route, avoiding wagmi’s reconnect race. It also adds a route-aware “Wrong Network” pill so users still get the correct chain warning for migrate vs. explorer pages.
Type of Change
Related Issue(s)
Closes: #666
Changes Made
Testing
How to test (optional unless test is not trivial)
Impact / Risk
Risk level: Medium
Impacted areas: UI
User impact: users correctly see that they are on the wrong network on the migrate page
Rollback plan: Vercel rollback, then manual git revert
Screenshots / Recordings
Additional Notes
NA
Summary by CodeRabbit
New Features
Bug Fixes