Redux #115
5 changed files with 187 additions and 131 deletions
|
|
@ -58,3 +58,8 @@ export function doCheckAddressIsMine(address) {
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function doSendToAddress() {
|
||||
return function(dispatch, getState) {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@ import {
|
|||
import {
|
||||
doGetNewAddress,
|
||||
doCheckAddressIsMine,
|
||||
doSendToAddress,
|
||||
} from 'actions/wallet'
|
||||
import {
|
||||
selectCurrentPage,
|
||||
selectCurrentModal,
|
||||
} from 'selectors/app'
|
||||
import {
|
||||
selectBalance,
|
||||
|
|
@ -30,12 +32,18 @@ const select = (state) => ({
|
|||
transactionItems: selectTransactionItems(state),
|
||||
receiveAddress: selectReceiveAddress(state),
|
||||
gettingNewAddress: selectGettingNewAddress(state),
|
||||
modal: selectCurrentModal(state),
|
||||
address: null,
|
||||
amount: 0.0,
|
||||
})
|
||||
|
||||
const perform = (dispatch) => ({
|
||||
closeModal: () => dispatch(doCloseModal()),
|
||||
getNewAddress: () => dispatch(doGetNewAddress()),
|
||||
checkAddressIsMine: (address) => dispatch(doCheckAddressIsMine(address))
|
||||
checkAddressIsMine: (address) => dispatch(doCheckAddressIsMine(address)),
|
||||
sendToAddress: () => dispatch(doSendToAddress()),
|
||||
setAmount: () => console.log('set amount'),
|
||||
setAddress: () => console.log('set address'),
|
||||
})
|
||||
|
||||
export default connect(select, perform)(WalletPage)
|
||||
|
|
|
|||
|
|
@ -46,116 +46,159 @@ class AddressSection extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
var SendToAddressSection = React.createClass({
|
||||
handleSubmit: function(event) {
|
||||
if (typeof event !== 'undefined') {
|
||||
event.preventDefault();
|
||||
}
|
||||
const SendToAddressSection = (props) => {
|
||||
const {
|
||||
sendToAddress,
|
||||
closeModal,
|
||||
modal,
|
||||
setAmount,
|
||||
setAddress,
|
||||
amount,
|
||||
address,
|
||||
} = props
|
||||
|
||||
if ((this.state.balance - this.state.amount) < 1)
|
||||
{
|
||||
this.setState({
|
||||
modal: 'insufficientBalance',
|
||||
});
|
||||
return;
|
||||
}
|
||||
const results = null
|
||||
|
||||
this.setState({
|
||||
results: "",
|
||||
});
|
||||
return (
|
||||
<section className="card">
|
||||
<form onSubmit={sendToAddress}>
|
||||
<div className="card__title-primary">
|
||||
<h3>Send Credits</h3>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={setAmount} />
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={setAddress} />
|
||||
</div>
|
||||
<div className="card__actions card__actions--form-submit">
|
||||
<Link button="primary" label="Send" onClick={sendToAddress} disabled={!(parseFloat(amount) > 0.0) || !address} />
|
||||
<input type='submit' className='hidden' />
|
||||
</div>
|
||||
{
|
||||
results ?
|
||||
<div className="card__content">
|
||||
<h4>Results</h4>
|
||||
{results}
|
||||
</div> : ''
|
||||
}
|
||||
</form>
|
||||
{modal == 'insufficientBalance' && <Modal isOpen={true} contentLabel="Insufficient balance" onConfirmed={closeModal}>
|
||||
Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
|
||||
</Modal>}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
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: <BusyMessage message="Checking 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 (
|
||||
<section className="card">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className="card__title-primary">
|
||||
<h3>Send Credits</h3>
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
|
||||
</div>
|
||||
<div className="card__actions card__actions--form-submit">
|
||||
<Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
|
||||
<input type='submit' className='hidden' />
|
||||
</div>
|
||||
{
|
||||
this.state.results ?
|
||||
<div className="card__content">
|
||||
<h4>Results</h4>
|
||||
{this.state.results}
|
||||
</div> : ''
|
||||
}
|
||||
</form>
|
||||
<Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
|
||||
onConfirmed={this.closeModal}>
|
||||
Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
|
||||
</Modal>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
// 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: <BusyMessage message="Checking 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 (
|
||||
// <section className="card">
|
||||
// <form onSubmit={this.handleSubmit}>
|
||||
// <div className="card__title-primary">
|
||||
// <h3>Send Credits</h3>
|
||||
// </div>
|
||||
// <div className="card__content">
|
||||
// <FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
|
||||
// </div>
|
||||
// <div className="card__content">
|
||||
// <FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
|
||||
// </div>
|
||||
// <div className="card__actions card__actions--form-submit">
|
||||
// <Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
|
||||
// <input type='submit' className='hidden' />
|
||||
// </div>
|
||||
// {
|
||||
// this.state.results ?
|
||||
// <div className="card__content">
|
||||
// <h4>Results</h4>
|
||||
// {this.state.results}
|
||||
// </div> : ''
|
||||
// }
|
||||
// </form>
|
||||
// <Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
|
||||
// onConfirmed={this.closeModal}>
|
||||
// Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
|
||||
// </Modal>
|
||||
// </section>
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
|
||||
const TransactionList = (props) => {
|
||||
const {
|
||||
transactions,
|
||||
fetchingTransactions,
|
||||
transactionItems,
|
||||
} = props
|
||||
|
||||
const rows = []
|
||||
if (transactions.length > 0) {
|
||||
if (transactionItems.length > 0) {
|
||||
transactionItems.forEach(function(item) {
|
||||
rows.push(
|
||||
<tr key={item.id}>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,20 @@ reducers[types.FETCH_TRANSACTIONS_STARTED] = function(state, action) {
|
|||
}
|
||||
|
||||
reducers[types.FETCH_TRANSACTIONS_COMPLETED] = function(state, action) {
|
||||
const oldTransactions = Object.assign({}, state.transactions)
|
||||
const byId = Object.assign({}, oldTransactions.byId)
|
||||
const { transactions } = action.data
|
||||
|
||||
transactions.forEach((transaction) => {
|
||||
byId[transaction.txid] = transaction
|
||||
})
|
||||
|
||||
const newTransactions = Object.assign({}, oldTransactions, {
|
||||
byId: byId
|
||||
})
|
||||
|
||||
return Object.assign({}, state, {
|
||||
transactions: action.data.transactions,
|
||||
transactions: newTransactions,
|
||||
fetchingTransactions: false
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,44 +8,32 @@ export const _selectState = state => state.wallet || {}
|
|||
|
||||
export const selectBalance = createSelector(
|
||||
_selectState,
|
||||
(state) => {
|
||||
return state.balance || 0
|
||||
}
|
||||
(state) => state.balance || 0
|
||||
)
|
||||
|
||||
export const selectTransactions = createSelector(
|
||||
_selectState,
|
||||
(state) => state.transactions
|
||||
(state) => state.transactions || {}
|
||||
)
|
||||
|
||||
export const selectTransactionsById = createSelector(
|
||||
selectTransactions,
|
||||
(transactions) => transactions.byId || {}
|
||||
)
|
||||
|
||||
export const selectTransactionItems = createSelector(
|
||||
selectTransactions,
|
||||
(transactions) => {
|
||||
if (transactions.length == 0) return transactions
|
||||
|
||||
selectTransactionsById,
|
||||
(byId) => {
|
||||
const transactionItems = []
|
||||
const condensedTransactions = {}
|
||||
|
||||
transactions.forEach(function(tx) {
|
||||
const txid = tx["txid"];
|
||||
if (!(txid in condensedTransactions)) {
|
||||
condensedTransactions[txid] = 0;
|
||||
}
|
||||
condensedTransactions[txid] += parseFloat(tx["value"]);
|
||||
});
|
||||
transactions.reverse().forEach(function(tx) {
|
||||
const 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];
|
||||
}
|
||||
});
|
||||
|
||||
const txids = Object.keys(byId)
|
||||
txids.forEach((txid) => {
|
||||
const tx = byId[txid]
|
||||
transactionItems.push({
|
||||
id: txid,
|
||||
date: tx.timestamp ? (new Date(parseInt(tx.timestamp) * 1000)) : null,
|
||||
amount: parseFloat(tx.value)
|
||||
})
|
||||
})
|
||||
return transactionItems
|
||||
}
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in a new issue