on chain deals: Better client window in pond

api/api.go

@@ -183,6 +183,9 @@ type Version struct {
 	APIVersion uint32
 
 	// TODO: git commit / os / genesis cid?
+
+	// Seconds
+	BlockDelay uint64
 }
 
 func (v Version) String() string {

lotuspond/front/src/Address.js

@@ -4,6 +4,7 @@ import ReactTooltip from 'react-tooltip'
 import * as multihash from "multihashes"
 import State from "./State"
 import methods from "./chain/methods"
+import Fil from "./Fil";
 
 function truncAddr(addr, len) {
   if (!addr) {
@@ -15,17 +16,6 @@ function truncAddr(addr, len) {
   return addr
 }
 
-function filStr(raw) {
-  if(typeof raw !== 'string') {
-    return raw
-  }
-  if(raw.length < 18) {
-    raw = '0'.repeat(18 - raw.length)
-  }
-  let out = (raw.substring(0, raw.length - 18) + '.' + raw.substring(raw.length - 18, raw.length)).replace(/\.0+|0+$/g, '');
-  return out ? out : '0'
-}
-
 let sheet = document.createElement('style')
 document.body.appendChild(sheet);
 
@@ -132,12 +122,12 @@ class Address extends React.Component {
       nonce = <span>&nbsp;<abbr title={"Next nonce"}>Nc:{this.state.nonce}</abbr>{nonce}</span>
     }
 
-    let balance = <span>:&nbsp;{filStr(this.state.balance)}&nbsp;</span>
+    let balance = <span>:&nbsp;{<Fil>{this.state.balance}</Fil>}&nbsp;</span>
     if(this.props.nobalance) {
       balance = <span/>
     }
     if(this.props.short) {
-      actInfo = <ReactTooltip id={this.props.addr} place="top" type="dark" effect="solid">{actInfo}: {filStr(this.state.balance)}</ReactTooltip>
+      actInfo = <ReactTooltip id={this.props.addr} place="top" type="dark" effect="solid">{actInfo}: {<Fil>this.state.balance</Fil>}</ReactTooltip>
       balance = <span/>
     }
 

lotuspond/front/src/Client.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Address from "./Address";
 import Window from "./Window";
+import Fil from "./Fil";
 
 const dealStates = [
   "Unknown",
@@ -19,31 +20,43 @@ class Client extends React.Component {
     super(props)
 
     this.state = {
+      miners: ["t0101"],
+      ask: {Price: "3"},
+
       kbs: 1,
       blocks: 12,
       total: 36000,
       miner: "t0101",
 
-      deals: []
+      deals: [],
+
+      blockDelay: 10,
     }
   }
 
-  componentDidMount() {
+  async componentDidMount() {
+    let ver = await this.props.client.call('Filecoin.Version', [])
+    this.setState({blockDelay: ver.BlockDelay})
+
     this.getDeals()
     setInterval(this.getDeals, 1325)
   }
 
   getDeals = async () => {
+    let miners = await this.props.client.call('Filecoin.StateListMiners', [null])
     let deals = await this.props.client.call('Filecoin.ClientListDeals', [])
-    this.setState({deals})
+    miners.sort()
+    this.setState({deals, miners})
   }
 
   update = (name) => (e) => this.setState({ [name]: e.target.value });
 
   makeDeal = async () => {
+    let perBlk = this.state.ask.Price * this.state.kbs * 1000
+
     let file = await this.props.pondClient.call('Pond.CreateRandomFile', [this.state.kbs * 1000]) // 1024 won't fit in 1k blocks :(
     let cid = await this.props.client.call('Filecoin.ClientImport', [file])
-    let dealcid = await this.props.client.call('Filecoin.ClientStartDeal', [cid, this.state.miner, `${Math.round(this.state.total / this.state.blocks)}`, Number(this.state.blocks)])
+    let dealcid = await this.props.client.call('Filecoin.ClientStartDeal', [cid, this.state.miner, `${Math.round(perBlk)}`, Number(this.state.blocks)])
     console.log("deal cid: ", dealcid)
   }
 
@@ -65,17 +78,23 @@ class Client extends React.Component {
   }
 
   render() {
-    let ppb = Math.round(this.state.total / this.state.blocks * 100) / 100
-    let ppmbb = Math.round(ppb / (this.state.kbs / 1000) * 100) / 100
+    let perBlk = this.state.ask.Price * this.state.kbs * 1000
+    let total = perBlk * this.state.blocks
+    let days = (this.state.blocks * this.state.blockDelay) / 60 / 60 / 24
 
     let dealMaker = <div hidden={!this.props.pondClient}>
-      <span>Make Deal: </span>
-      <select><option>t0101</option></select>
-      <abbr title="Data length">L:</abbr> <input placeholder="KBs" defaultValue={1} onChange={this.update("kbs")}/>
-      <abbr title="Deal duration">Dur:</abbr><input placeholder="blocks" defaultValue={12} onChange={this.update("blocks")}/>
-      Total: <input placeholder="total price" defaultValue={36000} onChange={this.update("total")}/>
-      <span><abbr title="Price per block">PpB:</abbr> {ppb} </span>
-      <span><abbr title="Price per block-MiB">PpMbB:</abbr> {ppmbb} </span>
+      <div>
+        <span>Make Deal: </span>
+        <select>{this.state.miners.map(m => <option key={m} value={m}>{m}</option>)}</select>
+        <span> Ask: <b><Fil>{this.state.ask.Price}</Fil></b> Fil/Byte/Block</span>
+      </div>
+      <div>
+        Data Size: <input type="text" placeholder="KBs" defaultValue={1} onChange={this.update("kbs")} style={{width: "5em"}}/>KB;
+        Duration:<input type="text" placeholder="blocks" defaultValue={12} onChange={this.update("blocks")} style={{width: "5em"}}/>Blocks
+      </div>
+      <div>
+        Total: <Fil>{total}</Fil>; {days} Days
+      </div>
       <button onClick={this.makeDeal}>Deal!</button>
     </div>
 
@@ -92,7 +111,7 @@ class Client extends React.Component {
 
     </div>)
 
-    return <Window title={"Client - Node " + this.props.node.ID} onClose={this.props.onClose}>
+    return <Window title={"Client - Node " + this.props.node.ID} onClose={this.props.onClose} initialSize={{width: 600, height: 400}}>
       <div className="Client">
         <div>{dealMaker}</div>
         <div>{deals}</div>

lotuspond/front/src/Fil.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+function filStr(raw) {
+  if(typeof raw !== 'string') {
+    raw = String(raw)
+  }
+  if(raw.length < 19) {
+    raw = '0'.repeat(19 - raw.length).concat(raw)
+  }
+
+  let out = raw.substring(0, raw.length - 18).concat('.', raw.substring(raw.length - 18, raw.length)).replace(/\.0+$|0+$/g, '');
+  return out ? out : '0'
+}
+
+
+class Fil extends React.Component {
+  render() {
+    return filStr(this.props.children)
+  }
+}
+
+export default Fil

lotuspond/front/src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+input[type=text] {
+  -webkit-appearance: none;
+  appearance: none;
+}

node/impl/common.go

@@ -87,6 +87,8 @@ func (a *CommonAPI) Version(context.Context) (api.Version, error) {
 	return api.Version{
 		Version:    build.Version,
 		APIVersion: build.APIVersion,
+
+		BlockDelay: build.BlockDelay,
 	}, nil
 }