FIX: switching networks bug #4770
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes involve refactoring the network switching logic within the Changes
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (1)
src/components/modals/SwitchNetwork.tsx (1)
62-71: LGTM: NewhandleNetworkItemClickfunctionThe new function centralizes the network switching logic, improving code organization and readability. It correctly handles the special case for Solana chains, which aligns with the PR objectives to fix the switching chains bug.
Consider adding a comment explaining why we close the modal for Solana chains:
if (walletChainType === ChainType.SOLANA) { setPendingNetworkId(networkId); handleSingOutAndSignInWithEVM(); - closeModal(); // Close the modal since we cannot control the wallet modal + // Close the modal since we're redirecting to sign in with EVM and can't control the wallet modal + closeModal(); } else { switchChain?.({ chainId: networkId }); closeModal(); }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/components/modals/SwitchNetwork.tsx (4 hunks)
- src/providers/generalWalletProvider.tsx (7 hunks)
Additional comments not posted (7)
src/components/modals/SwitchNetwork.tsx (3)
45-50: LGTM: Interface update foruseGeneralWalletThe
ISwitchNetworkModalinterface has been correctly updated to includesetPendingNetworkIdfrom theuseGeneralWallethook. This change aligns with the new functionality for handling Solana chains.
85-85: LGTM: Integration ofhandleNetworkItemClickThe new
handleNetworkItemClickfunction is correctly integrated into theNetworkItemcomponent'sonClickhandler. This change simplifies the JSX and improves code readability by moving the logic to a separate function.
Line range hint
31-85: Summary: Effective solution for switching chains bugThe changes introduced in this PR effectively address the switching chains bug by:
- Introducing a new
handleNetworkItemClickfunction that centralizes the network switching logic.- Handling the special case for Solana chains, which requires signing out and signing in with EVM.
- Updating the
ISwitchNetworkModalinterface and component to support the new functionality.These changes improve code organization, readability, and maintainability while fixing the reported issue.
To ensure the changes are consistent across the codebase, let's verify the usage of
setPendingNetworkId:Verification successful
Verified: The
setPendingNetworkIdfunction is correctly used within the codebase and is appropriately encapsulated without being exported fromgeneralWalletProvider.tsx. No issues were found regarding removed or replaced code.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of setPendingNetworkId in the codebase # Test: Search for setPendingNetworkId usage echo "Searching for setPendingNetworkId usage:" rg --type typescript --type tsx 'setPendingNetworkId' # Test: Check if setPendingNetworkId is exported from the generalWalletProvider echo "\nChecking if setPendingNetworkId is exported from generalWalletProvider:" rg --type typescript --type tsx 'export.*setPendingNetworkId' 'src/providers/generalWalletProvider'Length of output: 471
Script:
#!/bin/bash # Description: Verify the usage of setPendingNetworkId in the codebase # Test: Search for setPendingNetworkId usage echo "Searching for setPendingNetworkId usage:" rg --type ts --type tsx 'setPendingNetworkId' # Test: Check if setPendingNetworkId is exported from the generalWalletProvider echo "\nChecking if setPendingNetworkId is exported from generalWalletProvider:" rg --type ts --type tsx 'export.*setPendingNetworkId' 'src/providers/generalWalletProvider'Length of output: 441
Script:
#!/bin/bash # Description: Verify the usage of setPendingNetworkId in the codebase using file glob patterns # Test: Search for setPendingNetworkId usage echo "Searching for setPendingNetworkId usage:" rg 'setPendingNetworkId' -g "*.ts" -g "*.tsx" # Test: Check if setPendingNetworkId is exported from the generalWalletProvider echo "\nChecking if setPendingNetworkId is exported from generalWalletProvider:" rg 'export.*setPendingNetworkId' 'src/providers/generalWalletProvider' -g "*.ts" -g "*.tsx"Length of output: 1009
Script:
#!/bin/bash # Description: Verify the usage and export of setPendingNetworkId in the codebase using file glob patterns # Test: Search for setPendingNetworkId usage echo "Searching for setPendingNetworkId usage:" rg 'setPendingNetworkId' -g "*.ts" -g "*.tsx" # Test: Check if setPendingNetworkId is exported from the generalWalletProvider.tsx echo "\nChecking if setPendingNetworkId is exported from generalWalletProvider.tsx:" rg 'export.*setPendingNetworkId' 'src/providers/generalWalletProvider.tsx' -g "*.ts" -g "*.tsx"Length of output: 945
src/providers/generalWalletProvider.tsx (4)
17-17: ImportinguseSwitchChainis AppropriateThe addition of
useSwitchChainfrom 'wagmi' library is necessary for implementing the network switching functionality.
61-61: Addition ofsetPendingNetworkIdto Context InterfaceThe method
setPendingNetworkIdis correctly added to theIGeneralWalletContextinterface to manage pending network changes.
98-100: Initialization ofpendingNetworkIdState VariableThe
pendingNetworkIdstate variable is properly initialized with a default value ofnull, and its type is correctly set tonumber | null.
424-424: IncludingsetPendingNetworkIdin Context ValueThe
setPendingNetworkIdfunction is correctly added to thecontextValue, enabling components consuming the context to request a network switch.
| useEffect(() => { | ||
| if (walletChainType === ChainType.EVM && pendingNetworkId !== null) { | ||
| switchChain?.({ chainId: pendingNetworkId }); | ||
| setPendingNetworkId(null); | ||
| } | ||
| }, [walletChainType, pendingNetworkId]); |
There was a problem hiding this comment.
Handle Asynchronous switchChain Call and Potential Errors
The switchChain function returned by useSwitchChain is asynchronous and may throw an error if the chain switch fails. Currently, it's called without await or error handling inside the useEffect, which could lead to unhandled promise rejections and unexpected behavior.
Consider modifying the code to handle the asynchronous call and catch any errors:
useEffect(() => {
- if (walletChainType === ChainType.EVM && pendingNetworkId !== null) {
- switchChain?.({ chainId: pendingNetworkId });
- setPendingNetworkId(null);
- }
+ const performSwitchChain = async () => {
+ if (walletChainType === ChainType.EVM && pendingNetworkId !== null) {
+ try {
+ await switchChain?.({ chainId: pendingNetworkId });
+ } catch (error) {
+ console.error('Error switching chain:', error);
+ } finally {
+ setPendingNetworkId(null);
+ }
+ }
+ };
+ performSwitchChain();
}, [walletChainType, pendingNetworkId]);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| if (walletChainType === ChainType.EVM && pendingNetworkId !== null) { | |
| switchChain?.({ chainId: pendingNetworkId }); | |
| setPendingNetworkId(null); | |
| } | |
| }, [walletChainType, pendingNetworkId]); | |
| useEffect(() => { | |
| const performSwitchChain = async () => { | |
| if (walletChainType === ChainType.EVM && pendingNetworkId !== null) { | |
| try { | |
| await switchChain?.({ chainId: pendingNetworkId }); | |
| } catch (error) { | |
| console.error('Error switching chain:', error); | |
| } finally { | |
| setPendingNetworkId(null); | |
| } | |
| } | |
| }; | |
| performSwitchChain(); | |
| }, [walletChainType, pendingNetworkId]); |
| @@ -76,6 +77,7 @@ | |||
| handleSignOutAndShowWelcomeModal: async () => {}, | |||
| isOnSolana: false, | |||
| isOnEVM: false, | |||
| setPendingNetworkId: () => {}, | |||
There was a problem hiding this comment.
Inconsistent Function Signature for setPendingNetworkId
The default implementation of setPendingNetworkId in GeneralWalletContext does not match the interface signature. The interface expects (id: number | null) => void, but the default value is setPendingNetworkId: () => {}, which accepts no parameters. This inconsistency could lead to type errors or unexpected behavior.
Apply the following diff to fix the inconsistency:
export const GeneralWalletContext = createContext<IGeneralWalletContext>({
// ...other context values
handleSignOutAndShowWelcomeModal: async () => {},
isOnSolana: false,
isOnEVM: false,
- setPendingNetworkId: () => {},
+ setPendingNetworkId: (id: number | null) => {},
});Committable suggestion was skipped due to low confidence.
There was a problem hiding this comment.
@mateodaza Thanks, Please resolve the conflicts and also the coderabbit suggestions.
|
@MohammadPCh ready! sorry your comment skipped my head last week 👍🏼 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/components/modals/SwitchNetwork.tsx (2)
48-50: LGTM: New props enhance functionalityThe addition of
setPendingNetworkId,handleSignOutAndSignInWithSolana, andchainfrom theuseGeneralWallethook enhances the component's functionality. These additions suggest improved state management for pending network changes and support for Solana blockchain.Consider adding a comment explaining the purpose of these new props for better code readability.
63-72: LGTM: Improved network switching logicThe new
handleNetworkItemClickfunction is a great addition. It centralizes the network switching logic, improving code organization and readability. The function handles different wallet types (Solana and EVM) appropriately, enhancing the component's flexibility.Consider adding error handling for the
switchChaincall, as network switching can sometimes fail due to various reasons (e.g., user rejection, network issues).Here's a suggested improvement:
const handleNetworkItemClick = async (networkId: number) => { try { if (walletChainType === ChainType.SOLANA) { setPendingNetworkId(networkId); await handleSingOutAndSignInWithEVM(); } else { await switchChain({ chainId: networkId }); } closeModal(); } catch (error) { console.error('Failed to switch network:', error); // Handle the error (e.g., show an error message to the user) } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/components/modals/SwitchNetwork.tsx (4 hunks)
🧰 Additional context used
🔇 Additional comments (3)
src/components/modals/SwitchNetwork.tsx (3)
31-33: LGTM: New interface enhances type safetyThe introduction of
ISwitchNetworkModalinterface is a good addition. It extendsIModaland includes optional propertiesdescandcustomNetworks, which enhances type safety and allows for more flexible prop passing to theSwitchNetworkcomponent.
86-86: LGTM: Simplified onClick handlerThe update to use
handleNetworkItemClickin the NetworkItem's onClick handler is a good refactoring. It simplifies the JSX and improves code readability by moving the logic to a separate function.
Line range hint
1-180: Overall assessment: Improved network switching functionality and code structureThe changes to the
SwitchNetworkcomponent significantly enhance its functionality and improve code organization. Key improvements include:
- Introduction of the
ISwitchNetworkModalinterface for better type safety.- Addition of Solana support through new props from
useGeneralWallet.- Centralization of network switching logic in the
handleNetworkItemClickfunction.- Simplified onClick handler for NetworkItem.
These changes make the component more flexible, easier to maintain, and capable of handling different wallet types. The code structure improvements also enhance readability and maintainability.
Consider adding comprehensive error handling and user feedback mechanisms to further improve the robustness of the network switching process.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation