React + Moralis, simple example

Moralis General
#1

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.

#2

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
#3

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

===>

Screenshot_2022-04-21_09-55-25
Screenshot_2022-04-21_09-55-251296Ɨ529 90.3 KB

#4

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

#5

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?

#6

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

#7

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
#8

Thanks

text text text text

#9

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?

#10

Screenshot_2022-04-22_10-54-53
Screenshot_2022-04-22_10-54-531359Ɨ575 84.2 KB

#11

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.

#12

image
image828Ɨ1792 88.1 KB
image
image828Ɨ1792 130 KB

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

#13

Iā€™ve posted console above - no errors.

#14

You can try the site on Mumbai if rinkeby doesnā€™t seem to work

#15

Now it works again, with 5 pending transactions.

#16

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