React + Moralis, simple example

I need a simple and functioning example of a React application which will:

  1. authenticate a user
  2. mint an NFT
  3. …using the latest version of Moralis

I know how to do some of those things individually, but not as a whole, and not in a React application.
And since the version 1.x, there’ve been breaking changes for which there’re no examples, but for some parts only.

can you share the code that you have now?

did you look on ethereum-boilerplate code (https://github.com/ethereum-boilerplate/ethereum-boilerplate )?

what problems you have now, for authentication or for minting the NFT?

for minting NFT it may depend on what code you used before

this thread may also help: Moralis JS SDK v1.0 (migration to Ethers.js)

react documentation: https://github.com/MoralisWeb3/react-moralis
and the main documentation:
https://docs.moralis.io/moralis-dapp/connect-the-sdk/connect-with-react#4.-authenticate-user
https://docs.moralis.io/moralis-dapp/web3/web3#example-of-calling-a-write-contract-method

1 Like

I can’t share the code because it’s under NDA.

Yes. And?

It’s not the first time that you guys reply me as: “look at that piece here”, and “at that piece there”, and “one other there”. And documentation. And glue them together.

HOW?

The documentation doesn’t cover all the cases. It’s “a bit here”, “a bit there”. But there’s no complete picture.

I need a complete functioning simple example.


The ethereum-boilerplate may help, but it’s a not simple example

===>

you can add snippets of code from your code, and post what error you have

did you try this: https://docs.moralis.io/moralis-dapp/connect-the-sdk/connect-with-react#4.-authenticate-user

I don’t have errors per ser because I don’t even know HOW to glue them together.

Yes.

Once again: I know how to implement all those things individually, and in a pure html-js project.
But I don’t know how to glue them together, especially in a React project.

I need a simple and functioning example of a React application which will:

authenticate a user
mint an NFT
…using the latest version of Moralis

Is there any or not?

I don’t know of one that meets that exact criteria. Maybe someone else can help you.

Here is a simple one coined from the Ethereum boilerplate. You can check either on Rinkeby or Mumbai network.Here is the Repository Link, And a Live Preview

2 Likes

Thanks


text text text text

To run it locally, I’ve created .env file:

REACT_APP_MORALIS_APPLICATION_ID = "<value>"
REACT_APP_MORALIS_SERVER_URL = "<value>"

The application will run, but when I click the buttons, “mint NFT” or “moralis file” – nothing will happen at all

What could be an issue?

In Chrome - the same thing.

Although I’ve added an .env file myself, an example of .env file in the project is missing. Therefore, besides those 2 variables, is there anything else in it required?

Actually, https://simple-mint.vercel.app/quickstart no longer works either - it won’t mint an NFT. Yesterday it did.

It’s working fine as I just checked. You can check the console for any error

I’ve posted console above - no errors.

You can try the site on Mumbai if rinkeby doesn’t seem to work

Now it works again, with 5 pending transactions.

Pending transaction will be confirmed as it depends on the network.