Clean Up

ui/js/actions/content.js

@@ -4,14 +4,14 @@ import lbry from "lbry";
 import lbryio from "lbryio";
 import lbryuri from "lbryuri";
 import { makeSelectClientSetting } from "selectors/settings";
-import { selectBalance } from "selectors/wallet";
+import { selectBalance, selectTransactionItems } from "selectors/wallet";
 import {
   makeSelectFileInfoForUri,
   selectDownloadingByOutpoint,
 } from "selectors/file_info";
 import { selectResolvingUris } from "selectors/content";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
-import { doAlertError, doOpenModal, doCloseModal } from "actions/app";
+import { doAlertError, doOpenModal } from "actions/app";
 import { doClaimEligiblePurchaseRewards } from "actions/rewards";
 import { selectBadgeNumber } from "selectors/app";
 import { selectTotalDownloadProgress } from "selectors/file_info";
@@ -506,9 +506,13 @@ export function doPublish(params) {
   };
 }
 
-export function doAbandonClaim(claimId, name, txid, nout) {
+export function doAbandonClaim(txid, nout) {
   return function(dispatch, getState) {
     const state = getState();
+    const transactionItems = selectTransactionItems(state);
+    const { claim_id: claimId, claim_name: name } = transactionItems.find(
+      claim => claim.txid == txid && claim.nout == nout
+    );
 
     dispatch({
       type: types.ABANDON_CLAIM_STARTED,

ui/js/actions/file_info.js

@@ -1,6 +1,6 @@
 import * as types from "constants/action_types";
 import lbry from "lbry";
-import { doFetchClaimListMine } from "actions/content";
+import { doFetchClaimListMine, doAbandonClaim } from "actions/content";
 import {
   selectClaimsByUri,
   selectIsFetchingClaimListMine,
@@ -105,29 +105,7 @@ export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) {
         txid = fileInfo.outpoint.slice(0, -2);
         nout = fileInfo.outpoint.slice(-1);
 
-        dispatch({
-          type: types.ABANDON_CLAIM_STARTED,
-          data: {
-            claimId: fileInfo.claim_id,
-            txid: txid,
-            nout: nout,
-          },
-        });
-
-        const success = dispatch({
-          type: types.ABANDON_CLAIM_SUCCEEDED,
-          data: {
-            claimId: fileInfo.claim_id,
-            txid: txid,
-            nout: nout,
-          },
-        });
-        lbry
-          .claim_abandon({
-            txid: txid,
-            nout: nout,
-          })
-          .then(success);
+        dispatch(doAbandonClaim(txid, nout));
       }
     }
 

ui/js/component/transactionList/index.js

@@ -3,12 +3,12 @@ import { connect } from "react-redux";
 import { doNavigate } from "actions/navigation";
 import { doOpenModal } from "actions/app";
 import { selectClaimedRewardsByTransactionId } from "selectors/rewards";
-import { selectAllMyClaimsByTxidNout } from "selectors/claims";
+import { selectAllMyClaimsByOutpoint } from "selectors/claims";
 import TransactionList from "./view";
 
 const select = state => ({
   rewards: selectClaimedRewardsByTransactionId(state),
-  myClaims: selectAllMyClaimsByTxidNout(state),
+  myClaims: selectAllMyClaimsByOutpoint(state),
 });
 
 const perform = dispatch => ({

ui/js/component/transactionList/internal/TransactionListItem.jsx

@@ -4,42 +4,22 @@ import { CreditAmount } from "component/common";
 import DateTime from "component/dateTime";
 import Link from "component/link";
 import lbryuri from "lbryuri";
+import * as txnTypes from "constants/transaction_types";
 
 class TransactionListItem extends React.PureComponent {
   abandonClaim() {
-    const {
-      claim_id: claimId,
-      claim_name: name,
-      txid,
-      type,
-      nout,
-    } = this.props.transaction;
-    let msg;
+    const { txid, nout } = this.props.transaction;
 
-    if (type == "tip") {
-      msg = "This will reduce the committed credits to the URL";
-    } else {
-      msg = "This will reclaim you lbc, back to your account";
-    }
-
-    const abandonData = {
-      name: name,
-      claimId: claimId,
-      txid: txid,
-      nout: nout,
-      msg: msg,
-    };
-
-    this.props.revokeClaim(abandonData);
+    this.props.revokeClaim(txid, nout);
   }
 
   getLink(type) {
-    if (type == "tip") {
+    if (type == txnTypes.TIP) {
       return (
         <Link
           onClick={this.abandonClaim.bind(this)}
           icon="icon-unlock-alt"
-          title={__("Unlock Tip")}
+          title={__("Unlock")}
         />
       );
     } else {
@@ -47,7 +27,7 @@ class TransactionListItem extends React.PureComponent {
         <Link
           onClick={this.abandonClaim.bind(this)}
           icon="icon-trash"
-          title={__("Delete")}
+          title={__("Revoke")}
         />
       );
     }

ui/js/component/transactionList/view.jsx

@@ -30,8 +30,8 @@ class TransactionList extends React.PureComponent {
     return this.props.myClaims.has(`${txid}:${nout}`);
   }
 
-  revokeClaim(abandonData) {
-    this.props.openModal(modals.CONFIRM_CLAIM_REVOKE, abandonData);
+  revokeClaim(txid, nout) {
+    this.props.openModal(modals.CONFIRM_CLAIM_REVOKE, { txid, nout });
   }
 
   render() {

ui/js/constants/transaction_types.js

@@ -0,0 +1 @@
+export const TIP = "tip";

ui/js/modal/modalRevokeClaim/index.js

@@ -2,12 +2,16 @@ import React from "react";
 import { connect } from "react-redux";
 import { doCloseModal } from "actions/app";
 import { doAbandonClaim } from "actions/content";
+import { selectTransactionItems } from "selectors/wallet";
 import ModalRevokeClaim from "./view";
 
+const select = state => ({
+  transactionItems: selectTransactionItems(state),
+});
+
 const perform = dispatch => ({
   closeModal: () => dispatch(doCloseModal()),
-  abandonClaim: (claimId, name, txid, nout) =>
-    dispatch(doAbandonClaim(claimId, name, txid, nout)),
+  abandonClaim: (txid, nout) => dispatch(doAbandonClaim(txid, nout)),
 });
 
-export default connect(null, perform)(ModalRevokeClaim);
+export default connect(select, perform)(ModalRevokeClaim);

ui/js/modal/modalRevokeClaim/view.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Modal } from "modal/modal";
+import * as txnTypes from "constants/transaction_types";
 
 class ModalRevokeClaim extends React.PureComponent {
   constructor(props) {
@@ -7,27 +8,76 @@ class ModalRevokeClaim extends React.PureComponent {
   }
 
   revokeClaim() {
-    const { name, claimId, txid, nout } = this.props;
+    const { txid, nout } = this.props;
 
     this.props.closeModal();
-    this.props.abandonClaim(claimId, name, txid, nout);
+    this.props.abandonClaim(txid, nout);
+  }
+
+  getButtonLabel(type) {
+    if (type == txnTypes.TIP) {
+      return "Confirm Tip Unlock";
+    } else {
+      return "Confirm Claim Revoke";
+    }
+  }
+
+  getMsgBody(type) {
+    if (type == txnTypes.TIP) {
+      return (
+        <div>
+          <h3>{__("Confirm Tip Unlock")}</h3>
+          <p>
+            {__("Are you sure you want to unlock these credits?")}
+            <br />
+            <br />
+            {__(
+              "These credits are permanently yours and can be\
+             unlocked at any time. Unlocking them allows you to\
+             spend them, but can hurt the performance of your\
+             content in lookups and search results. It is\
+             recommended you leave tips locked until you\
+             need or want to spend them."
+            )}
+          </p>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <h3>{__("Confirm Claim Revoke")}</h3>
+          <p>
+            {__("Are you sure want to revoke this claim?")}
+            <br />
+            <br />
+            {__(
+              "This will prevent others from resolving and\
+              accessing the content you published. It will return\
+              the LBC to your spendable balance, less a small\
+              transaction fee."
+            )}
+          </p>
+        </div>
+      );
+    }
   }
 
   render() {
-    const { msg, closeModal } = this.props;
+    const { transactionItems, txid, nout, closeModal } = this.props;
+    const { type } = transactionItems.find(
+      claim => claim.txid == txid && claim.nout == nout
+    );
 
     return (
       <Modal
         isOpen={true}
         contentLabel={__("Confirm Claim Revoke")}
         type="confirm"
-        confirmButtonLabel={__("Yes, Revoke")}
+        confirmButtonLabel={this.getButtonLabel(type)}
         onConfirmed={this.revokeClaim.bind(this)}
         onAborted={closeModal}
       >
-        <p>
-          {msg}
-        </p>
+        {this.getMsgBody(type)}
       </Modal>
     );
   }

ui/js/selectors/claims.js

@@ -52,7 +52,7 @@ export const makeSelectClaimIsMine = rawUri => {
   const uri = lbryuri.normalize(rawUri);
   return createSelector(
     selectClaimsByUri,
-    selectMyClaimsRaw,
+    selectMyActiveClaims,
     (claims, myClaims) =>
       claims &&
       claims[uri] &&
@@ -121,7 +121,7 @@ export const selectIsFetchingClaimListMine = createSelector(
   state => !!state.isFetchingClaimListMine
 );
 
-export const cantFigureOutVarName = createSelector(
+export const selectMyClaimsRaw = createSelector(
   _selectState,
   state => state.myClaims
 );
@@ -130,8 +130,8 @@ export const selectAbandoningIds = createSelector(_selectState, state =>
   Object.keys(state.abandoningById || {})
 );
 
-export const selectMyClaimsRaw = createSelector(
-  cantFigureOutVarName,
+export const selectMyActiveClaims = createSelector(
+  selectMyClaimsRaw,
   selectAbandoningIds,
   (claims, abandoningIds) =>
     new Set(
@@ -146,7 +146,7 @@ export const selectPendingClaims = createSelector(_selectState, state =>
 );
 
 export const selectMyClaims = createSelector(
-  selectMyClaimsRaw,
+  selectMyActiveClaims,
   selectClaimsById,
   selectAbandoningIds,
   selectPendingClaims,
@@ -168,8 +168,8 @@ export const selectMyClaimsWithoutChannels = createSelector(
   myClaims => myClaims.filter(claim => !claim.name.match(/^@/))
 );
 
-export const selectAllMyClaimsByTxidNout = createSelector(
-  cantFigureOutVarName,
+export const selectAllMyClaimsByOutpoint = createSelector(
+  selectMyClaimsRaw,
   claims => new Set(claims.map(claim => `${claim.txid}:${claim.nout}`))
 );