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({
-      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}>
+      <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={this.setAmount} />
+          <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={this.setAddress} />
+          <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={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
+          <Link button="primary" label="Send" onClick={sendToAddress} disabled={!(parseFloat(amount) > 0.0) || !address} />
           <input type='submit' className='hidden' />
         </div>
           {
-              this.state.results ?
+            results ?
             <div className="card__content">
               <h4>Results</h4>
-                {this.state.results}
+              {results}
             </div> : ''
           }
       </form>
-        <Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
+      {modal == 'insufficientBalance' && <Modal isOpen={true} contentLabel="Insufficient balance" onConfirmed={closeModal}>
-               onConfirmed={this.closeModal}>
         Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
-        </Modal>
+      </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}>

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"];
-      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,
+        date: tx.timestamp ? (new Date(parseInt(tx.timestamp) * 1000)) : null,
-          amount: condensedTransactions[txid]
+        amount: parseFloat(tx.value)
-        });
+      })
-        delete condensedTransactions[txid];
+    })
-      }
-    });
-
     return transactionItems
   }
 )