Build a DApp using Ethereum and Angular 6

Prerequisite

Creating A Smart Contract

Add Payment Contract

pragma solidity ^0.4.17;contract Payment {address transferFrom;address transferTo;uint paymentAmount;constructor() public {transferFrom = msg.sender;}event TransferFund(address _transferTo, address _transferFrom, uint amount);function transferFund(address _transferTo) public payable returns (bool){transferTo = _transferTo;transferTo.transfer(msg.value);emit TransferFund(transferTo, transferFrom, msg.value);return true;}function getBalanceOfCurrentAccount() public payable returns (uint) {return transferFrom.balance;}}

Configure Deployment Network

module.exports = {networks : {ganache : {host : ‘localhost’,port : 7545, // By default Ganache runs on this port.network_id : “*” // network_id for ganache is 5777. However, by keeping * as value you can run this node on any network}}};

Verifying your contract in the Truffle Console

truffle(ganache)> Payment.deployed().then(function(instance){app = instance;})
truffle(ganache)> web3.fromWei(web3.eth.getBalance(web3.eth.accounts[0]), “ether”).toNumber()
truffle(ganache)> web3.fromWei(web3.eth.getBalance(web3.eth.accounts[2]), “ether”).toNumber()
truffle(ganache)> app.transferFund(web3.eth.accounts[2], {from:web3.eth.accounts[0], value:web3.toWei(“6.5”, “ether”)})
truffle(ganache)> web3.fromWei(web3.eth.getBalance(web3.eth.accounts[0]), “ether”).toNumber()
truffle(ganache)> web3.fromWei(web3.eth.getBalance(web3.eth.accounts[2]), “ether”).toNumber()

Creating an Angular App

ng new transfercd transfer/ng serve — open

Linking with the Ethereum Network

web3.js

Installing web3.js

$ cd transfer/$ npm install web3@0.20.5

Truffle Contract

$ npm install truffle-contract$ ng generate service ethcontractCREATE src/app/ethcontract.service.spec.ts (404 bytes)CREATE src/app/ethcontract.service.ts (140 bytes)
import { Injectable } from ‘@angular/core’;import * as Web3 from ‘web3’;import * as TruffleContract from ‘truffle-contract’;declare let require: any;declare let window: any;let tokenAbi = require(‘../../../build/contracts/Payment.json’);@Injectable({providedIn: ‘root’})export class EthcontractService {private web3Provider: null,private contracts: {},constructor() {if (typeof window.web3 !== ‘undefined’) {this.web3Provider = window.web3.currentProvider;} else {this.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:7545');}window.web3 = new Web3(this.web3Provider);}getAccountInfo() {return new Promise((resolve, reject) => {window.web3.eth.getCoinbase(function(err, account) {if(err === null) {web3.eth.getBalance(account, function(err, balance) {if(err === null) {return resolve({fromAccount: account, balance:web3.fromWei(balance, “ether”)});} else {return reject(“error!”);}});}});});}transferEther(_transferFrom,_transferTo,_amount,_remarks) {let that = this;return new Promise((resolve, reject) => {let paymentContract = TruffleContract(tokenAbi);paymentContract.setProvider(that.web3Provider);paymentContract.deployed().then(function(instance) {return instance.transferFund(_transferTo,{from:_transferFrom,value:web3.toWei(_amount, “ether”)});}).then(function(status) {if(status) {return resolve({status:true});}}).catch(function(error){console.log(error);return reject(“Error in transferEther service call”);});});}}
import { Component } from ‘@angular/core’;import { EthcontractService } from ‘./ethcontract.service’;@Component({selector: ‘app-root’,templateUrl: ‘./app.component.html’,styleUrls: [‘./app.component.css’]})export class AppComponent implements ngOnInit {title = ‘your first DApp in Angular’;accounts:any;transferFrom = ‘0x0’;balance =’0 ETH’;transferTo=’’;amount=0;remarks=’’;constructor( private ethcontractService: EthcontractService ){this.initAndDisplayAccount();}initAndDisplayAccount = () => {let that = this;this.ethcontractService.getAccountInfo().then(function(acctInfo){that.transferFrom = acctInfo.fromAccount;that.balance = acctInfo.balance;}).catch(function(error){console.log(error);});};transferEther(event){let that = this;this.ethcontractService.transferEther(this.transferFrom,this.transferTo,this.amount,this.remarks).then(function(){that.initAndDisplayAccount();}).catch(function(error){console.log(error);that.initAndDisplayAccount();});}}
import { BrowserModule } from ‘@angular/platform-browser’;import { NgModule } from ‘@angular/core’;import { FormsModule } from ‘@angular/forms’;import { AppComponent } from ‘./app.component’;import { EthcontractService } from ‘./ethcontract.service’;@NgModule({declarations: [AppComponent],imports: [BrowserModule,FormsModule],providers: [EthcontractService],bootstrap: [AppComponent]})export class AppModule { }

Coinmonks

Coinmonks is a technology-focused publication embracing decentralize technologies. We are Non-profit and education is our core value. Learn, Build and thrive. Our other project— https://coinmonks.com, https://cryptofi.co, https://coincodecap.com

Walking Tree Technologies

Written by

Walking Tree is an IT software and service provider recognized for its passion for technology.

Coinmonks

Coinmonks

Coinmonks is a technology-focused publication embracing decentralize technologies. We are Non-profit and education is our core value. Learn, Build and thrive. Our other project— https://coinmonks.com, https://cryptofi.co, https://coincodecap.com