Passing a current users wallet into the getnfts options

Login with Metamask

//connect to Moralis server Moralis.initialize("lRCkcYjDbFtpxYwnA4un13UtUi7RqBfVtyjx5g0n"); // Application id from moralis.io Moralis.serverURL = "https://kprjvwm59njt.moralisweb3.com:2053/server"; //Server url from moralis.io //Display login button and let user login async function login(){ console.log("login clicked"); var user = await Moralis.Web3.authenticate(); //wait for user to authenticate if(user){ console.log(user); //print user to console } // get NFTs for current user on Mainnet async function getNFTs(){ const options = { chain: 'eth', address: 'ethereum.selectedAddress' }; const nfts = await Moralis.Web3API.account.getNFTs(options); console.log(nfts) } nfts.forEach(function(nfts){ let url = fixURL(nft.token_uri); fetch(url) .then(response => response.json()) .then(data => { $("content").html($("content").html()+"

"+data.name+"/h2"); $("content").html($("content").html()+"

"+data.description+"

"); $("#content").html($("#content").html()+""); }); }) } function fixURL(url){ if(url.startsWith("ipfs")){ return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://ipfs/").slice(-1)[0]; } else{ return url+"?format=json" } } getNFTs()

I guess that you want something similar to this code from this post: How To Get User NFTs? All NFTs Owned by Address - @Ivan on Tech Explains

He just pulls nfts from a wallet address in this video. He does not pass the current users information into the options. I can get that part of the code to work and the part where the user logs in and it gets the nfts. However when I add the ethereum.selectedAddress in the options the getNFTs functions doesnt seem to work.

That example to get nfts was with an older version of Moralis SDK, after you update to the latest version of the sdk (0.0.36) you can use https://docs.moralis.io/moralis-server/web3-sdk/account#getnfts

// get NFTs for current user on Mainnet
const userEthNFTs = await Moralis.Web3API.account.getNFTs();

// get testnet NFTs for user
const testnetNFTs = await Moralis.Web3API.account.getNFTs({ chain: 'ropsten' });

// get polygon NFTs for address
const options = { chain: 'matic', address: '0x...' };
const polygonNFTs = await Moralis.Web3API.account.getNFTs(options);

and in this case by default it will use current address if no address parameter is given.

You’ll also have to update Moralis server to latest version.

1 Like

I restarted my moralis server and updated the api. However, when I take the options part out of the getNFTs function I receive an error. Here is a picture of the error

code:

//connect to Moralis server

Moralis.initialize("lRCkcYjDbFtpxYwnA4un13UtUi7RqBfVtyjx5g0n"); // Application id from moralis.io

Moralis.serverURL = "https://kprjvwm59njt.moralisweb3.com:2053/server"; //Server url from moralis.io

//Display login button and let user login

async function login(){

  console.log("login clicked");

  var user = await Moralis.Web3.authenticate(); //wait for user to authenticate

  if(user){

    console.log(user); //print user to console

  }

    // get NFTs for current user on Mainnet

    async function getNFTs(){

     // const options = { chain: 'eth', address: 'ethereum.selectedAddress' };

      const nfts = await Moralis.Web3API.account.getNFTs();

    console.log(nfts)

    }

    

    nfts.forEach(function(nfts){

      let url = fixURL(nft.token_uri);

      fetch(url)

      .then(response => response.json())

      .then(data => {

          $("content").html($("content").html()+"<h2>"+data.name+"/h2");

          $("content").html($("content").html()+"<h3>"+data.description+"</h3>");

          $("#content").html($("#content").html()+"<img src='"+fixURL2(data.image)+"'></img>");

      });

})

  }

function fixURL(url){

  if(url.startsWith("ipfs")){

    return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://ipfs/").slice(-1)[0];

  }

  else{

    return url+"?format=json"

  }

}

getNFTs()

Hi,
At first look it looks like this code nfts.forEach(function(nfts){ is not inside getNFTs function, so when it will get executed nfts variable will not be defined because getNFTs function was not called.

Alright, I think I get what you are saying. I was getting the error for the line getNFTs at the end of the code(it is now commented out.) This is now moved above the nfts.forEach(function(nfts){ This made the error go away but nothing displays after login. I also moved the end bracket } for the async function getNFT(){ to the end of the code. Is this where getNFTs should be moved too?

//Display login button and let user login

async function login(){

  console.log("login clicked");

  var user = await Moralis.Web3.authenticate(); //wait for user to authenticate

  if(user){

    console.log(user); //print user to console

  }

    // get NFTs for current user on Mainnet

    async function getNFTs(){

     // const options = { chain: 'eth', address: 'ethereum.selectedAddress' };

      const nfts = await Moralis.Web3API.account.getNFTs();

    console.log(nfts)

    //}

    

    getNFTs(

    nfts.forEach(function(nfts){

      let url = fixURL(nft.token_uri);

      fetch(url)

      .then(response => response.json())

      .then(data => {

          $("content").html($("content").html()+"<h2>"+data.name+"/h2");

          $("content").html($("content").html()+"<h3>"+data.description+"</h3>");

          $("#content").html($("#content").html()+"<img src='"+fixURL2(data.image)+"'></img>");

      

      });

    })

    )}

function fixURL(url){

  if(url.startsWith("ipfs")){

    return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://ipfs/").slice(-1)[0];

  }

  else{

    return url+"?format=json"

  }

}

}

// getNFTs()

This was an working example of what you want to do: How To Get User NFTs? All NFTs Owned by Address - @Ivan on Tech Explains

I have been able to get that example to work where you look at the NFTs of a certain wallet. I am trying to make the application get the wallet adress from the current user that is logged in. However when I dont pass any options into the getNFTs part of const nfts = await Moralis.Web3API.account.getNFTs(); I get an error at the end of the script for the getNFTS(). In the video you show here Ivan put the getNFTs at the end of the code.

What is the error that you get?

Uncaught ReferenceError: getnfts is not defined
at riews.html:61 (line 61 is at the end of the code when getNFTs() is called)

Here is the code.

async function getNFTs(){

         // const options = { chain: 'eth', address: 'ethereum.selectedAddress' };

          const nfts = await Moralis.Web3API.account.getNFTs();

        console.log(nfts)

                        

        nfts.forEach(function(nfts){

          let url = fixURL(nft.token_uri);

          fetch(url)

          .then(response => response.json())

          .then(data => {

              $("content").html($("content").html()+"<h2>"+data.name+"/h2");

              $("content").html($("content").html()+"<h3>"+data.description+"</h3>");

              $("#content").html($("#content").html()+"<img src='"+fixURL2(data.image)+"'></img>");

          

          });

        })

        }

    function fixURL(url){

      if(url.startsWith("ipfs")){

        return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://ipfs/").slice(-1)[0];

      }

      else{

        return url+"?format=json"

      }

    }

  }

    getNFTs()

Hi @areed15,

I tried running the same exact code with a user logged in, the API called happened successfully.

Make sure -

  1. You are keeping the cloud server updated,
  2. Have the latest version of the SDK
  3. Make sure to initialise the Moralis instance at the beginning successfully. (you haven’t showed your initialisation here in the code, maybe that’s the issue over here.
  4. Also, make sure to authenticate the user before running the getNFT query (another reason why your current logged in account might not be able to fetch but other addresses are)

Hope this helps.

1 Like

Thank you for the help Malik. I really apprecaite you helping me Let me post more of the code so you have a better idea of what is going on.

  1. I updated this yesterday, so I believe this was done.
  2. I believe const nfts = await Moralis.Web3API.account.getNFTs(); is the latest version of the SDK. Correct me if I am wrong.
  3. I think this is done? Check my code and let me know.
  4. What do you mean authenticate the user before running getNFT? Why does it work with other adresses? New hear so an explination would help.
<title>Smart Contract</title>

Login with Metamask

Code didnt copy right. I had to delete carrots off the front of a few lines to make it copy correctly. So it may look a little funny.

script src=“https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js”>

script src=“https://unpkg.com/moralis/dist/moralis.js”>

script src=".jquery.com/jquery-3.6.0.min.js">

Do these links look right? I took the http off the front of the third link because I can only post 2 links.

Links look ok to me.
Moralis.Web3API.account.getNFTs(); gets the address from current authenticated user as you don’t give it an address as a parameter.

Thanks for checking that cryptokid. How do you authenticate a user that is signing in? Here is the code I am using to log the user in.

script>

//connect to Moralis server

Moralis.initialize("lRCkcYjDbFtpxYwnA4un13UtUi7RqBfVtyjx5g0n"); // Application id from moralis.io

Moralis.serverURL = "https://kprjvwm59njt.moralisweb3.com:2053/server"; //Server url from moralis.io

//Display login button and let user login

async function login(){

  console.log("login clicked");

  var user = await Moralis.Web3.authenticate(); //wait for user to authenticate

  if(user){

    console.log(user); //print user to console

  }

    // get NFTs for current user on Mainnet

    async function getNFTs(){

     // const options = { chain: 'eth', address: 'ethereum.selectedAddress' };

      const nfts = await Moralis.Web3API.account.getNFTs();

    console.log(nfts)

                    

    nfts.forEach(function(nfts){

      let url = fixURL(nft.token_uri);

      fetch(url)

      .then(response => response.json())

      .then(data => {

          $("content").html($("content").html()+"<h2>"+data.name+"/h2");

          $("content").html($("content").html()+"<h3>"+data.description+"</h3>");

          $("#content").html($("#content").html()+"<img src='"+fixURL2(data.image)+"'></img>");

      

      });

    })

    }

function fixURL(url){

  if(url.startsWith("ipfs")){

    return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://ipfs/").slice(-1)[0];

  }

  else{

    return url+"?format=json"

  }

}

}

getNFTs()

Looking at this code I have the impression that login function doesn’t have it’s ending } before a new getNFTs function starts to get defined.

A user is logged in when the login function gets executed

That definitely solved some of the problems. However now I am getting this error. From line 39: nfts.forEach(function(nfts){ Here is the error message:

riews.html:39 Uncaught (in promise) TypeError: nfts.forEach is not a function
at getNFTs (riews.html:39)

I tried adding a } after the getNFTs function but that just led me to getting the error below.

riews.html:39 Uncaught ReferenceError: nfts is not defined
at riews.html:39

1 Like

you can try to look at this example: How To Get User NFTs? All NFTs Owned by Address - @Ivan on Tech Explains

1 Like