/waveportal-client

Web3 App with Solidity + Ethereum Smart Contract

Primary LanguageJavaScript

buildspace Wave Portal 👋

Web3 App with Solidity + Ethereum Smart Contracts

Table of contents

Overview

This is a solution to the buildspace challenge to build a Web3 App with Solidity + Ethereum Smart Contracts. buildspace is a platform to learn and build Web3 projects alongside other devs.

This repo contains the front-end React code for my Web3 app. You can view the repo for the Solidity + Ethereum Smart Contracts here.

I built this project so that I could learn some Solidity, write + deploy a smart contract to the blockchain, and build a Web3 client app that can interact with your a smart contract, and to basically get comfortable building an entire Web3 App.

The challenge

Users should be able to:

  • View landing page and understand the purpose of this app
  • Connect their ethereum wallet using Metamask, with the Rinkeby Test Network
  • Input a message and click button to send a "wave" to the smart contract owner
  • Once the "wave" is sent, the "waver" is entered to win a prize where the winner is chosen at random
  • While the user is waiting for their transaction to be mined on the blockchain a loading message is displayed to the UI. Because of blocktime this message may be displayed for 15+ seconds
  • The number of "wavers" is displayed along with each wavers address, time that wave was sent, and a message.

Smart Contract should be able to:

  • Deploy your WavePortal smart contract to a local Ethereum network
  • Connect to our wallet and talks to our WaveContract
  • Update WavePortal to randomly send lucky users waving at you some Ethereum
  • Update UI + deploy to an Ethereum testnet so anyone on the internet can wave at you using their wallet

Screenshots

Landing page and Connect Wallet button

Send message along with your wave

View loader while wave is being sent

View your wave, number of wavers, and data for each waver

Links

My process

Built with

What I learned

This was a useful and rewarding project for me. I became interested in Web3 and Solidity, and I knew that would be the most effect way to learn was by building a complete project. I ran into ALOT of roadblocks in previously because Web3 and Solidity are fairly new technologies that are updated all the time, sometimes with breaking changes 😩. Because of this it has been extremely hard for me to find documentation and resources to use while building Solidity projects.

This was my first successfully completed Web3 project. I really enjoyed that buildspace showed the step by step process of how to build a Web3 project and for providing a community that you can utilized to get help when you run into any blockers.

One of the main tools that helped me complete this project was Hardhat🙌🏽, which allows you to deploy your contracts, run tests and debug Solidity code without dealing with live environments.

Continued development

There are a few things that I would like to revist when I have the time. The prize functionality is build into the smart contract, but I would like to add some feedback to the UI so that the user willl know that they entered the contest and alert them if they win. I would also like to add UI feedback for any issues we may encouter, such as running out of gas, etc.

To-Do's

  • Fix useEffect for new wave events
  • Add alerts for out of gas, etc.
  • Clean up
  • Deploy
  • write README.md
  • add UI feedback and information for prize

Useful resources

  • Semantic UI React. I used Semantic UI Components for the <Input/> box and the <Table/> that displays the waver's information. I didn't want to spend a ton of time on these elements because the focus of this project was to build a fully functional smart contract.
  • Hardhat, an Ethereum development environment. Hardhat allows you to deploy your contracts, run tests and debug Solidity code without dealing with live environments. This really helped me understand how to build a smart contract from a JavaScript point of view.

Author

Acknowledgments

buildspace is a great resource if you want to get started with Web3. Highly recommended 💯.

Also, they gave me this really cool NFT for completing the project