{"id":20178666,"url":"https://github.com/chanda-abdul/waveportal-client","last_synced_at":"2026-04-29T21:06:07.193Z","repository":{"id":108540321,"uuid":"460718020","full_name":"Chanda-Abdul/waveportal-client","owner":"Chanda-Abdul","description":"Web3 App with Solidity + Ethereum Smart Contract","archived":false,"fork":false,"pushed_at":"2022-02-19T22:51:12.000Z","size":1473,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-30T10:47:00.887Z","etag":null,"topics":["blockchain","ethereum","hardhat","react","solidity","web3-dapp","web3-react"],"latest_commit_sha":null,"homepage":"https://gifted-aryabhata-929956.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chanda-Abdul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-18T05:10:01.000Z","updated_at":"2022-12-29T22:20:04.000Z","dependencies_parsed_at":"2023-08-21T23:49:15.081Z","dependency_job_id":null,"html_url":"https://github.com/Chanda-Abdul/waveportal-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Chanda-Abdul/waveportal-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Fwaveportal-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Fwaveportal-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Fwaveportal-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Fwaveportal-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chanda-Abdul","download_url":"https://codeload.github.com/Chanda-Abdul/waveportal-client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Fwaveportal-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32443606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T20:22:27.477Z","status":"ssl_error","status_checked_at":"2026-04-29T20:22:26.507Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","ethereum","hardhat","react","solidity","web3-dapp","web3-react"],"created_at":"2024-11-14T02:22:19.049Z","updated_at":"2026-04-29T21:06:07.177Z","avatar_url":"https://github.com/Chanda-Abdul.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [buildspace](https://buildspace.so/) Wave Portal 👋 \n### Web3 App with Solidity + Ethereum Smart Contracts\n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshots](#screenshots)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n\n## Overview\n\nThis is a solution to the [buildspace](https://buildspace.so/) challenge to build a \u003cb\u003eWeb3 App with Solidity + Ethereum Smart Contracts\u003c/b\u003e. [buildspace](https://buildspace.so/) is a platform to learn and build \u003cb\u003eWeb3\u003c/b\u003e projects alongside other devs.\n\nThis repo contains the front-end \u003cb\u003eReact\u003c/b\u003e code for my \u003cb\u003eWeb3\u003c/b\u003e app.  You can view the repo for the \u003cb\u003eSolidity + Ethereum Smart Contracts\u003c/b\u003e [here](https://github.com/Chanda-Abdul/waveportal-smart-contract).\n\nI built this project so that I could learn some \u003cb\u003eSolidity\u003c/b\u003e, write + deploy a \u003cb\u003esmart contract\u003c/b\u003e to the \u003cb\u003eblockchain\u003c/b\u003e, and build a \u003cb\u003eWeb3 client\u003c/b\u003e app that can \u003cb\u003einteract\u003c/b\u003e with your a \u003cb\u003esmart contract\u003c/b\u003e, and to basically get comfortable building an entire Web3 App. \n\n## The challenge\n\n### Users should be able to:\n\n- [x] \u003cb\u003eView\u003c/b\u003e landing page and understand the purpose of this app\n- [x] \u003cb\u003eConnect\u003c/b\u003e their ethereum \u003cb\u003ewallet\u003c/b\u003e using Metamask, with the Rinkeby Test Network\n- [x] \u003cb\u003eInput a message\u003c/b\u003e and click button to send a \"wave\" to the smart contract owner\n- [x] Once the \"wave\" is sent, the \"waver\" is entered to \u003cb\u003ewin a prize\u003c/b\u003e where the winner is chosen at random\n- [x] While the user is waiting for their transaction to be mined on the blockchain a \u003cb\u003eloading message\u003c/b\u003e is displayed to the UI. Because of \u003cb\u003eblocktime\u003c/b\u003e this message may be displayed for 15+ seconds\n- [x] The \u003cb\u003enumber of \"wavers\"\u003c/b\u003e is displayed along with each wavers \u003cb\u003eaddress\u003c/b\u003e, \u003cb\u003etime\u003c/b\u003e that wave was sent, and a \u003cb\u003emessage\u003c/b\u003e.\n\n### Smart Contract should be able to:\n\n- [x] \u003cb\u003eDeploy\u003c/b\u003e your WavePortal \u003cb\u003esmart contract\u003c/b\u003e to a local \u003cb\u003eEthereum network\u003c/b\u003e\n- [x] \u003cb\u003eConnect to our wallet\u003c/b\u003e and talks to our WaveContract\n- [x] \u003cb\u003eUpdate WavePortal\u003c/b\u003e to randomly send lucky users waving at you some Ethereum\n- [x] \u003cb\u003eUpdate UI\u003c/b\u003e + \u003cb\u003edeploy\u003c/b\u003e to an \u003cb\u003eEthereum testnet\u003c/b\u003e so anyone on the internet can wave at you using their wallet\n\n## Screenshots\n\n### Landing page and Connect Wallet button\n![](./screens/landing.png)\n### Send message along with your wave\n![](./screens/sendwave.png)\n### View loader while wave is being sent\n![](./screens/mining.png)\n### View your wave, number of wavers, and data for each waver\n![](./screens/wavesent.png)\n![](./screens/allwaves.png)\n\n## Links\n\n- Link to deployed Site: [Wave Portal Web3 App](https://gifted-aryabhata-929956.netlify.app/)\n- Link to Solidity Smart Contract: [Wave Portal Smart Contract Code](https://github.com/Chanda-Abdul/waveportal-smart-contract)\n\n## My process\n\n### Built with\n\n- Front-end\n    - [React](https://reactjs.org/) - JavaScript Framework\n        - [Semantic UI React](https://react.semantic-ui.com/) Components\n    - CSS Flexbox\n- [Smart-Contract](https://github.com/Chanda-Abdul/waveportal-smart-contract)\n    - [Solidity](https://docs.soliditylang.org/en/v0.8.12/)\n        - [Ethereum](https://ethereum.org/en/)\n        - [Hardhat](https://hardhat.org/)\n    - [Metamask](https://metamask.io/)\n    - [Rinkeby Test Net](https://www.rinkeby.io/)\n        - [Rinkeby Faucet](https://www.rinkebyfaucet.com/)\n        - [Etherscan](https://rinkeby.etherscan.io/)\n    - [Blockchain](https://en.wikipedia.org/wiki/Blockchain)\n\n### What I learned\n\nThis 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. \n\nThis 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. \n\nOne of the main tools that helped me complete this project was [Hardhat](https://hardhat.org/)🙌🏽, which allows you to deploy your contracts, run tests and debug Solidity code without dealing with live environments. \n\n\u003c!-- Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.\n\nTo see how you can add code snippets, see below:\n\n```html\n\u003ch1\u003eSome HTML code I'm proud of\u003c/h1\u003e\n```\n```css\n.proud-of-this-css {\n  color: papayawhip;\n}\n```\n```js\nconst proudOfThisFunc = () =\u003e {\n  console.log('🎉')\n}\n``` --\u003e\n\n\n\n## Continued development\n\nThere 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.\n\n\n### To-Do's\n\n- [x] Fix `useEffect` for new wave events\n- [x] Add alerts for out of gas, etc.\n- [ ] Clean up\n- [x] Deploy\n- [x] write README.md\n- [ ] add UI feedback and information for prize\n\n## Useful resources\n\n- [Semantic UI React](https://react.semantic-ui.com/).  I used \u003cb\u003eSemantic UI Components\u003c/b\u003e for the `\u003cInput/\u003e` box and the `\u003cTable/\u003e` 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. \n-  [Hardhat](https://hardhat.org/), 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.\n\n## Author\n\n- Website - [Chanda Codes](https://chandacodes.com/)\n- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)\n\n## Acknowledgments\n\n[buildspace](https://buildspace.so/) is a great resource if you want to get started with Web3. Highly recommended 💯.\n\n\n\nAlso,  they gave me this really cool NFT for completing the project\n\n\n![]( https://tokens.buildspace.so/assets/CH6c84e3ea-6b71-4274-a642-e3aef6d7eb84-264/render.png\n)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Fwaveportal-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanda-abdul%2Fwaveportal-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Fwaveportal-client/lists"}