Our great sponsors
-
metamask-extension
:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
In the two previous posts of this serie, we have learned how to build a house-swap ethereum smart-contract using solidity and how to test it using hardhat. In this post, we will create an angular application and we will install ethers to interact with the smart-contract and ethers-typechain to generate typescript types from our contract json abi.
Go to metamask site and click on the Download button. In the next page, you will see a button for installing metamask as an extension of your browser. Follow the instructions to install and creating your account.
Open the project folder with an editor of your choice (I am using vscode) and you will see the folders and files created by the angular-cli command which are required to start developing. Before starting to write code, let's install ethers and typechain since we will need them to complete the rest of the article.
After receiving ETH on your address, you are ready to get some GoerliETH. Go back to the goerli faucet and click on signup or login with Alchemy. After being logged, paste your address on the input and click on Send me ETH. If everything works, you will see a new transaction and after a few seconds you should have received your GoerliETH in your metamask account. Now, we are ready to start our angular app.