feat: add async get cells example

package.json

@@ -21,7 +21,7 @@
     "lint": "lerna run lint",
     "test": "lerna run --parallel test",
     "start:react": "lerna run --scope=neuron-react-app start",
-    "start:electron": "lerna run --scope=neuron start",
+    "start:electron": "lerna run --scope=neuron watch",
     "start": "cross-env NODE_ENV=development concurrently \"yarn run start:react\" \"wait-on http://localhost:3000 && yarn run start:electron\"",
     "build:react": "lerna run --scope=neuron-react-app build",
     "build:electron": "lerna run --scope=neuron build",

packages/electron-app/src/IPCChannel.ts

@@ -1,9 +1,11 @@
 import { ipcMain } from 'electron'
 import { IPC_CHANNEL } from './utils/const'
+import { cell } from './mock'
 
 const listenToChannel = () => {
+  // channel to send capacity
   ipcMain.on(IPC_CHANNEL.SEND_CAPACITY, (e: Electron.Event, { addr, capacity }: { addr: string; capacity: number }) => {
-    console.log(`Send Capacity to CKB with ${JSON.stringify({ addr, capacity }, null, 2)}`)
+    console.info(`Send Capacity to CKB with ${JSON.stringify({ addr, capacity }, null, 2)}`)
     setTimeout(() => {
       e.sender.send(IPC_CHANNEL.SEND_CAPACITY, {
         status: 1,
@@ -12,13 +14,19 @@ const listenToChannel = () => {
     }, 1000)
   })
 
+  // channel to get live cells
   ipcMain.on(IPC_CHANNEL.GET_LIVE_CELL, (e: Electron.Event, ...args: string[]) => {
     e.sender.send(IPC_CHANNEL.GET_LIVE_CELL, args)
   })
 
+  // channel to get cells by type hash
   ipcMain.on(IPC_CHANNEL.GET_CELLS_BY_TYPE_HASH, (e: Electron.Event, ...args: string[]) => {
+    console.info(`get cells by type hash ${args[0]}`)
     setTimeout(() => {
-      e.sender.send(IPC_CHANNEL.GET_CELLS_BY_TYPE_HASH, args)
+      e.sender.send(IPC_CHANNEL.GET_CELLS_BY_TYPE_HASH, {
+        status: 1,
+        result: [cell],
+      })
     }, 1000)
   })
 }

packages/electron-app/src/mock.ts

@@ -0,0 +1,13 @@
+export const cell = {
+  version: 0,
+  args: [],
+  signedArgs: [],
+  reference: 'reference',
+  binary: [],
+  outPoint: {
+    hash: 'tx hash',
+    index: 0,
+  },
+}
+
+export default { cell }

packages/react-app/src/components/Cells/index.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useContext, useEffect } from 'react'
-import ChainContext from '../../contexts/chain'
+import ChainContext, { ICell } from '../../contexts/chain'
 import ipc from '../../utils/ipc'
 
+const headers = ['outPoint', 'reference', 'args', 'signedArgs', 'version']
+
 const Cells = () => {
   const [typeHash] = useState('')
   const chain = useContext(ChainContext)
@@ -11,16 +13,24 @@ const Cells = () => {
   return (
     <div>
       Cells
-      {chain.cells.map(cell => (
-        <button
-          key={cell}
-          onClick={() => ipc.getLiveCell({ hash: '1', index: 1 })}
-          onKeyDown={() => ipc.getLiveCell({ hash: '1', index: 1 })}
-          type="button"
-        >
-          {cell}
-        </button>
-      ))}
+      <table>
+        <thead>
+          <tr>
+            {headers.map(header => (
+              <th key={header}>{header}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {chain.cells.map(cell => (
+            <tr key={JSON.stringify(cell.outPoint)}>
+              {headers.map(header => (
+                <td key={header}>{JSON.stringify(cell[header as keyof ICell])}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   )
 }

packages/react-app/src/components/Providers/index.tsx

@@ -1,18 +1,21 @@
-import React, { useState, useContext } from 'react'
-import ChainContext from '../../contexts/chain'
+import React, { useState } from 'react'
+import ChainContext, { initChain, ICell } from '../../contexts/chain'
 import WalletContext, { initWallet } from '../../contexts/wallet'
 import { ipcRenderer } from '../../utils/ipc'
 import { IPC_CHANNEL } from '../../utils/const'
 
 const withProviders = (Comp: React.ComponentType) => (props: React.Props<any>) => {
-  const chain = useContext(ChainContext)
+  const [chain, setChain] = useState(initChain)
   const [wallet, setWallet] = useState(initWallet)
   ipcRenderer.on(IPC_CHANNEL.SEND_CAPACITY, (_e: any, args: { status: number; msg: string }) => {
-    setWallet({ msg: args.msg })
+    setWallet({ ...wallet, msg: args.msg })
   })
 
-  ipcRenderer.on(IPC_CHANNEL.GET_CELLS_BY_TYPE_HASH, () => {
+  ipcRenderer.on(IPC_CHANNEL.GET_CELLS_BY_TYPE_HASH, (_e: Event, args: { status: number; result: ICell[] }) => {
     // TODO:
+    if (args.status) {
+      setChain({ ...chain, cells: args.result })
+    }
   })
 
   return (

packages/react-app/src/contexts/chain.ts

@@ -1,15 +1,32 @@
 import { createContext } from 'react'
 import { NETWORK_STATUS } from '../utils/const'
 
-interface IChain {
-  cells: any[]
+export interface ICell {
+  capacity: number
+  data: Uint8Array
+  lock: string
+  type?: {
+    version: number
+    args: Uint8Array[]
+    signedArgs: Uint8Array[]
+    reference: string
+    binary: Uint8Array
+  }
+  outPoint: {
+    hash: string
+    index: number
+  }
+}
+
+export interface IChain {
+  cells: ICell[]
   network: {
     ip: string
     status: NETWORK_STATUS
   }
 }
 
-const initChain = {
+export const initChain: IChain = {
   cells: [],
   network: {
     ip: '',

packages/react-app/src/contexts/wallet.ts

@@ -4,7 +4,7 @@ interface IWallet {
   msg: string
 }
 
-export const initWallet = {
+export const initWallet: IWallet = {
   msg: '',
 }