7-1. Connect Contract to Frontend

1. src/klaytn

   • caver.js

   • KlaystagramContract.js

2. src/redux

1) src/klaytn

src/klaytn: Contains files that help interact with Klaytn blockchain.

• src/klaytn/caver.js: Instantiates caver within configured setting.

  cf) caver-js is a RPC library which makes a connection to klaytn node, interacting with node or smart contract deployed on Klaytn.

• src/klaytn/Klaystagram.js: Creates an instance of contract using caver-js API. You can interact with contract through the instance

caver.js

/**
 * caver-js library helps making connection with klaytn node.
 * You can connect to specific klaytn node by setting 'rpcURL' value.
 * default rpcURL is 'http://localhost:8551'.
 */
import Caver from 'caver-js'

export const config = {
  rpcURL: 'http://localhost:8551'
}

export const cav = new Caver(config.rpcURL)

export default cav

After making the connection, you can call methods on smart contract with caver.

KlaystagramContract.js

// klaytn/KlaystagramContract.js

import { cav } from 'klaytn/caver'

/**
 * 1. Create contract instance
 * ex:) new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
 * You can call contract method through this instance.
 */

const KlaystagramContract = DEPLOYED_ABI
  && DEPLOYED_ADDRESS
  && new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)

export default KlaystagramContract

To interact with contract, we need a contract instance.

KlaystagramContract creates a contract instance to interact with Klaystagram contract, by providing DEPLOYED_ABI(Application Binary Interface) and DEPLOYED_ADDRESS to cav.klay.Contract API.

When compiling & deploying Klaystagram.sol contract (5. Deploy Contract), we already created deployedABI and deployedAddress files. They contain ABI of Klaystagram contract and deployed contract address.

And thanks to webpack's configuration, we can access it as variable.(DEPLOYED_ADDRESS, DEPLOYED_ABI)

• DEPLOYED_ADDRESS returns deployed Address

• DEPLOYED_ABI returns Klaystagram contract ABI

cf) contract ABI(Application Binary Interface) contract ABI is the interface for calling contract methods. With this interface, we can call contract methods as below

• contractInstance.methods.methodName().call()

• contractInstance.methods.methodName().send({ ... })

Now we are ready to interact with contract in the application. cf. For more information, refer to caver.klay.Contract.

2) src/redux

We are going to make API functions with Klaystagram instance. After calling API functions, we use redux store to controls all data flow.

1. Import contract instance

   By using KlaystagramContract instance, we can call contract's methods when components need to interact with contract.

2. Call contract method

3. Store data from contract

   If transaction is successful, we will call redux action to save information from contract to redux store.

// src/redux/actions/photos.js

// 1. Import contract instance
import KlaystagramContract from 'klaytn/KlaystagramContract'

const setFeed = (feed) => ({
  type: SET_FEED,
  payload: { feed },
})

const updateFeed = (tokenId) => (dispatch, getState) => {

  // 2. Call contract method (CALL): getPhoto()
  KlaystagramContract.methods.getPhoto(tokenId).call()
    .then((newPhoto) => {
      const { photos: { feed } } = getState()
      const newFeed = [newPhoto, ...feed]

      // 3. Store data from contract
      dispatch(setFeed(newFeed))
    })
}

Redux store controls all data flow in front-end