[SOLVED] Problem to get the price of a token on my site

Moralis General
#1

Hello everybody.
I know html and css but I’m a beginner for the rest.
I spent 2 days watching the tutorials and videos to help me but I can’t do what I want.
My request is probably going to be very easy for a lot of people here, but I think my question will be of interest to a lot of newbies like me in the future.
My goal is simple, I would like to have the values of a token in USD on my site but I cannot display it on the page.
Here are my codes and thank you in advance to those who will be kind enough to help me.

Mainnet/Cloud fonctions:

Moralis.Cloud.define("getPrice", async (request) => {
let url = 'https://deep-index.moralis.io/api/v2/erc20/0xd448068f8c73a7f64bfddbc17204afbbd7b3f80a/price?chain=bsc&providerUrl=https%3A%2F%2Fspeedy-nodes-nyc.moralis.io%2F6bf2df218b520e7ea408af3b%2Fbsc%2Fmainnet&exchange=pancakeswap'
logger.info(url);
  return Moralis.Cloud.httpRequest({
    url: url,
    params: {chain: "bsc", chain_name: "mainnet"},
    headers: {
      'accept': 'application/json',
      'X-API-key': 'LqjTTWPKzCz.......Nw9pH'
    }
  }).then( function(httpResponse){
    return httpResponse.data;
  }, function(httpResponse){
    logger.info("error");
    logger.info(httpResponse);
  })
});

main.js

Moralis.initialize("5JNM9X1Nq8ciDngst2pNBUrSoThG5a7jBPYUvrZM"); // Application id from moralis.io
Moralis.serverURL = "https://xsmb9wqekxnl.moralishost.com:2053/server"; //Server url from moralis.io

async function getPrice() {
    let address = document.getElementById("address").value;
    console.log(adresse);
    let price = await Moralis.cloud.run("getPrice", {address: address});
    let ethPrice = (price.nativePrice.value / (8**price.nativePrice.decimals)) + "BNB"
    let usdPrice = price.usdPrice + " USD"
    document.getElementById("BNB_price").innerHTML = BNBPrice;
    document.getElementById("usd_price").innerHTML = usdPrice;
    console.log(price);
    }
    document.getElementById("text").addEventListener(getPrice);

Html

<head>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
</head>

<body>
<div class="pricess">
<h1>Price</h1>
<div id="price">
  <div id="BNB_price">bnb</div>
  <div id="usd_price">usd</div>
  </div>
  </div>
  <script type="text/javascript" src="./main.js"></script>
</body>

I would just like the price of the token to be visible on the page and update regularly for example every minute or with every transaction, it doesn’t matter.
Thanks again.

Moralis Cli error
#2

instead of that you could use:

price = await Moralis.Web3API.token.getTokenPrice({address: “0xe9e7cea3dedca5984780bafc599bd69add087d56”, chain: “bsc”})

#3

Thanks for the answer but I have the same problem.
The concern comes from the fact that I am in localhost?

#4

You can use it on localhost

I don’t see in your code that BNBPrice was declared.

Also I suggest you to check values ethPrice and usdPrice using console.log()

#5

here it looks to be a typo for address variable

#6

Can you integrate your comments into my code so that it works please?

#7

Where is the fault please?

#8

Sorry to disturb you…

#9

it isn’t something important here, it should be console.log(address);

#10

@Jeande, you can use browser console to see what errors you have when that code executes
you can also use console.log to see how the data looks like, for example:
instead of:

    let price = await Moralis.cloud.run("getPrice", {address: address});
    let ethPrice = (price.nativePrice.value / (8**price.nativePrice.decimals)) + "BNB"
    let usdPrice = price.usdPrice + " USD"
    document.getElementById("BNB_price").innerHTML = BNBPrice;
    document.getElementById("usd_price").innerHTML = usdPrice;
    console.log(price);

you can use:

    let price = await Moralis.cloud.run("getPrice", {address: address});
    console.log(price);
    let ethPrice = (price.nativePrice.value / (8**price.nativePrice.decimals)) + "BNB"
    console.log(ethPrice)
    let usdPrice = price.usdPrice + " USD"
    console.log(usdPrice)
    document.getElementById("BNB_price").innerHTML = ethPrice;
    document.getElementById("usd_price").innerHTML = usdPrice;
#11

Thanks a lot for the help.
So here is the code and the error in the console.

Moralis.initialize("5JNM9X1Nq8ciDngst2pNBUrSoThG5a7jBPYUvrZM"); // Application id from moralis.io
Moralis.serverURL = "https://xsmb9wqekxnl.moralishost.com:2053/server"; //Server url from moralis.io

async function getPrice() {
    let address = document.getElementById("address").value;
    console.log(adresse);
    let price = await Moralis.cloud.run("getPrice", {address: address});
    console.log(price);
    let ethPrice = (price.nativePrice.value / (8**price.nativePrice.decimals)) + "BNB"
    console.log(ethPrice)
    let usdPrice = price.usdPrice + " USD"
    console.log(usdPrice)
    document.getElementById("BNB_price").innerHTML = ethPrice;
    document.getElementById("usd_price").innerHTML = usdPrice;
}
#12

How did you get to that manifest.json?
I don’t see any manifest.json in your html code

#13

working main.js version:

Moralis.initialize("5JNM9X1Nq8ciDngst2pNBUrSoThG5a7jBPYUvrZM"); // Application id from moralis.io
Moralis.serverURL = "https://xsmb9wqekxnl.moralishost.com:2053/server"; //Server url from moralis.io

async function getPrice() {
    price = await Moralis.Web3API.token.getTokenPrice({address: "0xe9e7cea3dedca5984780bafc599bd69add087d56", chain: "bsc"})
    console.log(price);
    let ethPrice = (price.nativePrice.value / (8**price.nativePrice.decimals)) + "BNB"
    console.log(ethPrice)
    let usdPrice = price.usdPrice + " USD"
    console.log(usdPrice)
    document.getElementById("BNB_price").innerHTML = ethPrice;
    document.getElementById("usd_price").innerHTML = usdPrice;
}

you’ll have to write getPrice() in browser console and hit enter to see updates in html

#14

Thanks again for your help but still no price displayed.

Here is the current code:

Html:

<head>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://npmcdn.com/moralis@latest/dist/moralis.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
</head>
<body>
<div class="pricess">
<h1>Price</h1>
<div id="price">
  <div id="BNB_price">bnb</div>
  <div id="usd_price">usd</div>
  </div>
  </div>
  <script type="text/javascript" src="./main.js"></script>
</body>

main.js:

Moralis.initialize("5JNM9X1Nq8ciDngst2pNBUrSoThG5a7jBPYUvrZM"); // Application id from moralis.io
Moralis.serverURL = "https://xsmb9wqekxnl.moralishost.com:2053/server"; //Server url from moralis.io

async function getPrice() {
    price = await Moralis.Web3API.token.getTokenPrice({address: "0xe9e7cea3dedca5984780bafc599bd69add087d56", chain: "bsc"})
    console.log(price);
    let ethPrice = (price.nativePrice.value / (8**price.nativePrice.decimals)) + "BNB"
    console.log(ethPrice)
    let usdPrice = price.usdPrice + " USD"
    console.log(usdPrice)
    document.getElementById("BNB_price").innerHTML = ethPrice;
    document.getElementById("usd_price").innerHTML = usdPrice;
}
#15

did you also do this part?

#16

Thank you if I do this in the console, magic, I have the prices but if I refresh the page I no longer have the prices.

#17

yes, how could you call that function automatically when you refresh the page?

#18

Yes so that the price is visible for each visitor to the site.

#19

if you don’t find a better option, you could use this in main.js:

Moralis.initialize("5JNM9X1Nq8ciDngst2pNBUrSoThG5a7jBPYUvrZM"); // Application id from moralis.io
Moralis.serverURL = "https://xsmb9wqekxnl.moralishost.com:2053/server"; //Server url from moralis.io

async function getPrice() {
    price = await Moralis.Web3API.token.getTokenPrice({address: "0xe9e7cea3dedca5984780bafc599bd69add087d56", chain: "bsc"})
    console.log(price);
    let ethPrice = (price.nativePrice.value / (8**price.nativePrice.decimals)) + "BNB"
    console.log(ethPrice)
    let usdPrice = price.usdPrice + " USD"
    console.log(usdPrice)
    document.getElementById("BNB_price").innerHTML = ethPrice;
    document.getElementById("usd_price").innerHTML = usdPrice;
}
getPrice();
#20

You are a hero, thank you very much for your help and thank you for taking the time to help a newbie like me.
I hope this post will be useful to other beginners like me.
Thanks again.