chore(web): migrate-to-reown #103
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughThis pull request migrates wallet connection and chain configuration to a new library. In package.json, new dependencies are added while some old ones are removed or updated. The ConnectWallet component now imports hooks from the new library, and chain types have shifted from Chain to AppKitNetwork. The Web3Provider has been reconfigured to use the new adapter and initialization method, with adjustments in functions handling chain IDs and transports. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant CW as ConnectWallet Component
participant AK as AppKit (useAppKit)
participant WP as Web3Provider (WagmiProvider)
U->>CW: Clicks connect button
CW->>AK: Calls open() to initiate wallet connection
AK->>WP: Provides wallet configuration via WagmiAdapter
WP-->>U: Updates UI with wallet connection status
Possibly related PRs
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 kleros-escrow-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 (3)
web/src/context/Web3Provider.tsx (2)
18-18: Guard against invalid string chain IDs.By allowing the chainId parameter to be a string, there's a risk that an unexpected string key might lead to undefined values in the alchemyToViemChain mapping. Consider adding a fallback or validation to avoid potential runtime issues.
52-53: High overlay z-index comment.Comenting that the overlay is at 9999 is helpful context. Setting it to 10000 ensures it’s displayed above other modals. Just keep in mind potential stacking conflicts.
web/src/components/ConnectWallet/index.tsx (1)
33-34: Renamed destructured properties for clarity.Destructuring { open } and the isOpen alias is straightforward. If you anticipate more modal states, consider clearer naming to avoid confusion.
📜 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 (4)
web/package.json(2 hunks)web/src/components/ConnectWallet/index.tsx(2 hunks)web/src/consts/chains.ts(1 hunks)web/src/context/Web3Provider.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Redirect rules - kleros-escrow-v2
- GitHub Check: Redirect rules - kleros-escrow-v2
- GitHub Check: Header rules - kleros-escrow-v2
- GitHub Check: Header rules - kleros-escrow-v2
- GitHub Check: Pages changed - kleros-escrow-v2
- GitHub Check: Pages changed - kleros-escrow-v2
🔇 Additional comments (15)
web/src/context/Web3Provider.tsx (6)
3-6: Smooth integration of new imports.The newly introduced imports from "@reown/appkit" and the continued usage of "wagmi" appear consistent with the rest of the file. Nice job keeping them well-organized!
22-22: Fallback usage looks good.Using fallback for HTTP and WebSocket transports is a robust way to ensure connectivity. Keep an eye on handling errors if any of the endpoints fail.
34-34: Typed chain array is clear.Asserting the array type to “[AppKitNetwork, ...AppKitNetwork[]]” clarifies the chain definitions. This is a neat approach to ensure there's at least one network in the list.
38-40: Consider validating projectId.When instantiating WagmiAdapter, ensure projectId is valid to avoid potential misconfigurations or UI issues if the environment variable is missing.
44-47: createAppKit initialization is well-structured.The usage of adapters, networks, and a defaultNetwork nicely aligns with your new architecture. Great job organizing the code for scalability!
57-57: Switched to WagmiProvider with the new config.Replacing the old config reference with “wagmiAdapter.wagmiConfig” aligns with your updated approach. Looks great!
web/src/consts/chains.ts (3)
1-2: Consistent type imports.Importing both “Chain” from “viem” and “AppKitNetwork” from “@reown/appkit/networks” maintains compatibility. The approach is clear for bridging services that still rely on “Chain.”
9-11: Correct usage of AppKitNetwork in SUPPORTED_CHAINS.Switching the record type to AppKitNetwork matches the new architecture. This ensures uniform configuration throughout the codebase.
14-17: QUERY_CHAINS successfully migrated.Similarly, updating QUERY_CHAINS to use AppKitNetwork is consistent with the rest of the changes.
web/src/components/ConnectWallet/index.tsx (1)
3-3: Hooks swapped seamlessly.Using “useAppKit” and “useAppKitState” from “@reown/appkit/react” replaces the previous web3modal approach nicely. Great job adopting the new library consistently!
web/package.json (5)
71-71: New Dependency Addition: @reown/appkit
The addition of "@reown/appkit": "^1.6.6" aligns with the migration to the new wallet connection library. Please ensure that its usage is consistently integrated across the codebase.
72-72: New Dependency Addition: @reown/appkit-adapter-wagmi
Including "@reown/appkit-adapter-wagmi": "^1.6.6" supports the new adapter setup for wallet connection functionality. Verify that provider configurations are updated accordingly.
75-75: Dependency Version Upgrade: @tanstack/react-query
The update to "@tanstack/react-query": "^5.66.0" ensures you benefit from recent bug fixes and performance improvements. Confirm that all components depending on this library work as expected with the upgrade.
102-102: Dependency Version Upgrade: viem
Upgrading "viem" to "^2.22.22" is in line with the migration effort and ensures compatibility with other updated dependencies. Validate that no breaking changes affect the chain configuration.
103-103: Dependency Version Upgrade: wagmi
The revision of "wagmi" to "^2.14.10" is essential for supporting the new wallet connection mechanisms provided by @Reown. Please double-check that integration with "@reown/appkit-adapter-wagmi" is seamless.
PR-Codex overview
This PR introduces updates to the dependencies and modifies the wallet connection logic, replacing the
@web3modal/wagmilibrary with@reown/appkitand related packages. It also updates the handling of supported chains and configuration for thewagmilibrary.Detailed summary
@reown/appkitand@reown/appkit-adapter-wagmidependencies.useWeb3ModalwithuseAppKitinConnectWalletcomponent.SUPPORTED_CHAINSandQUERY_CHAINSto useAppKitNetwork.Web3Providerto utilizeWagmiAdapter.viemandwagmidependencies to newer versions.@web3modal/wagmi.yarn.lockto their latest versions.Summary by CodeRabbit