# 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](/content/dapp/tutorials/klaystagram/5.-deploy-contract.md)), 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*](/content/dapp/sdk/caver-js/v1.4.1/api-references/caver.klay.contract.md)*.*

## 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


---

# 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-docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage/7-1.-connect-contract-to-frontend.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.