feat: add network switching support for Polygon and testnets (fixes #14)#24
Open
akshitj11 wants to merge 3 commits intophantom:mainfrom
Open
feat: add network switching support for Polygon and testnets (fixes #14)#24akshitj11 wants to merge 3 commits intophantom:mainfrom
akshitj11 wants to merge 3 commits intophantom:mainfrom
Conversation
📝 WalkthroughWalkthroughAdds multi-network switching (Ethereum, Polygon, Sepolia, Mumbai) with automatic network addition on error 4902, updates UI actions to trigger switches, and updates .gitignore to ignore the Changes
Sequence DiagramsequenceDiagram
participant User
participant App
participant WalletProvider
participant Network
User->>App: Click "Switch to <Network>"
App->>WalletProvider: wallet_switchEthereumChain({chainId})
alt Provider returns success
WalletProvider-->>App: switched
App-->>User: success
else Error 4902 (chain not found)
WalletProvider-->>App: error 4902
App->>WalletProvider: wallet_addEthereumChain({chain params})
WalletProvider->>Network: register/add chain
Network-->>WalletProvider: added
WalletProvider-->>App: add succeeded
App->>WalletProvider: wallet_switchEthereumChain({chainId}) (retry)
WalletProvider->>Network: switch to chain
Network-->>WalletProvider: switched
WalletProvider-->>App: switched
App-->>User: success / or log error
end
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/App.tsx`:
- Around line 218-235: The code is hardcoded to switch/add Polygon Mainnet
(chainId '0x89') and lacks testnet/network selection; change the network switch
logic to accept a selectedNetwork variable (instead of the literal '0x89') and
use a networks map that includes entries for Polygon Mainnet, Polygon Mumbai
(testnet, e.g., '0x13881'), Ethereum Mainnet ('0x1') and any required testnets
(e.g., Sepolia '0xaa36a7'), each with chainId, chainName, nativeCurrency,
rpcUrls and blockExplorerUrls; update the window.ethereum.request calls in the
switch/add block (the code that calls method 'wallet_switchEthereumChain' and
'wallet_addEthereumChain') to use networks[selectedNetwork] and adjust createLog
calls to include the chosen network name and chainId so switching and adding
work for both mainnet and testnets and the UI/action that triggers the switch
uses the selectedNetwork value instead of a hardcoded '0x89'.
- Around line 225-237: When handling the wallet_switchEthereumChain failure for
error.code === 4902 in App.tsx, after calling window.ethereum.request with
method 'wallet_addEthereumChain' include an immediate retry of
window.ethereum.request with method 'wallet_switchEthereumChain' (same params)
to complete the network switch; wrap the add-then-retry sequence in its own
try-catch so any errors from adding the chain or the subsequent switch are
caught and handled (e.g., log or surface to the user) instead of leaving the
user on the old network.
- Line 287: The memoized value connectedMethods captures handleConnect but the
dependency array for the useMemo call only lists handleEthSendTransaction,
handleSignMessage, and handleSwitchNetwork; add handleConnect to that dependency
array so the memo updates when handleConnect changes, ensuring connectedMethods
references the latest callback (update the useMemo that produces
connectedMethods to include handleConnect alongside handleEthSendTransaction,
handleSignMessage, and handleSwitchNetwork).
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
build/static/js/main.40cf3a1c.js.mapis excluded by!**/*.mappackage-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
build/asset-manifest.jsonbuild/index.htmlbuild/static/js/main.40cf3a1c.jsbuild/static/js/main.40cf3a1c.js.LICENSE.txtsrc/App.tsx
… fix useMemo deps
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)
src/App.tsx (1)
284-284:⚠️ Potential issue | 🟡 Minor
accountsin dependency array is not reactive and should be removed.
accountsis a module-levelletvariable (line 37), not React state. Including it in the dependency array has no effect—React won't detect changes to it, and it may cause the callback to capture stale references or recreate unnecessarily.Proposed fix
- }, [provider, createLog, accounts]); + }, [provider, createLog]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` at line 284, The dependency array for the hook currently includes the module-level variable `accounts`, which is not reactive; remove `accounts` from the array so it reads `[provider, createLog]` instead, and if the hook's callback (the function using that dependency) needs the latest `accounts` value make it read the module variable at call time or convert `accounts` to React state/Ref; update the hook where you see `}, [provider, createLog, accounts]);` to `}, [provider, createLog]);` and ensure any usage of `accounts` inside that effect/callback (the function referencing `provider` and `createLog`) accesses the up-to-date value appropriately.
🧹 Nitpick comments (2)
src/App.tsx (2)
220-224: Misleading log method name for network switch operations.Using
'eth_sendTransaction'as the method increateLogfor network switching operations is misleading. The PR notes this is becausewallet_switchEthereumChainisn't a supported log method type, but this conflates unrelated operations in logs.Consider adding
'wallet_switchEthereumChain'as a supported log method type, or use a more generic method name like'networkSwitch'that doesn't misrepresent the action.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 220 - 224, The log entry for a network switch currently mislabels the operation as 'eth_sendTransaction' in createLog; update the call site to use a correct method identifier by either adding 'wallet_switchEthereumChain' as a supported method type in the logging schema/enum (where createLog validates or documents allowed methods) or change the method value to a generic, accurate name like 'networkSwitch' in the createLog invocation (and update any type definitions or tests that assert allowed method strings) so network switches are not conflated with transaction sends.
213-264: Inconsistent indentation reduces readability.The function body has misaligned indentation. The inner
try/catchblocks (starting at lines 228 and 249) and theelseblock (line 256) are not properly indented relative to their parent blocks.♻️ Proposed fix for consistent indentation
const handleSwitchNetwork = useCallback(async () => { - if (!provider) return; - try { - await window.ethereum.request({ - method: 'wallet_switchEthereumChain', - params: [{ chainId: '0x89' }], // 0x89 = Polygon Mainnet - }); - createLog({ - status: 'success', - method: 'eth_sendTransaction', - message: 'Switched to Polygon Mainnet!', - }); - } catch (error) { - // Error code 4902 means chain hasn't been added to Phantom yet - if (error.code === 4902) { - try { - await window.ethereum.request({ - method: 'wallet_addEthereumChain', - params: [{ - chainId: '0x89', - chainName: 'Polygon Mainnet', - nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 }, - rpcUrls: ['https://polygon-rpc.com'], - blockExplorerUrls: ['https://polygonscan.com'], - }], - }); - // Retry the switch after adding the chain - await window.ethereum.request({ - method: 'wallet_switchEthereumChain', - params: [{ chainId: '0x89' }], - }); - createLog({ - status: 'success', - method: 'eth_sendTransaction', - message: 'Polygon Mainnet added and switched successfully!', - }); - } catch (addError: any) { - createLog({ - status: 'error', - method: 'eth_sendTransaction', - message: addError.message, - }); - } -} else { - createLog({ - status: 'error', - method: 'eth_sendTransaction', - message: error.message, - }); - } - } -}, [provider, createLog]); + if (!provider) return; + try { + await window.ethereum.request({ + method: 'wallet_switchEthereumChain', + params: [{ chainId: '0x89' }], + }); + createLog({ + status: 'success', + method: 'eth_sendTransaction', + message: 'Switched to Polygon Mainnet!', + }); + } catch (error) { + if (error.code === 4902) { + try { + await window.ethereum.request({ + method: 'wallet_addEthereumChain', + params: [{ + chainId: '0x89', + chainName: 'Polygon Mainnet', + nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 }, + rpcUrls: ['https://polygon-rpc.com'], + blockExplorerUrls: ['https://polygonscan.com'], + }], + }); + await window.ethereum.request({ + method: 'wallet_switchEthereumChain', + params: [{ chainId: '0x89' }], + }); + createLog({ + status: 'success', + method: 'eth_sendTransaction', + message: 'Polygon Mainnet added and switched successfully!', + }); + } catch (addError: any) { + createLog({ + status: 'error', + method: 'eth_sendTransaction', + message: addError.message, + }); + } + } else { + createLog({ + status: 'error', + method: 'eth_sendTransaction', + message: error.message, + }); + } + } + }, [provider, createLog]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 213 - 264, The handleSwitchNetwork function's nested try/catch/else blocks are misindented; reformat the block beginning at handleSwitchNetwork so the inner try (the wallet_addEthereumChain call), its corresponding catch (addError), and the outer else (handling non-4902 errors) are aligned under the outer catch that checks error.code === 4902, keeping the structure: outer try -> outer catch (if error.code === 4902) -> inner try -> inner catch -> (after inner catch) retry switch and createLog, and the outer catch's else branch aligned with that outer catch; ensure references to window.ethereum.request, error.code === 4902, addError, and createLog remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/App.tsx`:
- Line 284: The dependency array for the hook currently includes the
module-level variable `accounts`, which is not reactive; remove `accounts` from
the array so it reads `[provider, createLog]` instead, and if the hook's
callback (the function using that dependency) needs the latest `accounts` value
make it read the module variable at call time or convert `accounts` to React
state/Ref; update the hook where you see `}, [provider, createLog, accounts]);`
to `}, [provider, createLog]);` and ensure any usage of `accounts` inside that
effect/callback (the function referencing `provider` and `createLog`) accesses
the up-to-date value appropriately.
---
Nitpick comments:
In `@src/App.tsx`:
- Around line 220-224: The log entry for a network switch currently mislabels
the operation as 'eth_sendTransaction' in createLog; update the call site to use
a correct method identifier by either adding 'wallet_switchEthereumChain' as a
supported method type in the logging schema/enum (where createLog validates or
documents allowed methods) or change the method value to a generic, accurate
name like 'networkSwitch' in the createLog invocation (and update any type
definitions or tests that assert allowed method strings) so network switches are
not conflated with transaction sends.
- Around line 213-264: The handleSwitchNetwork function's nested try/catch/else
blocks are misindented; reformat the block beginning at handleSwitchNetwork so
the inner try (the wallet_addEthereumChain call), its corresponding catch
(addError), and the outer else (handling non-4902 errors) are aligned under the
outer catch that checks error.code === 4902, keeping the structure: outer try ->
outer catch (if error.code === 4902) -> inner try -> inner catch -> (after inner
catch) retry switch and createLog, and the outer catch's else branch aligned
with that outer catch; ensure references to window.ethereum.request, error.code
=== 4902, addError, and createLog remain unchanged.
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/App.tsx (2)
251-283: Use wallet-specific method names in switch/add logs.Line 253 onward logs switch/add events as
eth_sendTransaction; that blurs telemetry and troubleshooting. Prefer wallet RPC method labels (wallet_switchEthereumChain/wallet_addEthereumChain) and extendTLog['method']accordingly.🧭 Proposed adjustment in this file
- method: 'eth_sendTransaction', + method: 'wallet_switchEthereumChain', ... - method: 'eth_sendTransaction', + method: 'wallet_addEthereumChain', ... - method: 'eth_sendTransaction', + method: 'wallet_addEthereumChain', ... - method: 'eth_sendTransaction', + method: 'wallet_switchEthereumChain',🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 251 - 283, The logs are using the generic 'eth_sendTransaction' method name for chain switching/adding; update the createLog calls inside the switch/add catch blocks to use wallet-specific RPC names ('wallet_switchEthereumChain' and 'wallet_addEthereumChain') so telemetry reflects the actual operation, and update the TLog['method'] union type (or wherever method values are declared) to include 'wallet_switchEthereumChain' and 'wallet_addEthereumChain' so the new strings are type-safe; adjust any tests or usages that assert the old method string if present.
243-246: ConstrainnetworkKeyto known keys for type safety and maintainability.The parameter currently accepts any string. Narrowing to
keyof typeof NETWORKSprevents invalid keys and improves IDE autocomplete for callers.♻️ Proposed fix
+type NetworkKey = keyof typeof NETWORKS; -const handleSwitchNetwork = useCallback(async (networkKey: string) => { +const handleSwitchNetwork = useCallback(async (networkKey: NetworkKey) => { if (!provider) return; const network = NETWORKS[networkKey];🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 243 - 246, The function handleSwitchNetwork accepts a plain string which allows invalid keys; change its parameter type to a union of valid network keys by typing networkKey as keyof typeof NETWORKS in the handleSwitchNetwork declaration so callers get compile-time checking and IDE autocomplete, update any callers if needed to satisfy the new type, and ensure imports/reference to NETWORKS remain unchanged (locate the handler named handleSwitchNetwork and the constant NETWORKS to make this change).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/App.tsx`:
- Around line 251-283: The logs are using the generic 'eth_sendTransaction'
method name for chain switching/adding; update the createLog calls inside the
switch/add catch blocks to use wallet-specific RPC names
('wallet_switchEthereumChain' and 'wallet_addEthereumChain') so telemetry
reflects the actual operation, and update the TLog['method'] union type (or
wherever method values are declared) to include 'wallet_switchEthereumChain' and
'wallet_addEthereumChain' so the new strings are type-safe; adjust any tests or
usages that assert the old method string if present.
- Around line 243-246: The function handleSwitchNetwork accepts a plain string
which allows invalid keys; change its parameter type to a union of valid network
keys by typing networkKey as keyof typeof NETWORKS in the handleSwitchNetwork
declaration so callers get compile-time checking and IDE autocomplete, update
any callers if needed to satisfy the new type, and ensure imports/reference to
NETWORKS remain unchanged (locate the handler named handleSwitchNetwork and the
constant NETWORKS to make this change).
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
1 participant
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.
Fixes #14
What this does
Adds a "Switch Network" button to the sandbox that allows users to
switch to Polygon Mainnet using wallet_switchEthereumChain (EIP-3326).
If Polygon hasn't been added to Phantom yet (error code 4902), it
automatically calls wallet_addEthereumChain (EIP-3085) to register
it first, then switches.
Testing
Notes
createLog uses eth_sendTransaction as the method label since
wallet_switchEthereumChain is not a supported log method type
in the current codebase
Summary by CodeRabbit
New Features
Chores