Build your first dApp with HyperDapp
Overview
dApps (decentralized applications) are an integral part of the Ethereum development ecosystem. There are thousands of dApps already residing on the Ethereum blockchain. The video below walks through the process of building and deploying a dApp with the HyperDapp Code Editor. This article is going to demonstrate a similar process and reflects some most recent updates in the functionalities.
Pre-requisite
A key component of HyperDapp is a browser-based Code Editor that can be accessed anywhere. The only prerequisite is an installment of a MetaMask browser extension.
HyperDapp currently supports all EVM-compatible chains including Ethereum, Polygon, Binance Smart Chain, Avalanche, Fantom, and Arbitrum.
Step-by-Step Guide
Let’s get started! Similar to the video tutorial, we are going to build and deploy a dApp that interacts with the WETH (wrapped ETH) smart contract on the Rinkeby testnet.
- Let’s connect to the MetaMask wallet and switch to the Rinkeby testnet.
2. Click “+ Create new dApp” and we will land on the Code Editor. We are going to see a split-screen here. The left side is for coding whereas the right side shows a preview of the UI of the dApp. We are going to generate all the code in the subsequent steps with the prompts underneath “+ Add snippet”.
3. The first step is to load the WETH smart contract into the editor. Click “Contract ABI” in the drop-down menu. The contract address can be found here on Rinkeby Etherscan. As of the updates released on 6/30/2022, it is no longer necessary to copy and paste the “Contract ABI” from Etherscan.
- All the functions in the smart contract are now imported into the Code Editor.
4. We want to wrap ETH with this dApp. Therefore we want to trigger the “deposit” function in the smart contract. Let’s use the “Function Call” prompt in the drop-down guide and call the “deposit” function.
5. The UI for interacting with the “deposit’ function will be automatically generated and shown on the preview screen. Now let’s customize the text and CTA.
- Remove the text “weth ABI has been loaded!”.
- Update the text “VALUE” with “ETH -> WETH” indicating that we are swapping ETH for Wrapped ETH.
- Change the CTA for the prompt from “deposit” to “WRAP”.
6. Let’s do a test transaction, wrapping 0.1 ETH. We could confirm that MetaMask is being triggered and the MetaMask is indeed interacting with the “deposit” function. We could proceed to approve this transaction in MetaMask.
7. Now let’s publish the code to IPFS. We get a URL that references a unique IPFS CID. This URL can be shared with anyone (e.g. end-users, devs, and non-devs on a team) and the recipients will be able to interact with a fully functional dApp.
8. This URL can also be embedded into any website through an iframe. In this case, we have a simple static HTML page created on codesandbox.io. Let’s embed this dApp into this webpage.
9. Anyone interacting with this dApp could click on “Powered by HyperDapp” and land on a read-only code viewer that shows the source code used for creating the front-ends with HyperDapp. With some basic knowledge of smart contracts, anyone is now able to verify what smart contracts and what functions are being used for the dApps.
Summary
HyperDapp makes the process of creating front-ends of dApps seamless, fast and verifiable. There is no need to set up an environment or dependencies, and there is no need to import any SDKs to enable web3 interactions (e.g. wallet connections, smart contract interactions). The Interpreter Engine in the backend of HyperDapp is a sandbox environment that abstracts all the web3 logic and automatically generates a reactive UI for dApps. Furthermore, the web3 interactions enabled in the front-ends built with HyperDapp are fully transparent and verifiable.
