How to Get Crypto Logos with an API - Moralis Web3

Are you looking for the easiest way to get crypto logos? Then you’re precisely where you need to be! At Moralis, we have enriched our Token API responses with logos, meaning you don’t need to call multiple endpoints or bother with several providers to get and integrate this data into your decentralized application (dapp). Simply use one of our existing endpoints for balances, transfers, or metadata – and you’re good to go!

For a sneak peek of how this works, let’s check out our endpoint for fetching a wallet’s token balances with prices as an example:

import Moralis from ‘moralis’;

try {
await Moralis.start({
apiKey: “YOUR_API_KEY”
});

const response = await Moralis.EvmApi.wallets.getWalletTokenBalancesPrice({
“chain”: “0x1”,
“address”: “0xcB1C1FdE09f811B294172696404e88E658659905”
});

console.log(response.raw);
} catch (e) {
console.error(e);
}

All you have to do is replace YOUR_API_KEY with your Moralis API key, configure the query parameters, and run the code. In return, you’ll receive a response that includes the balances of the wallet in question, along with prices, metadata, and crypto logos:

{
//…
“result”: [
{
“token_address”: “0xae7ab96520de3a18e5e111b5eaab095312d7fe84”,
“symbol”: “stETH”,
“name”: “Liquid staked Ether 2.0”,
“logo”: “https://logo.moralis.io/0x1_0xae7ab96520de3a18e5e111b5eaab095312d7fe84_cd0f5053ccb543e08f65554bf642d751”,
“thumbnail”: “https://logo.moralis.io/0x1_0xae7ab96520de3a18e5e111b5eaab095312d7fe84_cd0f5053ccb543e08f65554bf642d751”,
“decimals”: 18,
“balance”: “90318376196090571”,
“possible_spam”: false,
“verified_contract”: true,
“balance_formatted”: “0.090318376196090571”,
“usd_price”: 3586.211067676367,
“usd_price_24hr_percent_change”: 2.6911259013267164,
“usd_price_24hr_usd_change”: 96.5094549184841,
“usd_value”: 323.9007603289777,
“usd_value_24hr_usd_change”: 8.71657725580729,
“native_token”: false,
“portfolio_percentage”: 54.6316
},
//…
]
}

That’s it; getting crypto logos doesn’t have to be more challenging than that when working with Moralis. If you’d like a more detailed tutorial on how this works, join us in this guide as we dive deeper into the process.

Also, if you want to start leveraging the Token API yourself, sign up with Moralis straight away. You can create an account free of charge, and you’ll gain instant access to our premier Web3 API suite!

Overview

When building dapps, your projects will most definitely benefit from crypto logos, as this can significantly improve the user experience and boost engagement. But what is the easiest way to get and integrate token logos into your dapp? Well, previously, it has been bothersome and time-consuming to get comprehensive token coverage for your dapps. Fortunately, this is no longer the case, as we at Moralis have incorporated token logo coverage across our entire Token API. As such, you now automatically get crypto logos when querying one of our endpoints for token balances, transfers, or metadata!

So, it doesn’t matter if you’re building a decentralized exchange (DEX), cryptocurrency wallet, or any other platform; this guide on how to get crypto logos is for you. Let’s dive straight in by initially introducing you to Moralis!

What is Moralis?

Moralis is the industry’s leading Web3 infra provider, giving you the resources to streamline on-chain data integration for your dapps. Our suite of development tools includes blockchain nodes for all major chains and ten+ use case-specific Web3 APIs. Consequently, when working with Moralis, you can seamlessly build everything from decentralized exchanges (DEXs) to cryptocurrency wallets without breaking a sweat!

But what makes Moralis stand out from the competition?

One API for All Your Data Needs: At Moralis, we enrich all our API responses with data from multiple on-chain and off-chain sources. This gives you more data with fewer API calls, meaning you don’t have to bother with the complexities of integrating multiple providers. Unmatched Security: Moralis stands out as the industry’s only SOC 2 Type 2 certified Web3 infra provider. So, if you want to build dapps with enterprise-grade data security, then Moralis is your go-to choice. Trusted by Industry Leaders: Moralis is used and trusted by the biggest names in Web3, including MetaMask, Opera, Blockchain.com, and many others.

Table showing companies like MetaMask, Blockchain.com, Opera, etc., using Moralis to get crypto token logos.

That gives you an overview of Moralis. Let’s now introduce you to our Token API – the ultimate tool for fetching and integrating token logos into your dapps!

Moralis’ Token API – The Easiest Way to Get Crypto Logos

Moralis’ Token API is the ultimate tool for integrating ERC-20 token data into your dapps, covering every single token across all major networks, including Ethereum, BNB Smart Chain (BSC), Polygon, and many others!

Graphic art illustration - Token API title, showing code example on how to get crypto token logos

With the Token API, you can seamlessly get wallet balances, metadata, prices, etc., with a single endpoint. We recently also enriched all Token API responses with crypto logos, making it a breeze to integrate engaging visuals into your dapps.

So, how do you get token logos for your dapp with the Token API?

Well, to highlight the accessibility and comprehensiveness of Moralis, let’s look at our getWalletTokenBalancesPrice() endpoint as an example. With this single endpoint, you get a wallet’s token balances – along with prices, metadata, and crypto logos – in a single response.

Here’s what the endpoint looks like:

import Moralis from ‘moralis’;

try {
await Moralis.start({
apiKey: “YOUR_API_KEY”
});

const response = await Moralis.EvmApi.wallets.getWalletTokenBalancesPrice({
“chain”: “0x1”,
“address”: “0xcB1C1FdE09f811B294172696404e88E658659905”
});

console.log(response.raw);
} catch (e) {
console.error(e);
}

In return for calling the endpoint above, you’ll get a response comprising an array of token objects, each with a logo attached:

While we only look at getWalletTokenBalancesPrice() as an example, all our Token API endpoints are enriched with logos. So, if you’d like to experience the easiest way to get token logos for your dapps, sign up with Moralis.

Now, in the following section, we’ll see the Token API in action and give you a simple three-step tutorial on how to get logos for your dapp!

3-Step Tutorial: How to Get Crypto Logos with Moralis

For this brief tutorial, we’ll show you how to seamlessly get crypto logos using Moralis’ Token API. To do so, we’ll be using the getWalletTokenBalancesPrice() endpoint as an example. And thanks to the accessibility of Moralis, you can get the data you need in three simple steps:

Step 1: Get a Moralis API KeyStep 2: Write a Script Calling the getWalletTokenBalancesPrice() EndpointStep 3: Run the Code

But before we can jump into the first step, you need to deal with a couple of prerequisites!

Prerequisites

For this tutorial, we’ll be using JavaScript and Node.js. As such, before you continue, make sure you have the following ready:

Step 1: Get a Moralis API Key

Start by signing up with Moralis for free by clicking on the ”Start for Free” button at the top right of Moralis’ homepage:

From here, navigate to the ”Settings” tab to the left, scroll down to the ”API Keys” section, and copy your key:

Showing the Moralis admin UI and how to copy the API key

Keep the key for now, as you’ll need it in the following section!

Step 2: Write a Script Calling the getWalletTokenBalancesPrice() Endpoint

Open your preferred IDE, set up a new folder, and initialize a project by running the following command in the terminal:

npm init

You can then go ahead and execute the commands below to install the needed dependencies:

npm install node-fetch –save
npm install moralis @moralisweb3/common-evm-utils

Next, open the ”package.json” file of your project and add ”type”: ”module” to the list:

Step 2 - add ”type”: ”module” to the list in the code

From here, create an ”index.js” file and add the following code:

import Moralis from ‘moralis’;

try {
await Moralis.start({
apiKey: “YOUR_API_KEY”
});

const response = await Moralis.EvmApi.wallets.getWalletTokenBalancesPrice({
“chain”: “0x1”,
“address”: “0xcB1C1FdE09f811B294172696404e88E658659905”
});

console.log(response.raw);
} catch (e) {
console.error(e);
}

You now need to make a few configurations to the code. First of all, replace YOUR_API_KEY with your Moralis API key:

Showing code and where to paste the API key fetched in Step 1

Next, also make sure to configure the chain and address parameters to fit your query:

configuring the chain and address parameters to fit your query

That’s it; you’re now ready to run the code!

Step 3: Run the Code

To execute the code, open a new terminal, cd into the project folder, and run this command:

node index.js

In return, you’ll receive an array of token objects containing logos, the balance, and other useful data. Here’s an example of what it might look like:

To access the image, simply use the link in the metadata. You can also visit the address if you’d like a preview of the image:

From here, you can now seamlessly get and integrate token logos into your dapp!

Why Should You Use Moralis to Get and Integrate Crypto Logos Into Your Dapps?

Now that you know how to get token logos, let’s also briefly discuss some of the benefits of using Moralis to integrate this information into your dapps!

Highest Token Logo Coverage: While several other API providers also provide logos, Moralis features the best token coverage. Moreover, since we add logos to all our Token API endpoints, you don’t have to make any additional calls.

Crypto logos coverage table comparing Moralis, Alchemy, and QuickNode

Improve Your Dapp’s User Experience: Cryptocurrencies are an important component of most dapps, and adding logos to your projects can significantly improve the user experience. This will lead to higher user value and enhanced customer retention. Boost User Engagement: Crypto logos can significantly boost user engagement by contributing a visually appealing interface. This will make your users more likely to interact with and return to your dapp.

Graphic art illustration - showing multiple token logos in the crypto space

Crypto Logos Use Cases

Almost all dapps can benefit significantly from token logos, making this feature essential in most situations. However, to give you some examples, let’s look at three prominent use cases:

Portfolio View: Cryptocurrency wallets and portfolio trackers typically feature portfolio views, giving users an overview of all their token holdings. To provide a compelling user experience, you should always include crypto logos to make the interface more visually appealing:

Token Pages: Another prominent use case for crypto logos is token pages – which give users more insight into the performance of digital assets:

Token Lists: Platforms like DEXs, token explorers, and other analytics platforms typically feature vast lists of tokens. By integrating logos, these lists become more visually engaging, which can contribute to activating users:

Showing a token list example of how to use crypto logos

Beyond the Token API – Diving Deeper Into Moralis

In addition to Moralis’ Token API, we offer a comprehensive suite of other industry-leading interfaces. As such, let’s dive a bit deeper into three additional APIs you’ll likely find useful in your development endeavors:

Wallet APINFT APIStreams API

If you want to explore all our available interfaces, please check out our Web3 API page!

Wallet API

Moralis’ Wallet API boasts an impressive array of features, exceptional flexibility, and unparalleled scalability. And it stands out as the industry’s premier interface for anyone looking to integrate wallet functionality into their dapps!

With single endpoints, you can use the Wallet API to fetch the token balances, trading history, net worth, profitability, etc., of any wallet. As such, when using this top-tier tool, you can seamlessly build everything from cryptocurrency wallets to portfolio trackers without breaking a sweat.

To highlight the accessibility of the Wallet API, let’s look at our endpoint for fetching the net worth of a wallet:

import fetch from ‘node-fetch’;

const options = {
method: ‘GET’,
headers: {
accept: ‘application/json’,
‘X-API-Key’: ‘YOUR_API_KEY’
},
};

fetch(‘https://deep-index.moralis.io/api/v2.2/wallets/0xd8da6bf26964af9d7eed9e03e53415d37aa96045/net-worth?exclude_spam=true&exclude_unverified_contracts=true’, options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));

All you have to do is replace YOUR_API_KEY, configure the parameters to fit your query, and execute the code. In return, you’ll get the net worth of the wallet in a single query without having to deal with any manual data aggregation yourself. Here’s an example of what it might look like:

{
“total_networth_usd”: “4286806.08”,
“chains”: [
{
“chain”: “eth”,
“native_balance”: “1085515469813080189177”,
“native_balance_formatted”: “1085.515469813080189177”,
“native_balance_usd”: “3550067.16”,
“token_balance_usd”: “735008.04”,
“networth_usd”: “4285075.20”
},
{
“chain”: “polygon”,
“native_balance”: “426857449018746625825”,
“native_balance_formatted”: “426.857449018746625825”,
“native_balance_usd”: “445.31”,
“token_balance_usd”: “1285.57”,
“networth_usd”: “1730.88”
}
]
}

NFT API

Moralis’ NFT API is the ultimate tool for anyone looking to streamline NFT data integration in their dapps. This premier interface supports over three million NFT collections and counting across all major EVM chains, including everything from established projects to tokens that dropped just seconds ago!

With the NFT API, you only need single lines of code to get enriched metadata, real-time NFT transfers, on-chain prices, and much more. Consequently, this premier interface allows you to seamlessly build everything from NFT marketplaces to Web3 games.

To showcase the accessibility and power of the NFT API, let’s look at our endpoint for querying the metadata of a token:

import Moralis from ‘moralis’;

try {
await Moralis.start({
apiKey: “YOUR_API_KEY”
});

const response = await Moralis.EvmApi.nft.getNFTMetadata({
“chain”: “0x1”,
“address”: “0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB”,
“tokenId”: “1”
});

console.log(response.raw);
} catch (e) {
console.error(e);
}

Simply replace YOUR_API_KEY, configure the query parameters, and execute the script. In return, you’ll get a response comprising the token’s metadata. Here’s an example of what it might look like:

{
“amount”: “1”,
“token_id”: “1”,
“token_address”: “0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb”,
“contract_type”: “CRYPTOPUNKS”,
“owner_of”: “0xffa914c83d851b9fe372e4ba6a6e131373aa16ab”,
“last_metadata_sync”: “2024-03-31T10:21:26.907Z”,
“last_token_uri_sync”: “2024-03-31T10:21:26.823Z”,
“metadata”: “{\”image\”:\”https://www.larvalabs.com/cryptopunks/cryptopunk001.png\”,\”name\”:\”CryptoPunk 001\”,\”attributes\”:[\”Smile\”,\”Mohawk\”],\”description\”:\”Male\”}”,
“block_number”: “16079985”,
“block_number_minted”: “3918216”,
“name”: “CRYPTOPUNKS”,
“symbol”: “Ͼ”,
“token_hash”: “a99d02058e62e327e79aabd57e0b88a3”,
“token_uri”: “Invalid uri”,
“minter_address”: “0xc352b534e8b987e036a93539fd6897f53488e56a”,
“verified_collection”: true,
“possible_spam”: false,
“collection_logo”: “https://i.seadn.io/gae/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE?w=500&auto=format”,
“collection_banner_image”: “https://i.seadn.io/gae/48oVuDyfe_xhs24BC2TTVcaYCX7rrU5mpuQLyTgRDbKHj2PtzKZsQ5qC3xTH4ar34wwAXxEKH8uUDPAGffbg7boeGYqX6op5vBDcbA?w=500&auto=format”
}

Streams API

The Streams API is the perfect tool for integrating real-time alerts into your dapps. With a few lines of code, you can use this premier API to set up streams and get instant, customizable updates sent directly to your projects’ backends via webhooks. Also, the Streams API supports over 44 million contracts and covers all types of events, tokens, NFTs, wallets, etc.

So, how does the Streams API work?

Well, thanks to the accessibility of this API, you can now set up a stream in three simple steps:

Step 1: Configure your stream by choosing the chains you’re interested in, picking the events you wish to monitor, and adding a webhook destination:

Step 2: Add your stream and get a test webhook in return:

Adding stream and getting test webhook code

Step 3: Add one to 100 million addresses to your stream and watch the data roll in:

To learn more about this process, check out our official Streams API documentation page!

Summary: How to Get Crypto Logos with an API

The easiest way to get and integrate token logos into your dapp is to leverage Moralis. We have incorporated token logo coverage across our entire Token API, so all our responses are enriched with logos. This means you only need to call one of our endpoints for balances, transfers, or metadata, and you’ll automatically get crypto logos without breaking a sweat!

Crypto logos lined up next to each other.

But why should you use Moralis to get crypto logos?

Unparalleled Token Coverage: Moralis offers exceptional coverage, supporting more tokens than competitors like Alchemy and QuickNode. Boost Engagement: You can seamlessly boost user engagement by incorporating visuals into your dapp. Improve Your Dapp’s User Experience: Adding token logos to your projects will create a more appealing interface, which leads to a more compelling user experience.

So, if you have followed along this far, you now know how to seamlessly get crypto logos with Moralis!

If you liked this guide on how to get crypto logos, consider reading more content here on the blog. For instance, check out our guide on SOC 2 in Web3 or explore the best Alchemy API alternatives. Also, don’t forget to sign up with Moralis. You can create an account for free, and you’ll gain instant access to tools like the Token API so you can enrich your dapp with crypto logos!

Source link