chore(web): migrate-to-reown #72
Conversation
WalkthroughThe changes update the project’s dependency management and wallet connection flows. In package.json, new dependencies are added, some package versions updated, and an obsolete dependency removed. The ConnectWallet component now imports hooks from @reown/appkit instead of using @Web3Modal. In the Web3Provider, function signatures and parameter types are modified to accept more flexible values, and the adapter configuration is updated by integrating WagmiAdapter and createAppKit. These updates standardize library usage and configuration. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant CW as ConnectWallet
participant AK as AppKit
participant WA as WagmiAdapter
U->>CW: Click Connect button
CW->>AK: Invoke useAppKit()
AK->>WA: Initialize connection
WA-->>AK: Return connection status
AK-->>CW: Provide wallet state
CW-->>U: Render connection status
sequenceDiagram
participant WP as Web3Provider
participant WA as WagmiAdapter
participant AK as AppKit
WP->>WA: Create WagmiAdapter with config
WP->>AK: Call createAppKit(...)
WA-->>WP: Adapter configured
AK-->>WP: AppKit setup complete
Suggested reviewers
Poem
🪧 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 (
|
✅ Deploy Preview for curate-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🧹 Nitpick comments (4)
web/src/context/Web3Provider.tsx (2)
29-31: Use consistent type checks when calling getChainRpcUrl.
Expanding chainId handling is beneficial, but be consistent in how chainId is passed throughout the codebase to minimize type conversion overhead and potential errors.
67-67: Z-index update for the overlay is valid.
Increasing z-index to 10000 is a big jump; make sure no other overlays or modals inadvertently overlay this one.web/src/components/ConnectWallet/index.tsx (2)
6-6: Swapping from useWeb3Modal to useAppKit is valid.
This aligns with the new library import. Ensure all references to old hooks have been removed from the project.
33-34: Avoid naming collisions with open.
Renaming “open” from useAppKitState to something like “isModalOpen” or similar could improve readability, as you already use open from useAppKit as a function.Apply this diff to clarify:
- const { open: isOpen } = useAppKitState(); + const { open: isModalOpen } = useAppKitState();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (3)
web/package.json(2 hunks)web/src/components/ConnectWallet/index.tsx(2 hunks)web/src/context/Web3Provider.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (10)
web/src/context/Web3Provider.tsx (7)
3-6: Imports from the new libraries look good.
These updated imports effectively transition from older libraries to the new AppKit ecosystem. Everything appears correctly referenced; no issues identified.
26-27: Great flexibility added with (number | string) for chainId.
Accepting either number or string for chainId allows more robust usage with different chain representations. Ensure that all calling sites provide valid values (e.g., numeric strings) to avoid potential runtime confusion.
38-39: Transports switching for fallback URLs is appropriate.
The new AppKitNetwork parameter is correct, aligning with the new library’s type definitions. Everything here seems coherent.
49-49: Casting ALL_CHAINS to [AppKitNetwork, ...AppKitNetwork[]] is acceptable.
This ensures at least one chain is always present while matching the types required by createAppKit. Good approach!
52-56: Adapter initialization is aligned with the new WagmiAdapter.
The networks, projectId, and transports look well-structured. Consider implementing error handling for missing or invalid projectId in non-production environments.
58-61: createAppKit configuration is well-structured.
Defining adapters, networks, and defaultNetwork seamlessly integrates the new library. If additional networks beyond Arbitrum or Arbitrum Sepolia become supported, ensure they’re appended properly to networks.
71-71: WagmiProvider usage looks correct.
Integrating the wagmiConfig into the preserves existing functionality, transitioning to the new adapter. This is a clean approach with minimal disruption.web/package.json (3)
75-76: New AppKit dependencies look aligned with usage.
The addition of “@reown/appkit” and “@reown/appkit-adapter-wagmi” at ^1.6.6 is consistent with the new imports in Web3Provider.
79-79: Upgrading @tanstack/react-query is a good move.
Keep an eye on potential API changes or deprecations in this minor jump. Run your test suite to ensure no breakage.
109-110: Bumping viem & wagmi to newer versions.
These updates look compatible, but confirm that no features you rely on have breaking changes. Checking release notes is recommended.
PR-Codex overview
This PR focuses on updating dependencies, specifically integrating
@reown/appkitand its related packages, while also making adjustments in theweb/src/components/ConnectWallet/index.tsxandweb/src/context/Web3Provider.tsxfiles to accommodate these changes.Detailed summary
@reown/appkitand@reown/appkit-adapter-wagmitopackage.json.@tanstack/react-queryfrom5.59.20to5.66.0.useWeb3ModalanduseWeb3ModalStatewithuseAppKitanduseAppKitStateinConnectWallet/index.tsx.Web3Provider.tsxto use@reown/appkit.AppKitNetworkinstead ofChain.wagmiandviemversions inpackage.json.@web3modal/reactfrom dependencies.Summary by CodeRabbit
This release improves wallet connection and network switching, providing a smoother, more flexible experience while enhancing overall performance.
• Chores
– Updated core dependencies to boost compatibility and performance.
• Refactor
– Streamlined wallet connectivity and chain switching for a more reliable experience.