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:
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!
Updated about 1 year ago