Resources/examples to build a front end for an ERC20 contract using React?

Support
1

@abcoathup do you by chance know if there are any good resources/examples to build out a front end for this ERC20 contract using React?

1 Like
2

Hi @crypto_economics,

You could try @PaulRBerg’s:

Alternatively you could look at:

2 Likes
3

Thanks for the shill, Andrew!

@crypto_economics, Create Eth App is exactly what you need. It shows how to integrate an ERC20 contract (the one written by OpenZeppelin) into the frontend code base and how to call it via ethers.js.

Just make sure you have yarn installed and run this command:

yarn create eth-app my-eth-app --framework react

As a bonus, if you want to build a frontend app on top of an existing DeFi protocol like Uniswap, you can do this:

yarn create eth-app my-eth-app --framework react --template uniswap

See a list of all available templates here.

Happy coding!

3 Likes
4

hi Paul,

Thank you for reaching out. I am new to coding and just need to build a very simple front end based on a simple contract like this:

contract MyToken is ERC20, Pausable, Ownable {
constructor(string memory _name, string memory _symbol) ERC20(_name, _symbol) public {
_mint(msg.sender, 1000);

How do i even get started with your repo to build some simple functions on a front end?

Regards,

Luke

1 Like
5

You need to make a distinction between frontend and backend code. Create Eth App lets you build your frontend app with either React or Vue, so that’s the frontend part. Whereas the backend in Ethereum are contracts. To code smart contracts, you may want to use a development environment like Hardhat or Truffle. You then compile your contract in there, grab the ABI from the “artifacts” folder, and finally paste that in the frontend repo you bootstrapped with Create Eth App.

2 Likes
6

Hi Paull. I have built my backend - a simple ERC20 contract, run tests, and deployed to testnet using Truffle. I now need to build front end for this ERC20 token with simple functionality using React. I have grabbed the ABI and copied to the frontend repo. I am not sure how to write the code (functions and logic) then run yarn - local 3000. It would be great if there were some step by step instructions for a beginner like me.

Luke

1 Like
7

Haven’t you run the command I shared above? Let me rewrite it again:

yarn create eth-app my-eth-app

Then, read the README files in the generated project. There is one at the root, and then there is one in the “react-app” package. The configs and scripts are thoroughly documented. Furthermore, you can read about yarn workspaces and Create React App (we’re using these under the hood).

For general programming questions, refer to StackOverflow. For general Ethereum-related questions, refer to Ethereum StackExchange.

2 Likes
8

Ok wil give that a shot. thank you.

Luke

1 Like
9

Do you happen to know if there are any resources for sample front end code for a simple ERC20 token? something like this: https://www.preciouschicken.com/blog/posts/openzeppelin-erc20-using-ethers-truffle-and-react/

Luke

1 Like
10

Yes, running this command:

yarn create eth-app my-eth-app

Will give you a sample frontend code for a simple ERC20 token.

2 Likes
11

That would be so helpful thank you so much.

Question: under the “Contracts” section i should be replacing 1) abis (ERC20.json, Ownablle.json), 2) abis.js, and 3) addresses.js. with the content from my contracts, yes?

Luke

1 Like
12

You don’t need to replace them if you want to build a frontend for a “simple ER20 contract”. ERC20.json is already the ABI for the ERC20 contract written by OpenZeppelin.

At any rate, after you bootstrapped the app with Create Eth App, it’s totally up to you what you do.

2 Likes
13

Ok. I will try and run/interact with the default code first. Eventually, I have to upload my ERC20 contract and create a front end for that.

This is awesome. Thank you sooooo much for your help!

2 Likes
14

Hi Paul,

I have managed to install my-eth-app successfully. What I need help with now is building a front end that allows me to:

  • Sign transactions that change a deployed contract’s state using MetaMask

  • Reflect the successful state change in the UI

contract MyToken is ERC20, Pausable, Ownable {
constructor(string memory _name, string memory _symbol) ERC20(_name, _symbol) public {
_mint(msg.sender, 1000);

Thank you so much!

Luke

1 Like
15

These are very generic questions that I’m afraid are outside the scope of the OpenZeppelin forum.

Please read about ethers.js and refer to the Ethereum StackExchange.

1 Like
16

Hi Paul,

Thank you. Are you still able to send me some sample code? Sorry to bother you, but, it would be a great help to me.

Luke

1 Like
17

Hi @crypto_economics,

I suggest having a play with create-eth-app. Try changing the network and the address of the ERC20 being used. Add additional information to display, such as token name, symbol and total supply.

18

hi @abcoathup yes, am trying that now. :face_with_head_bandage:

1 Like
19

@abcoathup do you have any advice on how to add a “buy” function? I want to let a user buy with their metamask wallet balance by paying ropsten testnet eth which would return ERC20 (MyToken).

1 Like
20

Hi @crypto_economics,

You could extend a Crowdsale contract from OpenZeppelin Contracts 2.x:

Please note, Crowdsales were removed in OpenZeppelin Contracts 3.x:

You could then add the contract to the app to call buyTokens function.

For anyone thinking of creating a token I suggest reading: Points to consider when creating a fungible token (ERC20, ERC777)