ERC-20 Dapp (Solidity & React)

Step 1: In this exercise, we will create an Ethereum Dapp, Coda Swap (Solidity Smart Contract + Node JS backend + HTML & CSS) that exchanges ETH for custom token (CODA) and vice versa. We will be using hardhat to deploy the smart contract on a local Ganache blockchain. We will then use Node + HTML + JS , to build a web app that can interact with the deployed smart contract.

Step 2: First step is to create a hardhat project. Normally, we can use 'npx hardhat' command to create a hardhat project with new hardhat.config.js file. But in this case, we will be using a pre-created hardhat project.

Step 3: Clone already created hardhat project from github repo.

Step 4: Switch to 'VS Code' and check the cloned 'solidity-nodejs-ERC20-dapp' directory. You will be able to see 'coda-swap-smart-contact' and 'webapp' directories. In this the first directory is related to the smart contract and hardhat and last one is related to our app's UI.

Step 5: Open the 'coda-swap-smart-contract' directory and then open the smart contract written in solidity language in 'contracts' folder. The smart contract has 4 methods 1.sendETHForTokens() to get tokens for ethereum. 2. checkTokenBalance() to get the CODA token balance. 3. transferTokens() to transfer CODA tokens from one address to another. 4. getEthBack() to get Ether back by giving tokens.

Step 6: Before running hardhat, we will have to install all the dependencies. This can be done using 'npm install' command. In terminal, from the 'coda-swap-smart-contract' directory, run the command.

Step 7: Compile the hardhat source code to generate byte code. This can be done using 'npx hardhat compile' command. Run the compilation command.

Step 8: open a new terminal and run Ganache to start a local blockchain. Ganache is a personal blockchain for Ethereum development that can be used to deploy contracts, develop applications, and run tests.

Step 9: Let Ganache run in the current tab and Open a new terminal tab to proceed with the next steps.

Step 10: In this case, we have already added private keys of first account (accounts[0]) provided by Ganache to 'hardhat.config.js' file. This will be used to deploy the Smart contract to Ganache blockchain. We will have to change this with appropriate private keys if we want to deploy it on public Testnets or Mainnet.

Step 11: We are now ready to deploy this contract. Switch to 'scripts' folder. deploy.js is the deployment script written in Javascript which will deploy the smart contract using the hardhat configuration.

Step 12: Switch to terminal and run deployment script to deploy the smart contract on 'ganache' network.

Step 13: A successful deployment will generate a contract address which will be printed in the terminal, keep it safe because we will need it in future steps. It will also create a new file called 'Token.json' in the 'artifacts/contracts' folder. This file contains the ABI for the deployed smart contract.

Step 14: Contract is deployed and we can interact with it. Now, let's proceed to create a Node + HTML project to build a web app that can interact with the deployed smart contract.

Step 15: At this point, the next step is to create a node project using 'npm init' command. But, we already have the project files in the cloned repo. So, we will be using that.

Step 16: Change the project directory to 'webapp'.

Step 17: Let's start our node js server. Make sure to run this command in 'webapp' directory.

Step 18: Launch local app server. This will serve the web app over port 3000. Keep this command running in the terminal and use new terminal tab for next steps.

Step 19: Switch to 'localhost:3000' tab, press 'Go' button. If you are facing issues and seeing a warning in a browser regarding 'Embedded page not allowed', then please use the provided button to access this link in a new browser tab. Then, you should be able to see the webapp page.

Step 20: The webapp contains code to interact with the deployed smart contract. However, we wil have to make some changes for it to work.

Step 21: Switch to VS Code and check 'script.js' in 'webapp/public' directory. This is the main app file. Replace the Contract address 'contractAddress' and contract ABI 'contractABI' present in this file with the contract address acquired in the previous steps.

Step 22: As we will be using Metamask to interact with the smart contract, we will need to add our local Ganache network to Metamask. To do so, click on the provided button. This will take you through the process of adding a custom RPC to Metamask.

Step 23: Now, we need to add an address to Metamask which has some test Ether. Click on Account section of Metamask and select 'Import Account'.

Step 24: Enter the private key of the second account (accounts[1]) provided by Ganache. This will import the account to Metamask. This account has 100 test Ether.

Step 25: Initially the page will show balance as 0 CODA tokens. However, you can exchange any amount in Ethers with CODA tokens, enter any amount in ETH(e.g., 10) in the text field and press the 'Send ETH for Tokens' button. Metamask will initiate a transaction to the smart contract. You'll need to click the 'Confirm' button to authorize the transaction and proceed with the token exchange.

Step 26: After the transaction is confirmed, refresh the page, you will observe that the balance changes to 100000000000000000000 CODA will be displayed on the page in front of balance.

Step 27: Now we will transfer some coda tokens to some other account. You can use the given address(or take any form the ganache-cli terminal) and paste in the recipient address input box. After that fill the number of tokens to transfer and then click on Transfer Tokens button. Metamask will initiate a transaction to the smart contract. You'll need to click the 'Confirm' button to authorize the transaction and proceed with the token transfer.

Step 28: After the transaction is confirmed, you can check the balance at your Receiver's address to confirm the token transfer. Just paste the address int the 'Enter Ethereum Address' box and click on the 'Check Address balance' button to observe it's balance. You can also check balance for other addresses.

Step 28: We can also exchange our tokens to get back some percentage of Ethers. To do so enter the amount in CODA tokens that we need to exchange and then click on 'Get ETH Back' button.

Step 29: We leaned how to interact develop, deploy a Solidity Smart Contract on Ganache blockchain and created a UI for it and interacted through the UI.