import React from 'react'; import lbry from '../lbry.js'; import {Link} from '../component/link.js'; import Modal from '../component/modal.js'; import {Address, BusyMessage, CreditAmount} from '../component/common.js'; var addressRefreshButtonStyle = { fontSize: '11pt', }; var AddressSection = React.createClass({ _refreshAddress: function(event) { if (typeof event !== 'undefined') { event.preventDefault(); } lbry.getNewAddress((address) => { window.localStorage.setItem('wallet_address', address); this.setState({ address: address, }); }); }, getInitialState: function() { return { address: null, modal: null, } }, componentWillMount: function() { var address = window.localStorage.getItem('wallet_address'); if (address === null) { this._refreshAddress(); } else { lbry.checkAddressIsMine(address, (isMine) => { if (isMine) { this.setState({ address: address, }); } else { this._refreshAddress(); } }); } }, render: function() { return (

Wallet Address

Other LBRY users may send credits to you by entering this address on the "Send" page.

You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.
); } }); var SendToAddressSection = React.createClass({ handleSubmit: function(event) { if (typeof event !== 'undefined') { event.preventDefault(); } if ((this.state.balance - this.state.amount) < 1) { this.setState({ modal: 'insufficientBalance', }); return; } this.setState({ results: "", }); lbry.sendToAddress(this.state.amount, this.state.address, (results) => { if(results === true) { this.setState({ results: "Your transaction was successfully placed in the queue.", }); } else { this.setState({ results: "Something went wrong: " + results }); } }, (error) => { this.setState({ results: "Something went wrong: " + error.message }) }); }, closeModal: function() { this.setState({ modal: null, }); }, getInitialState: function() { return { address: "", amount: 0.0, balance: , results: "", } }, componentWillMount: function() { lbry.getBalance((results) => { this.setState({ balance: results, }); }); }, setAmount: function(event) { this.setState({ amount: parseFloat(event.target.value), }) }, setAddress: function(event) { this.setState({ address: event.target.value, }) }, render: function() { return (

Send Credits

0.0) || this.state.address == ""} />
{ this.state.results ?

Results

{this.state.results}
: '' }
Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
); } }); var TransactionList = React.createClass({ getInitialState: function() { return { transactionItems: null, } }, componentWillMount: function() { lbry.call('get_transaction_history', {}, (results) => { if (results.length == 0) { this.setState({ transactionItems: [] }) } else { var transactionItems = [], condensedTransactions = {}; results.forEach(function(tx) { var txid = tx["txid"]; if (!(txid in condensedTransactions)) { condensedTransactions[txid] = 0; } condensedTransactions[txid] += parseFloat(tx["value"]); }); results.reverse().forEach(function(tx) { var txid = tx["txid"]; if (condensedTransactions[txid] && condensedTransactions[txid] != 0) { transactionItems.push({ id: txid, date: tx["timestamp"] ? (new Date(parseInt(tx["timestamp"]) * 1000)) : null, amount: condensedTransactions[txid] }); delete condensedTransactions[txid]; } }); this.setState({ transactionItems: transactionItems }); } }); }, render: function() { var rows = []; if (this.state.transactionItems && this.state.transactionItems.length > 0) { this.state.transactionItems.forEach(function(item) { rows.push( { (item.amount > 0 ? '+' : '' ) + item.amount } { item.date ? item.date.toLocaleDateString() : (Transaction pending) } { item.date ? item.date.toLocaleTimeString() : (Transaction pending) } {item.id.substr(0, 7)} ); }); } return (

Transaction History

{ this.state.transactionItems === null ? : '' } { this.state.transactionItems && rows.length === 0 ?
You have no transactions.
: '' } { this.state.transactionItems && rows.length > 0 ? {rows}
Amount Date Time Transaction
: '' }
); } }); var WalletPage = React.createClass({ _balanceSubscribeId: null, propTypes: { viewingPage: React.PropTypes.string, }, componentDidMount: function() { document.title = "My Wallet"; }, /* Below should be refactored so that balance is shared all of wallet page. Or even broader? What is the proper React pattern for sharing a global state like balance? */ getInitialState: function() { return { balance: null, } }, componentWillMount: function() { this._balanceSubscribeId = lbry.balanceSubscribe((results) => { this.setState({ balance: results, }) }); }, componentWillUnmount: function() { if (this._balanceSubscribeId) { lbry.balanceUnsubscribe(this._balanceSubscribeId); } }, render: function() { return (

Balance

{ this.state.balance === null ? : ''} { this.state.balance !== null ? : '' }
{ this.props.viewingPage === 'wallet' ? : '' } { this.props.viewingPage === 'send' ? : '' } { this.props.viewingPage === 'receive' ? : '' }
); } }); export default WalletPage;