Chapter 09無料公開

Hello NEAR 4 - react calls smart contract -

masa
masa
2022.08.20に更新

react calls smart contract概要

前の章で作成したHello NEARのフロントエンドでスマートコントラクトを呼び出す方法を学びます。

コードリーディング

スマートコントラクト呼び出しの部分をコードリーディングします。

コントラクト呼び出し

以下のコードを利用します。

assets/js/near/utils.js

assets/js/near/utils.js
// Initialize contract & set global variables
export async function initContract() {
  // Initialize connection to the NEAR testnet
  const near = await connect(Object.assign({ deps: { keyStore: new keyStores.BrowserLocalStorageKeyStore() } }, nearConfig))

  // Initializing Wallet based Account. It can work with NEAR testnet wallet that
  // is hosted at https://wallet.testnet.near.org
  window.walletConnection = new WalletConnection(near)

  // Getting the Account ID. If still unauthorized, it's just empty string
  window.accountId = window.walletConnection.getAccountId()

  // Initializing our contract APIs by contract name and configuration
  window.contract = await new Contract(window.walletConnection.account(), nearConfig.contractName, {
    // View methods are read only. They don't modify the state, but usually return some value.
    viewMethods: ['get_greeting'],
    // Change methods can modify the state. But you don't receive the returned value when called.
    changeMethods: ['set_greeting'],
  })
}

注目すべきは、コードの各行で宣言されて入る

js
window.hogehoge = 処理

の部分です。

JavaScriptでグローバル変数として定義する場合、一番手っ取り早い方法がこの

js
window.hogehoge = 処理

というやり方です。

このコードでは

js
window.walletConnection
window.accountId
window.contract

と宣言されているので、

walletConnection, accountId, contract

という三つのグローバル定数が宣言されているということを意味します。

NEARへの接続

connect関数を使います。

js
connect(Object.assign({ deps: { keyStore: new keyStores.BrowserLocalStorageKeyStore() } }, nearConfig))

connectから返されるオブジェクトは、APIのすべてのコマンドのエントリポイントになります。
トランザクションに署名する必要がある場合、接続を作成するためにKeyStoreが必要です。

このコードでは

js
{ keyStore: new keyStores.BrowserLocalStorageKeyStore() }

と宣言されています。

これは

ブラウザのローカルストレージにキーを格納するために仕様しています。

引数の

js
nearConfig

は設定オブジェクトです。

config.jsを見ると以下のように実装されています。

config.js
    return {
      networkId: 'testnet',
      nodeUrl: 'https://rpc.testnet.near.org',
      contractName: CONTRACT_NAME,
      walletUrl: 'https://wallet.testnet.near.org',
      helperUrl: 'https://helper.testnet.near.org',
      explorerUrl: 'https://explorer.testnet.near.org',
    }

内容はテストネットの情報です。

CONTRACT_NAMEはdeployしたスマートコントラクトの名称です。

こちらは前の章で説明したように

bash
near dev-deploy

でdeployした時にdev-account.envに吐き出されたスマートコントラクトの名称です。

dev-account.envを開くと

.env
CONTRACT_NAME=dev-1659616873610-34625805591910

という値が記載されています。

これはHello world buildで作成された名称と同じです。

この値を

js
const CONTRACT_NAME = process.env.CONTRACT_NAME ||'new-awesome-project'

と環境変数から読み込んで利用します。

walletへの接続

以下のコードでwalletへ接続します。

js
  window.walletConnection = new WalletConnection(near)

アカウントIDは良く使うのでグローバル変数に格納しています。
(個人的には不要だと思います)

js
  // Getting the Account ID. If still unauthorized, it's just empty string
  window.accountId = window.walletConnection.getAccountId()

Contract生成

最後にコントラクトオブジェクトを生成します。

js
  // Initializing our contract APIs by contract name and configuration
  window.contract = await new Contract(window.walletConnection.account(), nearConfig.contractName, {
    // View methods are read only. They don't modify the state, but usually return some value.
    viewMethods: ['get_greeting'],
    // Change methods can modify the state. But you don't receive the returned value when called.
    changeMethods: ['set_greeting'],
  })

Contractにaccountとコントラクト名を渡します。

js
new Contract(window.walletConnection.account(), nearConfig.contractName)

optionにはスマートコントラクトで利用可能なメソッド名を指定します。

js
    viewMethods: ['get_greeting'],
    // Change methods can modify the state. But you don't receive the returned value when called.
    changeMethods: ['set_greeting'],

ガス代がかからないviewメソッドと、ガス代のかかる変更メソッドを分けて記載します。

これはわかりやすい仕様だと思います。

これでjsからコントラクトの操作が可能になりました。

まとめ

この章ではHello NEARのフロントエンド側のスマートコントラクトの呼び出しの方法を学びました。

サンプルのようにコントラクト名は環境変数に設定することで、testnetの時とmainnetの時で切り分けることができます。

次は

  • コントラクトの呼び出し
  • ログイン
  • ログアウト

などのコードリーディングを行います。