lbry-desktop/js/page/wallet.js

146 lines
3.8 KiB
JavaScript
Raw Normal View History

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 (
<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>
</section>
2016-07-19 00:40:15 +02:00
);
}
});
var SendToAddressSection = React.createClass({
sendToAddress: function() {
if ((this.state.balance - this.state.amount) < 1)
{
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 (
<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">
<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>
{
this.state.results ?
2016-08-08 05:31:21 +02:00
<div className="form-row">
<h4>Results</h4>
{this.state.results}
2016-08-08 05:31:21 +02:00
</div>
: ''
}
2016-08-08 05:31:21 +02:00
</section>
2016-07-19 00:40:15 +02:00
);
}
});
var WalletPage = React.createClass({
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">
<section className="card">
<h3>Balance</h3>
{this.state.balance} <CurrencySymbol />
2016-08-08 00:45:26 +02:00
</section>
<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>
);
}
});