Token Balances Display Component

The token balances display component displays the token balances for the connected wallet address.

Implementation:

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

2. Implement the getTokensBalances 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 TokenBalancesDisplay.module.css and paste inside the code contained in the component preview component's styles tab.

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

import TokenBalancesDisplay from "./components/tokenBalancesDisplay.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/tokenBalancesDisplay.jsx"

export default function Home() {
  return (
    <>
      <TokenBalancesDisplay 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 Token Balances Display component!