[FIX] - Adding custom error modal script (#715)

* fix: custom modal

* fix: connect to metamask script

Author: nhussein11

js/connect-to-metamask.js

@@ -19,35 +19,52 @@ const supportedNetworks = {
   NOTE: This calls "eth_requestAccounts" at the end, which prompts for wallet connection
  */
 const connectNetwork = async (network) => {
+  if (!provider) {
+    handleError('No Ethereum-compatible wallet found. Please install MetaMask.');
+    return;
+  }
   try {
     const targetNetwork = { ...supportedNetworks[network] };
-    delete targetNetwork.name; // remove 'name' property if needed
+    delete targetNetwork.name;
 
-    await provider.request({
-      method: 'wallet_addEthereumChain',
-      params: [targetNetwork],
-    });
-    // This line requests user accounts, which triggers a "connect" prompt if not already connected:
+    // Try to switch first, then add if not available
+    try {
+      await provider.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: targetNetwork.chainId }],
+      });
+    } catch (switchError) {
+      // 4902 = chain not added
+      if (switchError.code === 4902) {
+        await provider.request({
+          method: 'wallet_addEthereumChain',
+          params: [targetNetwork],
+        });
+      } else if (switchError.code !== 4001 && switchError.code !== -32002) {
+        handleError(switchError.message);
+        return;
+      }
+    }
+    // Request accounts after switching/adding
     await provider.request({ method: 'eth_requestAccounts' });
   } catch (e) {
-    // 4001: user rejected, -32002: request already pending
     if (e.code !== 4001 && e.code !== -32002) {
       handleError(e.message);
     }
   }
 };
 
-// Get the network that the user is currently connected to
+// Fix for getConnectedNetwork
 const getConnectedNetwork = async () => {
   const chainId = await provider.request({ method: 'eth_chainId' });
   const connectedHubNetwork = Object.values(supportedNetworks).find(
     (network) => network.chainId === chainId
   );
-  if (connectedNetwork) {
+  if (connectedHubNetwork) {
     const connectedNetworkButton = document.querySelector(
-      `.connect-network[data-value="${connectedNetwork.name}"]`
+      `.connect-network[data-value="${connectedHubNetwork.name}"]`
     );
-    return { connectedNetwork, connectedNetworkButton };
+    return { connectedNetwork: connectedHubNetwork, connectedNetworkButton };
   } else {
     return {
       connectedNetwork: null,
@@ -65,6 +82,7 @@ const displayConnectedAccount = async (connectedNetwork, networkButton) => {
     -4
   )}`;
   networkButton.innerHTML = `Connected to ${connectedNetwork.chainName}: ${shortenedAccount}`;
+  networkButton.disabled = true;
   networkButton.className += ' disabled-button';
 };
 
@@ -102,6 +120,7 @@ connectMetaMaskBodyButtons.forEach((btn) => {
     await connectNetwork(network);
     //Update the button to reflect the "connected" state
     btn.textContent = 'Connected to ' + supportedNetworks[network]['name'];
+    btn.disabled = true;
     btn.classList.add('disabled-button');
   });
 });
@@ -124,4 +143,4 @@ if (provider) {
       window.location.reload();
     }
   });
-}
+}

js/error-modal.js

@@ -0,0 +1,35 @@
+/** Grab the body so we can append the modal to it */
+const main = document.querySelector('main');
+
+/** Create the modal */
+const modalContainer = document.createElement('div');
+const modal = document.createElement('div');
+const modalHeader = document.createElement('h3');
+const modalMessage = document.createElement('p');
+const closeErrorModal = document.createElement('span');
+
+/** Add classes to modal elements so we can find and update as needed */
+modalContainer.className = 'error-modal-container';
+modalHeader.className = 'error-modal-header';
+modal.className = 'error-modal';
+modalMessage.className = 'error-message';
+closeErrorModal.className = 'close-modal';
+
+/** Set the display to none to hide the modal until it is needed */
+modalContainer.style.display = 'none';
+
+/** Set generic header for the error modal */
+modalHeader.textContent = 'There was a problem connecting to your wallet';
+
+/** Set up close button */
+closeErrorModal.innerHTML = '×';
+closeErrorModal.onclick = () => {
+  modalContainer.style.display = 'none';
+};
+
+/** Put the modal together and append it to the main area on the page */
+modal.appendChild(closeErrorModal);
+modal.appendChild(modalHeader);
+modal.appendChild(modalMessage);
+modalContainer.appendChild(modal);
+main.append(modalContainer);