We can also verify that the smart contract has been deployed successfully by proceeding to the to examine our Wallet account which we specified in the the HDWalletProvider constructor.
A quick way to test functionality of the smart contract is by using the Truffle console.
truffle console --network ropsten
To get access to the deployed contract instance run the following commands:
> let contr = await FleaMarket.deployed()
> contr.address //‘0x4d0b57A8226a9A1512C22DCe6D643B881853aA43’
Next, let’s create a few instances of the child asset contract:
> let itemOne = await contr.createPurchaseContract(‘ITEM00001’, ‘Sport Bike’, ‘0xfile887’)
> let itemTwo = await contr.createPurchaseContract(‘ITEM00002’, ‘Old Hummer’, ‘0xfile556’)
> contr.getKeyCount() //2
Finally, invoke the contract function to retrieve a corresponding asset contract address:
> contr.getElementByKey(‘ITEM00001') //‘0xc671DF84F230aa51B076A8cdAa3619Dd3c022558’
Setting up the Angular Project
Let’s get started by installing the latest major versions of the Angular CLI.
npm install -g @angular/cli
To create a new Angular project, open a new terminal in the root folder of our Truffle project and run the following CLI command:
ng new ClientApp --skip-install=true --minimal=true --style=css --routing=true --skipGit=true
Next we install the by running the following schematic
ng add @angular/material
Let’s add a navigation component to the application by running the navigation schematic
ng generate @angular/material:nav nav
We can also add a dashboard component using the material schematic
ng generate @angular/material:dashboard dashboardNext we install the module which is a superior layout engine to assist with the CSS flex-box features:
npm install @angular/flex-layout --save
The next thing is to wire up the state management library that lays in the core of our application design.
npm install @ngrx/store, @ngrx/effects, @ngrx/router-store, @ngrx/entity, @ngrx/store-devtools, ngrx-store-freeze --save
To interact with we will use the library developed my (Richard Moore)
npm install ethers --save
The Root State and the Guard
The application state in NgRx is a single immutable data tree structure. The state tree will start from the root state once the AppModule is loaded. The root state is shared globally among all components. It will then continue to grow in size as more are loaded into the application. We define our root state interface as follows:
It is composed from the router state, the spinner state, the error state and the web3Provider state.
The spinner state is responsible for toggling the display of a loading indicator defined in the loader component. We manage the spinner state by dispatching the following actions to the :
Notice that we’re using the Action Creator that was recently introduced by in his super .
The error state is listening for the action:
and it is handled by the side effect:
On the side note, there was some very interesting discussion recently about how to properly manage loading or error state in NgRx. Regarding this topic please check and .
The web3Provider root state is where all the fun begins! It has the following properties
and is responsible for monitoring the gateway between our DApp and the .
The approach we use closely resembles the idea discussed in the written by . To be able to communicate with the network using MetaMask we need to setup the corresponding ethers.js Web3 provider.
First we define the tree-shakable InjectionToken MetamaskWeb3Provider and instruct it to inject the web3 provider injected by MetaMask windows.ethereum. Then, we extend the ethers.js and inject the MetamaskWeb3Provider into its constructor. To get access to the user account on , MetaMask requires that we call enable() method on its native web3 provider. We manage it in the metaMaskEnable$ effect by listening for the '[Web3/Provider] Init]action.
Here is what is happening behind the scenes. We introduced the EthInitGuard guard which we built to control the route resolution process.
The guard is observing the metamaskEnable property of the state. If this value is false, the guard will dispatch the '[Web3/Provider] Init]action to broadcast the request to connect to the . The biggest benefit of this approach is that we are now in control of the MetaMask’s popup window for user-approved account access.
Once we compile and run the application, it will load our root state and result in the following home page:
If we try to navigate to any other route guarded by the EthInitGuard, it will trigger an approval popup from MetaMask asking permission to access the user account.
Icons made by from is licensed by
Icons made by from is licensed by
🐯 Thank you! Please stay tuned for another articles for this blog series.
Reference:
- , by
- , by
- , by Todd Motto
- , by
- , by
- Handling Error States with NgRx, by
- , by
- , by
- , by
- , by
- , by
- , by
- , by
- , by
- , by
- HDWallet with ethers.js and Angular, by
- , by
- , by
Please Follow me on , or .
👍 Special thanks to for reviewing this article.
Published at Sun, 21 Apr 2019 23:00:12 +0000
