Automatically switch wallet network

cmd/monogen/testapp/wallet/index.html

@@ -129,7 +129,6 @@ <h2>Metamask Integration</h2>
                         </ul>
                     </li>
                 </ul>
-                <button id="enable-metamask">Add L1 Chain to Metamask</button>
             </div>
             <div class="section">
                 <h2>L1 to L2 ETH Deposits</h2>

cmd/monogen/testapp/wallet/metamask-integration.js

@@ -9,9 +9,9 @@ const depositButton = document.getElementById('deposit-button');
 const statusParagraph = document.getElementById('status');
 const amountInput = document.getElementById('amount');
 const recipientInput = document.getElementById('recipient');
-const enableMetamaskButton = document.getElementById('enable-metamask');
+const chainId = "0x384";
 
-let optimismPortalContract;
+let optimismPortalContract = undefined;
 
 const optimismPortalAbi = [{"type":"constructor","inputs":[],"stateMutability":"nonpayable"},{"type":"receive","stateMutability":"payable"},{"type":"function","name":"depositTransaction","inputs":[{"name":"_to","type":"address","internalType":"address"},{"name":"_value","type":"uint256","internalType":"uint256"},{"name":"_gasLimit","type":"uint64","internalType":"uint64"},{"name":"_isCreation","type":"bool","internalType":"bool"},{"name":"_data","type":"bytes","internalType":"bytes"}],"outputs":[],"stateMutability":"payable"},{"type":"function","name":"donateETH","inputs":[],"outputs":[],"stateMutability":"payable"},{"type":"function","name":"finalizeWithdrawalTransaction","inputs":[{"name":"_tx","type":"tuple","internalType":"structTypes.WithdrawalTransaction","components":[{"name":"nonce","type":"uint256","internalType":"uint256"},{"name":"sender","type":"address","internalType":"address"},{"name":"target","type":"address","internalType":"address"},{"name":"value","type":"uint256","internalType":"uint256"},{"name":"gasLimit","type":"uint256","internalType":"uint256"},{"name":"data","type":"bytes","internalType":"bytes"}]}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"finalizedWithdrawals","inputs":[{"name":"","type":"bytes32","internalType":"bytes32"}],"outputs":[{"name":"","type":"bool","internalType":"bool"}],"stateMutability":"view"},{"type":"function","name":"guardian","inputs":[],"outputs":[{"name":"","type":"address","internalType":"address"}],"stateMutability":"view"},{"type":"function","name":"initialize","inputs":[{"name":"_l2Oracle","type":"address","internalType":"contractL2OutputOracle"},{"name":"_systemConfig","type":"address","internalType":"contractSystemConfig"},{"name":"_superchainConfig","type":"address","internalType":"contractSuperchainConfig"}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"isOutputFinalized","inputs":[{"name":"_l2OutputIndex","type":"uint256","internalType":"uint256"}],"outputs":[{"name":"","type":"bool","internalType":"bool"}],"stateMutability":"view"},{"type":"function","name":"l2Oracle","inputs":[],"outputs":[{"name":"","type":"address","internalType":"contractL2OutputOracle"}],"stateMutability":"view"},{"type":"function","name":"l2Sender","inputs":[],"outputs":[{"name":"","type":"address","internalType":"address"}],"stateMutability":"view"},{"type":"function","name":"minimumGasLimit","inputs":[{"name":"_byteCount","type":"uint64","internalType":"uint64"}],"outputs":[{"name":"","type":"uint64","internalType":"uint64"}],"stateMutability":"pure"},{"type":"function","name":"params","inputs":[],"outputs":[{"name":"prevBaseFee","type":"uint128","internalType":"uint128"},{"name":"prevBoughtGas","type":"uint64","internalType":"uint64"},{"name":"prevBlockNum","type":"uint64","internalType":"uint64"}],"stateMutability":"view"},{"type":"function","name":"paused","inputs":[],"outputs":[{"name":"paused_","type":"bool","internalType":"bool"}],"stateMutability":"view"},{"type":"function","name":"proveWithdrawalTransaction","inputs":[{"name":"_tx","type":"tuple","internalType":"structTypes.WithdrawalTransaction","components":[{"name":"nonce","type":"uint256","internalType":"uint256"},{"name":"sender","type":"address","internalType":"address"},{"name":"target","type":"address","internalType":"address"},{"name":"value","type":"uint256","internalType":"uint256"},{"name":"gasLimit","type":"uint256","internalType":"uint256"},{"name":"data","type":"bytes","internalType":"bytes"}]},{"name":"_l2OutputIndex","type":"uint256","internalType":"uint256"},{"name":"_outputRootProof","type":"tuple","internalType":"structTypes.OutputRootProof","components":[{"name":"version","type":"bytes32","internalType":"bytes32"},{"name":"stateRoot","type":"bytes32","internalType":"bytes32"},{"name":"messagePasserStorageRoot","type":"bytes32","internalType":"bytes32"},{"name":"latestBlockhash","type":"bytes32","internalType":"bytes32"}]},{"name":"_withdrawalProof","type":"bytes[]","internalType":"bytes[]"}],"outputs":[],"stateMutability":"nonpayable"},{"type":"function","name":"provenWithdrawals","inputs":[{"name":"","type":"bytes32","internalType":"bytes32"}],"outputs":[{"name":"outputRoot","type":"bytes32","internalType":"bytes32"},{"name":"timestamp","type":"uint128","internalType":"uint128"},{"name":"l2OutputIndex","type":"uint128","internalType":"uint128"}],"stateMutability":"view"},{"type":"function","name":"superchainConfig","inputs":[],"outputs":[{"name":"","type":"address","internalType":"contractSuperchainConfig"}],"stateMutability":"view"},{"type":"function","name":"systemConfig","inputs":[],"outputs":[{"name":"","type":"address","internalType":"contractSystemConfig"}],"stateMutability":"view"},{"type":"function","name":"version","inputs":[],"outputs":[{"name":"","type":"string","internalType":"string"}],"stateMutability":"view"},{"type":"event","name":"Initialized","inputs":[{"name":"version","type":"uint8","indexed":false,"internalType":"uint8"}],"anonymous":false},{"type":"event","name":"TransactionDeposited","inputs":[{"name":"from","type":"address","indexed":true,"internalType":"address"},{"name":"to","type":"address","indexed":true,"internalType":"address"},{"name":"version","type":"uint256","indexed":true,"internalType":"uint256"},{"name":"opaqueData","type":"bytes","indexed":false,"internalType":"bytes"}],"anonymous":false},{"type":"event","name":"WithdrawalFinalized","inputs":[{"name":"withdrawalHash","type":"bytes32","indexed":true,"internalType":"bytes32"},{"name":"success","type":"bool","indexed":false,"internalType":"bool"}],"anonymous":false},{"type":"event","name":"WithdrawalProven","inputs":[{"name":"withdrawalHash","type":"bytes32","indexed":true,"internalType":"bytes32"},{"name":"from","type":"address","indexed":true,"internalType":"address"},{"name":"to","type":"address","indexed":true,"internalType":"address"}],"anonymous":false},{"type":"error","name":"BadTarget","inputs":[]},{"type":"error","name":"CallPaused","inputs":[]},{"type":"error","name":"GasEstimation","inputs":[]},{"type":"error","name":"LargeCalldata","inputs":[]},{"type":"error","name":"OutOfGas","inputs":[]},{"type":"error","name":"SmallGasLimit","inputs":[]}];
 const optimismPortalAddress = '0x9A676e781A523b5d0C0e43731313A708CB607508';
@@ -30,18 +30,36 @@ async function connectMetamask() {
             signer
         );
 
-        console.log('Connected to MetaMask and contract instantiated.');
-    } catch (error) {
-        console.error('Error connecting to MetaMask:', error);
-    }
+    await addL1ChainToMetaMask();
+    await switchToMonomerDevnet();
+
+    console.log("Connected to MetaMask and contract instantiated.");
+  } catch (error) {
+    console.error("Error connecting to MetaMask:", error);
+  }
+}
+
+async function switchToMonomerDevnet() {
+  try {
+    await window.ethereum.request({
+      method: "wallet_switchEthereumChain",
+      params: [
+        {
+          chainId: chainId,
+        },
+      ],
+    });
+  } catch (error) {
+    console.error("Error switching Ethereum chain: ", error);
+  }
 }
 
 async function addL1ChainToMetaMask() {
     try {
         await window.ethereum.request({
             method: 'wallet_addEthereumChain',
             params: [{
-                chainId: '0x384', // 900
+                chainId: chainId,
                 chainName: 'Ethereum (Monomer Devnet)',
                 nativeCurrency: {
                     name: 'ETH',
@@ -130,7 +148,6 @@ function cosmosToEthAddress(cosmosAddress) {
 }
 
 depositButton.addEventListener('click', depositETH);
-enableMetamaskButton.addEventListener('click', addL1ChainToMetaMask);
 
 // Connect to Metamask on page load
 window.addEventListener('load', () => {