Tokens Balance Display Component

The tokens balance display component displays the tokens balance for the connected wallet address.

Implementation:

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

2. Implement the getTokensBalance API:

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

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

4. Include the component
   To import the Tokens Balance Display in your dapp, navigate to the page, in your frontend>pages folder, where you want to implement the Tokens Balance Display Component, and import it:

import TokenBalancesDisplay from "./components/tokensBalanceDisplay.jsx"

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

import TokenBalancesDisplay from "../components/tokensBalanceDisplay.jsx"

export default function Home() {
  return (
    <>
      <TokensBalanceDisplay address={"vitalik.eth"} chain={"ETH_MAINNET"}/>
    </>
  );
}

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 Tokens Balance Display component!