MetaMask provides a way to interact with the Ethereum blockchain and view network activity through its API. This allows developers to monitor transactions, check account balances, and interact with smart contracts. Below is a detailed explanation of how to view network activity in MetaMask, along with sample code.

1. Accessing the Ethereum Provider

MetaMask injects the Ethereum provider into the browser, which can be accessed via window.ethereum. This object allows you to make requests to the Ethereum network.

if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask is installed!');
}

2. Checking the Current Network

You can check the current network by calling the eth_chainId method. This will return the chain ID of the network you are currently connected to.

const getCurrentNetwork = async () => {
    const chainId = await window.ethereum.request({ method: 'eth_chainId' });
    console.log(`Current network chain ID: ${chainId}`);
};

getCurrentNetwork();

3. Viewing Account Information

To view the connected accounts, you can use the eth_accounts method. This will return an array of account addresses that are connected to MetaMask.

const getAccounts = async () => {
    const accounts = await window.ethereum.request({ method: 'eth_accounts' });
    console.log(`Connected accounts: ${accounts}`);
};

getAccounts();

4. Listening for Network Changes

You can listen for changes in the network or account by using event listeners. This is useful for updating your application when the user switches networks or accounts.

window.ethereum.on('chainChanged', (chainId) => {
    console.log(`Network changed to: ${chainId}`);
    window.location.reload(); // Reload the page to reflect the new network
});

window.ethereum.on('accountsChanged', (accounts) => {
    console.log(`Accounts changed: ${accounts}`);
});

5. Fetching Transaction History

While MetaMask does not provide a direct method to fetch transaction history, you can use external APIs like Etherscan to retrieve this information based on the user's account address.

const fetchTransactionHistory = async (address) => {
    const response = await fetch(`https://api.etherscan.io/api?module=account&action=txlist&address=${address}&startblock=0&endblock=99999999&sort=asc&apikey=YOUR_ETHERSCAN_API_KEY`);
    const data = await response.json();
    console.log(data.result);
};

// Example usage
const accounts = await window.ethereum.request({ method: 'eth_accounts' });
fetchTransactionHistory(accounts[0]);

Conclusion

By utilizing the MetaMask API, developers can effectively monitor network activity, manage accounts, and interact with the Ethereum blockchain. This enhances the user experience and provides valuable insights into the application's performance.