7-4. TransferOwnership Component

소유권 양도

1. TransferOwnership 컴포넌트의 역할

2. Component code

   2-1. transferOwnership 버튼 렌더링

   2-2. TransferOwnership 컴포넌트

3. Interact with contract: transferOwnership method

4. 리덕스 스토어의 데이터 업데이트: updateOwnerAddress 액션

1) TransferOwnership component's role

사진 소유자는 사진의 소유권을 다른 사용자에게 양도할 수 있습니다. transferOwnership 트랜잭션을 전송하여 새로운 소유자의 주소가 소유권 기록에 저장되고, 이를 통해 과거 소유자들의 주소를 추적합니다.

2) Component code

2-1) Rendering TransferOwnership button

We are going to render TransferOwnership button on the FeedPhoto component only when photo's owner address matches with logged-in user's address (which means you are the owner).

// src/components/Feed.js

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

2-2) TransferOwnership component

// 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: '* Invalid wallet address',
      })
    }
    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="to"
            label="New Owner"
            onChange={this.handleInputChange}
            placeholder="Transfer Ownership to..."
            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) Interact with contract: transferOwnership method

Klaystagram 컨트랙트의 transferOwnership 함수는 4. Klaystagram 스마트 컨트랙트 작성에서 만들었어요. 이제 애플리케이션 그 함수를 호출해볼게요.

1. 컨트랙트 메서드를 호출합니다: transferOwnership

   • id: 사진의 tokenId

   • to: 사진의 소유권을 양도할 주소

2. 트랜잭션 옵션 설정

   • from: An account that sends this transaction and pays the transaction fee.

   • gas: The maximum amount of gas that the from account is willing to pay for this transaction.

3. After sending the transaction, show progress along the transaction lifecycle using Toast component.

4. 트랜잭션이 블록에 잘 담기게 되면 updateOwnerAddress 함수를 호출하여 피드 페이지에 새로운 소유자의 주소를 업데이트합니다.

// src/redux/actions/photo.js

export const transferOwnership = (tokenId, to) => (dispatch) => {
  // 1. Invoke the contract method: transferOwnership
  try{
    KlaystagramContract.methods.transferOwnership(tokenId, to).send({

      // 2. Set transaction options
      from: getWallet().address,
      gas: '20000000',
    }, (error, txHash) => {
      if (error) throw error;

      // 3. 트랜잭션 전송 후 
      // 'Toast' 컴포넌트를 사용하여 트랜잭션 생명 주기로 진행 상황을 나타냅니다.
      ui.showToast({
        status: 'pending',
        message: `Sending a transaction... (transferOwnership)`,
        txHash,
      })
    })
      .then((receipt) => {
        ui.showToast({
          status: receipt.status ? 'success' : 'fail',
          message: `Received receipt! It means your transaction is
            in klaytn block (#${receipt.blockNumber}) (transferOwnership)`,
          link: receipt.transactionHash,
        })

        // 4. If the transaction successfully gets into a block,
        // call `updateOwnerAddress` function to update new owner's address into the feed page.
        dispatch(updateOwnerAddress(tokenId, to))
      })
  } catch (error) {
    ui.showToast({
      status: 'error',
      message: error.toString(),
    })
  }
}

4) Update information in redux store: updateOwnerAddress action

After transferring ownership, FeedPhoto needs to be rerendered with new owner's address. To update new owner's address, let's call feed data from store and find the photo that has the tokenId from the receipt. Then push new owner's address to photo's ownerHistory and setFeed.

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))
}