Image for post
Image for post
Image by Carroll MacDonald from Pixabay

This is Part V in our work-in-progress project demonstrating how to build an Escrow smart contract DApp with Angular and NgRx

One in the single and the first degree
One above one for eternity
No unit or triad, source or cause for the one, super one, this is the one above those

— “One Above One” by Vitalic

What We’re Going to Explore

In the previous article, we discussed how to create a new instance of the purchase contract. In this post, we will walk through the code that lets us implement the following functionalities of our FleaMarket Escrow smart contract:

  • Display the list of all purchase contract widgets
  • Implement the search for contract
  • Load the purchase contract
  • Abort contract by the seller
  • Remove contract by the…


Part IV in our series demonstrating how we are building the NgRx powered DApp for the FleaMarket Escrow Smart Contract

Image for post
Image for post
Image by Stefan Keller from Pixabay

In the previous article, we talked about how to employ the IPFS to store the seller’s product images. In this part, we will focus on creating the Purchase Contract instances by utilizing the NgRx entity state adapter.

Having Fun with Material Snackbar

When we are dealing with DApps, it often involves some time for a transaction to return from the state-changing operations on the Ethereum blockchain. From the user experience point of view, we should give some visible indication of the result of these operations. In Part I, we already implemented the loading and error states, a part of the NgRx global store. …


Part three in our series demonstrating how we are building the NgRx powered DApp for the FleaMarket Smart Contract

Image for post
Image for post
Image by Stefan Keller from Pixabay

This piece is a continuation of Part II in our blog series where we demonstrated how to connect our DApp to the IPFS node running on Infura. In this article, we will focus on coding the IPFS image upload functionality powered by NgRx.

Updating to Version 8️

Begin by upgrading our FleaMarketDApp project to the latest Angular version, v8.

ng update @angular/cli @angular/core @angular/material

We want to make sure we’re using Node.js version 12 or later and installing the tools necessary to compile the native node modules.

We also need to update the NgRx library to its latest version, v8.

To enable the dynamic imports for lazy routes we must have themodulecompile property set to the value esnextin the tsconfig.json


Image for post
Image for post
Image by Stefan Keller from Pixabay

In the second part of this blog series, we will continue building the NgRx powered DApp for the FleaMarket Smart Contract.

In part I, we started implementing the root state and introduced the Ethers.js Web3 provider to interact with the Ethereum blockchain.

In this section, we will continue extending the global state and we’ll focus on the process of setting up the communication with the IPFS on Infura using Angular NgRx. …


Image for post
Image for post
Image by Stefan Keller from Pixabay

This is the first part of our work-in-progress series demonstrating how to build an Escrow Smart Contract DApp with Angular and NgRx.

In the previous article, we began exploring the technique of building an Ethereum smart contract DApp using Angular NgRx.

In this part, we will dive into a more complicated and interesting case of a Solidity Escrow Smart Contract named FleaMarket. The source of the inspiration to build this DApp was taken from the blog published by Jackson Ng.

Designing the FleaMarket Escrow Smart Contract

On every new product we’re putting up for sale, the FleaMarket escrow smart contract will spawn a new child product contract represented by the SafeRemotePurchase smart contract. We deal with the implementation of the Solidity CRUD pattern with the following requirements:

  • Each product has a unique…

About

Enjoy studying modern web and blockchain smart contract technologies. The current focus of interest: Angular, NgRx, Ethereum DApps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store