使用Ethers.js加速DApp開發

發表於 2019年5 月18日星期六上午 10:44:06

今天的去中心化應用程序堆棧通常包括前端，智能合約和與區塊鏈交互的框架。開發人員經常使用Web3.js與以太坊區塊鏈進行交互; 但是，Web3.js很大，它的文檔需要改進，而且難以維護。Ethers.js是一個替代庫，它在較小的，經過良好測試的軟體包中提供Web3.js的所有功能。

在本教程中，我們使用Angular 7.X和Ethers.js創建一個簡單的錢包應用程序，並與部署在以太坊區塊鏈上的智能合約進行交互。

先決條件

首先，安裝node.js和Angular。您可以找到以下說明：

創建錢包應用程序

要開始，請下載以下初始Angular應用程序。確保你在initial分支機構。開始，跑。

shell

git checkout -b initial
npm install
ng serve --open

在瀏覽器中使用「初始應用程序」字樣迎接您。

Ethers.js遵循安裝節點包的一般標準，運行以下安裝它：

shell

npm install --save ethers

現在一切都設置為與Ethers.js一起使用。

創建錢包

我們首先使用Ethers.js創建一個新錢包。切換/src/app/wallet/wallet.component.html到以下html：

<div fxFlex="20">div>
<div fxFlex="60" class="wallet">
    <button mat-raised-button color="primary" (click)="onSubmit()">Generate錢包button>
    <p *ngIf="publickey">Public Key: {{publickey}}p>
    <p *ngIf="privatekey">Private Key: {{privatekey}}p>
div>
<div>div>

要創建錢包，我們使用wallet.createRandom()創建隨機的公鑰和私鑰。我們可以將此錢包用於其他操作，例如創建交易。

在/src/app/wallet/wallet.component.ts，將onSubmit() {}功能更改為以下內容：

onSubmit() {
    const random錢包= ethers.Wallet.createRandom();
    this.publickey = randomWallet.address;
    this.privatekey = randomWallet.privateKey;
    const wallet = new ethers.Wallet(this.privatekey);
}

在我們對這個錢包做任何事情之前，我們必須先將它連接到以太坊區塊鏈。我們使用Ethers.js的默認web3提供程序執行此操作。

更新以下ngOnInit() {}功能wallet.component.ts：

ngOnInit() {
    this.provider = ethers.getDefaultProvider('homestead');;
}

此代碼獲取Metamask提供的web3連接，並使其可供Ethers使用。

發送和簽署交易

接下來，我們創建了使用我們的應用程序發送事務的功能。Ethers.js提供了編輯交易中任何數據的功能，例如氣體限制以及您要將交易發送到的地址。要使用錢包發送事務，請創建一個使用sendTransactionEthers.js中的方法的發送事務按鈕，以及一些用於事務輸入的表單欄位。

裡面/src/app/wallet/wallet.component.html添加下面的代碼的兩個內線

的

<form [formGroup]="transactionForm" (ngSubmit)="sendTransaction(transactionForm.value)">
        <mat-form-field appearance="outline">
        <mat-label>Tomat-label>
        <input formControlName="toAddress" matInput placeholder="0xAddress">
        mat-form-field>
        <mat-form-field appearance="outline">
        <mat-label>Amountmat-label>
        <input formControlName="etherAmount" matInput placeholder="1">
        <span matSuffix>Etherspan>
        mat-form-field>
        <button mat-raised-button color="secondary">Send Transactionbutton>
    form>

在constructor所述的wallet.component.ts類，創建基本形式的信息。

constructor(private fb: FormBuilder) {
    this.transactionForm = fb.group({
        'toAddress': [null],
        'etherAmount': [null]
    });
}

為了發送交易，Ethers.js sendTransaction為所有錢包提供了一種方法。sendTransaction在wallet.component.ts類中添加一個方法，輸入表單。

sendTransaction(form: any) {
    let transaction = {
        to: form.toAddress,
        value: ethers.utils.parseEther(form.etherAmount)
    }

    this.wallet.sendTransaction(transaction)
        .then((tx) => {
            console.log(tx);
        })
}

我們首先創建事務對象，給出事務在該to欄位中的位置。value表示以默認為單位Wei的多少以太坊被發送到所提到的地址。我們使用parseEtherEthers.js提供的util將Ether轉換為Wei。創建交易對象後，我們使用錢包發送交易。在此實現中，控制台記錄事務回執。

與智能合約互動

以太坊的一個新穎之處是在區塊鏈上創建和使用智能合約。Dapp開發依賴於與智能合約的交互，而Ethers.js有一個解決方案。使用Ethers.js，您可以與智能合約互動，與雙方交易所令牌或玩多種Dapp遊戲中的一種。

以此樣本合約為例。此契約通過將變數添加到區塊鏈來存儲變數，並且可以讀取所有當前存儲的變數。在以太坊區塊鏈上存儲值對於Dapp開發非常有用，因為存儲允許開發人員引用變數以進行交互，例如存儲簽名或跟蹤密碼攻擊以進行交易。通過與Ethers.js的這份合約進行交互，我們在這裡創建了ABI 。ABI代表應用程序二進位介面。此介面定義在智能合約地址中找到的功能，您可以使用它來調用智能合約的功能。

let abi = [{"constant":false,"inputs":[{"name":"_value","type":"uint256"}],"name":"add","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getValues","outputs":[{"name":"","type":"uint256[]"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"}];

我們知道合約的地址是0x8a32989b65186d3596251d7d7c8a427a26669354。使用這些和我們的錢包，我們可以使用Ethers創建合約對象。例如：

let contractAddress = '0x8a32989b65186d3596251d7d7c8a427a26669354';

let contract = new ethers.Contract(contractAddress, abi, wallet);

在合約中，我們找到了添加和getValues功能。要使用Ethers調用這些函數，請調用ABI中列出的函數。

await contract.add("Message");
contract.getValues()
        .then((result) => {
        console.log(result);
        });

我們wallet.component.html通過添加一個額外的欄位和一個getValues欄位將它添加到我們的UI中：

<form [formGroup]="contractForm" (ngSubmit)="addToContract(contractForm.value)">
        <mat-form-field appearance="outline">
        <mat-label>Valuemat-label>
        <input formControlName="value" matInput placeholder="1">
        mat-form-field>
        <button mat-raised-button color="secondary">Add to Contractbutton>
form>
<button mat-raised-button color="primary" (click)="getValues()">Get Valuesbutton>
<p *ngIf="message">Message: {{message}}p>

將下面的代碼添加到constructor，然後創建getValues()和addToContract()函數。

constructor(private fb: FormBuilder) {
        this.contractForm = fb.group({
            'value': [null]
        })
        this.abi = [{"constant":false,"inputs":[{"name":"_value","type":"uint256"}],"name":"add","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getValues","outputs":[{"name":"","type":"uint256[]"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"}];
        this.contractAddress = "0x8a32989b65186d3596251d7d7c8a427a26669354";
    }

addToContract(form: any) {
            let contract = new ethers.Contract(this.contractAddress, this.abi, this.wallet);
            contract.add(form.value);
    }

    getValues() {
        let contract = new ethers.Contract(this.contractAddress, this.abi, this.wallet);
        contract.getValues()
                .then((result) => {
                    this.message = result;
                });
    }

重新運行應用程序，ng serve --open您應該有一個基本但功能正常的錢包應用程序。

下一步

在本教程中，我們創建了一個dapp，用於創建錢包，發送事務以及與智能合約進行交互。使用Ethers.js，我們可以輕鬆地與以太坊區塊鏈交互，並擴展到更複雜的用例。進一步的改進可能是創建更好的設計，添加更多的錢包集成，以及錢包和合約組件之間的關注點分離。有了這個演示應用程序，您現在可以通過在您的dapp中包含錢包Web組件來添加錢包應用程序。

Ethers.js是一個功能強大的工具，是d3開發的web3的強大替代品。小巧緊湊的庫使得創建dApp變得輕而易舉，從開發人員的肩膀中解脫出來，使其更容易專註於智能合約或網站設計。有關Ethers.js的更多信息，請查看文檔。您可以在此處找到master分支上的最終代碼庫。

原文：https://kauri.io/article/805715d4e66440d996fee0930a6d0fbc/v2/accelerating-dapp-development-with-ethers.js