Transaction list now displays additional information

Removed older modal files

ui/js/actions/wallet.js

@@ -23,7 +23,7 @@ export function doFetchTransactions() {
       type: types.FETCH_TRANSACTIONS_STARTED,
     });
 
-    lbry.transaction_list().then(results => {
+    lbry.transaction_list({ include_tip_info: true }).then(results => {
       dispatch({
         type: types.FETCH_TRANSACTIONS_COMPLETED,
         data: {

ui/js/component/bodyTransactionList/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import TransactionTableBody from "./view";
+
+export default connect(null, null)(TransactionTableBody);

ui/js/component/bodyTransactionList/view.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import LinkTransaction from "component/linkTransaction";
+import { CreditAmount } from "component/common";
+
+class TransactionTableBody extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  filterList(transaction) {
+    if (this.filter == "claim") {
+      return transaction.claim_info.length > 0;
+    } else if (this.filter == "support") {
+      return transaction.support_info.length > 0;
+    } else if (this.filter == "update") {
+      return transaction.update_info.length > 0;
+    } else {
+      return transaction;
+    }
+  }
+
+  renderBody(transaction, index) {
+    const txid = transaction.id;
+    const date = transaction.date;
+    const fee = transaction.fee;
+    const filter = this.filter;
+
+    return filter != "unfiltered"
+      ? transaction[`${filter}_info`].map(item => {
+          return (
+            <tr key={`${txid}:${item.nout}`}>
+              <td>
+                {date
+                  ? date.toLocaleDateString() + " " + date.toLocaleTimeString()
+                  : <span className="empty">
+                      {__("(Transaction pending)")}
+                    </span>}
+              </td>
+              <td>
+                <CreditAmount
+                  amount={item.amount}
+                  look="plain"
+                  showPlus={true}
+                  precision={8}
+                />{" "}
+              </td>
+              <td>
+                <CreditAmount amount={fee} look="plain" precision={8} />{" "}
+              </td>
+              <td>
+                {item.claim_name}
+              </td>
+              <td>
+                <LinkTransaction id={txid} />
+              </td>
+            </tr>
+          );
+        })
+      : <tr key={txid}>
+          <td>
+            {date
+              ? date.toLocaleDateString() + " " + date.toLocaleTimeString()
+              : <span className="empty">
+                  {__("(Transaction pending)")}
+                </span>}
+          </td>
+          <td>
+            <CreditAmount
+              amount={transaction.amount}
+              look="plain"
+              showPlus={true}
+              precision={8}
+            />{" "}
+          </td>
+          <td>
+            <CreditAmount amount={fee} look="plain" precision={8} />{" "}
+          </td>
+          <td>
+            <LinkTransaction id={txid} />
+          </td>
+        </tr>;
+  }
+
+  render() {
+    const { transactions, filter } = this.props;
+
+    return (
+      <tbody>
+        {transactions
+          .filter(this.filterList, this.props)
+          .map(this.renderBody, this.props)}
+      </tbody>
+    );
+  }
+}
+
+export default TransactionTableBody;

ui/js/component/headerTransactionList/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import TransactionTableHeader from "./view";
+
+export default connect(null, null)(TransactionTableHeader);

ui/js/component/headerTransactionList/view.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+class TransactionTableHeader extends React.PureComponent {
+  render() {
+    const { filter } = this.props;
+    return (
+      <thead>
+        <tr>
+          <th>{__("Date")}</th>
+          <th>{__("Amount")}</th>
+          <th>{__("Fee")}</th>
+          {filter != "unfiltered" && <th> {__("Claim Name")} </th>}
+          <th>{__("Transaction")}</th>
+        </tr>
+      </thead>
+    );
+  }
+}
+
+export default TransactionTableHeader;

ui/js/component/modalInsufficientBalance/index.js

@@ -1,16 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { doCloseModal, doNavigate } from "actions/app";
-import ModalInsufficientBalance from "./view";
-
-const select = state => ({});
-
-const perform = dispatch => ({
-  addBalance: () => {
-    dispatch(doNavigate("/wallet"));
-    dispatch(doCloseModal());
-  },
-  closeModal: () => dispatch(doCloseModal()),
-});
-
-export default connect(select, perform)(ModalInsufficientBalance);

ui/js/component/modalInsufficientBalance/view.jsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Modal } from "component/modal";
-
-class ModalInsufficientBalance extends React.PureComponent {
-  render() {
-    const { addBalance, closeModal } = this.props;
-
-    return (
-      <Modal
-        isOpen={true}
-        type="confirm"
-        contentLabel={__("Not enough credits")}
-        confirmButtonLabel={__("Get Credits")}
-        abortButtonLabel={__("Cancel")}
-        onAborted={closeModal}
-        onConfirmed={addBalance}
-      >
-        {__(
-          "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet."
-        )}
-      </Modal>
-    );
-  }
-}
-
-export default ModalInsufficientBalance;

ui/js/component/modalTransactionFailed/index.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { doCloseModal } from "actions/app";
-import ModalTransactionFailed from "./view";
-
-const select = state => ({});
-
-const perform = dispatch => ({
-  closeModal: () => dispatch(doCloseModal()),
-});
-
-export default connect(select, perform)(ModalTransactionFailed);

ui/js/component/modalTransactionFailed/view.jsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Modal } from "component/modal";
-
-class ModalTransactionFailed extends React.PureComponent {
-  render() {
-    const { closeModal } = this.props;
-
-    return (
-      <Modal
-        isOpen={true}
-        contentLabel={__("Transaction failed")}
-        onConfirmed={closeModal}
-      >
-        {__("Something went wrong")}:
-      </Modal>
-    );
-  }
-}
-
-export default ModalTransactionFailed;

ui/js/component/transactionList/view.jsx

@@ -1,57 +1,56 @@
 import React from "react";
-import LinkTransaction from "component/linkTransaction";
+import TransactionTableHeader from "component/headerTransactionList";
-import { CreditAmount } from "component/common";
+import TransactionTableBody from "component/bodyTransactionList";
+import FormField from "component/formField";
 
-const TransactionList = props => {
+class TransactionList extends React.PureComponent {
-  const { emptyMessage, transactions } = props;
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filter: "unfiltered",
+    };
+  }
+
+  handleFilterChanged(event) {
+    this.setState({
+      filter: event.target.value,
+    });
+  }
+
+  render() {
+    const { emptyMessage, transactions } = this.props;
+    const { filter } = this.state;
+
+    if (!transactions || !transactions.length) {
+      return (
+        <div className="empty">
+          {emptyMessage || __("No transactions to list.")}
+        </div>
+      );
+    }
 
-  if (!transactions || !transactions.length) {
     return (
-      <div className="empty">
+      <div>
-        {emptyMessage || __("No transactions to list.")}
+        <span className="sort-section">
+          {__("Filter")} {" "}
+          <FormField
+            type="select"
+            onChange={this.handleFilterChanged.bind(this)}
+          >
+            <option value="unfiltered">{__("Unfiltered")}</option>
+            <option value="claim">{__("Claim")}</option>
+            <option value="support">{__("Support")}</option>
+            <option value="update">{__("Update")}</option>
+          </FormField>
+        </span>
+        <table className="table-standard table-stretch">
+          <TransactionTableHeader filter={filter} />
+          <TransactionTableBody transactions={transactions} filter={filter} />
+        </table>
       </div>
     );
   }
-
+}
-  return (
-    <table className="table-standard table-stretch">
-      <thead>
-        <tr>
-          <th>{__("Date")}</th>
-          <th>{__("Amount")}</th>
-          <th>{__("Transaction")}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {transactions.map(item => {
-          return (
-            <tr key={item.id}>
-              <td>
-                {item.date
-                  ? item.date.toLocaleDateString() +
-                      " " +
-                      item.date.toLocaleTimeString()
-                  : <span className="empty">
-                      {__("(Transaction pending)")}
-                    </span>}
-              </td>
-              <td>
-                <CreditAmount
-                  amount={item.amount}
-                  look="plain"
-                  showPlus={true}
-                  precision={8}
-                />{" "}
-              </td>
-              <td>
-                <LinkTransaction id={item.id} />
-              </td>
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
-  );
-};
 
 export default TransactionList;

ui/js/selectors/wallet.js

@@ -28,11 +28,10 @@ export const selectTransactionItems = createSelector(
         id: txid,
         date: tx.timestamp ? new Date(parseInt(tx.timestamp) * 1000) : null,
         amount: parseFloat(tx.value),
-        type: tx.type,
+        claim_info: tx.claim_info,
+        support_info: tx.support_info,
+        update_info: tx.update_info,
         fee: tx.fee,
-        claim_id: tx.claim_id,
-        claim_name: tx.claim_name,
-        is_tip: tx.is_tip,
       });
     });
     return transactionItems.reverse();