Interact with Contract

How to connect a Web-based frontend to Ethereum network ?

Khi thiết lập Web3.js cho dApp, điều đầu tiên cần thực hiện là cung cấp provider. Provider cho phép người dùng tương tác với smart contract trên Ethereum từ một trang web thông thường. Nếu không có provider, mỗi người dùng cần phải tải tất cả dữ liệu từ blockchain và chạy nó như một node độc lập, cùng với đó là liên tục cập nhật các giao dịch mới trên ehtereum network. Thông thường người dùng không bao giờ thực hiện như vậy. Vì vậy dApp cần có provider.

Sử dụng MetaMask

Người dùng cần cài đặt MetaMask Chrome Extension trước khi tương tác với dApp. Ngay sau khi cài đặt, nó sẽ thêm một object vào window object của trình duyệt.

import Web3 from 'web3';

let web3 = null;
function setProvider() => {
  if (window.ethereum) {
    const ethereum = window.ethereum
    web3 = new Web3(ethereum);
    web3.eth.net.isListening()
      .then(async () => {
          console.log('connect successfully!')
      })
      .catch(e => {
          console.log('error: ', e);
      })
  }
}

Sử dụng Infura RPC URL

Infura url có cấu trúc như sau: + Https: https://mainnet.infura.io/YOUR-PROJECT-ID + Websockets: wss://mainnet.infura.io/ws/v3/YOUR-PROJECT-ID

Kết nối thông qua Websocket provider:

import Web3 from 'web3';

let web3 = null;
function setProvider() {
  let infuraUrl = 'wss://mainnet.infura.io/ws/v3/YOUR-PROJECT-ID';
  web3 = new Web3(new Web3.providers.WebsocketProvider(infuraUrl));
  web3.eth.net.isListening()
      .then(async () => {
          console.log('connect successfully!')
      })
      .catch(e => {
          console.log('error: ', e);
      })
} 

Kết nối thông qua Https:

import Web3 from 'web3';

let web3 = null;
function setProvider() {
  let infuraUrl = 'https://mainnet.infura.io/YOUR-PROJECT-ID';
  web3 = new Web3(infuraUrl);
  web3.eth.net.isListening()
    .then(async () => {
      console.log('connect successfully!')
    })
    .catch(e => {
      console.log('error: ', e);
    })
}

How to connect a web-based frontend to smart contract ?

Để có thể tương tác với smart contract sử dụng web3.js, ta cần cung cấp tệp ABI định dạng json. Nó cung cấp các hàm có sẵn để có thể gọi đến smart contract. Tệp ABI json có định dạng cơ bản như sau:

[
   {
      "inputs":[

      ],
      "stateMutability":"nonpayable",
      "type":"constructor"
   },
   {
      "inputs":[
         {
            "internalType":"address",
            "name":"voter",
            "type":"address"
         }
      ],
      "name":"checkVote",
      "outputs":[
         {
            "internalType":"string",
            "name":"",
            "type":"string"
         }
      ],
      "stateMutability":"view",
      "type":"function"
   }
]

Sau khi có ABI và địa chỉ của smart contract, ta kết nối smart contract. Ở đoạn code dưới đây sử dụng web3.js, kết nối ethereum network qua infurra.

import Web3 from 'web3';

const abi = [{}];
const address = '0xD37CDCff3CF5387ce0dC84773585c16b35802e36';
const web3 = new Web3('https://mainnet.infura.io/YOUR-PROJECT-ID');
const myContract = new web3.eth.Contract(abi, address);

(3): Abi định nghĩa các hàm của smart contract. (4): Địa chỉ của smart contract. (6): Hàm kết nối với smart contract sử dụng web3.js.

Ta có thể lấy ABI trên etherscan bằng cách gọi api. https://api-kovan.etherscan.io/api?module=contract&action=getabi&address=SMART-CONTRACT-ADDRESS

Read data and update Smart Contracts

Read data

Sau khi tạo được một contract thông qua hàm const myContract = new web3.ether.contract(abi, address). Tất cả các hàm, event của smart contract sẽ được liệt kê trong myContract.methods. Ví dụ ta có thể gọi myContract.methods.myFunction() nếu smart contract có hàm myFunction()

Dưới đây là ví dụ về gọi hàm trong smart contract. Trong smart contract bầu cử, ta lấy danh sách các ứng cử viên hiện có.

import Web3 from 'web3';

const abi = [{}];
const address = '0xD37CDCff3CF5387ce0dC84773585c16b35802e36';
const web3 = new Web3('https://mainnet.infura.io/YOUR-PROJECT-ID');
const myContract = new web3.eth.Contract(abi, address);
myContract.methods.getChoices().call(function(err, result){
    console.log(result);
})

Update the smart contract

Chúng ta cập nhật contract thông qua việc gửi transaction kèm theo các tham số yêu cầu của smart contract.

Dưới đây là đoạn code tham khảo cho việc cập nhật smart contract trong việc bầu chọn các ứng cử viên.

Sử dụng MetaMask

import Web3 from 'web3';

const abi = [{}];
const address = '0xD37CDCff3CF5387ce0dC84773585c16b35802e36';
const web3 = web3 = new Web3(window.ethereum);
const myContract = new web3.eth.Contract(abi, address);

async function vote(candidate){
    try{
        let estimateGas = await contract.methods.vote(candidate).estimateGas({gas});
        let result = await contract.methods.vote(candidate).send({from: address, gas});
        console.log('result: ', result);
    }catch(e){
        console.log('error: ', e);
    } 
}

vote('Trump');

(10): Gọi hàm để ướt lượng gas cần thiết cho việc thực hiện transaction. (12): Hàm này sẽ kích hoạt MetaMask cho yêu cầu thực hiện transaction và trả về kết quả của transaction

Smart Contract Events with Web3.js

Smart contract có khả năng gửi các sự kiện xảy ra bên trong smart contract. Người dùng có thể đăng ký đến các sự kiện này, web3.js cung cấp tính năng này để đăng ký và lắng nghe những sự kiện đang diễn ra trong smart contract.

Hàm myContract.events.MyEvent([options][, callback]) của web3.js cho phép nhận các sự kiện trong smart contract.

• options - object

  • filter - object (tùy chọn) : lọc các sự kiện với các tham số có sẵn. ví dụ: {filter: {myNumber: [12,13]}} lọc các sự kiện có myNumber bằng 12 và 13.

  • fromBlock - Number|String|BN|BigNumber : Vị trí số block để lấy sự kiện. Những giá trị được định nghĩa sắn "latest", "pending", "genesis".

• callback - function (Tùy chọn) : giá trị sẽ được gửi về ở hàm này nếu có sự kiện sảy ra. Gồm 2 tham số là error đứng trước và data đứng sau.

import Web3 from 'web3';

const abi = [{}];
const address = '0xD37CDCff3CF5387ce0dC84773585c16b35802e36';
const web3 = new Web3(new Web3.providers.WebsocketProvider('wss://mainnet.infura.io/ws/v3/YOUR-PROJECT-ID'));
const myContract = new web3.eth.Contract(abi, address);
myContract.events.NewVote({fromBlock: 'latest'}, function(err, data){
    console.log(data);
})

(7) : với fromBlock: 'latest' là bộ lọc lấy dữ liệu ở block mới nhất.