[react-moralis] understanding of Moralis in a React project

[nadtn]

Hi Mages!
I’m working (and learning) on the Zerion Clone, trying to add some features… So here is a reminder of the structure:
!
So in App.js we have:

const APP_ID = process.env.REACT_APP_MORALIS_APPLICATION_ID;
const SERVER_URL = process.env.REACT_APP_MORALIS_SERVER_URL;

function App() {
  return (
    <MoralisProvider appId={APP_ID} serverUrl={SERVER_URL}>
      <ThemeProvider theme={theme}>
        <MainLayout />
      </ThemeProvider>
    </MoralisProvider>
  );
}

We have the auth in Login.jsx
I’m working on Assets.jsx to display NFTs from matic so I added:

import { useMoralis } from "react-moralis";

export default function Assets() {

  const { Moralis, user, isAuthenticated } = useMoralis();

  async function getNFT(){

    const options = { 
        chain: 'matic',
        address: user.attributes.ethAddress 
    };
    const polygonNFTs = await Moralis.Web3.getNFTs(options);
    if (!isAuthenticated) {
    console.log(polygonNFTs);
  }
  else {
    console.log("not connected");
  }
}

I didn’t get the the NFTs so I figured out it’s because I wasn’t authenticated (having “not connected” in console).
Why is that? Did the authentication in Login.jsx, can’t I use that in all the project?

[Yomoo]

Hi @nadtn

Instead of importing Moralis from useMoralis() use new syntax:

GitHub - MoralisWeb3/react-moralis: Hooks and components to use Moralis in a... - useMoralisWeb3Api()

Also I suggest you to wrap this function to useeffect because it takes time to initialize user:

import { useMoralis } from "react-moralis";
import { useEffect } from 'react';

export default function Assets() {

  const { Moralis, user, isAuthenticated } = useMoralis();
  
  useEffect(() => {
    if (isAuthenticated) {
      getNFT();
    }
    else {
      console.log("not connected");
    }
  }, [isAuthenticated])

  async function getNFT(){
    const options = { 
        chain: 'matic',
        address: user.attributes.ethAddress 
    };
    const polygonNFTs = await Moralis.Web3.getNFTs(options);
    console.log(polygonNFTs);
  }
}

[nadtn]

Thanks @Yomoo!
Now I’m sure I’m connected but I still don’t get the NFT I have in the console.
I’ve seen in the previous posts:
https://forum.moralis.io/t/getnfts-not-working-with-react-moralis/997/3
https://forum.moralis.io/t/getnfts-does-not-return-nft-tokens-for-a-erc721-token/535/6
Looks like a version issue, my server is 0.0.260 and my moralis packages are

"moralis": "0.0.21",
"react": "^17.0.2",
"react-dom": "^17.0.2",
 "react-moralis": "^0.1.9",

How do I update my packages? (npm update moralis & npm update moralis-react doesn’t seem to work) Hope it won’t affect the rest of the project but whatever I’ll fix it.

[nadtn]

guess it’s

“moralis”: “^0.0.44”,
“react-moralis”: “^0.2.2”

since it worked

if someone has the same issue:
cmd : npm update moralis --force
npm update react-moralis --force
after changing the versions in package.json

[malik]

When there’s a big difference between the versions, I usually uninstall and install both packages (installing moralis before react-moralis). This way I get the latest packages without any dependency issues.