2016-07-19 00:40:15 +02:00
|
|
|
var NewAddressSection = React.createClass({
|
|
|
|
generateAddress: function() {
|
|
|
|
lbry.getNewAddress((results) => {
|
|
|
|
this.setState({
|
|
|
|
address: results,
|
|
|
|
})
|
|
|
|
});
|
|
|
|
},
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
address: "",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
return (
|
2016-08-08 02:20:14 +02:00
|
|
|
<section className="card">
|
|
|
|
<h3>Generate New Address</h3>
|
2016-08-08 05:36:23 +02:00
|
|
|
<div className="form-row"><input type="text" size="60" value={this.state.address}></input></div>
|
|
|
|
<div className="form-row form-row-submit"><Link button="primary" label="Generate" onClick={this.generateAddress} /></div>
|
2016-08-03 10:07:36 +02:00
|
|
|
</section>
|
2016-07-19 00:40:15 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var SendToAddressSection = React.createClass({
|
|
|
|
sendToAddress: function() {
|
2016-08-02 15:35:18 +02:00
|
|
|
if ((this.state.balance - this.state.amount) < 1)
|
2016-08-02 11:34:30 +02:00
|
|
|
{
|
|
|
|
alert("Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.")
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-07-19 00:40:15 +02:00
|
|
|
this.setState({
|
|
|
|
results: "",
|
|
|
|
});
|
|
|
|
|
2016-07-19 01:18:16 +02:00
|
|
|
lbry.sendToAddress(this.state.amount, this.state.address, (results) => {
|
2016-07-19 00:40:15 +02:00
|
|
|
if(results === true)
|
|
|
|
{
|
|
|
|
this.setState({
|
2016-07-22 17:59:20 +02:00
|
|
|
results: "Your transaction was successfully placed in the queue.",
|
2016-07-19 00:40:15 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this.setState({
|
|
|
|
results: "Something went wrong: " + results
|
|
|
|
});
|
|
|
|
}
|
2016-07-22 17:33:05 +02:00
|
|
|
}, (error) => {
|
|
|
|
this.setState({
|
|
|
|
results: "Something went wrong: " + error.faultString + " " + error.faultCode
|
|
|
|
})
|
2016-07-19 00:40:15 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
address: "",
|
|
|
|
amount: 0.0,
|
|
|
|
balance: "Checking balance...",
|
|
|
|
results: "",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
componentWillMount: function() {
|
|
|
|
lbry.getBalance((results) => {
|
|
|
|
this.setState({
|
|
|
|
balance: results,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
setAmount: function(event) {
|
|
|
|
this.setState({
|
2016-07-22 17:33:05 +02:00
|
|
|
amount: parseFloat(event.target.value),
|
2016-07-19 00:40:15 +02:00
|
|
|
})
|
|
|
|
},
|
|
|
|
setAddress: function(event) {
|
|
|
|
this.setState({
|
|
|
|
address: event.target.value,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
render: function() {
|
|
|
|
return (
|
2016-08-08 02:20:14 +02:00
|
|
|
<section className="card">
|
|
|
|
<h3>Send Credits</h3>
|
2016-08-08 05:31:21 +02:00
|
|
|
<div className="form-row">
|
2016-08-08 05:36:23 +02:00
|
|
|
<label htmlFor="amount">Amount</label>
|
|
|
|
<input id="amount" type="text" size="10" onChange={this.setAmount}></input>
|
2016-08-08 05:31:21 +02:00
|
|
|
</div>
|
|
|
|
<div className="form-row">
|
2016-08-08 05:36:23 +02:00
|
|
|
<label htmlFor="address">Recipient address</label>
|
|
|
|
<input id="address" type="text" size="60" onChange={this.setAddress}></input>
|
2016-08-08 05:31:21 +02:00
|
|
|
</div>
|
2016-08-08 05:36:23 +02:00
|
|
|
<div className="form-row form-row-submit">
|
2016-08-03 10:07:36 +02:00
|
|
|
<Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
|
2016-08-08 05:31:21 +02:00
|
|
|
</div>
|
2016-08-08 02:20:14 +02:00
|
|
|
{
|
|
|
|
this.state.results ?
|
2016-08-08 05:31:21 +02:00
|
|
|
<div className="form-row">
|
2016-08-08 02:20:14 +02:00
|
|
|
<h4>Results</h4>
|
|
|
|
{this.state.results}
|
2016-08-08 05:31:21 +02:00
|
|
|
</div>
|
2016-08-08 02:20:14 +02:00
|
|
|
: ''
|
|
|
|
}
|
2016-08-08 05:31:21 +02:00
|
|
|
</section>
|
2016-07-19 00:40:15 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var WalletPage = React.createClass({
|
2016-08-08 02:20:14 +02:00
|
|
|
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: "Checking balance...",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
componentWillMount: function() {
|
|
|
|
lbry.getBalance((results) => {
|
|
|
|
this.setState({
|
|
|
|
balance: results,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
2016-07-19 00:40:15 +02:00
|
|
|
render: function() {
|
|
|
|
return (
|
|
|
|
<main className="page">
|
2016-08-08 02:20:14 +02:00
|
|
|
<section className="card">
|
|
|
|
<h3>Balance</h3>
|
|
|
|
{this.state.balance} <CurrencySymbol />
|
2016-08-08 00:45:26 +02:00
|
|
|
</section>
|
2016-08-08 02:20:14 +02:00
|
|
|
<SendToAddressSection />
|
|
|
|
<NewAddressSection />
|
|
|
|
<section className="card">
|
|
|
|
<h3>Claim Invite Code</h3>
|
|
|
|
<Link href="?claim" label="Claim a LBRY beta invite code" button="alt" />
|
2016-07-19 00:40:15 +02:00
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|