Move updating network specific buttons to separate file

MetaMask · Dec 20, 2024 · 82a175b · 82a175b
1 parent a60f48d
commit 82a175b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/src/components/ppom/transactions.js b/src/components/ppom/transactions.js
@@ -5,6 +5,7 @@ import {
   ERC721_SAMPLE_CONTRACTS,
   MALICIOUS_CONTRACT_ADDRESSES,
 } from '../../onchain-sample-contracts';
+import { isBaseNetworkId, isSepoliaNetworkId } from '../../utils';
 
 export function ppomMaliciousTransactionsAndSignatures(parentContainer) {
   parentContainer.insertAdjacentHTML(
@@ -136,6 +137,13 @@ export function ppomMaliciousTransactionsAndSignatures(parentContainer) {
     maliciousSeaport.disabled = true;
   });
 
+  document.addEventListener('newNetwork', function (e) {
+    mintSepoliaERC20.hidden = !isSepoliaNetworkId(e.detail.networkId);
+    maliciousContractInteractionButton.hidden =
+      isBaseNetworkId(e.detail.networkId) ||
+      isSepoliaNetworkId(e.detail.networkId);
+  });
+
   // Malicious raw ETH transfer
   maliciousRawEthButton.onclick = async () => {
     const result = await globalContext.provider.request({

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,6 @@
 import MetaMaskOnboarding from '@metamask/onboarding';
 // eslint-disable-next-line camelcase
 import { ethers } from 'ethers';
-import { isSepoliaNetworkId, isBaseNetworkId } from './utils';
 import {
   handleSdkConnect,
   handleWalletConnect,
@@ -191,11 +190,6 @@ ppomMaliciousTransactionsAndSignatures(ppomRow);
 ppomMaliciousBatchingAndQueueing(ppomRow);
 ppomMaliciousWarningBypasses(ppomRow);
 
-const mintSepoliaERC20 = document.getElementById('mintSepoliaERC20');
-const maliciousContractInteractionButton = document.getElementById(
-  'maliciousContractInteractionButton',
-);
-
 const encryptionSection = document.createElement('section');
 mainContainer.appendChild(encryptionSection);
 encryptDecryptComponent(encryptionSection);
@@ -453,20 +447,13 @@ const handleNewChain = (chainId) => {
   }
 };
 
-function toggleSepoliaMintButton(networkId) {
-  mintSepoliaERC20.hidden = !isSepoliaNetworkId(networkId);
-}
-
-function toggleMaliciousContractInteractionButton(networkId) {
-  maliciousContractInteractionButton.hidden =
-    isBaseNetworkId(networkId) || isSepoliaNetworkId(networkId);
-}
-
 function handleNewNetwork(networkId) {
   networkDiv.innerHTML = networkId;
 
-  toggleSepoliaMintButton(networkId);
-  toggleMaliciousContractInteractionButton(networkId);
+  const changeEvent = new CustomEvent('newNetwork', {
+    detail: { networkId },
+  });
+  document.dispatchEvent(changeEvent);
 }
 
 const getNetworkAndChainId = async () => {