Displays additional fields in the transaction list

ui/js/actions/claims.js

@@ -47,7 +47,7 @@ export function doSendSupport(amount, claim_id) {
     };
 
     lbry
-      .claim_send_tip({
+      .wallet_send({
         claim_id: claim_id,
         amount: amount,
       })

ui/js/component/transactionList/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import { doNavigate } from "actions/app";
 import { doFetchTransactions } from "actions/wallet";
 import {
   selectBalance,
@@ -15,6 +16,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
   fetchTransactions: () => dispatch(doFetchTransactions()),
 });
 

ui/js/component/transactionList/view.jsx

@@ -7,13 +7,38 @@ class TransactionList extends React.PureComponent {
   }
 
   render() {
-    const { fetchingTransactions, transactionItems } = this.props;
+    const { fetchingTransactions, transactionItems, navigate } = this.props;
+
+    function findTypeOfTx(type, is_tip) {
+      if (is_tip && type === "support") return "tip";
+      else return type;
+    }
+
+    function getClaimLink(claim_name, claim_id) {
+      if (claim_id !== "----" && claim_name !== "----") {
+        let uri = `lbry://${claim_name}#${claim_id}`;
+
+        return (
+          <td>
+            <a
+              className="button-text"
+              onClick={() => navigate("/show", { uri })}
+            >
+              {claim_name}
+            </a>
+          </td>
+        );
+      }
+
+      return <td>{__("N/A")}</td>;
+    }
 
     const rows = [];
     if (transactionItems.length > 0) {
       transactionItems.forEach(function(item) {
         rows.push(
           <tr key={item.id}>
+            <td>{findTypeOfTx(item.type, item.is_tip)}</td>
             <td>{(item.amount > 0 ? "+" : "") + item.amount}</td>
             <td>
               {item.date
@@ -25,6 +50,7 @@ class TransactionList extends React.PureComponent {
                 ? item.date.toLocaleTimeString()
                 : <span className="empty">{__("(Transaction pending)")}</span>}
             </td>
+            {getClaimLink(item.claim_name, item.claim_id)}
             <td>
               <a
                 className="button-text"
@@ -53,9 +79,11 @@ class TransactionList extends React.PureComponent {
             ? <table className="table-standard table-stretch">
                 <thead>
                   <tr>
+                    <th>{__("Type")}</th>
                     <th>{__("Amount")}</th>
                     <th>{__("Date")}</th>
                     <th>{__("Time")}</th>
+                    <th>{__("Claim")}</th>
                     <th>{__("Transaction")}</th>
                   </tr>
                 </thead>

ui/js/selectors/wallet.js

@@ -29,6 +29,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_id: tx.claim_id,
+        claim_name: tx.claim_name,
+        is_tip: tx.is_tip,
       });
     });
     return transactionItems.reverse();