Clickable claims and filter for tips

ui/js/component/bodyTransactionList/index.js

@@ -1,5 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
+import { doNavigate } from "actions/navigation";
 import TransactionTableBody from "./view";
 
-export default connect(null, null)(TransactionTableBody);
+const perform = dispatch => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
+});
+
+export default connect(null, perform)(TransactionTableBody);

ui/js/component/bodyTransactionList/view.jsx

@@ -7,23 +7,41 @@ class TransactionTableBody extends React.PureComponent {
     super(props);
   }
 
+  getClaimLink(claim_name, claim_id) {
+    let uri = `lbry://${claim_name}#${claim_id}`;
+
+    return (
+      <a
+        className="button-text"
+        onClick={() => this.props.navigate("/show", { uri })}
+      >
+        {claim_name}
+      </a>
+    );
+  }
+
   filterList(transaction) {
-    if (this.filter == "claim") {
+    if (this.props.filter == "claim") {
       return transaction.claim_info.length > 0;
-    } else if (this.filter == "support") {
+    } else if (this.props.filter == "support") {
       return transaction.support_info.length > 0;
-    } else if (this.filter == "update") {
+    } else if (this.props.filter == "update") {
       return transaction.update_info.length > 0;
     } else {
       return transaction;
     }
   }
 
-  renderBody(transaction, index) {
+  renderBody(transaction) {
     const txid = transaction.id;
     const date = transaction.date;
     const fee = transaction.fee;
-    const filter = this.filter;
+    const filter = this.props.filter;
+
+    if (filter == "tipSupport")
+      transaction["tipSupport_info"] = transaction["support_info"].filter(
+        tx => tx.is_tip
+      );
 
     return filter != "unfiltered"
       ? transaction[`${filter}_info`].map(item => {
@@ -48,7 +66,7 @@ class TransactionTableBody extends React.PureComponent {
                 <CreditAmount amount={fee} look="plain" precision={8} />{" "}
               </td>
               <td>
-                {item.claim_name}
+                {this.getClaimLink(item.claim_name, item.claim_id)}
               </td>
               <td>
                 <LinkTransaction id={txid} />
@@ -81,14 +99,21 @@ class TransactionTableBody extends React.PureComponent {
         </tr>;
   }
 
+  removeFeeTx(transaction) {
+    if (this.props.filter == "unfiltered")
+      return Math.abs(transaction.amount) != Math.abs(transaction.fee);
+    else return true;
+  }
+
   render() {
     const { transactions, filter } = this.props;
 
     return (
       <tbody>
         {transactions
-          .filter(this.filterList, this.props)
-          .map(this.renderBody, this.props)}
+          .filter(this.filterList, this)
+          .filter(this.removeFeeTx, this)
+          .map(this.renderBody, this)}
       </tbody>
     );
   }

ui/js/component/transactionList/view.jsx

@@ -39,9 +39,10 @@ class TransactionList extends React.PureComponent {
             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>
+            <option value="claim">{__("Claims")}</option>
+            <option value="support">{__("Supports")}</option>
+            <option value="tipSupport">{__("Tips")}</option>
+            <option value="update">{__("Updates")}</option>
           </FormField>
         </span>
         <table className="table-standard table-stretch">