lotus/lotuspond/front/src/State.js

208 lines
7.6 KiB
JavaScript
Raw Normal View History

2019-08-10 01:54:45 +00:00
import React from 'react'
2019-09-19 14:27:01 +00:00
import Window from "./Window";
import CID from "cids";
import * as multihash from "multihashes";
import code from "./chain/code";
import Address from "./Address";
2019-10-27 10:27:21 +00:00
import Fil from "./Fil";
2019-08-10 01:54:45 +00:00
class State extends React.Component {
byCode = {
[code.init]: InitState,
[code.power]: PowerState,
[code.market]: MarketState,
2019-10-27 10:27:21 +00:00
[code.miner]: MinerState,
}
2019-08-10 01:54:45 +00:00
constructor(props) {
super(props)
this.state = {Balance: -2, State: {}}
}
async componentDidMount() {
const tipset = this.props.tipset || await this.props.client.call("Filecoin.ChainHead", [])
2019-09-10 10:25:46 +00:00
const actstate = await this.props.client.call('Filecoin.StateReadState', [this.props.actor, tipset])
const c = new CID(this.props.actor.Code['/'])
const mh = multihash.decode(c.multihash)
let code = mh.digest.toString()
this.setState({...actstate, code: code})
2019-08-10 01:54:45 +00:00
}
render() {
let state
if(this.byCode[this.state.code]) {
const Stelem = this.byCode[this.state.code]
2019-10-27 10:27:21 +00:00
state = <Stelem addr={this.props.addr} actor={this.props.actor} client={this.props.client} mountWindow={this.props.mountWindow} tipset={this.props.tipset}/>
} else {
state = <div>{Object.keys(this.state.State).map(k => <div key={k}>{k}: <span>{JSON.stringify(this.state.State[k])}</span></div>)}</div>
}
2019-08-10 02:22:49 +00:00
const content = <div className="State">
2019-10-27 10:27:21 +00:00
<div>Balance: <Fil>{this.state.Balance}</Fil></div>
2019-08-10 01:54:45 +00:00
<div>---</div>
{state}
2019-08-10 01:54:45 +00:00
</div>
2019-10-27 10:27:21 +00:00
return <Window initialSize={{width: 850, height: 400}} onClose={this.props.onClose} title={`Actor ${this.props.addr} ${this.props.tipset && this.props.tipset.Height || ''} ${this.state.code}`}>
2019-08-10 01:54:45 +00:00
{content}
2019-09-19 14:27:01 +00:00
</Window>
2019-08-10 01:54:45 +00:00
}
}
class InitState extends React.Component {
constructor(props) {
super(props)
this.state = {actors: []}
}
async componentDidMount() {
const tipset = await this.props.client.call("Filecoin.ChainHead", []) // TODO: from props
const actors = await this.props.client.call("Filecoin.StateListActors", [tipset])
this.setState({actors: actors})
}
render() {
return this.state.actors.sort((a, b) => (Number(a.substr(1)) > Number(b.substr(1))))
.map(addr => <div key={addr}><Address addr={addr} client={this.props.client} mountWindow={this.props.mountWindow}/></div>)
}
}
class PowerState extends React.Component {
constructor(props) {
super(props)
2019-11-14 11:56:17 +00:00
this.state = {actors: [], state: {State: {}}}
}
async componentDidMount() {
const tipset = await this.props.client.call("Filecoin.ChainHead", []) // TODO: from props
const actors = await this.props.client.call("Filecoin.StateListMiners", [tipset])
2019-11-14 11:56:17 +00:00
const state = await this.props.client.call('Filecoin.StateReadState', [this.props.actor, tipset])
this.setState({actors, state})
}
render() {
2019-11-14 11:56:17 +00:00
return <div>
<div>
<div>Total Power: <b>{this.state.state.State.TotalStorage}</b></div>
</div>
<div>---</div>
<div>{this.state.actors.sort((a, b) => (Number(a.substr(1)) > Number(b.substr(1))))
.map(addr => <div key={addr}><Address miner={true} addr={addr} client={this.props.client} mountWindow={this.props.mountWindow}/></div>)}</div>
</div>
}
}
class MarketState extends React.Component {
constructor(props) {
super(props)
this.state = {participants: {}, deals: []}
}
async componentDidMount() {
const tipset = await this.props.client.call("Filecoin.ChainHead", []) // TODO: from props
const participants = await this.props.client.call("Filecoin.StateMarketParticipants", [tipset])
const deals = await this.props.client.call("Filecoin.StateMarketDeals", [tipset])
this.setState({participants, deals})
}
render() {
return <div>
<div>
<div>Participants:</div>
<table>
<tr><td>Address</td><td>Available</td><td>Locked</td></tr>
{Object.keys(this.state.participants).map(p => <tr>
<td><Address addr={p} client={this.props.client} mountWindow={this.props.mountWindow}/></td>
<td>{this.state.participants[p].Available}</td>
<td>{this.state.participants[p].Locked}</td>
</tr>)}
</table>
</div>
<div>
<div>---</div>
<div>Deals:</div>
<table>
<tr><td>id</td><td>Active</td><td>Client</td><td>Provider</td><td>Size</td><td>Price</td><td>Duration</td></tr>
{Object.keys(this.state.deals).map(d => <tr>
<td>{d}</td>
<td>{this.state.deals[d].ActivationEpoch || "No"}</td>
<td><Address short={true} addr={this.state.deals[d].Deal.Proposal.Client} client={this.props.client} mountWindow={this.props.mountWindow}/></td>
2019-10-29 10:19:39 +00:00
<td><Address short={true} addr={this.state.deals[d].Deal.Proposal.Provider} client={this.props.client} mountWindow={this.props.mountWindow}/></td>
<td>{this.state.deals[d].Deal.Proposal.PieceSize}B</td>
2019-10-29 10:19:39 +00:00
<td>{this.state.deals[d].Deal.Proposal.StoragePricePerEpoch*this.state.deals[d].Deal.Proposal.Duration}</td>
<td>{this.state.deals[d].Deal.Proposal.Duration}</td>
</tr>)}
</table>
</div>
</div>
}
}
2019-10-27 10:27:21 +00:00
class MinerState extends React.Component {
constructor(props) {
super(props)
this.state = {state: {}, sectorSize: -1, worker: "", networkPower: 0, sectors: {}}
}
async componentDidMount() {
const tipset = await this.props.client.call("Filecoin.ChainHead", []) // TODO: from props
const state = await this.props.client.call('Filecoin.StateReadState', [this.props.actor, tipset])
const sectorSize = await this.props.client.call("Filecoin.StateMinerSectorSize", [this.props.addr, tipset])
const worker = await this.props.client.call("Filecoin.StateMinerWorker", [this.props.addr, tipset])
const tpow = await this.props.client.call("Filecoin.StateMinerPower", [this.props.addr, tipset])
const networkPower = tpow.TotalPower
let sectors = {}
const sset = await this.props.client.call("Filecoin.StateMinerSectors", [this.props.addr, tipset]) || []
const pset = await this.props.client.call("Filecoin.StateMinerProvingSet", [this.props.addr, tipset]) || []
sset.forEach(s => sectors[s.SectorID] = {...s, sectorSet: true})
pset.forEach(s => sectors[s.SectorID] = {...(sectors[s.SectorID] || s), provingSet: true})
this.setState({state, sectorSize, worker, networkPower, sectors})
}
render() {
if (!this.state.worker) {
return <span>(...)</span>
}
let state = this.state.state.State
return <div>
<div>Worker: <Address addr={this.state.worker} client={this.props.client} mountWindow={this.props.mountWindow}/></div>
<div>Sector Size: <b>{this.state.sectorSize/1024}</b> KiB</div>
<div>Power: <b>{state.Power}</b> (<b>{state.Power/this.state.networkPower*100}</b>%)</div>
<div>Proving Period End: <b>{state.ProvingPeriodEnd}</b></div>
2019-11-14 11:56:17 +00:00
<div>Slashed: <b>{state.SlashedAt === 0 ? "NO" : state.SlashedAt}</b></div>
2019-10-27 10:27:21 +00:00
<div>
<div>----</div>
<div>Sectors:</div>
<table style={{overflowY: "scroll"}}>
<thead>
<tr><td>ID</td><td>CommD</td><td>CommR</td><td>SectorSet</td><td>Proving</td></tr>
</thead>
<tbody>
{Object.keys(this.state.sectors).map(sid => <tr key={sid} style={{whiteSpace: 'nowrap'}}>
<td>{sid}</td>
<td>{this.state.sectors[sid].CommD}</td>
<td>{this.state.sectors[sid].CommR}</td>
<td>{this.state.sectors[sid].sectorSet ? 'X' : ' '}</td>
<td>{this.state.sectors[sid].provingSet ? 'X' : ' '}</td>
</tr>)}
</tbody>
</table>
</div>
</div>
}
}
2019-08-10 01:54:45 +00:00
export default State