Fix/switch to correct network (#312)

* test: `useWallet()`

update test to check that the chain ID is converted to hexadecimal
before requesting a network change

* fix: `switchToCorrectNetwork()`

change chain ID to hexadecimal before requesting network switch

* changeset

Co-authored-by: Dhaiwat Pandya <[email protected]>

Author: swellander

.changeset/spotty-lamps-compete.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/hooks': minor
+---
+
+The network/chain ID was not being converted to hexadecimal before requesting a switch from MetaMask. This was only a problem for networks with chain IDs greater than 9, like the Mumbai Testnet (80001).

packages/hooks/src/hooks/useWallet.test.tsx

@@ -54,7 +54,7 @@ describe('useWallet tests', () => {
     expect(requestArgs).toStrictEqual({
       method: 'wallet_switchEthereumChain',
       // this passes (for high number networks)
-      params: [{ chainId: `0x${testNetwork}` }],
+      params: [{ chainId: `0x${testNetwork.toString(16)}` }],
       // The test should probably look like this
       // if we are in fact converting network numbers to hex
       // but fails with the current implementation

packages/hooks/src/hooks/useWallet.ts

@@ -40,10 +40,11 @@ export function useWallet() {
       try {
         console.log('chainId', { chainId });
         console.log('requiredNetwork', { network });
+        const hexNetwork = network?.toString(16);
         // check if the chain to connect to is installed
         await window.ethereum.request({
           method: 'wallet_switchEthereumChain',
-          params: [{ chainId: `0x${network}` }], // chainId must be in hexadecimal numbers
+          params: [{ chainId: `0x${hexNetwork}` }], // chainId must be in hexadecimal numbers
         });
       } catch (error) {
         console.error(error);