6. Frontend Code Overview

Search…
1.Overview
2.src/App.js
3.src/pages
4.What we are going to learn?
1) Overview
In this section, we are going to build front-end. This tutorial's main purpose is to learn how to connect contract with front-end code. We will thus briefly explain React codes and focus on the API functions interacting with contract deployed on Klaytn.
1
|-- src
2
    |-- klaytn
3
      |-- caver.js
4
      |-- KlaystagramContract.js
5
    |-- redux
6
      |-- auth.js
7
      |-- photos.js
8
    |-- pages
9
      |-- AuthPage.js
10
      |-- FeedPage.js
11
    |-- components
12
      |-- UploadPhoto.js
13
      |-- Feed.js
14
      |-- TransferOwnership.js
15
      |-- ...
16
    |-- App.js
Copied!
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.
src/redux: Creates API functions that interact with contract and keeps tracks of consequent data.
redux/actions/auth.js
redux/actions/photos.js
src/pages: Contains two page files that compose Klaystagram app.
src/pages/AuthPage.js: Contains sign up and login form. You can generate private key in the sign up form, and use it to login on the app.
src/pages/FeedPage.js: Shows read photos from the contract, shows them to users, and provides upload feature.
src/components: Contains component files that compose page.
src/components/Feed.js: Reads data from contract and displays photos.
src/components/UploadPhoto.js: Uploads photo by sending transaction to contract.
src/components/TransferOwnership.js: Transfers the ownership of photo by sending transaction.
src/App.js: Our tutorial app's root component file for overall components.
1) App.js
'App.js' is root component file for overall components. It renders two pages depending on user's login status. Each page has functions that interact with contract. You must add wallet instance to caver to send transactions to blockchain. Let’s briefly look at the code for overview.
cf. caver-js(or cav in the code) is a library for interacting with Klaytn blockchain. We are going to learn in detail in the next chapter - 7-1. Connect Contract to Frontend​
1
// src/App.js
2
​
3
import React, { Component } from 'react'
4
import { connect } from 'react-redux'
5
import AuthPage from 'pages/AuthPage'
6
import FeedPage from 'pages/FeedPage'
7
import Nav from 'components/Nav'
8
import Footer from 'components/Footer'
9
import Modal from 'components/Modal'
10
import Toast from 'components/Toast'
11
​
12
import * as authActions from 'redux/actions/auth'
13
​
14
import './App.scss'
15
​
16
class App extends Component {
17
  constructor(props) {
18
    super(props)
19
    /**
20
     * 1. Initialize `isLoggedIn` state
21
     * cf) sessionStorage is internet browser's feature
22
     * which stores data until the browser tab is closed.
23
     */
24
    const walletFromSession = sessionStorage.getItem('walletInstance')
25
    const { integrateWallet, removeWallet } = this.props
26
​
27
    if (walletFromSession) {
28
      try {
29
        /**
30
         * 2-1. Integrate wallet
31
         * If 'walletInstance' value exists,
32
         * intergrateWallet method adds the instance to caver's wallet and redux store
33
         * cf) redux/actions/auth.js -> integrateWallet()
34
         */
35
        integrateWallet(JSON.parse(walletFromSession).privateKey)
36
      } catch (e) {
37
        /**
38
         * 2-2. Remove wallet
39
         * If value in sessionStorage is invalid wallet instance,
40
         * removeWallet method removes the instance from caver's wallet and redux store
41
         * cf) redux/actions/auth.js -> removeWallet()
42
         */
43
        removeWallet()
44
      }
45
    }
46
  }
47
  /**
48
   * 3. Render the page
49
   * Redux will initialize isLoggedIn state to true or false,
50
   * depending on whether walletInstance exists in the session storage
51
   */
52
  render() {
53
    const { isLoggedIn } = this.props
54
    return (
55
      <div className="App">
56
        <Modal />
57
        <Toast />
58
        {isLoggedIn && <Nav />}
59
        {isLoggedIn ? <FeedPage /> : <AuthPage />}
60
        <Footer />
61
      </div>
62
    )
63
  }
64
}
65
​
66
const mapStateToProps = (state) => ({
67
  isLoggedIn: state.auth.isLoggedIn,
68
})
69
​
70
const mapDispatchToProps = (dispatch) => ({
71
  integrateWallet: (privateKey) => dispatch(authActions.integrateWallet(privateKey)),
72
  removeWallet: () => dispatch(authActions.removeWallet()),
73
})
74
​
75
export default connect(mapStateToProps, mapDispatchToProps)(App)
Copied!
cf) JSON.parse is needed since walletInstance session is stored as JSON string.
1. Initialize isLoggedIn state
To initialize state isLoggedIn, we use constructor life cycle method on App component. It checks for walletInstance session in browser's sessionStorage before component is mounted.
2. Inject/Remove wallet
If you have never logged in before, walletInstance session may not exist. Otherwise, walletInstance session may exist as JSON string in the sessionStorage.
1.Inject - If wallet instance exists in sessionStorage, try adding wallet instance to caver and redux store.
2.Remove - If wallet instance in sessionStorage is invalid, remove it from caver's wallet and redux store.
1
// redux/actions/auth.js
2
​
3
// 1. Inject wallet
4
export const integrateWallet = (privateKey) => (dispatch) => {
5
  // Make wallet instance with caver's privateKeyToAccount API
6
  const walletInstance = cav.klay.accounts.privateKeyToAccount(privateKey)
7
​
8
  // To send a transaction, add wallet instance to caver
9
  cav.klay.accounts.wallet.add(walletInstance)
10
​
11
  // To maintain logged-in status, store walletInstance at sessionStorage
12
  sessionStorage.setItem('walletInstance', JSON.stringify(walletInstance))
13
​
14
  // To access walletInstance information throughout the whole application, save it to redux store
15
  return dispatch({
16
    type: INTEGRATE_WALLET,
17
    payload: {
18
      privateKey,
19
      address: walletInstance.address,
20
    },
21
  })
22
}
23
​
24
// 2. Remove wallet
25
export const removeWallet = () => (dispatch) => {
26
  cav.klay.accounts.wallet.clear()
27
  sessionStorage.removeItem('walletInstance')
28
  return dispatch({
29
    type: REMOVE_WALLET,
30
  })
31
}
Copied!
cf. For further information about caver's privateKeyToAccount API, see caver.klay.accounts.privateKeyToAccount.
3. Render the page Redux will initialize isLoggedIn state to true or false, depending on whether walletInstance exists in the session storage
2) src/pages
As we described in above, src/pages contains two page files. One of these two pages will be renderded on the app depending on whether the user is logged in or not.
AuthPage.js: Contains sign up and login form. You can generate private key in the signup form, and use it to login on the app.
FeedPage.js: Reads photo data from the contract and shows them to users. Users can also upload their pictures.
3) What we are going to learn?
In blockchain based app, there are two ways of interacting with contracts.
1) Reading data from contract.
2) Writing data to contract.
Reading data from contract is cost-free.
On the otherhand, there is cost for writing data to contract (Sending a transaction). For this reason, in order to write data, you must have Klaytn account that has some KLAY to pay for it.
In AuthPage, SignupForm helps you to create a Klaytn account (private key). After that, you can log in with the private key and pay for the transaction fee.
If you want to learn more about the two different login methods (private key / keystore),
please refer to the 5.2. Auth Component page.
In this tutorial, we are going to focus on FeedPage, so that we can learn how application reads and writes data from/to contracts.
5. Deploy Contract
7. FeedPage
Last modified 3mo ago
Copy link
Edit on GitHub
Contents
1) Overview
1) App.js
2) src/pages
3) What we are going to learn?