Transaction History Display Component

The transaction history display component displays the transaction history for the connected wallet address.

Implementation:

Step 1: Create the Component File

In your create-web3-dapp frontend>components folder, create a new file named transactionsHistoryDisplay.jsx and paste inside the code contained in the component preview component's code tab.

Step 2: Implement the getTransactionsHistory API:

In your create-web3-dapp frontend>pages>api folder, create a new file named getTransactionsHistory.js and paste inside the code contained in the component preview component's API tab.

Step 3: Add the Styles

In your create-web3-dapp frontend>styles folder, create a new file named TransactionsHistoryDisplay.module.css and paste it inside the code contained in the component preview component's styles tab.

Step 4: Include the Component

To import the NFTs Gallery in your dapp, navigate to the page, in your frontend>pages folder, where you want to implement the Transaction History Display Component, and import it:

import TransactionsHistoryDisplay from "./components/transactionsHistoryDisplay.jsx"

and add its tag to the return value of your NextJS page function and pass in the props as parameters::

import TransactionsHistoryDisplay from "../components/transactionsHistoryDisplay.jsx"

export default function Home() {
  return (
    <>
      <TransactionsHistoryDisplay walletAddress={"vitalik.eth"} chain={"ETH_MAINNET"} limit={"50"}/>
    </>
  );
}

Step 5: Start Your Application

Congratulations! Now cd in your frontend folder, and run the following command in your terminal to start your cw3d application:

 npm run dev 

And Enjoy your newly imported Transactions History Display component!