7-4. Thành phần TransferOwnership

chuyển quyền sở hữu

1. Vai trò của thành phần TransferOwnership

2. Mã thành phần

   2-1. Kết xuất nút transferOwnership

   2-2. Thành phần TransferOwnership

3. Tương tác với hợp đồng: phương pháp transferOwnership

4. Cập nhật dữ liệu vào cửa hàng: hành động updateOwnerAddress

1) Vai trò của thành phần TransferOwnership

Chủ sở hữu của ảnh có thể chuyển quyền sở hữu ảnh cho một người dùng khác. Bằng cách gửi giao dịch transferOwnership, địa chỉ của chủ sở hữu mới sẽ được lưu vào lịch sử quyền sở hữu. Lịch sử này theo dõi các địa chỉ của chủ sở hữu trong quá khứ.

2) Mã thành phần

2-1) Kết xuất nút TransferOwnership

Chúng ta sẽ chỉ kết xuất nút TransferOwnership trên thành phần FeedPhoto khi địa chỉ của chủ sở hữu ảnh khớp với địa chỉ của người dùng đã đăng nhập (tức bạn là chủ sở hữu).

// src/components/Feed.js

<div className="FeedPhoto">
  // ...
  {
    userAddress.toUpperCase() === currentOwner.toUpperCase() && (
      <TransferOwnershipButton
        className="FeedPhoto__transferOwnership"
        id={id}
        issueDate={issueDate}
        currentOwner={currentOwner}
      />
    )
  }
  // ...
</div>

2-2) Thành phần TransferOwnership

// src/components/TransferOwnership.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as photoActions from 'redux/actions/photos'
import ui from 'utils/ui'
import { isValidAddress } from 'utils/crypto'
import Input from 'components/Input'
import Button from 'components/Button'

import './TransferOwnership.scss'

class TransferOwnership extends Component {
  state = {
    to: null,
    warningMessage: '',
  }

  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    const { id, transferOwnership } = this.props
    const { to } = this.state

    if (!isValidAddress(to)) {
      return this.setState({
        warningMessage: '* Địa chỉ ví không hợp lệ',
      })
    }
    transferOwnership(id, to)
    ui.hideModal()
  }

  render() {
    const { id, issueDate, currentOwner } = this.props
    return (
      <div className="TransferOwnership">
        <h3 className="TransferOwnership__copyright">Copyright. {id}</h3>
        <p className="TransferOwnership__issueDate">Issue Date  {issueDate}</p>
        <form className="TransferOwnership__form" onSubmit={this.handleSubmit}>
          <Input
            className="TransferOwnership__from"
            name="from"
            label="Current Owner"
            value={currentOwner}
            readOnly
          />
          <Input
            className="TransferOwnership__to"
            name="cho"
            label="Chủ sở hữu mới"
            onChange={this.handleInputChange}
            placeholder="Chuyển quyền sở hữu cho..."
            err={this.state.warningMessage}
            required
          />
          <Button
            type="submit"
            title="Transfer Ownership"
          />
        </form>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => ({
  transferOwnership: (id, to) => dispatch(photoActions.transferOwnership(id, to)),
})

export default connect(null, mapDispatchToProps)(TransferOwnership)

3) Tương tác với hợp đồng: phương pháp transferOwnership

Chúng ta đã tạo hàm transferOwnership trong hợp đồng Klaystagram ở chương 4. Soạn hợp đồng thông minh Klaystagram. Hãy gọi hàm từ ứng dụng.

1. Gọi phương pháp hợp đồng: transferOwnership

   • id: tokenId của ảnh

   • to: Địa chỉ để chuyển quyền sở hữu ảnh

2. Đặt các tùy chọn giao dịch

   • from: Một tài khoản gửi giao dịch này và thanh toán phí giao dịch.

   • gas: Lượng gas tối đa mà tài khoản from sẵn sàng thanh toán cho giao dịch này.

3. Sau khi gửi giao dịch, hiển thị tiến trình cùng vòng đời giao dịch bằng thành phần Toast.

4. Nếu giao dịch thành công tiến vào một khối, gọi hàm updateOwnerAddress để cập nhật địa chỉ của chủ sở hữu mới vào trang nguồn cấp dữ liệu.

// src/redux/actions/photo.js

export const transferOwnership = (tokenId, to) => (dispatch) => {
  // 1. Gọi phương pháp hợp đồng: transferOwnership
  try{
    KlaystagramContract.methods.transferOwnership(tokenId, to).send({

      // 2. Đặt tùy chọn giao dịch
      from: getWallet().address,
      gas: '20000000',
    }, (error, txHash) => {
      if (error) throw error;

      // 3. Sau khi gửi giao dịch,
      //thể hiện tiến trình cùng vòng đời giao dịch bằng thành phần `Toast`.
      ui.showToast({
        trạng thái: 'đang chờ',
        message: `Đang gửi giao dịch... (transferOwnership)`,
        txHash,
      })
    })
      .then((receipt) => {
        ui.showToast({
          trạng thái: receipt.trạng thái ? 'success' : 'fail',
          message: `Đã nhận biên lai! Điều đó nghĩa là giao dịch của bạn
              ở trong khối klaytn (#${receipt.blockNumber}) (transferOwnership)`,
            link: receipt.transactionHash,
          })

          // 4. Nếu giao dịch của bạn thành công tiến vào một khối,
        // gọi hàm `updateOwnerAddress` để cập nhật địa chỉ của chủ sở hữu mới vào trang nguồn cấp dữ liệu.
        dispatch(updateOwnerAddress(tokenId, to))
      })
  } catch (error) {
    ui.showToast({
      trạng thái: 'lỗi',
      message: error.toString(),
    })
  }
}

4) Cập nhật thông tin vào cửa hàng redux: hành động updateOwnerAddress

Sau khi chuyển quyền sở hữu, FeedPhoto cần được kết xuất lại bằng địa chỉ của chủ sở hữu mới. Để cập nhật địa chỉ của chủ sở hữu mới, hãy gọi dữ liệu feed từ cửa hàng và tìm ảnh có tokenId từ biên lai. Sau đó, đẩy địa chỉ của chủ sở hữu mới lên ownerHistory và setFeed của ảnh.

const updateOwnerAddress = (tokenId, to) => (dispatch, getState) => {
  const { photos: { feed } } = getState()
  const newFeed = feed.map((photo) => {
    if (photo['id'] !== tokenId) return photo
    photo['ownerHistory'] = [...photo['ownerHistory'], to]
    return photo
  })
  dispatch(setFeed(newFeed))
}