How to Sell Coupons on ETH? A Sample Solidity dApp with React and Truffle (1/4) : Yassin Mahmud Abdul Quddus

Reader
December 04, 2022
How to Sell Coupons on ETH? A Sample Solidity dApp with React and Truffle (1/4)
by: Yassin Mahmud Abdul Quddus
blow post content copied from  Finxter
click here to view original post

Rate this post

How to Sell Coupons on ETH? Creating your own sample dApp in four parts:

Blockchain has bagged decent accolades recently for its transparency of the transactions made throughout the supply chain.

By taking inspiration from that, we decided to make an imaginary Web3 dapp for the finxter academy.

🛑 Note: This is just a training “fun” dApp that shows you how to use React, Truffle, and Solidity. It is not a real dApp with real functionality!

Imaginary Scenario: Finxter academy has recently announced that it will launch some coupons with a 25% discount for its new premium membership, and the coupons will be distributed through a decentralized blockchain.

Welcome to the latest episode of decentralized web3 application, where we will make a Finxter Web3 dApp together. All the (imaginary) coupons will be saved inside a smart contract, and the account of the buyer for each coupon will be detected under the transaction.

We will use React and tailwind CSS for the front end, while Truffle, Ganache, and Solidity will be used for the smart contract development.

It will be simple and easy, so there is no need to worry.

Install Metamask Chrome Extension

We need to have the Metamask chrome extension installed on our browser.

Metamask will allow us to connect to a local blockchain, a kind of wallet that will enable us to send and receive digital currency like ether.

To install the metamask extension, just move to their website and click the download for chrome option. If you follow the procedure shown in the video, you can easily add the extension to the chrome browser.

Install Ganache Test Blockchain

Ganache is a test blockchain that helps us build a testing environment to write our smart contract code and then deploy it locally.

Besides deployment, we will be able to test it in a testing environment. Navigate to www.trufflesuite.com/ganache.

That’s where we will find ganache, and there’s a Download option for Windows and other operating systems. Just follow the procedure, and the ganache will be installed automatically.

Initiate Truffle Development Framework

We have just installed the test blockchain, but now we need a testing environment that will allow us to conveniently move our smart contract code around to compile, deploy, and manage.

Here comes the truffle.

Truffle is the most popular development framework for Ethereum. You can also use Remix IDE for writing smart contracts, which is normally used for small projects.

But if you want to introduce an intermediate or top-level project, then truffle is a perfect one.

You need to integrate your smart contract with the front end at a certain point of the development procedure, and at that time, the truffle will make your life easier when it’s a complicated task if you use remix ide.

Truffle works well with ganache as it comes from the same origin. To install this, just type

npm g install truffle

on the terminal. In the windows operating system, version differences may cause some problems with the installation. Then you can try out a previous version of the truffle. Just type

npm -g install [email protected]

Reference: StackOverflow

Let’s start the project. I am making a new folder called coupon dapp. Switch over to vs. code and type

truffle init

on the terminal.

Make sure you set the execution policy to unrestricted. Many first-timers do get this execution policy error. If you get this execution policy error, then switch over to PowerShell (as administrator) and command

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

Inside the coupon dapp folder, we will have several folders installed under the truffle development framework.

There is a “migration.sol” file inside the contract folder. To get the best view of solidity, you better install the solidity extension on VSCode.

Set Up Ganache Workspace with Truffle

As we want to set our localhost to ganache, we need to configure the truffleconfig.js file. ‘truffle.config.js‘ is the file where many important matrices for your project will be saved.

Spin up your ganache UI and open a new workspace. I am naming the workspace “finxter-coupons“. Click on the “ADD PROJECT” button and point it to the truffleconfig.js directory.

Save the workspace.

It will restart the ganache, and we should get ten accounts with 100 imaginary eths each to play around with. Each account consists of a private key that will be used to connect with Metamask soon.

We will deal with the ganache’s transaction, blocks, and contracts menu soon. But let’s connect the truffle with the ganache first. From the RPC SERVER of the ganache, copy the port, i.e., 7545.

As we are using a locally running blockchain, we need to connect our truffle with this blockchain.

Inside the truffle-config.js, uncomment the development part and paste the port 7545. Port 7545 will enable truffle-config to connect to the locally running Ethereum network called ganache. This port setup helps truffle configure what network to connect to or publish the contract.

Typically migration is used to deploy the smart contract to the blockchain. But to check if all are set properly, we will run a migration now. Just move to the terminal and command

truffle migrate

If everything works well, some balance will be deducted from the ganache’s first account as the gas price to deploy our first contract.

If you check the transaction menu, you will see some transactions pop up.

Under the transaction, you will get the sender and receiver account address, the amount of gas used, the gas price, etc.

In the contracts menu migration contract is deployed. The contract address and balance will pop up if you click on this.

A smart contract is also like a holding place for money. You can hold some credit here and distribute it whenever required. Inside the storage, we get the owner’s address which is the first account of the ganache by default. A couple of blocks pop up in the blocks section, and you can also get the transaction details from here.

In the VS Code terminal, you will see the deployment details for the migrations, the contract address, how much gas it took to deploy the transaction, etc.

Connect Ganache to Metamask

Click on the Metamask chrome extension and click on the add network option from the drop-down.

The browser will take you to a page where you can configure your Metamask plug-in. To add ganache as a new network, we will redefine the configuration. I am keeping the network name as ganache_host.

The new RPC URL would be as exact as ganache RPC SERVER i.e.

Network Name: ganache_host
New RPC URL:  http://127.0.0.1:7545
Chain ID: 1337
Currency symbol: eth

Press the save button. Your new ganache network is ready.

To activate the network, open the Metamask extension and switch from Ethereum main net to ganache_host.

We will not use this main default account. We will import a new account from the ganache. For that, move to ganache, and click on the show keys option at the rightmost corner of the 2nd account.

Copy the private key that is shown on the screen. Now move to the Metamask extension and click on the circle in the upper right corner. You will get the import account option from the drop-down.

Click on it and paste the private key of the 2nd ganache account here.

Account 2 will be created with the same account address as the ganache, and 100 eths will be there also. So, we have successfully connected Metamask with Ganache. This way, we can import multiple accounts from ganache and connect them to MetaMask.

It concludes the first part of the series. We will build our smart contract in the next part of the series. Until then, stay fine.

Here are all links to this 4-part code project to create a sample dApp on ETH for selling virtualized coupon codes:


December 04, 2022 at 04:13PM
Click here for more details...

=============================
The original post is available in Finxter by Yassin Mahmud Abdul Quddus
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================

Salesforce