add-zk-testnet-network.jsx

// @ts-nocheck
'use client'

const chainIdHex = '0x108d'; // 4237 in hex

const networkData = {
  chainId: chainIdHex,
  chainName: 'Mintlayer Testnet ZKThunder',
  nativeCurrency: {
    name: 'Mintlayer',
    symbol: 'ML',
    decimals: 18
  },
  rpcUrls: ['https://rpc.testnet.zkthunder.fi'],
  blockExplorerUrls: ['https://explorer.testnet.zkthunder.fi']
};

async function switchOrAddNetwork() {
  if (!window.ethereum) {
    alert('MetaMask is not installed.');
    return;
  }

  try {
    // Try switching first
    await window.ethereum.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: chainIdHex }]
    });
    alert('Network is already added and selected!');
  } catch (switchError) {
    // Error 4902 = network not added yet
    if (switchError.code === 4902) {
      try {
        await window.ethereum.request({
          method: 'wallet_addEthereumChain',
          params: [networkData]
        });

        // After adding, try switching again
        await window.ethereum.request({
          method: 'wallet_switchEthereumChain',
          params: [{ chainId: chainIdHex }]
        });

        alert('Network added and switched successfully!');
      } catch (addError) {
        console.error('Error adding network:', addError);
        alert('Failed to add the network.');
      }
    } else {
      console.error('Error switching network:', switchError);
      alert('Failed to switch network.');
    }
  }
}

export function AddNetwork() {
  const handleAddNetwork = async () => {
    await switchOrAddNetwork();
  }

  return (
    <div onClick={handleAddNetwork} className="cursor-pointer bg-primary-color rounded-xl py-2 px-4 text-center md:mt-0 mt-5 hover:bg-primary-100 hover:text-black transition-colors">
      Add Mintlayer ZKThunder<br/> Testnet Network
    </div>
  );
}