# 7-4. TransferOwnership Component

![소유권 양도](https://github.com/klaytn/klaytn-docs-ko/blob/main/docs/bapp/tutorials/klaystagram/images/klaystagram-transferownership.png)

1. `TransferOwnership` 컴포넌트의 역할
2. Component code

   2-1. `transferOwnership` 버튼 렌더링

   2-2. `TransferOwnership` 컴포넌트
3. Interact with contract: `transferOwnership` method
4. 리덕스 스토어의 데이터 업데이트: `updateOwnerAddress` 액션

## 1) `TransferOwnership` component's role <a href="#id-1-transferownership-component-s-role" id="id-1-transferownership-component-s-role"></a>

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

## 2) Component code <a href="#id-2-component-code" id="id-2-component-code"></a>

### 2-1) Rendering `TransferOwnership` button <a href="#id-2-1-rendering-transferownership-button" id="id-2-1-rendering-transferownership-button"></a>

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

```javascript
// 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 <a href="#id-2-2-transferownership-component" id="id-2-2-transferownership-component"></a>

```javascript
// 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 <a href="#id-3-interact-with-contract-transferownership-method" id="id-3-interact-with-contract-transferownership-method"></a>

Klaystagram 컨트랙트의 `transferOwnership` 함수는 [4. Klaystagram 스마트 컨트랙트 작성](/content/dapp/tutorials/klaystagram/4.-write-klaystagram-smart-contract.md)에서 만들었어요. 이제 애플리케이션 그 함수를 호출해볼게요.

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` 함수를 호출하여 피드 페이지에 새로운 소유자의 주소를 업데이트합니다.

```javascript
// 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 <a href="#id-4-update-information-in-redux-store-updateowneraddress-action" id="id-4-update-information-in-redux-store-updateowneraddress-action"></a>

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.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archive-ko.docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-4.-transferownership-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.