7-1. Kết nối hợp đồng với Frontend

1. src/klaytn

   • caver.js

   • KlaystagramContract.js

2. src/redux

1) src/klaytn

src/klaytn: Chứa các tập tin giúp tương tác với chuỗi khối Klaytn.

• src/klaytn/caver.js: Khởi tạo caver trong cài đặt đã định cấu hình.

  cf) caver-js là thư viện RPC tạo kết nối với nút Klaytn, tương tác với nút hoặc hợp đồng thông minh được triển khai trên Klaytn.

• src/klaytn/Klaystagram.js: Tạo một phiên bản hợp đồng bằng cách sử dụng API caver-js. Bạn có thể tương tác với hợp đồng thông qua phiên bản này

caver.js

/**
 * thư viện caver-js giúp tạo kết nối với nút Klaytn.
 * Bạn có thể kết nối với một nút Klaytn cụ thể bằng cách cài đặt giá trị 'rpcURL'.
 * rpcURL mặc định là 'https://public-en-baobab.klaytn.net'.
 */
import Caver from 'caver-js'

export const config = {
  rpcURL: 'https://public-en-baobab.klaytn.net'
}

export const cav = new Caver(config.rpcURL)

export default cav

Sau khi tạo kết nối, bạn có thể gọi phương pháp trên hợp đồng thông minh bằng caver.

KlaystagramContract.js

// klaytn/KlaystagramContract.js

import { cav } from "klaytn/caver"

/**
 * 1. Tạo phiên bản hợp đồng
 * ex:) cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS) mới
 * Bạn có thể gọi phương pháp hợp đồng thông qua phiên bản này.
 */

const KlaystagramContract = DEPLOYED_ABI
  && DEPLOYED_ADDRESS
  && new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)

export default KlaystagramContract

Để tương tác với hợp đồng, ta cần một phiên bản hợp đồng.

KlaystagramContract tạo một phiên bản hợp đồng để tương tác với hợp đồng Klaystagram bằng cách cung cấp DEPLOYED_ABI(giao diện nhị phân ứng dụng) và DEPLOYED_ADDRESS cho API cav.klay.Contract.

Khi lập & triển khai hợp đồng Klaystagram.sol (5. Triển khai hợp đồng), ta đã tạo các tập tin deployedABI và deployedAddress. Các tập tin này chứa ABI của hợp đồng Klaystagram và địa chỉ hợp đồng đã triển khai.

Nhờ có cấu hình của webpack, chúng ta có thể truy cập dưới dạng một biến.(DEPLOYED_ADDRESS, DEPLOYED_ABI)

• DEPLOYED_ADDRESS trả về địa chỉ đã triển khai

• DEPLOYED_ABI trả về ABI hợp đồng Klaystagram

cf) ABI hợp đồng(giao diện nhị phân ứng dụng) ABI hợp đồng là giao diện để gọi các phương pháp hợp đồng. Với giao diện này, ta có thể gọi các phương pháp hợp đồng sau đây

• contractInstance.methods.methodName().call()

• contractInstance.methods.methodName().send({ ... })

Giờ chúng ta đã sẵn sàng để tương tác với hợp đồng trong ứng dụng. cf. Để biết thêm thông tin, hãy tham chiếu caver.klay.Contract.

2) src/redux

Chúng ta sẽ tạo các hàm API với phiên bản Klaystagram. Sau khi gọi các hàm API, chúng ta dùng cửa hàng redux để kiểm soát tất cả các luồng dữ liệu.

1. Nhập phiên bản hợp đồng

   Bằng cách sử dụng phiên bản KlaystagramContract, chúng ta có thể gọi phương pháp hợp đồng khi các thành phần cần tương tác với hợp đồng.

2. Gọi phương pháp hợp đồng

3. Lưu trữ dữ liệu từ hợp đồng

   Nếu giao dịch của bạn thành công, chúng ta sẽ gọi hành động redux để lưu thông tin từ hợp đồng vào cửa hàng redux.

// src/redux/actions/photos.js

// 1. Nhập phiên bản hợp đồng
import KlaystagramContract from 'klaytn/KlaystagramContract'

const setFeed = (feed) => ({
  type: SET_FEED,
  payload: { feed },
})

const updateFeed = (tokenId) => (dispatch, getState) => {

  // 2. Gọi phương pháp hợp đồng (GỌI): getPhoto()
  KlaystagramContract.methods.getPhoto(tokenId).call()
    .then((newPhoto) => {
      const { photos: { feed } } = getState()
      const newFeed = [feedParser(newPhoto), ...feed]

      // 3. Lưu trữ dữ liệu từ hợp đồng
      dispatch(setFeed(newFeed))
    })
}

Cửa hàng redux kiểm soát tất cả dữ liệu ở giao diện