[SOLVED] Display BSC Contract Info

derekryansnzy · October 4, 2021, 5:34am

The BSC contract function that I am calling returns a bunch of data combined…in hindsight, we probably should’ve just made events for all of them. Is there any way to break them apart and display them on the frontend using Moralis and Web3?

The function is called viewRewardsAndLiqudityInfo
and these are the lines that are returned on BSC Scan:

budsAccumulationFromRewardsFee|uint256 : 357403654000000000
sumOfAllHOLDRBalances|uint256 : 12578631093100000000
theCurrentRewardsCycle|uint256 : 2
lengthOfRewardsCycle|uint256 : 604800
budsAccumulationFromLiquidityFee|uint256 : 205507100800000000
lastTimeDividendsWereReleased|uint256 : 0
dividendsClaimableNow|uint256 : 0
dividendsLeftFromReservedSupplyForHOLDRs|uint256 : 176689800000000000000

Is there a way for me to break them apart and display them by lines on the frontend?

cryptokid · October 3, 2021, 8:26pm

can you also paste the link to bsc scan from where you got this result?

derekryansnzy · October 3, 2021, 8:27pm

Sorry, I forgot to add that in!

cryptokid · October 3, 2021, 8:42pm

let contractAbi = [{"inputs":[],"name":"viewRewardsAndLiquidityInfo","outputs":[{"internalType":"uint256","name":"budsAccumulationFromRewardsFee","type":"uint256"},{"internalType":"uint256","name":"sumOfAllHOLDRBalances","type":"uint256"},{"internalType":"uint256","name":"theCurrentRewardsCycle","type":"uint256"},{"internalType":"uint256","name":"lengthOfRewardsCycle","type":"uint256"},{"internalType":"uint256","name":"budsAccumulationFromLiquidityFee","type":"uint256"},{"internalType":"uint256","name":"lastTimeDividendsWereReleased","type":"uint256"},{"internalType":"uint256","name":"dividendsClaimableNow","type":"uint256"},{"internalType":"uint256","name":"dividendsLeftFromReservedSupplyForHOLDRs","type":"uint256"}],"stateMutability":"view","type":"function"}];
const options = {
  contractAddress: "0x058cdF0fF70f19629D4F50faC03610302e746e58",
  functionName: "viewRewardsAndLiquidityInfo",
  abi: contractAbi,
};
x = await Moralis.executeFunction(options)

=>

budsAccumulationFromLiquidityFee: "205507100800000000"
budsAccumulationFromRewardsFee: "357403654000000000"
dividendsClaimableNow: "0"
dividendsLeftFromReservedSupplyForHOLDRs: "176689800000000000000"
lastTimeDividendsWereReleased: "0"
lengthOfRewardsCycle: "604800"
sumOfAllHOLDRBalances: "12578631093100000000"
theCurrentRewardsCycle: "2"

derekryansnzy · October 3, 2021, 8:45pm

Ah, so if I just modify the output, I can break down the information bit by bit and have them displayed on the frontend? Dude, you need a tip jar lol

cryptokid · October 3, 2021, 8:58pm

you can access that info directly with x.budsAccumulationFromRewardsFee for example => '357403654000000000'

derekryansnzy · October 3, 2021, 9:11pm

I tried a few times to paste codes directly into VS Code, but any time I do that, I get an error in the console
For example, I copied your code:

let contractAbi = [{"inputs":[],"name":"viewRewardsAndLiquidityInfo","outputs":[{"internalType":"uint256","name":"budsAccumulationFromRewardsFee","type":"uint256"},{"internalType":"uint256","name":"sumOfAllHOLDRBalances","type":"uint256"},{"internalType":"uint256","name":"theCurrentRewardsCycle","type":"uint256"},{"internalType":"uint256","name":"lengthOfRewardsCycle","type":"uint256"},{"internalType":"uint256","name":"budsAccumulationFromLiquidityFee","type":"uint256"},{"internalType":"uint256","name":"lastTimeDividendsWereReleased","type":"uint256"},{"internalType":"uint256","name":"dividendsClaimableNow","type":"uint256"},{"internalType":"uint256","name":"dividendsLeftFromReservedSupplyForHOLDRs","type":"uint256"}],"stateMutability":"view","type":"function"}];
const options = {
  contractAddress: "0x058cdF0fF70f19629D4F50faC03610302e746e58",
  functionName: "viewRewardsAndLiquidityInfo",
  abi: contractAbi,
};
x = await Moralis.executeFunction(options)

Console error: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules.

So then I tried to make it into an async function:

async function totalRewards(){
    let contractAbi = [{"inputs":[],
    "name":"viewRewardsAndLiquidityInfo",
    "outputs":[
        {"internalType":"uint256","name":"budsAccumulationFromRewardsFee","type":"uint256"},
        {"internalType":"uint256","name":"sumOfAllHOLDRBalances","type":"uint256"},
        {"internalType":"uint256","name":"theCurrentRewardsCycle","type":"uint256"},
        {"internalType":"uint256","name":"lengthOfRewardsCycle","type":"uint256"},
        {"internalType":"uint256","name":"budsAccumulationFromLiquidityFee","type":"uint256"},
        {"internalType":"uint256","name":"lastTimeDividendsWereReleased","type":"uint256"},
        {"internalType":"uint256","name":"dividendsClaimableNow","type":"uint256"},
        {"internalType":"uint256","name":"dividendsLeftFromReservedSupplyForHOLDRs","type":"uint256"}
        ],"stateMutability":"view","type":"function"}];
    const options = {
    contractAddress: "0x058cdF0fF70f19629D4F50faC03610302e746e58",
    functionName: "viewRewardsAndLiquidityInfo",
    abi: contractAbi,
    };  
    x = await Moralis.executeFunction(options)
}

And I went to the console, I typed in await Moralis.executeFunction (options)
and I get console error: Uncaught ReferenceError: options is not defined
at :1:31

Sorry if I’m making newbie mistakes lol I’ve been trying to piece together info from this forum and docs to get what I want done.

cryptokid · October 3, 2021, 9:38pm

you have to be on bsc network in metamaks and you also have to use latest Moralis SDK version.

for me it worked fine by pasting that code directly in browser console

derekryansnzy · October 3, 2021, 9:44pm

I have this line in my html file:
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

Is that what you mean by latest SDK version? I double checked and made sure to change my Metamask back to BSC network. Earlier when I was testing other Moralis codes, I had changed networks. But once I switched back to BSC, it still shows “options not defined.”

Thanks for your patience in helping me figure this out!

derekryansnzy · October 3, 2021, 9:49pm

derekryansnzy:

let contractAbi = [{"inputs":[],"name":"viewRewardsAndLiquidityInfo","outputs":[{"internalType":"uint256","name":"budsAccumulationFromRewardsFee","type":"uint256"},{"internalType":"uint256","name":"sumOfAllHOLDRBalances","type":"uint256"},{"internalType":"uint256","name":"theCurrentRewardsCycle","type":"uint256"},{"internalType":"uint256","name":"lengthOfRewardsCycle","type":"uint256"},{"internalType":"uint256","name":"budsAccumulationFromLiquidityFee","type":"uint256"},{"internalType":"uint256","name":"lastTimeDividendsWereReleased","type":"uint256"},{"internalType":"uint256","name":"dividendsClaimableNow","type":"uint256"},{"internalType":"uint256","name":"dividendsLeftFromReservedSupplyForHOLDRs","type":"uint256"}],"stateMutability":"view","type":"function"}];
const options = {
  contractAddress: "0x058cdF0fF70f19629D4F50faC03610302e746e58",
  functionName: "viewRewardsAndLiquidityInfo",
  abi: contractAbi,
};
x = await Moralis.executeFunction(options)

I pasted this code directly into the web console and I get the error:
Uncaught Error: Missing web3 instance, make sure to call Moralis.enable() or Moralis.authenticate()

I tried using const web3 = await Moralis.enable(); at the very top of my main.js file, then I get the error about await must be in async…etc

I think maybe it’s the SDK version you were talking about, but I’m so confused on what I’m supposed to do to be on the latest version?

cryptokid · October 3, 2021, 9:53pm

you have the right Moralis SDK version

cryptokid · October 3, 2021, 9:56pm

you can also add this line: web3 = await Moralis.enable();
I tested in a page that was already doing this.

derekryansnzy · October 3, 2021, 9:59pm

Is there a way that I can set up a page that has the web3 enabled line to cover the whole page? whenever I put the line const web3 = await Moralis.enable(); by itself in the js file, console shows an error of “await must be inside async function”

cryptokid · October 3, 2021, 10:02pm

this works:

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script>
async function totalRewards(){
    web3 = await Moralis.enable();
    let contractAbi = [{"inputs":[],
    "name":"viewRewardsAndLiquidityInfo",
    "outputs":[
        {"internalType":"uint256","name":"budsAccumulationFromRewardsFee","type":"uint256"},
        {"internalType":"uint256","name":"sumOfAllHOLDRBalances","type":"uint256"},
        {"internalType":"uint256","name":"theCurrentRewardsCycle","type":"uint256"},
        {"internalType":"uint256","name":"lengthOfRewardsCycle","type":"uint256"},
        {"internalType":"uint256","name":"budsAccumulationFromLiquidityFee","type":"uint256"},
        {"internalType":"uint256","name":"lastTimeDividendsWereReleased","type":"uint256"},
        {"internalType":"uint256","name":"dividendsClaimableNow","type":"uint256"},
        {"internalType":"uint256","name":"dividendsLeftFromReservedSupplyForHOLDRs","type":"uint256"}
        ],"stateMutability":"view","type":"function"}];
    const options = {
    contractAddress: "0x058cdF0fF70f19629D4F50faC03610302e746e58",
    functionName: "viewRewardsAndLiquidityInfo",
    abi: contractAbi,
    };  
    x = await Moralis.executeFunction(options)
    return x;
}             
  x = totalRewards()
  x.then(
        function(value) {console.log(value);},
        function(error) {console.log(error);}
      );
    </script>
</body>
</html>

derekryansnzy · October 4, 2021, 4:01am

Thanks for your help on that! I managed to get it into the frontend html file as well.
Now I have a new issue lol…

I tried using these codes to test out getting BNB balance as well as all bep20 tokens, and they worked.

async function userBNB(){
// get BSC native balance for a given address
const optionsBNB = { chain: "bsc"};
const balance = await Moralis.Web3API.account.getNativeBalance(optionsBNB);
console.log(balance)
}

async function userBudsBalance(){
    const chainOptions = { chain: 'bsc' }
    const balances = await Moralis.Web3API.account.getTokenBalances(chainOptions);
    console.log(balances);
}

But I saw this snippet in the forum:

And so I attempted to add to my code:

async function userBudsBalance(){
    const chainOptions = { chain: 'bsc', address: "0xa...96eE1" } // used an address that has a bunch of bep20 tokens
    const balances = await Moralis.Web3API.account.getTokenBalances(chainOptions);
    //const tokenAddress =  "0x720b40cd711df11e62dfd0c88797da100d5f09e6"; // 420 Contract Address
    //const tokenAddress =  "0x058cdF0fF70f19629D4F50faC03610302e746e58"; // Buds Contract Address
    //const tokenBalance = balance.find((token) => token.token_address === tokenAddress);
    console.log(balances);
}

I tried it with two different token’s contract addresses, because I don’t currently have Buds in the wallet, but I do have 420 tokens. In both cases, I got a console error that “balance is not defined” and it was pointing to the line const tokenBalance. I also tried replacing token with the token name but it didn’t work. Maybe it’s because 420 Token has a space in the name and I don’t know how to properly format it for javascript to read. Or maybe I’m just completely missing something, like I usually do lol. Any help I can get from you would be amazing! By the way, are you on Github? I am planning on using the dapp I code for my token project to use, I’d like to credit you somehow. Really grateful for all your help.

cryptokid · October 4, 2021, 5:34am

it looks like you used balance.find instead of balances.find.

derekryansnzy · October 4, 2021, 3:38pm

So console.log shows the balances fine for BNB & the specific token. I tried them using these codes:

BNB:

async function userBNB(){
// get BSC native balance for a given address
const optionsBNB = { chain: "bsc"};
const balance = await Moralis.Web3API.account.getNativeBalance(optionsBNB);
console.log(balance)
return balance;
}

/* I'm not actually sure if I need this section below, but I just did it
because you previously helped me with another set of codes and they worked. */

const balance = userBNB()

    balance.then(
        function(value) {console.log(value);},
        function(error) {console.log(error);}
    );

Specific Token, in this case 420 Token

async function userBudsBalance(){
    const chainOptions = { chain: 'bsc', address: "0xaF88...96eE1" }
    const balances = await Moralis.Web3API.account.getTokenBalances(chainOptions);
    const tokenAddress =  "0x720b40cd711df11e62dfd0c88797da100d5f09e6"; // 420 Contract Address
    // const tokenAddress =  "0x058cdF0fF70f19629D4F50faC03610302e746e58"; // Buds Contract Address
    const tokenBalance = balances.find((token) => token.token_address === tokenAddress);
    console.log(tokenBalance.balance); // I changed the log so it'd only show the balance
    return tokenBalance.balance;
}

const tokenBalance = userBudsBalance()

    tokenBalance.then(
        function(value) {console.log(value);},
        function(error) {console.log(error);}
      );

Then I tried to get it to show up in the frontend html:

document.getElementById("budsBalance").innerHTML = tokenBalance.balance;

and I got the error undefined. I’ve tried other options like balance, userBNB, userBudsBalance, they came back undefined or just shows the entire function on the frontend.

please help lol and thank you for your patience

cryptokid · October 4, 2021, 3:48pm

maybe this works for you:

const tokenBalance = userBudsBalance()

    tokenBalance.then(
        function(value) {
               console.log(value);
               document.getElementById("budsBalance").innerHTML = value;},
        function(error) {console.log(error);}
      );

derekryansnzy · October 4, 2021, 3:57pm

You sir, are a rock star! Thank you!

moshiachnow · October 17, 2021, 12:49pm

funny that none of the video tutorials had this line, I ahd the same error and I tyhink this will fix it (let’s see…)