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

Hi Mages!
Iā€™m working (and learning) on the Zerion Clone, trying to add some featuresā€¦ So here is a reminder of the structure:
Capture dā€™eĢcran 2021-09-18 aĢ€ 16.40.40 !
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?

Hi @nadtn

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

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);
  }
}
1 Like

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.

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

1 Like

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.

1 Like