Transaction History Display Component

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

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!