import React from "react" ; import { Col , Grid , Row } from "react-bootstrap" ; import DocumentTitle from "react-document-title" ; import { connect } from "react-redux" ; import { Link } from "react-router-dom" ; import Section from "../../app/components/section" ; import { getContract , getContractIds , getSpentContractIds } from "../selectors" ; import { Contract } from "../types" ; function amountFromSatoshis ( amountInSatoshis ) { const amount = amountInSatoshis / 100000000 ; return amount ; } const LockedValueDisplay = ( props ) => { return ( < DocumentTitle title = "Unlock Contract" > < div > < LockedValue contractIds = { props . contractIds } /> < History spentContractIds = { props . spentContractIds } / > < /div> < /DocumentTitle>); } ; export default connect ( state => ( { contractIds : getContractIds ( state ) , spentContractIds : getSpentContractIds ( state ) } ) ) ( LockedValueDisplay ) ; const UnlockButton = ( props ) => { return ( < Link to = { "/unlock/" + props . contractId } > < button className = "btn btn-primary" > Unlock < /button> < /Link>); } ; function LockedValue ( props ) { let content = < div className = "table-placeholder" > No Contracts < /div>; if ( props . contractIds . length > 0 ) { content = ( < table className = "table contracts-table" > < thead > < tr > < th > Contract Template < /th> < th > Amount < /th> < th / > < /tr> < /thead> < tbody > { props . contractIds . map ( id => ( < LockedValueRow key = { id } contractId = { id } / > ) ) } < /tbody> < /table>); } return < Section name = "Unspent Contracts" > { content } < /Section>; } const LockedValueRowUnconnected = ( props ) => { const contract = props . contract ; return ( < tr > < td > { contract . instantiated . template . name } < /td> < td > { amountFromSatoshis ( contract . instantiated . amount ) } < /td> < td className = "td-button" > < UnlockButton contractId = { contract . id } /> < /td> < /tr>); } ; const LockedValueRow = connect ( ( state , ownProps ) => { const contract = getContract ( state , ownProps . contractId ) ; return { contract } ; } ) ( LockedValueRowUnconnected ) ; const History = ( props ) => { let content = < div className = "table-placeholder" > No History < /div>; if ( props . spentContractIds . length > 0 ) { content = ( < div className = "table-responsive" > < table className = "table contracts-table" > < thead > < tr > < th > Contract Template < /th> < th > Amount < /th> < /tr> < /thead> < tbody > { props . spentContractIds . map ( id => ( < HistoryRow key = { id } contractId = { id } / > ) ) } < /tbody> < /table> < /div>); } return < Section name = "History" > { content } < /Section>; } ; const HistoryRowUnconnected = ( props ) => { const contract = props . contract ; return ( < tr > < td > { contract . instantiated . template . name } < /td> < td > { amountFromSatoshis ( contract . instantiated . amount ) } < /td> < td / > < /tr>); } ; const HistoryRow = connect ( ( state , ownProps ) => { const contract = getContract ( state , ownProps . contractId ) ; return { contract } ; } ) ( HistoryRowUnconnected ) ;