feat: add network picker #414
Conversation
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| const openButton = document.getElementById('openNetworkPicker'); | ||
| const closeButton = modal.querySelector('.network-modal-close'); | ||
|
|
||
| // Populate network lists |
There was a problem hiding this comment.
Method name is pretty self descriptive 👍🏾
so I'd prefer we remove this comment to avoid redundancy
There was a problem hiding this comment.
great point, I've removed all of them 🙏
| } | ||
| }); | ||
|
|
||
| // Initial update |
There was a problem hiding this comment.
Same for this one, and even the above comment for the event listeners I would remove, it's all pretty straight forward to follow
| if ( | ||
| globalContext.chainIdInt !== undefined && | ||
| globalContext.chainIdInt !== null | ||
| ) { | ||
| const network = NETWORKS.find((n) => { | ||
| const networkChainId = parseInt(n.chainId, 16); | ||
| return networkChainId === globalContext.chainIdInt; | ||
| }); | ||
|
|
||
| if (network) { | ||
| currentNetworkName.textContent = `Current Network: ${network.name}`; | ||
| } else { | ||
| // Fallback to chain ID if network not found | ||
| currentNetworkName.textContent = `Current Network: Chain ID 0x${globalContext.chainIdInt.toString( | ||
| 16, | ||
| )}`; | ||
| } | ||
| } else { | ||
| currentNetworkName.textContent = 'Current Network: Not Connected'; | ||
| } |
There was a problem hiding this comment.
| if ( | |
| globalContext.chainIdInt !== undefined && | |
| globalContext.chainIdInt !== null | |
| ) { | |
| const network = NETWORKS.find((n) => { | |
| const networkChainId = parseInt(n.chainId, 16); | |
| return networkChainId === globalContext.chainIdInt; | |
| }); | |
| if (network) { | |
| currentNetworkName.textContent = `Current Network: ${network.name}`; | |
| } else { | |
| // Fallback to chain ID if network not found | |
| currentNetworkName.textContent = `Current Network: Chain ID 0x${globalContext.chainIdInt.toString( | |
| 16, | |
| )}`; | |
| } | |
| } else { | |
| currentNetworkName.textContent = 'Current Network: Not Connected'; | |
| } | |
| if (!globalContext.chainIdInt) { | |
| currentNetworkName.textContent = 'Current Network: Not Connected'; | |
| return; | |
| } | |
| const network = NETWORKS.find((n) => { | |
| const networkChainId = parseInt(n.chainId, 16); | |
| return networkChainId === globalContext.chainIdInt; | |
| }); | |
| // Fallback to chain ID if network not found | |
| currentNetworkName.textContent = network | |
| ? `Current Network: ${network.name}` | |
| : `Current Network: Chain ID 0x${globalContext.chainIdInt.toString(16)}`; |
I believe the cognitive complexity of this function is reduced if we use an early return, instead of having nested if..else clauses, what do you think ?
There was a problem hiding this comment.
whoa much better 😍 Added the changes 🙏 thank you vmuch!
|
We the people, thank you |
Description
This PR adds a network picker to be able to switch networks from the dapp.
Future work:
Screenshots
Main networks
Test networks
Happy Path
net-picker.mp4
Error Handling
network-picker-test-dapp.mp4
Manual Testing Steps
Flow 1: Connected + Permissions
Flow 2: Connected without Permissions
Flow 3: Connected without Network in the Wallet