pond: chain explorer

lotuspond/front/src/Address.js

@@ -29,33 +29,47 @@ class Address extends React.Component {
   async refresh() {
     let balance = 0
     let actor = {}
+    let actorInfo
 
     try {
       balance = await this.props.client.call('Filecoin.WalletBalance', [this.props.addr])
       actor = await this.props.client.call('Filecoin.ChainGetActor', [this.props.addr, this.props.ts || null])
+      actorInfo = await this.actorInfo(actor)
     } catch (err) {
+      console.log(err)
       balance = -1
     }
-    this.setState({balance, actor})
+    this.setState({balance, actor, actorInfo})
   }
 
   openState() {
     this.props.mountWindow((onClose) => <State addr={this.props.addr} actor={this.state.actor} client={this.props.client} onClose={onClose}/>)
   }
 
+  async actorInfo(actor) {
+    const c = new CID(actor.Code['/'])
+    const mh = multihash.decode(c.multihash) // TODO: check identity
+
+    let info = <span>({mh.digest.toString()})</span>
+    switch(mh.digest.toString()) {
+      case 'paych':
+        const actstate = await this.props.client.call('Filecoin.ChainReadState', [actor, this.props.ts || null])
+        info = <span>({mh.digest.toString()} to <Address nobalance={true} client={this.props.client} addr={actstate.State.To} mountWindow={this.props.mountWindow}/>)</span>
+    }
+
+    return info
+  }
+
   render() {
     let add1k = <span/>
     if(this.props.add1k) {
-      add1k = <a href="#" onClick={() => this.props.add1k(this.props.addr)}>[+1k]</a>
+      add1k = <span>&nbsp;<a href="#" onClick={() => this.props.add1k(this.props.addr)}>[+1k]</a></span>
     }
     let addr = truncAddr(this.props.addr)
 
     let actInfo = <span>(?)</span>
     if(this.state.balance >= 0) {
-      const c = new CID(this.state.actor.Code['/'])
-      const mh = multihash.decode(c.multihash) // TODO: check identity
-
-      actInfo = <span>({mh.digest.toString()})</span>
+      actInfo = this.state.actorInfo
       addr = <a href="#" onClick={this.openState}>{addr}</a>
     }
 
@@ -64,7 +78,7 @@ class Address extends React.Component {
       balance = <span></span>
     }
 
-    return <span>{addr}{balance}&nbsp;{actInfo}&nbsp;{add1k}</span>
+    return <span>{addr}{balance}&nbsp;{actInfo}{add1k}</span>
   }
 }
 

lotuspond/front/src/App.css

@@ -57,4 +57,20 @@
 
 .Consensus {
   font-family: monospace;
-}
+}
+
+.ChainExplorer {
+  font-family: monospace;
+}
+
+.ChainExplorer-at {
+  background: #77ff77;
+}
+
+.ChainExplorer-after {
+  background: #cc9c44
+}
+
+.ChainExplorer-before {
+  background: #cccc00
+}

lotuspond/front/src/FullNode.js

@@ -4,10 +4,7 @@ import Cristal from 'react-cristal'
 import { BlockLinks } from "./BlockLink";
 import StorageNodeInit from "./StorageNodeInit";
 import Address from "./Address";
-
-async function awaitListReducer(prev, c) {
-  return [...await prev, await c]
-}
+import ChainExplorer from "./ChainExplorer";
 
 class FullNode extends React.Component {
   constructor(props) {
@@ -22,6 +19,7 @@ class FullNode extends React.Component {
     this.newScepAddr = this.newScepAddr.bind(this)
     this.startStorageMiner = this.startStorageMiner.bind(this)
     this.add1k = this.add1k.bind(this)
+    this.explorer = this.explorer.bind(this)
 
     this.loadInfo()
     setInterval(this.loadInfo, 2050)
@@ -88,6 +86,10 @@ class FullNode extends React.Component {
     await this.props.give1k(to)
   }
 
+  explorer() {
+    this.props.mountWindow((onClose) => <ChainExplorer onClose={onClose} ts={this.state.tipset} client={this.props.client} mountWindow={this.props.mountWindow}/>)
+  }
+
   render() {
     let runtime = <div></div>
 
@@ -98,7 +100,7 @@ class FullNode extends React.Component {
           <div>
             Head: {
             <BlockLinks cids={this.state.tipset.Cids} conn={this.props.client} mountWindow={this.props.mountWindow} />
-          } H:{this.state.tipset.Height}
+          } H:{this.state.tipset.Height} <a href="#" onClick={this.explorer}>[Explore]</a>
           </div>
         )
       }
@@ -122,7 +124,7 @@ class FullNode extends React.Component {
         const vouchers = this.state.vouchers[ak].map(voucher => {
           let extra = <span></span>
           if(voucher.Extra) {
-            extra = <span>Verif: &lt;<b><Address nobalance={true} client={this.props.client} addr={voucher.Extra.Actor} mountWindow={this.props.mountWindow}/>M{voucher.Extra.Method}</b>&gt;</span>
+            extra = <span>Verif: &lt;<b><Address nobalance={true} client={this.props.client} addr={voucher.Extra.Actor} mountWindow={this.props.mountWindow}/>&nbsp;M{voucher.Extra.Method}</b>&gt;</span>
           }
 
           return <div key={voucher.Nonce} className="FullNode-voucher">