MetaMask allows users to view their transaction history directly within the wallet interface. However, if you want to programmatically access and display your transaction history in a DApp, you can use the following methods:

1. Accessing the Transaction History

To view your transaction history, you can use a block explorer API (like Etherscan) to fetch the transaction details associated with your Ethereum address. Here’s how you can do it:

Using Etherscan API

First, you need to obtain an API key from Etherscan. Once you have the API key, you can make requests to fetch your transaction history.

    // Sample code to fetch transaction history using Etherscan API
    const fetchTransactionHistory = async (address) => {
        const apiKey = 'YOUR_ETHERSCAN_API_KEY';
        const url = `https://api.etherscan.io/api?module=account&action=txlist&address=${address}&startblock=0&endblock=99999999&sort=desc&apikey=${apiKey}`;

        try {
            const response = await fetch(url);
            const data = await response.json();
            if (data.status === "1") {
                console.log("Transaction History:", data.result);
                return data.result; // Returns the transaction history
            } else {
                console.error("Error fetching transaction history:", data.message);
            }
        } catch (error) {
            console.error("Fetch error:", error);
        }
    };

    // Example usage
    const userAddress = 'YOUR_ETHEREUM_ADDRESS';
    fetchTransactionHistory(userAddress);
    

2. Displaying the Transaction History

Once you have fetched the transaction history, you can display it in your DApp. Here’s a simple way to render the transaction details:

    const displayTransactionHistory = (transactions) => {
        const transactionList = document.getElementById('transaction-list');
        transactions.forEach(tx => {
            const listItem = document.createElement('li');
            listItem.textContent = `Hash: ${tx.hash}, From: ${tx.from}, To: ${tx.to}, Value: ${tx.value} ETH, Date: ${new Date(tx.timeStamp * 1000).toLocaleString()}`;
            transactionList.appendChild(listItem);
        });
    };

    // Call the display function after fetching the transaction history
    fetchTransactionHistory(userAddress).then(displayTransactionHistory);
    

3. HTML Structure for Display

Make sure to include an HTML element to display the transaction list:

    <ul id="transaction-list"></ul>
    

Conclusion

By following the steps outlined above, you can easily view and display your transaction history from MetaMask using the Etherscan API. This allows users to keep track of their transactions directly within your DApp.