import React, { Component } from 'react'
import cx from 'classnames'
import caver from 'klaytn/caver'
class Count extends Component {
// ** 1. Create contract instance **
// ex:) new caver.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
// You can call contract method through this instance.
// Now you can access the instance by `this.countContract` variable.
this.countContract = DEPLOYED_ABI
&& new caver.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
// ** 2. Call contract method (CALL) **
// ex:) this.countContract.methods.methodName(arguments).call()
// You can call contract method (CALL) like above.
// For example, your contract has a method called `count`.
// You can call it like below:
// ex:) this.countContract.methods.count().call()
// It returns promise, so you can access it by .then() or, use async-await.
const count = await this.countContract.methods.count().call()
const lastParticipant = await this.countContract.methods.lastParticipant().call()
const walletInstance = caver.klay.accounts.wallet && caver.klay.accounts.wallet[0]
// Need to integrate wallet for calling contract method.
if (!walletInstance) return
this.setState({ settingDirection: 'plus' })
// 3. ** Call contract method (SEND) **
// ex:) this.countContract.methods.methodName(arguments).send(txObject)
// You can call contract method (SEND) like above.
// For example, your contract has a method called `plus`.
// You can call it like below:
// ex:) this.countContract.methods.plus().send({
// from: '0x952A8dD075fdc0876d48fC26a389b53331C34585', // PUT YOUR ADDRESS
this.countContract.methods.plus().send({
from: walletInstance.address,
.once('transactionHash', (txHash) => {
Sending a transaction... (Call contract's function 'plus')
.once('receipt', (receipt) => {
Received receipt! It means your transaction(calling plus function)
is in klaytn block(#${receipt.blockNumber})
txHash: receipt.transactionHash,
.once('error', (error) => {
this.setState({ settingDirection: null })
const walletInstance = caver.klay.accounts.wallet && caver.klay.accounts.wallet[0]
// Need to integrate wallet for calling contract method.
if (!walletInstance) return
this.setState({ settingDirection: 'minus' })
// 3. ** Call contract method (SEND) **
// ex:) this.countContract.methods.methodName(arguments).send(txObject)
// You can call contract method (SEND) like above.
// For example, your contract has a method called `minus`.
// You can call it like below:
// ex:) this.countContract.methods.minus().send({
// from: '0x952A8dD075fdc0876d48fC26a389b53331C34585', // PUT YOUR ADDRESS
// It returns event emitter, so after sending, you can listen on event.
// Use .on('transactionHash') event,
// : if you want to handle logic after sending transaction.
// Use .once('receipt') event,
// : if you want to handle logic after your transaction is put into block.
// ex:) .once('receipt', (data) => {
this.countContract.methods.minus().send({
from: walletInstance.address,
.once('transactionHash', (txHash) => {
Sending a transaction... (Call contract's function 'minus')
.once('receipt', (receipt) => {
Received receipt which means your transaction(calling minus function)
is in klaytn block(#${receipt.blockNumber})
txHash: receipt.transactionHash,
.once('error', (error) => {
this.setState({ settingDirection: null })
this.intervalId = setInterval(this.getCount, 1000)
clearInterval(this.intervalId)
const { lastParticipant, count, settingDirection, txHash } = this.state
{Number(lastParticipant) !== 0 && (
<div className="Count__lastParticipant">
last participant: {lastParticipant}
<div className="Count__count">COUNT: {count}</div>
className={cx('Count__button', {
'Count__button--setting': settingDirection === 'plus',
className={cx('Count__button', {
'Count__button--setting': settingDirection === 'minus',
<div className="Count__lastTransaction">
<p className="Count__lastTransactionMessage">
You can check your last transaction in klaytnscope:
href={`https://scope.klaytn.com/transaction/${txHash}`}
className="Count__lastTransactionLink"