Web3

How to Get Crypto Logos with an API

Are you on the lookout for the simplest approach to get crypto logos? Then you definitely’re exactly the place you want to be! At Moralis, we’ve enriched our Token API responses with logos, which means you don’t want to name a number of endpoints or hassle with a number of suppliers to get and combine this information into your decentralized software (dapp). Merely use one in every of our current endpoints for balances, transfers, or metadata – and also you’re good to go! 

For a sneak peek of how this works, let’s try our endpoint for fetching a pockets’s token balances with costs as an instance: 

import Moralis from 'moralis';

strive {
  await Moralis.begin({
    apiKey: "YOUR_API_KEY"
  });

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

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

All you’ve gotten to do is substitute YOUR_API_KEY with your Moralis API key, configure the question parameters, and run the code. In return, you’ll obtain a response that features the balances of the pockets in query, alongside with costs, metadata, and crypto logos: 

{
  //...
  "result": [
    {
      "token_address": "0xae7ab96520de3a18e5e111b5eaab095312d7fe84",
      "symbol": "stETH",
      "name": "Liquid staked Ether 2.0",
      "logo": "
      "thumbnail": "
      "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 tougher than that when working with Moralis. If you happen to’d like a extra detailed tutorial on how this works, be part of us on this information as we dive deeper into the method. 

Additionally, if you need to begin leveraging the Token API your self, join with Moralis right away. You may create an account freed from cost, and also you’ll acquire prompt entry to our premier Web3 API suite!

Overview 

When constructing dapps, your initiatives will most undoubtedly profit from crypto logos, as this could considerably enhance the consumer expertise and increase engagement. However what’s the easiest method to get and combine token logos into your dapp? Effectively, beforehand, it has been bothersome and time-consuming to get complete token protection on your dapps. Thankfully, that is not the case, as we at Moralis have included token brand protection throughout our total Token API. As such, you now mechanically get crypto logos when querying one in every of our endpoints for token balances, transfers, or metadata!

So, it doesn’t matter for those who’re constructing a decentralized change (DEX), cryptocurrency pockets, or every other platform; this information on how to get crypto logos is for you. Let’s dive straight in by initially introducing you to Moralis! 

What’s Moralis? 

Moralis is the {industry}’s main Web3 infra supplier, providing you with the sources to streamline on-chain information integration on your dapps. Our suite of improvement instruments consists of blockchain nodes for all main chains and ten+ use case-specific Web3 APIs. Consequently, when working with Moralis, you may seamlessly construct every part from decentralized exchanges (DEXs) to cryptocurrency wallets with out breaking a sweat! 

However what makes Moralis stand out from the competitors? 

  • One API for All Your Knowledge Wants: At Moralis, we enrich all our API responses with information from a number of on-chain and off-chain sources. This offers you extra information with fewer API calls, which means you don’t have to hassle with the complexities of integrating a number of suppliers. 
  • Unmatched Safety: Moralis stands out because the {industry}’s solely SOC 2 Sort 2 licensed Web3 infra supplier. So, if you need to construct dapps with enterprise-grade information safety, then Moralis is your go-to alternative.
  • Trusted by Business Leaders: Moralis is used and trusted by the most important names in Web3, together with MetaMask, Opera, Blockchain.com, and lots of others. 
Table showing companies like MetaMask, Blockchain.com, Opera, etc., using Moralis to get crypto token logos.

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

Moralis’ Token API – The Best Means to Get Crypto Logos 

Moralis’ Token API is the final word instrument for integrating ERC-20 token information into your dapps, masking each single token throughout all main networks, together with Ethereum, BNB Sensible Chain (BSC), Polygon, and lots of others! 

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

With the Token API, you may seamlessly get pockets balances, metadata, costs, and so on., with a single endpoint. We lately additionally enriched all Token API responses with crypto logos, making it a breeze to combine participating visuals into your dapps. 

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

Effectively, to spotlight the accessibility and comprehensiveness of Moralis, let’s take a look at our getWalletTokenBalancesPrice() endpoint as an instance. With this single endpoint, you get a pockets’s token balances – alongside with costs, metadata, and crypto logos – in a single response. 

Right here’s what the endpoint seems like: 

import Moralis from 'moralis';

strive {
  await Moralis.begin({
    apiKey: "YOUR_API_KEY"
  });

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

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

In return for calling the endpoint above, you’ll get a response comprising an array of token objects, every with a brand hooked up: 

{
  //...
  "result": [
    {
      "token_address": "0xae7ab96520de3a18e5e111b5eaab095312d7fe84",
      "symbol": "stETH",
      "name": "Liquid staked Ether 2.0",
      "logo": "
      "thumbnail": "
      "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
    },
    //...
  ]
}

Whereas we solely take a look at getWalletTokenBalancesPrice() as an instance, all our Token API endpoints are enriched with logos. So, for those who’d like to expertise the simplest approach to get token logos on your dapps, join with Moralis. 

Now, within the following part, we’ll see the Token API in motion and provide you with a easy three-step tutorial on how to get logos on your dapp! 

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

For this transient tutorial, we’ll present you ways to seamlessly get crypto logos utilizing Moralis’ Token API. To take action, we’ll be utilizing the getWalletTokenBalancesPrice() endpoint as an instance. And thanks to the accessibility of Moralis, you will get the info you want in three easy steps: 

  • Step 1: Get a Moralis API Key
  • Step 2: Write a Script Calling the getWalletTokenBalancesPrice() Endpoint
  • Step 3: Run the Code

However earlier than we are able to leap into step one, you want to deal with a few stipulations! 

Stipulations 

For this tutorial, we’ll be utilizing JavaScript and Node.js. As such, earlier than you proceed, ensure you have the next prepared: 

Step 1: Get a Moralis API Key

Begin by signing up with Moralis at no cost by clicking on the ”Begin for Free” button on the prime proper of Moralis’ homepage: 

Step 1 to get crypto token logos - Sign up for a free Moralis account on the homepage (showing homepage with sign up button)

From right here, navigate to the ”Settings” tab to the left, scroll down to the ”API Keys” part, and duplicate your key: 

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

Preserve the important thing for now, as you’ll want it within the following part! 

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

Open your most well-liked IDE, arrange a brand new folder, and initialize a undertaking by operating the next command within the terminal: 

npm init

You may then go forward and execute the instructions beneath to set up the wanted dependencies: 

npm set up node-fetch --save
npm set up moralis @moralisweb3/common-evm-utils

Subsequent, open the ”package deal.json” file of your undertaking and add ”kind”: ”module” to the record: 

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

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

import Moralis from 'moralis';

strive {
  await Moralis.begin({
    apiKey: "YOUR_API_KEY"
  });

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

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

You now want to make a number of configurations to the code. To begin with, substitute YOUR_API_KEY with your Moralis API key: 

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

Subsequent, additionally make certain to configure the chain and handle parameters to suit your question: 

configuring the chain and address parameters to fit your query

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

Step 3: Run the Code 

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

node index.js

In return, you’ll obtain an array of token objects containing logos, the stability, and different helpful information. Right here’s an instance of what it’d seem like: 

{
  //...
  "result": [
    {
      "token_address": "0xae7ab96520de3a18e5e111b5eaab095312d7fe84",
      "symbol": "stETH",
      "name": "Liquid staked Ether 2.0",
      "logo": "
      "thumbnail": "
      "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
    },
    //...
  ]
}

To entry the picture, merely use the hyperlink within the metadata. You may also go to the handle for those who’d like a preview of the picture: 

Step 3 result - getting crypto logos example - showing ethereum logo

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

Why Ought to You Use Moralis to Get and Combine Crypto Logos Into Your Dapps? 

Now that you understand how to get token logos, let’s additionally briefly focus on a number of the advantages of utilizing Moralis to combine this info into your dapps! 

  • Highest Token Emblem Protection: Whereas a number of different API suppliers additionally present logos, Moralis options the most effective token protection. Furthermore, since we add logos to all our Token API endpoints, you don’t have to make any further calls.
Crypto logos coverage table comparing Moralis, Alchemy, and QuickNode
  • Enhance Your Dapp’s Consumer Expertise: Cryptocurrencies are an vital element of most dapps, and including logos to your initiatives can considerably enhance the consumer expertise. It will lead to greater consumer worth and enhanced buyer retention. 
  • Enhance Consumer Engagement: Crypto logos can considerably increase consumer engagement by contributing a visually interesting interface. It will make your customers extra seemingly to work together with and return to your dapp. 
Graphic art illustration - showing multiple token logos in the crypto space

Crypto Logos Use Instances 

Virtually all dapps can profit considerably from token logos, making this characteristic important in most conditions. Nonetheless, to provide you with some examples, let’s take a look at three outstanding use instances: 

  • Portfolio View: Cryptocurrency wallets and portfolio trackers usually characteristic portfolio views, giving customers an overview of all their token holdings. To offer a compelling consumer expertise, you need to at all times embrace crypto logos to make the interface extra visually interesting: 
Portfolio view example
  • Token Pages: One other outstanding use case for crypto logos is token pages – which give customers extra perception into the efficiency of digital property:
Token page result page with logo for a crypto
  • Token Lists: Platforms like DEXs, token explorers, and different analytics platforms usually characteristic huge lists of tokens. By integrating logos, these lists change into extra visually participating, which might contribute to activating customers:
Showing a token list example of how to use crypto logos

Past the Token API – Diving Deeper Into Moralis 

As well as to Moralis’ Token API, we provide a complete suite of different industry-leading interfaces. As such, let’s dive a bit deeper into three further APIs you’ll seemingly discover helpful in your improvement endeavors: 

  1. Pockets API
  2. NFT API
  3. Streams API

In order for you to discover all our obtainable interfaces, please try our Web3 API web page!

Pockets API 

Moralis’ Pockets API boasts an spectacular array of options, distinctive flexibility, and unparalleled scalability. And it stands out because the {industry}’s premier interface for anybody trying to combine pockets performance into their dapps! 

Wallet API title

With single endpoints, you need to use the Pockets API to fetch the token balances, buying and selling historical past, internet price, profitability, and so on., of any pockets. As such, when utilizing this top-tier instrument, you may seamlessly construct every part from cryptocurrency wallets to portfolio trackers with out breaking a sweat. 

To spotlight the accessibility of the Pockets API, let’s take a look at our endpoint for fetching the web price of a pockets: 

import fetch from 'node-fetch';

const choices = {
  technique: 'GET',
  headers: {
    settle for: 'software/json',
    'X-API-Key': 'YOUR_API_KEY'
  },
};

fetch(' choices)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

All you’ve gotten to do is substitute YOUR_API_KEY, configure the parameters to suit your question, and execute the code. In return, you’ll get the web price of the pockets in a single question with out having to deal with any handbook information aggregation your self. Right here’s an instance of what it’d seem 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 final word instrument for anybody trying to streamline NFT information integration of their dapps. This premier interface helps over three million NFT collections and counting throughout all main EVM chains, together with every part from established initiatives to tokens that dropped simply seconds in the past!

NFT API title

With the NFT API, you solely want single strains of code to get enriched metadata, real-time NFT transfers, on-chain costs, and rather more. Consequently, this premier interface permits you to seamlessly construct every part from NFT marketplaces to Web3 video games. 

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

import Moralis from 'moralis';

strive {
  await Moralis.begin({
    apiKey: "YOUR_API_KEY"
  });

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

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

Merely substitute YOUR_API_KEY, configure the question parameters, and execute the script. In return, you’ll get a response comprising the token’s metadata. Right here’s an instance of what it’d seem 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": "{"picture":" 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": "
  "collection_banner_image": "
}

Streams API 

The Streams API is the right instrument for integrating real-time alerts into your dapps. With a number of strains of code, you need to use this premier API to arrange streams and get prompt, customizable updates despatched straight to your initiatives’ backends by way of webhooks. Additionally, the Streams API helps over 44 million contracts and covers all sorts of occasions, tokens, NFTs, wallets, and so on. 

Streams API title

So, how does the Streams API work? 

Effectively, thanks to the accessibility of this API, now you can arrange a stream in three easy steps: 

  • Step 1: Configure your stream by selecting the chains you’re concerned with, selecting the occasions you want to monitor, and including a webhook vacation spot: 
Showing how to set up Streams code
  • Step 2: Add your stream and get a check webhook in return: 
Adding stream and getting test webhook code
  • Step 3: Add one to 100 million addresses to your stream and watch the info roll in: 
Adding addresses to Stream

To be taught extra about this course of, try our official Streams API documentation web page!

Abstract: How to Get Crypto Logos with an API

The best approach to get and combine token logos into your dapp is to leverage Moralis. We’ve got included token brand protection throughout our total Token API, so all our responses are enriched with logos. This implies you solely want to name one in every of our endpoints for balances, transfers, or metadata, and also you’ll mechanically get crypto logos with out breaking a sweat! 

Crypto logos lined up next to each other.

However why must you use Moralis to get crypto logos? 

  • Unparalleled Token Protection: Moralis provides distinctive protection, supporting extra tokens than rivals like Alchemy and QuickNode.
  • Enhance Engagement: You may seamlessly increase consumer engagement by incorporating visuals into your dapp. 
  • Enhance Your Dapp’s Consumer Expertise: Including token logos to your initiatives will create a extra interesting interface, which leads to a extra compelling consumer expertise. 

So, in case you have adopted alongside this far, you now understand how to seamlessly get crypto logos with Moralis! 

If you happen to favored this information on how to get crypto logos, contemplate studying extra content material right here on the weblog. As an illustration, try our information on SOC 2 in Web3 or discover the most effective Alchemy API alternate options. Additionally, don’t neglect to join with Moralis. You may create an account at no cost, and also you’ll acquire prompt entry to instruments just like the Token API so you may enrich your dapp with crypto logos! 

DailyBlockchain.News Admin

Our Mission is to bridge the knowledge gap and foster an informed blockchain community by presenting clear, concise, and reliable information every single day. Join us on this exciting journey into the future of finance, technology, and beyond. Whether you’re a blockchain novice or an enthusiast, DailyBlockchain.news is here for you.
Back to top button