I recently joined Edge & Node<\/a> as a Developer Relations Engineer and have been diving deeper into smart contract development with Ethereum. I have settled upon what I think is the best stack for building full stack dApps with Solidity:<\/p>\n\n\n\n But I ran into a problem while figuring all this out. While there’s fairly good documentation out there for each of these tools individually, there’s not a lot that helps you put them all together and understand how they work with each other.<\/p>\n\n\n\n There are some really good boilerplates out there like scaffold-eth<\/a> (which also includes Ethers, Hardhat, and The Graph), but they may be too much to pick up for people just getting started.<\/p>\n\n\n\n I wanted an end-to-end guide to show me how to build full stack Ethereum apps using the most up-to-date resources, libraries, and tooling.<\/p>\n\n\n\n Here’s what I was interested in:<\/p>\n\n\n\n After spending some time figuring all of this out, I finally got going with the stack that I felt really happy with. Then I thought it would be nice to write up how to build and test a full stack Ethereum app using this stack.<\/p>\n\n\n\n I hope this guide will be useful not only for other people out there who may be interested in this stack, but also for myself for future reference. This is that reference.<\/p>\n\n\n\n Let’s go over the main pieces we will be using and how they fit into the stack.<\/p>\n\n\n\n When building smart contracts, you will need a way to deploy your contracts, run tests, and debug Solidity code without dealing with live environments.<\/p>\n\n\n\n You will also need a way to compile your Solidity code into code that can be run in a client-side application \u2013 in our case, a React app. We’ll learn more about how this works a little later.<\/p>\n\n\n\n Hardhat is an Ethereum development environment and framework designed for full stack development, and it’s the framework that I will be using for this tutorial.<\/p>\n\n\n\n Other similar tools in the ecosystem are Ganache<\/a> and Truffle<\/a>.<\/p>\n\n\n\n In our React app, we will need a way to interact with the smart contracts that have been deployed. We will need a way to read for data as well as send new transactions.<\/p>\n\n\n\n ethers.js<\/a> aims to be a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem from client-side JavaScript applications like React, Vue, Angular, or Svelte. It is the library we’ll be using.<\/p>\n\n\n\n Another popular option in the ecosystem is web3.js<\/a><\/p>\n\n\n\n Metamask<\/a> helps you handle account management and connecting the current user to the blockchain. MetaMask enables users to manage their accounts and keys in a few different ways while isolating them from the site context.<\/p>\n\n\n\n Once a user has connected their MetaMask wallet, you as a developer can interact with the globally available Ethereum API ( React is a front end JavaScript library for building web applications, user interfaces, and UI components. It’s maintained by Facebook and many individual developers and companies.<\/p>\n\n\n\n React and its large ecosystem of metaframeworks like Next.js<\/a>, Gatsby<\/a>, Redwood<\/a>, Blitz.js<\/a>, and others enable all types of deployment targets including traditional SPAs, static site generators, server-side rendering, and a combination of all three.<\/p>\n\n\n\n React continues to seemingly dominate the front-end space, and I think will continue to do so for the near future and possibly beyond.<\/p>\n\n\n\n For most apps built on blockchains like Ethereum, it’s hard and time-intensive to read data directly from the chain. So in the past, you’d see people and companies building their own centralized indexing server and serving API requests from these servers. This requires a lot of engineering and hardware resources and breaks the security properties required for decentralization.<\/p>\n\n\n\n The Graph is an indexing protocol for querying blockchain data that lets you create fully decentralized applications. It solves this problem by exposing a rich GraphQL query layer that apps can consume.<\/p>\n\n\n\n In this guide we won’t be building a subgraph for our app, but will do so in a future tutorial.<\/p>\n\n\n\n In this tutorial, we’ll be building, deploying, and connecting to a couple of basic smart contracts:<\/p>\n\n\n\n We will also build out a React front end that will allow a user to:<\/p>\n\n\n\n You do not need to own any Ethereum for this guide as we will be using fake \/ test Ether on a test network for the entire tutorial.<\/p>\n\n\n\n To get started, we’ll create a new React application:<\/p>\n\n\n\n Next, change into the new directory and install Next, initialize a new Ethereum Development Environment with Hardhat:<\/p>\n\n\n\n Now you should see the following artifacts created for you in your root directory:<\/p>\n\n\n\n Because of a MetaMask configuration issue<\/a>, we need to update the chain ID on our HardHat configuration to be 1337<\/strong>. We also need to update the location of the artifacts<\/a> for our compiled contracts so they’re in the src<\/strong> directory of our React app.<\/p>\n\n\n\n To make these updates, open hardhat.config.js<\/strong> and update the Next, let’s have a look at the example contract we have at contracts\/Greeter.sol<\/strong>:<\/p>\n\n\n\n This is a very basic smart contract. When deployed, it sets a Greeting variable and exposes a function ( It also exposes a function that allows a user to update the greeting ( Let’s make one small modification to the smart contract. Since we set the solidity version of our compiler to There are two ways to interact with a smart contract \u2013 reading or writing \/ transactions. In our contract, When writing or initializing a transaction, you have to pay for the transaction to be written to the blockchain. To make this work, you need to pay gas<\/a> which is the fee or price required to successfully conduct a transaction and execute a contract on the Ethereum blockchain.<\/p>\n\n\n\n As long as you are only reading from the blockchain and not changing or updating anything, you don’t need to carry out a transaction and there will be no gas or cost to do so. The function you call is then carried out only by the node you are connected to, so you don’t need to pay any gas and the read is free.<\/p>\n\n\n\n From our React app, we will interact with the smart contract using a combination of the What is an ABI? ABI stands for application binary interface. You can think of it as the interface between your client-side application and the Ethereum blockchain where the smart contract you are going to be interacting with is deployed.<\/p>\n\n\n\n ABIs are typically compiled from Solidity smart contracts by a development framework like Hardhat. You can also often find the ABIs for a smart contract on Etherscan<\/a><\/p>\n\n\n\n Now that we have gone over the basic smart contract and know what ABIs are, let’s compile an ABI for our project.<\/p>\n\n\n\n To do so, go to the command line and run the following command:<\/p>\n\n\n\n Now, you should see a new folder named artifacts<\/strong> in the src<\/strong> directory. The artifacts\/contracts\/Greeter.json<\/strong> file contains the ABI as one of the properties. When we need to use the ABI, we can import it from our JavaScript file:<\/p>\n\n\n\n We can then reference the ABI like this:<\/p>\n\n\n\n Note that Ethers.js also enables human readable ABIs<\/a>, but will will not be going into this during this tutorial.<\/p><\/blockquote>\n\n\n\n Next, let’s deploy our smart contract to a local blockchain so that we can test it out.<\/p>\n\n\n\n To deploy to the local network, you first need to start the local test node. To do so, open the CLI and run the following command:<\/p>\n\n\n\n When we run this command, you should see a list of addresses and private keys.<\/p>\n\n\n\n These are 20 test accounts and addresses created for us that we can use to deploy and test our smart contracts. Each account is also loaded up with 10,000 fake Ether. In a moment, we’ll learn how to import the test account into MetaMask so that we can use it.<\/p>\n\n\n\n Next, we need to deploy the contract to the test network. First update the name of scripts\/sample-script.js<\/strong> to scripts\/deploy.js<\/strong>.<\/p>\n\n\n\n Now we can run the deploy script and give a flag to the CLI that we would like to deploy to our local network:<\/p>\n\n\n\n Once this script is executed, the smart contract should be deployed to the local test network and we should be then able to start interacting with it.<\/p>\n\n\n\n When the contract was deployed, it used the first account that was created when we started the local network.<\/p><\/blockquote>\n\n\n\n If you look at the output from the CLI, you should be able to see something like this:<\/p>\n\n\n\n This address is what we will use in our client application to talk to the smart contract. Keep this address available as we will need to use it when connecting to it from the client application.<\/p>\n\n\n\n To send transactions to the smart contract, we will need to connect our MetaMask wallet using one of the accounts created when we ran We can import this account into MetaMask in order to start using some of the fake Eth available there. To do so, first open MetaMask and update the network to be Localhost 8545:<\/p>\n\n\n\n Next, in MetaMask click on Import Account<\/strong> from the accounts menu:<\/p>\n\n\n\n Copy then paste one of the Private Keys<\/strong> logged out by the CLI and click Import<\/strong>. Once the account is imported, you should see the Eth in the account:<\/p>\n\n\n\n Now that we have a deployed our smart contract and set up our account, we can start interacting with it from the React app.<\/p>\n\n\n\n In this tutorial we are not going to be worrying about building a beautiful UI with CSS and all of that \u2013 we are focused 100% on the core functionality to get you up and running. From there, you can take it and make it look good if you’d like.<\/p>\n\n\n\n With that being said, let’s review the two objectives that we want from our React application:<\/p>\n\n\n\n So how do we accomplish this? Here are the things we need to do to make this happen:<\/p>\n\n\n\n To do this, open To test it out, start the React server:<\/p>\n\n\n\n When the app loads, you should be able to fetch the current greeting and log it out to the console. You should also be able to make updates to the greeting by signing the contract with your MetaMask wallet and spending the fake Ether.<\/p>\n\n\n\n There are several Ethereum test networks like Ropsten, Rinkeby, or Kovan that we can also deploy to in order to have a publicly accessible version of our contract available without having to deploy it to mainnet.<\/p>\n\n\n\n In this tutorial we’ll be deploying to the Ropsten<\/strong> test network.<\/p>\n\n\n\n To start off, first update your MetaMask wallet to connect to the Ropsten network.<\/p>\n\n\n\n Next, send yourself some test Ether to use during the rest of this tutorial by visiting this test faucet<\/a>.<\/p>\n\n\n\n We can get access to Ropsten (or any of the other test networks) by signing up with a service like Infura<\/a> or Alchemy<\/a> (I’m using Infura for this tutorial).<\/p>\n\n\n\n Once you’ve created the app in Infura or Alchemy, you will be given an endpoint that looks something like this:<\/p>\n\n\n\n Be sure to set the ALLOWLIST ETHEREUM ADDRESSES<\/strong> in the Infura or Alchemy app configuration to include the wallet address of the account you will be deploying from.<\/p>\n\n\n\n To deploy to the test network we need to update our Hardhat config with some additional network information. One of the things we need to set is the private key of the wallet we will be deploying from.<\/p>\n\n\n\n To get the private key, you can export it from MetaMask.<\/p>\n\n\n\n I’d suggest not hardcoding this value in your app but instead setting it as something like an environment variable.<\/p><\/blockquote>\n\n\n\n Next, add a To deploy, run the following script:<\/p>\n\n\n\n Once your contract is deployed you should be able to start interacting with it. You should be now able to view the live contract on Etherscan Ropsten Testnet Explorer<\/a><\/p>\n\n\n\n One of the most common use cases of smart contracts is creating tokens. Let’s look at how we can do that. Since we know a little more about how all of this works, we’ll be going a little faster.<\/p>\n\n\n\n In the main contracts<\/strong> directory, create a new file named Token.sol<\/strong>.<\/p>\n\n\n\n Next, update Token.sol<\/strong> with the following smart contract:<\/p>\n\n\n\n Note that this token contract is for demo purposes only and is not ERC20<\/a>-compliant. We will be covering ERC20 tokens later.<\/p><\/blockquote>\n\n\n\n This contract will create a new token called “Nader Dabit Token” and set the supply to 1000000.<\/p>\n\n\n\n Next, compile this contract:<\/p>\n\n\n\n Now, update the deploy script at scripts\/deploy.js<\/strong> to include this new Token contract:<\/p>\n\n\n\n Now, we can deploy this new contract to the local or Ropsten network:<\/p>\n\n\n\n Once the contract is deployed, you can start sending these tokens to other addresses.<\/p>\n\n\n\n To do so, let’s update the client code we will need in order to make this work:<\/p>\n\n\n\n Next, run the app:<\/p>\n\n\n\n We should be able to click on Get Balance<\/strong> and see that we have 1,000,000 coins in our account logged out to the console.<\/p>\n\n\n\n You should also be able to view them in MetaMask by clicking on Add Token<\/strong>:<\/p>\n\n\n\n Next click on Custom Token<\/strong> and enter the token contract address and then Add Token<\/strong>. Now the tokens should be available in your wallet:<\/p>\n\n\n\n Next, let’s try to send those coins to another address.<\/p>\n\n\n\n To do so, copy the address of another account and send them to that address using the updated React UI. When you check the token amount, it should be equal to the original amount minus the amount you sent to the address.<\/p>\n\n\n\n The ERC20 Token Standard<\/a> defines a set of rules that apply to all ERC20 tokens which allow them to easily interact with each other. ERC20 makes it really easy for someone to mint their own tokens that will have interoperability with others on the Ethereum blockchain.<\/p>\n\n\n\n Let’s look at how we can build our own token using the ERC20 standard.<\/p>\n\n\n\n First, install the OpenZepplin<\/a> smart contract library where we will be importing the base Next, we’ll create our token by extending (or inheriting from) the The constructor allows you to set the token name and symbol, and the By default, ERC20 sets the number of decimals to 18, so in our To deploy, we need to pass in the constructor values ( By extending the original ERC20 token, your token will inherit all of the following functions and functionality:<\/p>\n\n\n\n Once deployed, you can use any of these functions to interact with the new smart contract. For another example of an ERC20 token, check out Solidity by example here: https:\/\/solidity-by-example.org\/app\/erc20\/<\/a>.<\/p>\n\n\n\n Ok, we covered a lot in this article. But for me this is kind of the bread and butter \/ core of getting started with this stack.<\/p>\n\n\n\n It’s kind of what I wanted to have, not only as someone who was learning all of this stuff, but also in the future if I ever need to reference anything I may need. I hope you learned a lot.<\/p>\n\n\n\n If you want to support multiple wallets in addition to MetaMask, check out Web3Modal<\/a> which makes it easy to implement support for multiple providers in your app with a fairly simple and customizable configuration.<\/p>\n\n\n\n In my future tutorials and guides, I’ll be diving into more complex smart contract development and also how to deploy them as subgraphs<\/a> to expose a GraphQL API on top of them and implement things like pagination and full text search.<\/p>\n\n\n\n I’ll also be going into how to use technologies like IPFS and Web3 databases to store data in a decentralized way.<\/p>\n\n\n\n In this article, you’ll learn how to build full stack dApps with React, Ethers.js, Solidity, and Hardhat.<\/p>\n\n\n\n You can find the code for this project here<\/a>. The video course for this tutorial is here<\/a>.<\/p>\n\n\n\n I recently joined Edge & Node<\/a> as a Developer Relations Engineer and have been diving deeper into smart contract development with Ethereum. I have settled upon what I think is the best stack for building full stack dApps with Solidity:<\/p>\n\n\n\n But I ran into a problem while figuring all this out. While there’s fairly good documentation out there for each of these tools individually, there’s not a lot that helps you put them all together and understand how they work with each other.<\/p>\n\n\n\n There are some really good boilerplates out there like scaffold-eth<\/a> (which also includes Ethers, Hardhat, and The Graph), but they may be too much to pick up for people just getting started.<\/p>\n\n\n\n I wanted an end-to-end guide to show me how to build full stack Ethereum apps using the most up-to-date resources, libraries, and tooling.<\/p>\n\n\n\n Here’s what I was interested in:<\/p>\n\n\n\nThe Tech We’ll Be Using<\/h2>\n\n\n\n
1. Ethereum development environment<\/h3>\n\n\n\n
2. Ethereum Web Client Library<\/h3>\n\n\n\n
3. Metamask<\/h3>\n\n\n\n
window.ethereum<\/code>) that identifies the users of web3-compatible browsers (like MetaMask users). Whenever you request a transaction signature, MetaMask will prompt the user in a comprehensible way.<\/p>\n\n\n\n4. React<\/h3>\n\n\n\n
5. The Graph<\/h3>\n\n\n\n
What we will be building<\/h2>\n\n\n\n
Prerequisites<\/h3>\n\n\n\n
How to get started with create-react-app<\/h2>\n\n\n\n
npx create-react-app react-dapp\n<\/code><\/pre>\n\n\n\nethers.js<\/code><\/a> and hardhat<\/code><\/a> using either NPM<\/strong> or Yarn<\/strong>:<\/p>\n\n\n\nnpm install ethers hardhat @nomiclabs\/hardhat-waffle ethereum-waffle chai @nomiclabs\/hardhat-ethers\n<\/code><\/pre>\n\n\n\nHow to Install and Configure an Ethereum Development Environment<\/h2>\n\n\n\n
npx hardhat\n\n? What do you want to do? Create a sample project\n? Hardhat project root: <Choose default path>\n<\/code><\/pre>\n\n\n\nmodule.exports<\/code> to look like this:<\/p>\n\n\n\nmodule.exports = {\n solidity: \"0.8.3\",\n paths: {\n artifacts: '.\/src\/artifacts',\n },\n networks: {\n hardhat: {\n chainId: 1337\n }\n }\n};\n<\/code><\/pre>\n\n\n\nOur smart contract<\/h2>\n\n\n\n
\/\/SPDX-License-Identifier: MIT\npragma solidity ^0.7.0;\n\nimport \"hardhat\/console.sol\";\n\n\ncontract Greeter {\n string greeting;\n\n constructor(string memory _greeting) {\n console.log(\"Deploying a Greeter with greeting:\", _greeting);\n greeting = _greeting;\n }\n\n function greet() public view returns (string memory) {\n return greeting;\n }\n\n function setGreeting(string memory _greeting) public {\n console.log(\"Changing greeting from '%s' to '%s'\", greeting, _greeting);\n greeting = _greeting;\n }\n}\n<\/code><\/pre>\n\n\n\ngreet<\/code>) that can be called to return the greeting.<\/p>\n\n\n\nsetGreeting<\/code>). When deployed to the Ethereum blockchain, these methods will be available for a user to interact with.<\/p>\n\n\n\n0.8.3<\/code> in hardhat.config.js<\/strong>, let’s also be sure to update our contract to use the same version of solidity:<\/p>\n\n\n\n\/\/ contracts\/Greeter.sol\npragma solidity ^0.8.3;\n<\/code><\/pre>\n\n\n\nHow to Read and Write to the Ethereum Blockchain<\/h3>\n\n\n\n
greet<\/code> can be considered reading, and setGreeting<\/code> can be considered writing \/ transactional.<\/p>\n\n\n\nethers.js<\/code> library, the contract address, and the ABI<\/a> that will be created from the contract by Hardhat.<\/p>\n\n\n\nHow to Compile the ABI<\/h3>\n\n\n\n
npx hardhat compile\n<\/code><\/pre>\n\n\n\nimport Greeter from '.\/artifacts\/contracts\/Greeter.sol\/Greeter.json'\n<\/code><\/pre>\n\n\n\nconsole.log(\"Greeter ABI: \", Greeter.abi)\n<\/code><\/pre>\n\n\n\nHow to Deploy and Use a Local Network \/ Blockchain<\/h3>\n\n\n\n
npx hardhat node\n<\/code><\/pre>\n\n\n\n![\"Hardhat](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/e176nc82ik77hei3a48s.jpg\")
<\/figure>\n\n\n\nnpx hardhat run scripts\/deploy.js --network localhost\n<\/code><\/pre>\n\n\n\nGreeter deployed to: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0\n<\/code><\/pre>\n\n\n\nnpx hardhat node<\/code>. In the list of contracts that the CLI logs out, you should see both an Account number<\/strong> as well as a Private Key<\/strong>:<\/p>\n\n\n\n\u279c react-defi-stack git:(main) npx hardhat node\nStarted HTTP and WebSocket JSON-RPC server at http:\/\/127.0.0.1:8545\/\n\nAccounts\n========\nAccount #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)\nPrivate Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80\n\n...\n<\/code><\/pre>\n\n\n\n![\"MetaMask](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/qnbsbcm4y1md6cwjttpx.jpg\")
<\/figure>\n\n\n\n![\"Import](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/n7vbzlov869gwk9rtwl1.jpg\")
<\/figure>\n\n\n\n![\"Imported](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/x5lob4yug3jznhy9z0qt.jpg\")
<\/figure>\n\n\n\nHow to Connect the React Client<\/h3>\n\n\n\n
greeting<\/code> from the smart contract<\/li>greeting<\/code><\/li><\/ol>\n\n\n\ngreeting<\/code>)<\/li>src\/App.js<\/code> and update it with the following code, setting the value of greeterAddress<\/code> to the address of your smart contract:<\/p>\n\n\n\nimport '.\/App.css';\nimport { useState } from 'react';\nimport { ethers } from 'ethers'\nimport Greeter from '.\/artifacts\/contracts\/Greeter.sol\/Greeter.json'\n\n\/\/ Update with the contract address logged out to the CLI when it was deployed \nconst greeterAddress = \"your-contract-address\"\n\nfunction App() {\n \/\/ store greeting in local state\n const [greeting, setGreetingValue] = useState()\n\n \/\/ request access to the user's MetaMask account\n async function requestAccount() {\n await window.ethereum.request({ method: 'eth_requestAccounts' });\n }\n\n \/\/ call the smart contract, read the current greeting value\n async function fetchGreeting() {\n if (typeof window.ethereum !== 'undefined') {\n const provider = new ethers.providers.Web3Provider(window.ethereum)\n const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)\n try {\n const data = await contract.greet()\n console.log('data: ', data)\n } catch (err) {\n console.log(\"Error: \", err)\n }\n } \n }\n\n \/\/ call the smart contract, send an update\n async function setGreeting() {\n if (!greeting) return\n if (typeof window.ethereum !== 'undefined') {\n await requestAccount()\n const provider = new ethers.providers.Web3Provider(window.ethereum);\n const signer = provider.getSigner()\n const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)\n const transaction = await contract.setGreeting(greeting)\n await transaction.wait()\n fetchGreeting()\n }\n }\n\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <button onClick={fetchGreeting}>Fetch Greeting<\/button>\n <button onClick={setGreeting}>Set Greeting<\/button>\n <input onChange={e => setGreetingValue(e.target.value)} placeholder=\"Set greeting\" \/>\n <\/header>\n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\nnpm start\n<\/code><\/pre>\n\n\n\n![\"Setting](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/9a57jbzrwylr2l0rujxm.png\")
<\/figure>\n\n\n\nHow to Deploy and Use a Live Test Network<\/h3>\n\n\n\n
![\"Ropsten](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/k85gplgp26wp58l95bhr.jpg\")
<\/figure>\n\n\n\nhttps://ropsten.infura.io\/v3\/your-project-id\n<\/code><\/pre>\n\n\n\n![\"Export](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/deod3d6qix8us12t17i4.jpg\")
<\/figure>\n\n\n\nnetworks<\/code> property with the following configuration:<\/p>\n\n\n\nmodule.exports = {\n defaultNetwork: \"hardhat\",\n paths: {\n artifacts: '.\/src\/artifacts',\n },\n networks: {\n hardhat: {},\n ropsten: {\n url: \"https:\/\/ropsten.infura.io\/v3\/your-project-id\",\n accounts: [`0x${your-private-key}`]\n }\n },\n solidity: \"0.7.3\",\n};\n<\/code><\/pre>\n\n\n\nnpx hardhat run scripts\/deploy.js --network ropsten\n<\/code><\/pre>\n\n\n\nHow to Mint Tokens<\/h2>\n\n\n\n
\/\/SPDX-License-Identifier: MIT\npragma solidity ^0.8.3;\n\nimport \"hardhat\/console.sol\";\n\ncontract Token {\n string public name = \"Nader Dabit Token\";\n string public symbol = \"NDT\";\n uint public totalSupply = 1000000;\n mapping(address => uint) balances;\n\n constructor() {\n balances[msg.sender] = totalSupply;\n }\n\n function transfer(address to, uint amount) external {\n require(balances[msg.sender] >= amount, \"Not enough tokens\");\n balances[msg.sender] -= amount;\n balances[to] += amount;\n }\n\n function balanceOf(address account) external view returns (uint) {\n return balances[account];\n }\n}\n<\/code><\/pre>\n\n\n\nnpx hardhat compile\n<\/code><\/pre>\n\n\n\nconst hre = require(\"hardhat\");\n\nasync function main() {\n const [deployer] = await hre.ethers.getSigners();\n\n console.log(\n \"Deploying contracts with the account:\",\n deployer.address\n );\n \n const Greeter = await hre.ethers.getContractFactory(\"Greeter\");\n const greeter = await Greeter.deploy(\"Hello, World!\");\n\n const Token = await hre.ethers.getContractFactory(\"Token\");\n const token = await Token.deploy();\n \n await greeter.deployed();\n await token.deployed();\n\n console.log(\"Greeter deployed to:\", greeter.address);\n console.log(\"Token deployed to:\", token.address);\n}\n\nmain()\n .then(() => process.exit(0))\n .catch(error => {\n console.error(error);\n process.exit(1);\n });\n<\/code><\/pre>\n\n\n\nnpx hardhat run scripts\/deploy.js --network localhost\n<\/code><\/pre>\n\n\n\nimport '.\/App.css';\nimport { useState } from 'react';\nimport { ethers } from 'ethers'\nimport Greeter from '.\/artifacts\/contracts\/Greeter.sol\/Greeter.json'\nimport Token from '.\/artifacts\/contracts\/Token.sol\/Token.json'\n\nconst greeterAddress = \"your-contract-address\"\nconst tokenAddress = \"your-contract-address\"\n\nfunction App() {\n const [greeting, setGreetingValue] = useState()\n const [userAccount, setUserAccount] = useState()\n const [amount, setAmount] = useState()\n\n async function requestAccount() {\n await window.ethereum.request({ method: 'eth_requestAccounts' });\n }\n\n async function fetchGreeting() {\n if (typeof window.ethereum !== 'undefined') {\n const provider = new ethers.providers.Web3Provider(window.ethereum)\n console.log({ provider })\n const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)\n try {\n const data = await contract.greet()\n console.log('data: ', data)\n } catch (err) {\n console.log(\"Error: \", err)\n }\n } \n }\n\n async function getBalance() {\n if (typeof window.ethereum !== 'undefined') {\n const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' })\n const provider = new ethers.providers.Web3Provider(window.ethereum);\n const contract = new ethers.Contract(tokenAddress, Token.abi, provider)\n const balance = await contract.balanceOf(account);\n console.log(\"Balance: \", balance.toString());\n }\n }\n\n async function setGreeting() {\n if (!greeting) return\n if (typeof window.ethereum !== 'undefined') {\n await requestAccount()\n const provider = new ethers.providers.Web3Provider(window.ethereum);\n console.log({ provider })\n const signer = provider.getSigner()\n const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)\n const transaction = await contract.setGreeting(greeting)\n await transaction.wait()\n fetchGreeting()\n }\n }\n\n async function sendCoins() {\n if (typeof window.ethereum !== 'undefined') {\n await requestAccount()\n const provider = new ethers.providers.Web3Provider(window.ethereum);\n const signer = provider.getSigner();\n const contract = new ethers.Contract(tokenAddress, Token.abi, signer);\n const transation = await contract.transfer(userAccount, amount);\n await transation.wait();\n console.log(`${amount} Coins successfully sent to ${userAccount}`);\n }\n }\n\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <button onClick={fetchGreeting}>Fetch Greeting<\/button>\n <button onClick={setGreeting}>Set Greeting<\/button>\n <input onChange={e => setGreetingValue(e.target.value)} placeholder=\"Set greeting\" \/>\n\n <br \/>\n <button onClick={getBalance}>Get Balance<\/button>\n <button onClick={sendCoins}>Send Coins<\/button>\n <input onChange={e => setUserAccount(e.target.value)} placeholder=\"Account ID\" \/>\n <input onChange={e => setAmount(e.target.value)} placeholder=\"Amount\" \/>\n <\/header>\n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\nnpm start\n<\/code><\/pre>\n\n\n\n![\"Add](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/0t2ip26i5d2ltjc9j2a6.jpg\")
<\/figure>\n\n\n\n![\"NDT\"\/](\"https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/5op32iqbeszizri72qc0.jpg\")
<\/figure>\n\n\n\nHow to Build An ERC20 Token<\/h2>\n\n\n\n
ERC20<\/code> Token:<\/p>\n\n\n\nnpm install @openzeppelin\/contracts\n<\/code><\/pre>\n\n\n\nERC20<\/code> contract:<\/p>\n\n\n\n\/\/SPDX-License-Identifier: MIT\npragma solidity ^0.8.3;\n\nimport \"@openzeppelin\/contracts\/token\/ERC20\/ERC20.sol\";\n\ncontract NDToken is ERC20 {\n constructor(string memory name, string memory symbol) ERC20(name, symbol) {\n _mint(msg.sender, 100000 * (10 ** 18));\n }\n}\n<\/code><\/pre>\n\n\n\n_mint<\/code> function allows you to mint the tokens and set the amount.<\/p>\n\n\n\n_mint<\/code> function we multiply 100,000 by 10 to the 18 power to mint a total of 100,000 tokens, each with 18 decimal places (similarly to how 1 Eth is made up of 10 to the 18 wei<\/a>.<\/p>\n\n\n\nname<\/code> and symbol<\/code>), so we might do something like this in our deploy script:<\/p>\n\n\n\nconst NDToken = await hre.ethers.getContractFactory(\"NDToken\");\nconst ndToken = await NDToken.deploy(\"Nader Dabit Token\", \"NDT\");\n<\/code><\/pre>\n\n\n\nfunction name() public view returns (string)\nfunction symbol() public view returns (string)\nfunction decimals() public view returns (uint8)\nfunction totalSupply() public view returns (uint256)\nfunction balanceOf(address _owner) public view returns (uint256 balance)\nfunction transfer(address _to, uint256 _value) public returns (bool success)\nfunction transferFrom(address _from, address _to, uint256 _value) public returns (bool success)\nfunction approve(address _spender, uint256 _value) public returns (bool success)\nfunction allowance(address _owner, address _spender) public view returns (uint256 remaining)\n<\/code><\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n