Token Balances Display Component
The token balances display component displays the token balances for the connected wallet address.
The token balances display component displays the token balances for the connected wallet address.
Implementation:
-
Create the component file:
In yourcreate-web3-dapp
frontend>components
folder, create a new file namedtokenBalancesDisplay.jsx
and paste inside the code contained in the component preview component's code tab. -
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.
-
Add the styles
In yourcreate-web3-dapp
frontend>styles
folder, create a new file namedTokenBalancesDisplay.module.css
and paste inside the code contained in the component preview component's styles tab. -
Include the component
To import the Token Balances Display in your dapp, navigate to the page, in yourfrontend>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"}/>
</>
);
}
- Start your application:
Congratulations! Nowcd
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!
Updated about 1 month ago