Do you need to know get all tokens owned by a pockets? In that case, you’re in the correct place, as this tutorial demonstrates how to take action utilizing Moralis! Because of Moralis’ Token API, you will get all tokens owned by a pockets in 5 easy steps:
Create a projectInstall Moralis by operating the next command within the terminal: npm set up moralis @moralisweb3/common-evm-utils Arrange a brand new fileInput the next contents (add a Moralis API key, handle, and the specified chain):const Moralis = require(‘moralis’).default;
const { EvmChain } = require(‘@moralisweb3/common-evm-utils’);
const runApp = async () => {
await Moralis.begin({
apiKey: “YOUR_API_KEY”,
// …and some other configuration
});
const handle=”0xBf6521AF44F5D56813A93dCE548E6594Daa00794″;
const chain = EvmChain.ETHEREUM;
const response = await Moralis.EvmApi.token.getWalletTokenBalances({
handle,
chain,
});
console.log(response.toJSON());
}
runApp(); Name the ”getWalletTokenBalances” endpoint by operating this system with this terminal command:node “FILE_NAME”
When you execute this system, you obtain a response containing all tokens owned by the desired pockets. It ought to look one thing like this:
{
“token_address”: “0xff20817765cb7f73d4bde2e66e067e58d11095c2”,
“identify”: “Amp”,
“image”: “AMP”,
“brand”: “https://cdn.moralis.io/eth/0xff20817765cb7f73d4bde2e66e067e58d11095c2.png”,
“thumbnail”: “https://cdn.moralis.io/eth/0xff20817765cb7f73d4bde2e66e067e58d11095c2_thumb.png”,
“decimals”: 18,
“stability”: “24109691515670000000000”
}
For added data, try the official endpoint documentation to get the stability by pockets!
Overview
Growing decentralized functions (dapps) and different Web3 initiatives requires related on-chain knowledge. As such, Web3 builders desperately want a fast and efficient approach to question blockchain networks, which is the place Moralis enters the equation. With Moralis’ Web3 APIs, you’ll be able to seamlessly question any blockchain for knowledge and obtain real-time responses. To show the accessibility of Moralis, we are going to on this article present you use the Token API to get all tokens owned by a pockets. If this sounds fascinating, be a part of us on this tutorial, as we are going to cowl this course of from begin to end!
To point out you the way Moralis’ Token API works in observe, the article demonstrates construct an utility the place customers can enter an handle and click on on a button to question the pockets’s token stability. Nevertheless, earlier than diving deeper into the central half, the article briefly recaps what a token pockets is. So, in case you are already accustomed to token wallets, be at liberty to skip straight into the ”Utility Demo” part.
What’s extra, the Token API is just one of many instruments Moralis presents. There are a number of different distinguished options to find, which we suggest you do in case you are severe about moving into Web3 growth. For instance, try the Auth API, permitting you to seamlessly combine blockchain-based authentication into your initiatives with solely single strains of code. If this sounds fascinating, you’ll be able to, as an illustration, discover ways to add an indication in with RainbowKit!
However, it doesn’t matter what blockchain growth endeavor you embark on, join with Moralis now to leverage the complete potential of blockchain know-how!
What’s a Token Pockets?
If you wish to get into the Web3 area, step one is to accumulate a token pockets. Folks use token wallets to retailer digital property corresponding to fungible and non-fungible tokens (NFTs). Together with the flexibility to carry property, token wallets additionally typically function further performance. Amongst different issues, this contains sending, shopping for, promoting, and swapping property. In flip, you’ll be able to absolutely handle your digital property via a token pockets.
Together with offering a straightforward approach to handle your property, token wallets open the door to the blockchain realm. Accordingly, wallets are gateways to the Web3 ecosystem, enabling anybody to work together with dapps and platforms on varied blockchain networks. As such, token wallets play an important function in blockchain!
Listed below are some distinguished examples of token pockets suppliers which you could take into account:
MetaMaskCoinbase WalletPhantomArgentTrust Pockets
What’s extra, if you wish to be taught extra about token wallets, try our information right here on the Web3 weblog exploring Web3 wallets!
However, now that you’re extra accustomed to token wallets, it’s virtually time to dive into the central a part of this tutorial. Nevertheless, earlier than doing so, we offer a fast demo of the applying you’ll be taught to create on this article!
Get All Tokens Owned by a Pockets – Utility Demo
This tutorial teaches you create an easy NextJS utility from which customers can get all tokens owned by a pockets. That stated, earlier than leaping into the tutorial, this part supplies a fast utility demo. By masking the intricacies of the app, you acquire a greater understanding of what you’re working in the direction of!
However, yow will discover a screenshot of the app’s touchdown web page down beneath:
The appliance options three major parts: a heading, an enter discipline, and a ”Submit” button. The sphere takes a Web3 pockets handle as enter, and when you click on on the ”Submit” button, it returns a desk presenting all tokens owned by the desired pockets:
Because the picture above illustrates, the app returns the thumbnail, identify, and USD stability for all tokens inside the pockets. Nevertheless, Moralis’ Token API supplies further data, corresponding to every token’s handle and image. (we’ve simply determined to not show this data on the app’s person interface [UI]).
If you wish to discover ways to construct this utility, be a part of us within the following part, the place we present you get all tokens owned by a pockets in solely 5 easy steps!
5-Step Breakdown – How one can Get All Tokens Owned By a Pockets
With a extra profound understanding of what you’re working in the direction of, it’s time to present you get all tokens owned by a pockets. Furthermore, to take action, the next sections train you create an easy NextJS utility the place you’ll be able to enter an handle and get all tokens from a specified pockets in return. What’s extra, due to Moralis’ Token API, it is possible for you to to create this utility in solely 5 straightforwards steps:
Finishing Stipulations and Setting Up a Moralis AccountGet Your Moralis API KeyProject SetupCode Breakdown: ”index.js” and ”header.js”Code Breakdown: ”major.js”
By finishing the steps above, you’ll learn the way Moralis’ Token API works and get all tokens owned by a pockets. By the tip of this tutorial, you’ll have the data so as to add related performance to your future dapps!
However, with out additional ado, allow us to bounce straight into step one and canopy the required conditions!
Step 1: Finishing Stipulations and Setting Up a Moralis Account
To kick issues off, you initially must cope with a few conditions on this first step. Particularly, it’s essential to guarantee that you’ve got put in NodeJS and npm. You may get these two parts by visiting the NodeJS web site and putting in the most recent model.
Together with NodeJS and npm, you need to join with Moralis. When you’ve got not already, create a Moralis account proper now. Establishing an account solely takes a few minutes and is completely free!
Step 2: Get Your Moralis API Key
The principle motive why it’s essential to join with Moralis is that you just want entry to an API key. As we beforehand talked about, you’ll use Moralis’ Token API to get all tokens owned by a pockets. However, to work together with the varied endpoints of this API, you want a Moralis Web3 API key. So, the place are you able to get one?
After you have an account at your disposal, log in to the Moralis admin panel. Click on on the ”Web3 APIs” tab and find your API key. What’s extra, go forward and replica the API key by clicking on the ”Copy” button, as you want the important thing for the following step:
Step 3: Mission Setup
On this third step, it’s time to arrange the applying. To make this tutorial as accessible as potential, we are going to use an already pre-made challenge. You can see the entire utility code within the GitHub repository down beneath:
Get All Tokens Owned by a Pockets Repo – https://github.com/MoralisWeb3/youtube-tutorials/tree/major/get-any-wallets-token-balance
You possibly can open the repository and clone the challenge to your native listing. Doing so ought to offer you a neighborhood copy of the code, and you must end up with a file construction just like the one within the picture beneath:
From right here, open a brand new terminal, ”cd” into the challenge’s root folder, and run the command beneath to put in the Moralis SDK:
npm set up moralis @moralisweb3/common-evm-utils
Subsequent up, create a brand new file known as ”.env.native” and add an setting variable on your Moralis API key. It ought to look one thing like this (substitute “YOUR_API_KEY” with the precise key):
NEXT_PUBLIC_MORALIS_API_KEY=”YOUR_API_KEY”
That covers the required steps in making the applying operational. Nevertheless, we’ve but to clarify how the applying works or how one can get all tokens. As such, we break down the code within the following two steps and discover the applying logic in additional element. This supplies perception into how Moralis’ Token API works, permitting you to make use of the identical basic ideas for any future Web3 initiatives!
Step 4: Code Breakdown: ”index.js” & ”header.js”
With a neighborhood copy of the challenge at your disposal and the required configurations all full, we are going to take the next part to discover two recordsdata: ”index.js” and ”header.js”. So, allow us to kick issues off by diving into the code of the ”index.js” file!
”index.js” – The code contained inside the ”index.js” file is chargeable for rendering the app’s homepage. The contents of the file are comparatively easy, and it seems like this: import Head from “subsequent/head”;
import types from “../types/Residence.module.css”;
import Header from “../parts/header”;
import Fundamental from “../parts/major”;
export default operate Residence() {
return (
<part className={types.container}>
<Head>
<title>Get Token Value</title>
<meta identify=”description” content material=”Generated by create subsequent app” />
<hyperlink rel=”icon” href=”https://moralis.io/favicon.ico” />
</Head>
<major className={types.major}>
<Header />
<Fundamental />
</major>
</part>
);
}
On the backside of the file, you can find the code chargeable for rendering two parts: ”Header” and ”Fundamental”, which make up the 2 further recordsdata we are going to dive deeper into. So, let’s progress by taking a short take a look at ”header.js”.
”header.js” – The code of the ”header.js” file is kind of easy and is solely chargeable for the app’s title and brand displayed on the UI:import Picture from “subsequent/picture”;
import types from “../types/Residence.module.css”;
import Emblem from “../public/property/Moralis_logo.png”;
export default operate Header() {
return (
<part className={types.header}>
<Picture src={Emblem} alt=”Emblem picture” width=”102″ top=”82″ />
<h1 className={types.title}>Get Any Pockets’s Token Stability</h1>
</part>
);
}
Within the subsequent step, we are going to dive into ”major.js”, which is the place we discover the applying logic!
Step 5: Code Breakdown: ”major.js”
The ”major.js” file incorporates the logic for the applying and the code enabling us to get all tokens owned by a pockets. This one is kind of in depth if we evaluate it to the opposite recordsdata we noticed within the earlier step. Consequently, we are going to cut up the file into smaller sections and concentrate on the core components, making it simpler to observe alongside. So, to start with, allow us to briefly cowl the preliminary 4 strains of the file:
import { useState } from “react”;
const Moralis = require(“moralis”).default;
const { EvmChain } = require(“@moralisweb3/common-evm-utils”);
import types from “../types/Residence.module.css”;
These preliminary strains are chargeable for the required imports. That is additionally the place you put in Moralis and the EVM utils. Following the imports, the rest of the code is the ”header()” operate. This operate does, in flip, function ”handleSubmit()”, containing the logic for buying the tokens owned by a pockets:
const handleSubmit = async () => {
handle = doc.querySelector(“#walletAddress”).worth;
const chain = EvmChain.ETHEREUM;
await Moralis.begin({
apiKey: course of.env.NEXT_PUBLIC_MORALIS_API_KEY,
});
const response = await Moralis.EvmApi.token.getWalletTokenBalances({
handle,
chain,
});
console.log(response.toJSON());
setResult(response.toJSON());
setShowResult(true);
doc.querySelector(“#walletAddress”).worth = “”;
};
Within the first a part of the ”handleSubmit()” operate, you purchase the pockets handle from the UI, which we retailer within the ”handle” variable. Subsequent, the code specifying the ”chain” variable to equal ”evmChain.ETHEREUM” signifies that you just need to question an handle on the Ethereum community.
From there, the code initializes Moralis utilizing the ”Moralis.begin()” operate, passing your API key as an argument. Lastly, via the ”getWalletTokenBalances()” operate, you name the Moralis Token API endpoint and retailer the ends in the ”response” variable.
The rest of the code renders the app’s UI parts and decides what knowledge to show to the customers:
return (
<part className={types.major}>
<kind
className={types.getTokenForm}
identify=”create-profile-form”
technique=”POST”
motion=”#”
>
<label className={types.label} htmlFor=”walletAddress”>
Add ERC20 Pockets Handle
</label>
<enter
className={types.walletAddress}
sort=”textual content”
id=”walletAddress”
identify=”walletAddress”
maxLength=”120″
required
/>
</kind>
<button className={types.form_btn} onClick={handleSubmit}>
Submit
</button>
<part className={types.outcome}>
{showResult &&
outcome.map((token) => {
return (
<part
className={types.tokenContainer}
key={outcome.indexOf(token)}
>
<img src={token.thumbnail} />
<p className={types.identify}>{token.identify}</p>
<p className={types.quantity}>
{(token.stability / 10 ** token.decimals).toFixed(2)}
</p>
</part>
);
})}
</part>
</part>
);
That covers the central a part of the applying code! For a extra detailed breakdown, try the video from Moralis’ YouTube channel beneath. On this clip, you can find a video tutorial masking your entire course of in additional element:
As well as, try the official “getWalletTokenBalances” endpoint documentation and the entire Token API documentation for extra details about the Token API and the endpoint used on this tutorial!
Get All Tokens Owned by a Pockets – Abstract
On this article, you noticed get all tokens owned by a pockets, due to Moralis’ Token API. To point out this API in motion, the article demonstrated create an easy NextJS dapp permitting anybody to question a pockets’s token stability primarily based on its handle. What’s extra, due to the accessibility of Moralis, you had been capable of create this app in solely 5 steps:
Finishing Stipulations and Setting Up a Moralis AccountGet Your Moralis API KeyProject SetupCode Breakdown: ”index.js” & ”header.js”Code Breakdown: ”major.js”
For those who discovered this text useful, there are different thrilling guides so that you can try on Moralis’ Web3 weblog. For instance, discover the intricacies of Ethereum webhooks or discover ways to get NFT collections utilizing Python! Furthermore, if Ethereum growth pursuits you essentially the most, try our articles exploring get the stability of ERC20 tokens, the final word ERC20 token API, and the most effective ERC20 token stability API for dapp growth!
However, if you wish to absolutely leverage the facility of blockchain, join with Moralis instantly. You possibly can arrange your account without cost, and it solely takes seconds, so you don’t have anything to lose!
