Connecting the Smart Contract to a WebApp

Morpheus Labs Team
Jun 18 · 5 min read
Image for post
Image for post

Decentralized Lottery (Final)

If you have been reading our articles on how to build, test and deploy a smart contract on our platform, you have now arrived at the final step in a smart contract development which is to distribute it through a Web application so that people can interact with it through a Web Browser + Metamask.

As a reference, the simple Web application we will build should resemble this mock Up.

Image for post
Image for post

A possible Web development framework we can use is React.

We need to create a robust client-side application that can manage the Private keys of the users safely on their machines, and only send signed transactions through the network which are to be included in the Ethereum blockchain.

  1. Let’s start by installing create-react-app.
Image for post
Image for post

2. Then, inside our application directory, we will run the command:

Image for post
Image for post

The lottery-react directory should have the next structure, once the creation process ends.

Image for post
Image for post

3. Let’s run the server to check that everything is working correctly so far:

Image for post
Image for post

4. We can see a live version of the WebApp by opening the servers tab and clicking on the node server.

Image for post
Image for post
Image for post
Image for post

We should see a live application running from our workspace, deployed to the WorldWideWeb.

Image for post
Image for post

Now that we know that the server is running, we can begin our integration process.

  1. We will create a symbolic link, **symlink**, to reference our compiled Smart Contract to the new React application.
Image for post
Image for post

The symlink will create a file that will let us interact with the ABI (abstract-binary-interface), and deployment address of our lottery contract.

Image for post
Image for post

2. Inside our *src* sub-directory, we will create two new files:

Image for post
Image for post

3. Editing web3.js:

A. First, inside web3.js, we will write 3 lines, to instantiate a Web3 object that uses the *web3 provider* injected by *Metamask* in the browser of each user.

Image for post
Image for post

B. To make sure to have web3 in our system:

Image for post
Image for post

4. Editing lottery.js:

A. Import the instance of web3 we just created, as well as the Lottery.json file from the contracts symlink.

Image for post
Image for post

B. In the lottery_json there constant, we can now find the ABI of our lottery contract, as well as the address of its deployment.

Image for post
Image for post

C. In the last line, we create and export an instance of our lottery contract, so we can use it in our WebApp.

Image for post
Image for post

5. It is time to edit the App.js file.

A. The last 2 lines reference the web3.js and lottery.js files we just created.

Image for post
Image for post

B. We then create our React component along with 5 state variables, which will be used to display information to the user.

Image for post
Image for post

C. Next, put the UI elements in place. More details for beginner developers in the appendix.

Image for post
Image for post

D. Now, we integrate the HTML + JS functionality with the power of the Ethereum Smart Contracts.

Image for post
Image for post

Once the development of our WebApp has finished, it is time to run the app with the command:

Image for post
Image for post

Head to the URL where our workspace exposes the server, and manually test the application.

MetaMask considerations

  • Remember to Configure Metamask, with the 12-mnemonic words generated in the deployment process, or otherwise, the selectWinner function won’t be able to be triggered.
  • It is also important to set the network for the Ropsten test network so that the Metamask can interact with the deployed contract.
Image for post
Image for post

***Lottery WebApp***

Once the application runs, you can retrieve the live URL from the workspace info by clicking on the button “Retrieve”.

Below are some sample images of the working WebApp:

Image for post
Image for post
Initial State
Image for post
Image for post
Enter Lottery
Image for post
Image for post
Selecting Winner — account different than a manager
Image for post
Image for post
Selecting Winner — manager account

Have you tried building on our platform yet? We have recently launched our BPaaS which is also known as Morpheus Labs SEED. You will find enhanced features on team management, configuration, sharing of resources, and more. Discover how one can reap the benefits of blockchain application development on Morpheus Labs SEED here.


About Morpheus Labs

The team at Morpheus Labs comes from diverse backgrounds banded together, has created Morpheus Labs SEED (Solution Environment for Enterprise Development), a go-to platform offering mission-critical tools, infrastructure, various blockchain protocols, and blockchain use case references for enterprises and developers to build, experiment and manage their own applications effortlessly at minimal cost and time.

Refer to https://docs.morpheuslabs.io for further information about Morpheus Labs SEED.


Be a part of our community! Join our official group chat on Telegram: https://t.me/morpheuslabs

(Check out our Community Telegram Guidelines.)


🤳🏼Connect with us:

LinkedIn | Twitter | Telegram | Facebook | Youtube | Github | Reddit | CrunchBase | Website | Gitter

For any query, please contact us at info@morpheuslabs.io.

Morpheus Labs

Powering Blockchain Worldwide

Morpheus Labs Team

Written by

The Blockchain-Platform-as-a-Service (BPaaS) for prototyping, deploying and operating Dapps at minimal cost and time. | https://morpheuslabs.io

Morpheus Labs

The Blockchain-Platform-as-a-Service (BPaaS) for prototyping, deploying and operating Dapps at minimal cost and time. | https://morpheuslabs.io

Morpheus Labs Team

Written by

The Blockchain-Platform-as-a-Service (BPaaS) for prototyping, deploying and operating Dapps at minimal cost and time. | https://morpheuslabs.io

Morpheus Labs

The Blockchain-Platform-as-a-Service (BPaaS) for prototyping, deploying and operating Dapps at minimal cost and time. | https://morpheuslabs.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app