DrizzleのEvent動作

DrizzleがEvnetを受け取るまででTruffleSuiteブログのサンプルに則って、スマートコントラクトのイベントを受け取ってポップアップメッセージが表示されるところまでコーディングを試してみました。

これを今後もう少し応用するためにも、内部の動作をもう少し調べてみます。

先のサンプルでは、スマートコントラクトのイベントが発行されると、redux-sagaの機能により、ActionがReducerに渡され、その際に下記のコードが実行されるように見えます。
コードの中のtoast.success(display, { position: toast.POSITION.TOP_RIGHT })により、成功メッセージがToastに送られ、state更新に伴う画面再描画の際に、MyComponent.jsに埋め込まれたによりポップアップメッセージが表示される流れとなっているようです(違っていたらごめんなさい)。

import { toast } from 'react-toastify'
import { generateStore, EventActions } from 'drizzle'
import drizzleOptions from '../drizzleOptions'

const contractEventNotifier = store => next => action => {
  console.log(action);
  if (action.type === EventActions.EVENT_FIRED) {
    const contract = action.name
    const contractEvent = action.event.event
    const message = action.event.returnValues._message
    const display = `${contract}(${contractEvent}): ${message}`

    toast.success(display, { position: toast.POSITION.TOP_RIGHT })
  }
  return next(action)
}

const appMiddlewares = [ contractEventNotifier ]

const store = generateStore({
  drizzleOptions,
  appMiddlewares,
  disableReduxDevTools: false  // enable ReduxDevTools!
})

// Use the store with DrizzleProvider
export default store

先のコードでイベント発行時のActionを追跡するため、

  console.log(action);

によりイベント発行時のActionをコンソール出力し、ブラウザの開発ツールでモニタしました。

お目当てのイベント自体は

{type: "EVENT_FIRED", name: "SimpleStorage", event: {…}, @@redux-saga/SAGA_ACTION: true}
event: {logIndex: 0, transactionIndex: 0, transactionHash: "0x250ce764576008ce93e0ef45497d9f60250e49f6b24d15aac26ae7d2ab27928e", blockHash: "0x37afd9ef5822b04dc2d8a425a34d25abc911c1380f111947652c037ac6edfe94", blockNumber: 9, …}
name: "SimpleStorage"
type: "EVENT_FIRED"
@@redux-saga/SAGA_ACTION: true

と記述されています。それ以外にもSmart Contractへのトランザクション実行に伴うブロック情報

{type: "BLOCK_RECEIVED", blockHeader: {…}, drizzle: Drizzle, web3: Web3, syncAlways: false, …}
blockHeader:
difficulty: "0"
extraData: "0x"
gasLimit: 6721975
gasUsed: 28268
hash: "0x37afd9ef5822b04dc2d8a425a34d25abc911c1380f111947652c037ac6edfe94"
logsBloom: "0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000200000000000400000000000000000000000000000000400000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000400000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000400000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000000000000000000"
miner: "0x0000000000000000000000000000000000000000"
mixHash: "0x0000000000000000000000000000000000000000000000000000000000000000"
nonce: "0x0000000000000000"
number: 9
parentHash: "0xe016a2b374d88c2929e04a5f92ec4cfb4df618dca9e13de275a6fca96b7a697b"
receiptsRoot: "0xd07bfe953353618e56e121800d615719f5dfddcabad65d3c6fe81011774e7c28"
sha3Uncles: "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347"
size: undefined
stateRoot: "0xba0294a66f3afff69b3b3d63fe61445f479f345538aaaf022c01019d5137c513"
timestamp: 1573652911
transactionsRoot: "0x84e28d30c722c6ec281091630771a04a0ef918743261419b6cd7e37a1f7663d1"

や、呼び出されたスマートコントラクトの関数情報などがDispatchされたActionパラメータとして読み取れます。

{type: "CALL_CONTRACT_FN", contract: DrizzleContract, fnName: "storedData", fnIndex: 0, args: Arguments(0), …}
args: Arguments [callee: (...), Symbol(Symbol.iterator): ƒ]
argsHash: "0x0"
contract: DrizzleContract {abi: Array(3), address: "0xD2CFd001Ba9e1c6c469Da2528b2E8bcEaD71EaFe", web3: Web3, contractName: "SimpleStorage", contractArtifact: {…}, …}
fnIndex: 0
fnName: "storedData"
sync: true
type: "CALL_CONTRACT_FN"
@@redux-saga/SAGA_ACTION: true

今回のサンプルでは、スマートコントラクトのイベント処理をActionタイプにより判断して処理しています。今回コンソールに出力したアクションを見ると、Acountの変更( "0x5268F2232368DDbA43541AA7a16A9C569D0f9D4f" -> "0x1598CF27b2D63e17Fa30cE9cdAc39835A600f3aa")なども捉えているようなので、複数アカウントをまたいだ開発など、Actionのモニタリングにより、アカウント切り替えを検出して、アカウントのロールに応じた画面を表示する、というったことができるかもしれません。

{type: "ACCOUNT_BALANCE_FETCHED", account: "0x5268F2232368DDbA43541AA7a16A9C569D0f9D4f", accountBalance: "99935447872000000000", @@redux-saga/SAGA_ACTION: true}account: "0x5268F2232368DDbA43541AA7a16A9C569D0f9D4f"accountBalance: "99935447872000000000"type: "ACCOUNT_BALANCE_FETCHED"@@redux-saga/SAGA_ACTION: true__proto__: Object
index.js:6 {type: "ACCOUNT_BALANCES_FETCHED", @@redux-saga/SAGA_ACTION: true}
index.js:6 {type: "SYNCING_ACCOUNTS", persistedWeb3: Web3, @@redux-saga/SAGA_ACTION: true}
index.js:6 {type: "ACCOUNTS_FETCHED", accounts: Array(1), @@redux-saga/SAGA_ACTION: true}
index.js:6 

{type: "ACCOUNT_BALANCE_FETCHED", account: "0x1598CF27b2D63e17Fa30cE9cdAc39835A600f3aa", accountBalance: "100000000000000000000", @@redux-saga/SAGA_ACTION: true}
account: "0x1598CF27b2D63e17Fa30cE9cdAc39835A600f3aa"
accountBalance: "100000000000000000000"
type: "ACCOUNT_BALANCE_FETCHED"
@@redux-saga/SAGA_ACTION: true

コメント

タイトルとURLをコピーしました