# 7-1. Connect Contract to Frontend

1. `src/klaytn`
   * caver.js
   * KlaystagramContract.js
2. `src/redux`

## 1) `src/klaytn` <a href="#id-1-src-klaytn" id="id-1-src-klaytn"></a>

`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` <a href="#caver-js" id="caver-js"></a>

```javascript
/**
 * caver-js library helps making connection with klaytn node.
 * You can connect to specific klaytn node by setting 'rpcURL' value.
 * default rpcURL is 'https://public-en-baobab.klaytn.net'.
 */
import Caver from 'caver-js'

export const config = {
  rpcURL: 'https://public-en-baobab.klaytn.net'
}

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` <a href="#klaystagramcontract-js" id="klaystagramcontract-js"></a>

```javascript
// 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](https://archive-docs.klaytn.foundation/content/dapp/tutorials/klaystagram/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.**\
\&#xNAN;*cf. For more information, refer to* [*caver.klay.Contract*](https://archive-docs.klaytn.foundation/content/dapp/sdk/caver-js/v1.4.1/api-references/caver.klay.contract)*.*

## 2) `src/redux` <a href="#id-2-src-redux" id="id-2-src-redux"></a>

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.

```javascript
// 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 = [feedParser(newPhoto), ...feed]

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

Redux store controls all data flow in front-end