Xây dựng ứng dụng phi tập trung (Dapp) với Angular

Thứ Bảy, 11/01/2020

Tram Ho

Mở đầu
Để tiếp tục series xây dựng Dapp, bài này sẽ hướng dẫn xây dựng sample Dapp bằng framework Angular8. về cơ bản thì chúng ta sẽ xây dựng một ứng dụng dựa trên smart cotnract đã được xây dựng trong bài đầu tiên : Xây dựng smart contract

Về cơ bản chúng ta sẽ sử dụng smart contract đã có và xây dựng ứng dụng chuyển các token như đã thực hiện với React. Đối với Angular thì sẽ có một số thứ cần thay đổi tuy nhiên tư tưởng về cơ bản sẽ khá giống nhau

Chuẩn bị

Môi trường

Chúng ta install Angular

npm install -g @angular/cli
# OR
yarn global add @angular/cli

npm install -g @angular/cli

# OR

yarn global add @angular/cli

Ta chạy lệnh ng n để khởi tạo project

ng n angular-frontend

1 2	ng n angular-frontend

Để cho đúng vị chúng ta sử dụng Angular Material design để phần giao diện đẹp hơn

Install Angular Material

ng add @angular/material

1 2	ng add @angular/material

Cũng giống như Redux trong React hay Vuex trong Vue .Để quản lý state tree chúng ta dùng RxJS

yarn add @ngrx/{store,effects,router-store,entity,store-devtools} ngrx-store-freeze --save

1 2	yarn add @ngrx/{store,effects,router-store,entity,store-devtools} ngrx-store-freeze --save

Tiếp đến là các package như web3, truffle-contract để connect vs web3 và contract

yarn add <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>

1 2	yarn add <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>

Để chạy project ta sử dụng lệnh

ng s

ng s

Triển khai ứng dụng

Web3 connect

Để có thể kết nối với Web3 ta sẽ tạo một util module . Angular cung cấp cho chúng ta một bộ Cli miễn chê vào đâu đc ta chỉ cần chạy lệnh

ng g module util

1 2	ng g module util

Lệnh này sẽ tạo ra file util.module.ts chúng ta sẽ thêm Web3Service và được file hoàn chỉnh

<span class="token keyword">import</span> <span class="token punctuation">{</span> NgModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CommonModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/common"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Web3Service <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./web3.service"</span><span class="token punctuation">;</span>

@<span class="token function">NgModule</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  imports<span class="token punctuation">:</span> <span class="token punctuation">[</span>CommonModule<span class="token punctuation">]</span><span class="token punctuation">,</span>
  providers<span class="token punctuation">:</span> <span class="token punctuation">[</span>Web3Service<span class="token punctuation">]</span><span class="token punctuation">,</span>
  declarations<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">UtilModule</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

import { NgModule } from "@angular/core";

import { CommonModule } from "@angular/common";

import { Web3Service } from "./web3.service";

@NgModule({

imports: [CommonModule],

providers: [Web3Service],

declarations: []

})

export class UtilModule {}

Nhưng khoan Web3service đâu rồi ??? Để tạo Web3 service ta sử dụng lệnh

ng g service util/web3

1 2	ng g service util/web3

Lệnh này sẽ tạo 2 file web3.service.spec.ts ( file này phục vụ cho việc chạy test nên tạm thời chúng ta chưa cần sửa ) và web3.service.ts ( chúng ta sẽ code thêm vào file này )

<span class="token keyword">import</span> <span class="token punctuation">{</span> Injectable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> contract <span class="token keyword">from</span> <span class="token string">"truffle-contract"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Subject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"rxjs"</span><span class="token punctuation">;</span>
<span class="token keyword">declare</span> <span class="token keyword">let</span> <span class="token keyword">require</span><span class="token punctuation">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Web3 <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">"web3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">declare</span> <span class="token keyword">let</span> window<span class="token punctuation">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>

@<span class="token function">Injectable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  providedIn<span class="token punctuation">:</span> <span class="token string">"root"</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Web3Service</span> <span class="token punctuation">{</span>
  <span class="token keyword">public</span> web3<span class="token punctuation">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  <span class="token keyword">private</span> accounts<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">public</span> balance<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">public</span> ready <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

  <span class="token keyword">public</span> accountsObservable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subject</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"load"</span><span class="token punctuation">,</span> event <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">bootstrapWeb3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">public</span> <span class="token keyword">async</span> <span class="token function">bootstrapWeb3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// Wait for loading completion to avoid race conditions with web3 injection timing.</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>ethereum<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token comment">// Request account access if needed</span>
        <span class="token keyword">await</span> window<span class="token punctuation">.</span>ethereum<span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// Acccounts now exposed</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>web3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>ethereum<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> window<span class="token punctuation">.</span>web3 <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// Checking if Web3 has been injected by the browser (Mist/MetaMask)</span>
      <span class="token comment">// Use Mist/MetaMask's provider</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>web3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"No web3? You should consider trying MetaMask!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token comment">// Hack to provide backwards compatibility for Truffle, which uses web3js 0.20.x</span>
      Web3<span class="token punctuation">.</span>providers<span class="token punctuation">.</span>HttpProvider<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>sendAsync <span class="token operator">=</span>
        Web3<span class="token punctuation">.</span>providers<span class="token punctuation">.</span>HttpProvider<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>send<span class="token punctuation">;</span>
      <span class="token comment">// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>web3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Web3</span><span class="token punctuation">(</span>
        <span class="token keyword">new</span> <span class="token class-name">Web3<span class="token punctuation">.</span>providers<span class="token punctuation">.</span>HttpProvider</span><span class="token punctuation">(</span><span class="token string">"http://localhost:8545"</span><span class="token punctuation">)</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshAccounts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">public</span> <span class="token keyword">async</span> <span class="token function">artifactsToContract</span><span class="token punctuation">(</span>artifacts<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> delay <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>resolve <span class="token operator">=&gt;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">await</span> delay<span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">artifactsToContract</span><span class="token punctuation">(</span>artifacts<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">const</span> contractAbstraction <span class="token operator">=</span> <span class="token function">contract</span><span class="token punctuation">(</span>artifacts<span class="token punctuation">)</span><span class="token punctuation">;</span>
    contractAbstraction<span class="token punctuation">.</span><span class="token function">setProvider</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> contractAbstraction<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">private</span> <span class="token function">refreshAccounts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span><span class="token function">getAccounts</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> accs<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Refreshing accounts"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span><span class="token string">"There was an error fetching your accounts."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token comment">// Get the initial account balance so it can be displayed.</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>accs<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span>
          <span class="token string">"Couldn't get any accounts! Make sure your Ethereum client is configured correctly."</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span>
        <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>accounts <span class="token operator">||</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>accounts<span class="token punctuation">.</span>length <span class="token operator">!==</span> accs<span class="token punctuation">.</span>length <span class="token operator">||</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>accounts<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">!==</span> accs<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
      <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Observed new accounts"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span>accountsObservable<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>accs<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>accounts <span class="token operator">=</span> accs<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">this</span><span class="token punctuation">.</span>ready <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import { Injectable } from "@angular/core";

import contract from "truffle-contract";

import { Subject } from "rxjs";

declare let require: any;

const Web3 = require("web3");

declare let window: any;

@Injectable({

providedIn: "root"

})

export class Web3Service {

public web3: any;

private accounts: string[];

public balance: string[];

public ready = false;

public accountsObservable = new Subject<string[]>();

constructor() {

window.addEventListener("load", event => {

this.bootstrapWeb3();

});

}

public async bootstrapWeb3() {

// Wait for loading completion to avoid race conditions with web3 injection timing.

if (window.ethereum) {

try {

// Request account access if needed

await window.ethereum.enable();

// Acccounts now exposed

this.web3 = new Web3(window.ethereum);

} catch (error) {

console.error(error);

}

} else if (typeof window.web3 !== "undefined") {

// Checking if Web3 has been injected by the browser (Mist/MetaMask)

// Use Mist/MetaMask's provider

this.web3 = new Web3(window.web3.currentProvider);

} else {

// Hack to provide backwards compatibility for Truffle, which uses web3js 0.20.x

Web3.providers.HttpProvider.prototype.sendAsync =

// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)

new Web3.providers.HttpProvider("http://localhost:8545")

);

}

setInterval(() => this.refreshAccounts(), 1000);

}

public async artifactsToContract(artifacts) {

if (!this.web3) {

const delay = new Promise(resolve => setTimeout(resolve, 100));

await delay;

return await this.artifactsToContract(artifacts);

}

const contractAbstraction = contract(artifacts);

contractAbstraction.setProvider(this.web3.currentProvider);

return contractAbstraction;

}

private refreshAccounts() {

this.web3.eth.getAccounts(async (err, accs) => {

if (err != null) {

console.warn("There was an error fetching your accounts.");

return;

}

// Get the initial account balance so it can be displayed.

if (accs.length === 0) {

console.warn(

"Couldn't get any accounts! Make sure your Ethereum client is configured correctly."

);

return;

}

if (

!this.accounts ||

this.accounts.length !== accs.length ||

this.accounts[0] !== accs[0]

) {

this.accountsObservable.next(accs);

this.accounts = accs;

}

this.ready = true;

});

}

Giải thích :

public async bootstrapWeb3() : hàm này dùng để lấy web3 , nếu brower có metamask thì liên kết với metamak, nếu không sẽ lấy web3 = new Web3.providers.HttpProvider(“http://localhost:8545“) và sau đó thực hiện polling cứ 1s cập nhật account trong trường hợp khi sử dụng app ng dùng muốn đổi account
private refreshAccounts() : hàm này để lấy account
public async artifactsToContract(artifacts) : hàm này để connect tới contract vs tham số đầu vào là link tới file abi

Giao diện

Tiếp theo ta tạo module meta

ng g module meta

1 2	ng g module meta

Sau đó tạo component meta-component để code frontend

ng g component meta/meta_component

1 2	ng g component meta/meta_component

Ta chỉnh sửa meta.module.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> NgModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CommonModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/common"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> MetaComponentComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./meta-component/meta-component.component"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  MatSnackBarModule<span class="token punctuation">,</span>
  MatButtonModule<span class="token punctuation">,</span>
  MatCardModule<span class="token punctuation">,</span>
  MatFormFieldModule<span class="token punctuation">,</span>
  MatInputModule<span class="token punctuation">,</span>
  MatOptionModule<span class="token punctuation">,</span>
  MatSelectModule
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/material"</span><span class="token punctuation">;</span>

@<span class="token function">NgModule</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  declarations<span class="token punctuation">:</span> <span class="token punctuation">[</span>MetaComponentComponent<span class="token punctuation">]</span><span class="token punctuation">,</span>
  imports<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    CommonModule<span class="token punctuation">,</span>
    MatSnackBarModule<span class="token punctuation">,</span>
    MatButtonModule<span class="token punctuation">,</span>
    MatCardModule<span class="token punctuation">,</span>
    MatFormFieldModule<span class="token punctuation">,</span>
    MatInputModule<span class="token punctuation">,</span>
    MatOptionModule<span class="token punctuation">,</span>
    MatSelectModule<span class="token punctuation">,</span>
    MatSnackBarModule
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  exports<span class="token punctuation">:</span> <span class="token punctuation">[</span>MetaComponentComponent<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">MetaModule</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

import { MetaComponentComponent } from "./meta-component/meta-component.component";

import {

MatSnackBarModule,

MatButtonModule,

MatCardModule,

MatFormFieldModule,

MatInputModule,

MatOptionModule,

MatSelectModule

} from "@angular/material";

@NgModule({

declarations: [MetaComponentComponent],

imports: [

CommonModule,

MatSnackBarModule,

MatButtonModule,

MatCardModule,

MatFormFieldModule,

MatInputModule,

MatOptionModule,

MatSelectModule,

MatSnackBarModule

],

exports: [MetaComponentComponent]

})

export class MetaModule {}

Mình đã thêm vào một số module của Material Design để code frontend luôn

Import thêm MetaModule và app.module.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/platform-browser"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> NgModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> UtilModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./util/util.module"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> MetaModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./meta/meta.module"</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> AppComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./app.component"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserAnimationsModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/platform-browser/animations"</span><span class="token punctuation">;</span>

@<span class="token function">NgModule</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
 declarations<span class="token punctuation">:</span> <span class="token punctuation">[</span>AppComponent<span class="token punctuation">]</span><span class="token punctuation">,</span>
 imports<span class="token punctuation">:</span> <span class="token punctuation">[</span>BrowserModule<span class="token punctuation">,</span> BrowserAnimationsModule<span class="token punctuation">,</span> UtilModule<span class="token punctuation">,</span> MetaModule<span class="token punctuation">]</span><span class="token punctuation">,</span>
 providers<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
 bootstrap<span class="token punctuation">:</span> <span class="token punctuation">[</span>AppComponent<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppModule</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

import { BrowserModule } from "@angular/platform-browser";

import { UtilModule } from "./util/util.module";

import { MetaModule } from "./meta/meta.module";

import { AppComponent } from "./app.component";

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule, BrowserAnimationsModule, UtilModule, MetaModule],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}

Xóa hết code html trong file app.component.html của app đi thay bằng tag selector của meta-component mà chúng ta tạo bên trên

File app.component.html

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-meta-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-meta-component</span><span class="token punctuation">&gt;</span></span>

<app-meta-component></app-meta-component>

Bây h công việc của chúng ta là sẽ code trong file meta

Đầu tiên là meta-component.comopnent.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> OnInit <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Web3Service <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../../util/web3.service"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> MatSnackBar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/material/snack-bar"</span><span class="token punctuation">;</span>

<span class="token keyword">declare</span> <span class="token keyword">let</span> <span class="token keyword">require</span><span class="token punctuation">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> metacoin_artifacts <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">"../../../../../build/contracts/MetaCoin.json"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  selector<span class="token punctuation">:</span> <span class="token string">"app-meta-component"</span><span class="token punctuation">,</span>
  templateUrl<span class="token punctuation">:</span> <span class="token string">"./meta-component.component.html"</span><span class="token punctuation">,</span>
  styleUrls<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"./meta-component.component.css"</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">MetaComponentComponent</span> <span class="token keyword">implements</span> <span class="token class-name">OnInit</span> <span class="token punctuation">{</span>
  accounts<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  MetaCoin<span class="token punctuation">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>

  model <span class="token operator">=</span> <span class="token punctuation">{</span>
    amount<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
    receiver<span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
    balance<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    account<span class="token punctuation">:</span> <span class="token string">""</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  status <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>

  <span class="token keyword">constructor</span><span class="token punctuation">(</span>
    <span class="token keyword">private</span> web3Service<span class="token punctuation">:</span> Web3Service<span class="token punctuation">,</span>
    <span class="token keyword">private</span> matSnackBar<span class="token punctuation">:</span> MatSnackBar
  <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Constructor: "</span> <span class="token operator">+</span> web3Service<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">ngOnInit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">watchAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>web3Service
      <span class="token punctuation">.</span><span class="token function">artifactsToContract</span><span class="token punctuation">(</span>metacoin_artifacts<span class="token punctuation">)</span>
      <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>MetaCoinAbstraction <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>MetaCoin <span class="token operator">=</span> MetaCoinAbstraction<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>MetaCoin<span class="token punctuation">.</span><span class="token function">deployed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>deployed <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>deployed<span class="token punctuation">)</span><span class="token punctuation">;</span>
          deployed<span class="token punctuation">.</span><span class="token function">Transfer</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> ev<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Transfer event came in, refreshing balance"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">watchAccount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>web3Service<span class="token punctuation">.</span>accountsObservable<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>accounts <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>accounts <span class="token operator">=</span> accounts<span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>account <span class="token operator">=</span> accounts<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">refreshBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setStatus</span><span class="token punctuation">(</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matSnackBar<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>status<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> duration<span class="token punctuation">:</span> <span class="token number">3000</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">async</span> <span class="token function">sendCoin</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>MetaCoin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStatus</span><span class="token punctuation">(</span><span class="token string">"Metacoin is not loaded, unable to send transaction"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">const</span> amount <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>amount<span class="token punctuation">;</span>
    <span class="token keyword">const</span> receiver <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>receiver<span class="token punctuation">;</span>

    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Sending coins"</span> <span class="token operator">+</span> amount <span class="token operator">+</span> <span class="token string">" to "</span> <span class="token operator">+</span> receiver<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStatus</span><span class="token punctuation">(</span><span class="token string">"Initiating transaction... (please wait)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> deployedMetaCoin <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>MetaCoin<span class="token punctuation">.</span><span class="token function">deployed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> transaction <span class="token operator">=</span> <span class="token keyword">await</span> deployedMetaCoin<span class="token punctuation">.</span>sendCoin<span class="token punctuation">.</span><span class="token function">sendTransaction</span><span class="token punctuation">(</span>
        receiver<span class="token punctuation">,</span>
        amount<span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token keyword">from</span><span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>account <span class="token punctuation">}</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>transaction<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStatus</span><span class="token punctuation">(</span><span class="token string">"Transaction failed!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStatus</span><span class="token punctuation">(</span><span class="token string">"Transaction complete!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStatus</span><span class="token punctuation">(</span><span class="token string">"Error sending coin; see log."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">async</span> <span class="token function">refreshBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Refreshing balance"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> deployedMetaCoin <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>MetaCoin<span class="token punctuation">.</span><span class="token function">deployed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>deployedMetaCoin<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Account"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>account<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> metaCoinBalance <span class="token operator">=</span> <span class="token keyword">await</span> deployedMetaCoin<span class="token punctuation">.</span>getBalance<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>account
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Found balance: "</span> <span class="token operator">+</span> metaCoinBalance<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>balance <span class="token operator">=</span> metaCoinBalance<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setStatus</span><span class="token punctuation">(</span><span class="token string">"Error getting balance; see log."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token function">setAmount</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Setting amount: "</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>amount <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">setReceiver</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Setting receiver: "</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span>receiver <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

import { Component, OnInit } from "@angular/core";

import { Web3Service } from "../../util/web3.service";

import { MatSnackBar } from "@angular/material/snack-bar";

const metacoin_artifacts = require("../../../../../build/contracts/MetaCoin.json");

@Component({

selector: "app-meta-component",

templateUrl: "./meta-component.component.html",

styleUrls: ["./meta-component.component.css"]

})

export class MetaComponentComponent implements OnInit {

accounts: string[];

MetaCoin: any;

model = {

amount: 5,

receiver: "",

balance: 0,

account: ""

};

status = "";

constructor(

private web3Service: Web3Service,

private matSnackBar: MatSnackBar

) {

console.log("Constructor: " + web3Service);

}

ngOnInit(): void {

this.watchAccount();

this.web3Service

.artifactsToContract(metacoin_artifacts)

.then(MetaCoinAbstraction => {

this.MetaCoin = MetaCoinAbstraction;

this.MetaCoin.deployed().then(deployed => {

deployed.Transfer({}, (err, ev) => {

this.refreshBalance();

});

}

watchAccount() {

this.web3Service.accountsObservable.subscribe(accounts => {

this.accounts = accounts;

this.model.account = accounts[0];

});

}

setStatus(status) {

this.matSnackBar.open(status, null, { duration: 3000 });

}

async sendCoin() {

if (!this.MetaCoin) {

this.setStatus("Metacoin is not loaded, unable to send transaction");

return;

}

const amount = this.model.amount;

const receiver = this.model.receiver;

console.log("Sending coins" + amount + " to " + receiver);

this.setStatus("Initiating transaction... (please wait)");

try {

const deployedMetaCoin = await this.MetaCoin.deployed();

const transaction = await deployedMetaCoin.sendCoin.sendTransaction(

receiver,

amount,

{ from: this.model.account }

);

if (!transaction) {

this.setStatus("Transaction failed!");

} else {

this.setStatus("Transaction complete!");

}

} catch (e) {

this.setStatus("Error sending coin; see log.");

}

async refreshBalance() {

try {

console.log("Account", this.model.account);

const metaCoinBalance = await deployedMetaCoin.getBalance.call(

this.model.account

);

console.log("Found balance: " + metaCoinBalance);

this.model.balance = metaCoinBalance;

this.setStatus("Error getting balance; see log.");

}

setAmount(e) {

console.log("Setting amount: " + e.target.value);

this.model.amount = e.target.value;

}

setReceiver(e) {

console.log("Setting receiver: " + e.target.value);

this.model.receiver = e.target.value;

}

Tiếp theo là meta-component.component.html

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">flex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>70<span class="token punctuation">"</span></span> <span class="token attr-name">flex-offset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>15<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card-container<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>banner<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
      <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>120<span class="token punctuation">"</span></span>
      <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Angular Logo<span class="token punctuation">"</span></span>
      <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==<span class="token punctuation">"</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-card-header</span><span class="token punctuation">&gt;</span></span>Balance<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-card-header</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-card-content</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-form-field</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address-selector<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address-field<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-select</span>
          <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>account<span class="token punctuation">"</span></span>
          <span class="token attr-name">(selectionChange)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>refreshBalance()<span class="token punctuation">"</span></span>
          <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>model.account<span class="token punctuation">"</span></span>
          <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Address<span class="token punctuation">"</span></span>
        <span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-option</span> <span class="token attr-name">*ngFor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>let account of accounts<span class="token punctuation">"</span></span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>account<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{
            account
          }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-option</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-select</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-form-field</span><span class="token punctuation">&gt;</span></span>

      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
        You have <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>balance<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ model.balance }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> META
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-card-content</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-card</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-card-header</span><span class="token punctuation">&gt;</span></span>Send MetaCoin<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-card-header</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-card-content</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>send-metacoin<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-form-field</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address-field<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
            <span class="token attr-name">matInput</span>
            <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>amount<span class="token punctuation">"</span></span>
            <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Amount<span class="token punctuation">"</span></span>
            <span class="token attr-name">(change)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>setAmount($event)<span class="token punctuation">"</span></span>
          <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">matPrefix</span><span class="token punctuation">&gt;</span></span>$<span class="token entity" title=" ">&amp;nbsp;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">matSuffix</span><span class="token punctuation">&gt;</span></span>.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-form-field</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mat-form-field</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>address-field<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
            <span class="token attr-name">matInput</span>
            <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>receiver<span class="token punctuation">"</span></span>
            <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Receiver Address<span class="token punctuation">"</span></span>
            <span class="token attr-name">(change)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>setReceiver($event)<span class="token punctuation">"</span></span>
          <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-form-field</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

      <span class="token comment">&lt;!-- &lt;button &gt;Basic&lt;/button&gt; --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">mat-raised-button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>send<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sendCoin()<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        Send MetaCoin
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-card-content</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mat-card</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span>
    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>clouds<span class="token punctuation">"</span></span>
    <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Gray Clouds Background<span class="token punctuation">"</span></span>
    <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span>
    <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2611.084<span class="token punctuation">"</span></span>
    <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>485.677<span class="token punctuation">"</span></span>
    <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0 0 2611.084 485.677<span class="token punctuation">"</span></span>
  <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
      <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Path_39<span class="token punctuation">"</span></span>
      <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Path 39<span class="token punctuation">"</span></span>
      <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z<span class="token punctuation">"</span></span>
      <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>translate(142.69 -634.312)<span class="token punctuation">"</span></span>
      <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#eee<span class="token punctuation">"</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<img

width="120"

alt="Angular Logo"

src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="

/>

</div>

<mat-card class="card">

<mat-card-header>Balance</mat-card-header>

<mat-card-content>

<mat-form-field id="address-selector" class="address-field">

<mat-select

name="account"

(selectionChange)="refreshBalance()"

[(value)]="model.account"

placeholder="Address"

>

<mat-option *ngFor="let account of accounts" [value]="account">{{

account

}}</mat-option>

</mat-select>

</mat-form-field>

<p>

You have <span id="balance">{{ model.balance }}</span> META

</p>

</mat-card-content>

</mat-card>

<mat-card-header>Send MetaCoin</mat-card-header>

<mat-card-content>

<mat-form-field class="address-field">

<input

type="text"

matInput

id="amount"

placeholder="Amount"

(change)="setAmount($event)"

/>

</mat-form-field>

<input

matInput

id="receiver"

placeholder="Receiver Address"

(change)="setReceiver($event)"

/>

</mat-form-field>

</div>

Send MetaCoin

</button>

</mat-card-content>

</mat-card>

<svg

id="clouds"

alt="Gray Clouds Background"

xmlns="http://www.w3.org/2000/svg"

width="2611.084"

height="485.677"

viewBox="0 0 2611.084 485.677"

>

<path

id="Path_39"

data-name="Path 39"

d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z"

transform="translate(142.69 -634.312)"

fill="#eee"

/>

</svg>

</div>

Một chút CSS meta-component.component.css

<span class="token selector">.card</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px 80px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fafafa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.image-center</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.card-container</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">svg#clouds</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> -160px<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> -230px<span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> -10<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1920px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.address-field</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.send-metacoin</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

.card {

margin: 20px 80px;

background-color: #fafafa;

}

.image-center {

margin: auto;

}

.card-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

svg#clouds {

position: fixed;

bottom: -160px;

left: -230px;

z-index: -10;

width: 1920px;

}

.address-field {

width: 50%;

}

.send-metacoin {

display: flex;

flex-direction: column;

}

Kết quả

Các bạn có thể tham khảo trong repo này :

https://github.com/vinhyenvodoi98/EthCoinBase-Angular

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Xây dựng ứng dụng phi tập trung (Dapp) với Angular

Chuẩn bị

Môi trường

Triển khai ứng dụng

Web3 connect

Giao diện

Kết quả

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript