7-4. TransferOwnership Component

TransferOwnership
컴포넌트의 역할Component code
2-1.
transferOwnership
버튼 렌더링2-2.
TransferOwnership
컴포넌트Interact with contract:
transferOwnership
method리덕스 스토어의 데이터 업데이트:
updateOwnerAddress
액션
1) TransferOwnership
component's role
TransferOwnership
component's role사진 소유자는 사진의 소유권을 다른 사용자에게 양도할 수 있습니다. transferOwnership
트랜잭션을 전송하여 새로운 소유자의 주소가 소유권 기록에 저장되고, 이를 통해 과거 소유자들의 주소를 추적합니다.
2) Component code
2-1) Rendering TransferOwnership
button
TransferOwnership
buttonWe 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
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
transferOwnership
methodKlaystagram 컨트랙트의 transferOwnership
함수는 4. Klaystagram 스마트 컨트랙트 작성에서 만들었어요. 이제 애플리케이션 그 함수를 호출해볼게요.
컨트랙트 메서드를 호출합니다:
transferOwnership
id:
사진의 tokenIdto:
사진의 소유권을 양도할 주소
트랜잭션 옵션 설정
from
: An account that sends this transaction and pays the transaction fee.gas
: The maximum amount of gas that thefrom
account is willing to pay for this transaction.
After sending the transaction, show progress along the transaction lifecycle using
Toast
component.트랜잭션이 블록에 잘 담기게 되면
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
updateOwnerAddress
actionAfter 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))
}
Last updated
Was this helpful?