Some transactions cleanup and starting on sending

ui/js/actions/wallet.js

@@ -58,3 +58,8 @@ export function doCheckAddressIsMine(address) {
     })
   }
 }
+
+export function doSendToAddress() {
+  return function(dispatch, getState) {
+  }
+}

ui/js/page/wallet/index.js

@@ -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)

ui/js/page/wallet/view.jsx

@@ -46,116 +46,159 @@ class AddressSection extends React.Component {
   }
 }
 
-var SendToAddressSection = React.createClass({
+const SendToAddressSection = (props) => {
-  handleSubmit: function(event) {
+  const {
-    if (typeof event !== 'undefined') {
+    sendToAddress,
-      event.preventDefault();
+    closeModal,
-    }
+    modal,
+    setAmount,
+    setAddress,
+    amount,
+    address,
+  } = props
 
-    if ((this.state.balance - this.state.amount) < 1)
+  const results = null
-    {
-      this.setState({
-        modal: 'insufficientBalance',
-      });
-      return;
-    }
 
-    this.setState({
+  return (
-      results: "",
+    <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) => {
+// var SendToAddressSection = React.createClass({
-      if(results === true)
+//   handleSubmit: function(event) {
-      {
+//     if (typeof event !== 'undefined') {
-        this.setState({
+//       event.preventDefault();
-          results: "Your transaction was successfully placed in the queue.",
+//     }
-        });
+
-      }
+//     if ((this.state.balance - this.state.amount) < 1)
-      else
+//     {
-      {
+//       this.setState({
-        this.setState({
+//         modal: 'insufficientBalance',
-          results: "Something went wrong: " + results
+//       });
-        });
+//       return;
-      }
+//     }
-    }, (error) => {
+
-      this.setState({
+//     this.setState({
-        results: "Something went wrong: " + error.message
+//       results: "",
-      })
+//     });
-    });
+
-  },
+//     lbry.sendToAddress(this.state.amount, this.state.address, (results) => {
-  closeModal: function() {
+//       if(results === true)
-    this.setState({
+//       {
-      modal: null,
+//         this.setState({
-    });
+//           results: "Your transaction was successfully placed in the queue.",
-  },
+//         });
-  getInitialState: function() {
+//       }
-    return {
+//       else
-      address: "",
+//       {
-      amount: 0.0,
+//         this.setState({
-      balance: <BusyMessage message="Checking balance" />,
+//           results: "Something went wrong: " + results
-      results: "",
+//         });
-    }
+//       }
-  },
+//     }, (error) => {
-  componentWillMount: function() {
+//       this.setState({
-    lbry.getBalance((results) => {
+//         results: "Something went wrong: " + error.message
-      this.setState({
+//       })
-        balance: results,
+//     });
-      });
+//   },
-    });
+//   closeModal: function() {
-  },
+//     this.setState({
-  setAmount: function(event) {
+//       modal: null,
-    this.setState({
+//     });
-      amount: parseFloat(event.target.value),
+//   },
-    })
+//   getInitialState: function() {
-  },
+//     return {
-  setAddress: function(event) {
+//       address: "",
-    this.setState({
+//       amount: 0.0,
-      address: event.target.value,
+//       balance: <BusyMessage message="Checking balance" />,
-    })
+//       results: "",
-  },
+//     }
-  render: function() {
+//   },
-    return (
+//   componentWillMount: function() {
-      <section className="card">
+//     lbry.getBalance((results) => {
-        <form onSubmit={this.handleSubmit}>
+//       this.setState({
-          <div className="card__title-primary">
+//         balance: results,
-            <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} />
+//   setAmount: function(event) {
-          </div>
+//     this.setState({
-          <div className="card__content">
+//       amount: parseFloat(event.target.value),
-            <FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
+//     })
-          </div>
+//   },
-          <div className="card__actions card__actions--form-submit">
+//   setAddress: function(event) {
-            <Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
+//     this.setState({
-            <input type='submit' className='hidden' />
+//       address: event.target.value,
-          </div>
+//     })
-            {
+//   },
-              this.state.results ?
+//   render: function() {
-              <div className="card__content">
+//     return (
-                <h4>Results</h4>
+//       <section className="card">
-                {this.state.results}
+//         <form onSubmit={this.handleSubmit}>
-              </div> : ''
+//           <div className="card__title-primary">
-            }
+//             <h3>Send Credits</h3>
-        </form>
+//           </div>
-        <Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
+//           <div className="card__content">
-               onConfirmed={this.closeModal}>
+//             <FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
-          Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
+//           </div>
-        </Modal>
+//           <div className="card__content">
-      </section>
+//             <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}>

ui/js/reducers/wallet.js

@@ -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
   })
 }

ui/js/selectors/wallet.js

@@ -8,44 +8,32 @@ export const _selectState = state => state.wallet || {}
 
 export const selectBalance = createSelector(
   _selectState,
-  (state) => {
+  (state) => state.balance || 0
-    return 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,
+  selectTransactionsById,
-  (transactions) => {
+  (byId) => {
-    if (transactions.length == 0) return transactions
-
     const transactionItems = []
-    const condensedTransactions = {}
+    const txids = Object.keys(byId)
-
+    txids.forEach((txid) => {
-    transactions.forEach(function(tx) {
+      const tx = byId[txid]
-      const txid = tx["txid"];
+      transactionItems.push({
-      if (!(txid in condensedTransactions)) {
+        id: txid,
-        condensedTransactions[txid] = 0;
+        date: tx.timestamp ? (new Date(parseInt(tx.timestamp) * 1000)) : null,
-      }
+        amount: parseFloat(tx.value)
-      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];
-      }
-    });
-
     return transactionItems
   }
 )