Ask for confirmation before revoking

ui/js/actions/content.js

@@ -11,7 +11,7 @@ import {
 } from "selectors/file_info";
 import { selectResolvingUris } from "selectors/content";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
-import { doAlertError, doOpenModal } from "actions/app";
+import { doAlertError, doOpenModal, doCloseModal } from "actions/app";
 import { doClaimEligiblePurchaseRewards } from "actions/rewards";
 import { selectBadgeNumber } from "selectors/app";
 import { selectTotalDownloadProgress } from "selectors/file_info";
@@ -510,6 +510,8 @@ export function doAbandonClaim(claimId, txid, nout) {
   return function(dispatch, getState) {
     const state = getState();
 
+    dispatch(doCloseModal());
+
     dispatch({
       type: types.ABANDON_CLAIM_STARTED,
       data: {

ui/js/component/transactionList/index.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
 import { doNavigate } from "actions/navigation";
-import { doAbandonClaim, doResolveUri } from "actions/content";
+import { doOpenModal } from "actions/app";
+import { doResolveUri } from "actions/content";
 import { selectClaimedRewardsByTransactionId } from "selectors/rewards";
 import { selectAllMyClaimsByTxidNout } from "selectors/claims";
 import { selectResolvingUris } from "selectors/content";
@@ -10,14 +11,12 @@ import TransactionList from "./view";
 const select = state => ({
   rewards: selectClaimedRewardsByTransactionId(state),
   myClaims: selectAllMyClaimsByTxidNout(state),
-  resolvingUris: selectResolvingUris(state),
 });
 
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
   resolveUri: uri => dispatch(doResolveUri(uri)),
-  abandonClaim: (claimId, txid, nout) =>
-    dispatch(doAbandonClaim(claimId, txid, nout)),
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
 });
 
 export default connect(select, perform)(TransactionList);

ui/js/component/transactionList/view.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import TransactionListItem from "./internal/TransactionListItem";
 import FormField from "component/formField";
 import lbryuri from "lbryuri";
+import * as modals from "constants/modal_types";
 
 class TransactionList extends React.PureComponent {
   constructor(props) {
@@ -40,9 +41,7 @@ class TransactionList extends React.PureComponent {
 
     const uri = lbryuri.build({ name, claimId });
     this.props.resolveUri(uri);
-    if (!this.props.resolvingUris.includes(uri)) {
-      this.props.abandonClaim(claimId, txid, nout);
-    }
+    this.props.openModal(modals.CONFIRM_CLAIM_REVOKE, { claimId, txid, nout });
   }
 
   render() {

ui/js/constants/modal_types.js

@@ -13,3 +13,4 @@ export const INSUFFICIENT_BALANCE = "insufficient_balance";
 export const REWARD_APPROVAL_REQUIRED = "reward_approval_required";
 export const AFFIRM_PURCHASE = "affirm_purchase";
 export const CREDIT_INTRO = "credit_intro";
+export const CONFIRM_CLAIM_REVOKE = "confirmClaimRevoke";

ui/js/modal/modalRevokeClaim/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { connect } from "react-redux";
+import { doCloseModal } from "actions/app";
+import { doAbandonClaim } from "actions/content";
+import ModalRevokeClaim from "./view";
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doCloseModal()),
+  abandonClaim: (claimId, txid, nout) =>
+    dispatch(doAbandonClaim(claimId, txid, nout)),
+});
+
+export default connect(null, perform)(ModalRevokeClaim);

ui/js/modal/modalRevokeClaim/view.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Modal } from "modal/modal";
+
+class ModalRevokeClaim extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  s() {
+    console.log("gotcha");
+  }
+
+  render() {
+    const { claimId, txid, nout, abandonClaim, closeModal } = this.props;
+
+    return (
+      <Modal
+        isOpen={true}
+        contentLabel={__("Confirm Claim Revoke")}
+        type="confirm"
+        confirmButtonLabel={__("Yes, Revoke")}
+        // onConfirmed={this.s.bind(this)}
+        onConfirmed={() => abandonClaim(claimId, txid, nout)}
+        onAborted={closeModal}
+      >
+        <p>
+          {__("Are you sure you want to revoke the claim?")}
+        </p>
+      </Modal>
+    );
+  }
+}
+
+export default ModalRevokeClaim;

ui/js/modal/modalRouter/view.jsx

@@ -13,6 +13,7 @@ import ModalTransactionFailed from "modal/modalTransactionFailed";
 import ModalInsufficientBalance from "modal/modalInsufficientBalance";
 import ModalFileTimeout from "modal/modalFileTimeout";
 import ModalAffirmPurchase from "modal/modalAffirmPurchase";
+import ModalRevokeClaim from "modal/modalRevokeClaim";
 import * as modals from "constants/modal_types";
 
 class ModalRouter extends React.PureComponent {
@@ -132,6 +133,8 @@ class ModalRouter extends React.PureComponent {
         return <ModalRemoveFile {...modalProps} />;
       case modals.AFFIRM_PURCHASE:
         return <ModalAffirmPurchase {...modalProps} />;
+      case modals.CONFIRM_CLAIM_REVOKE:
+        return <ModalRevokeClaim {...modalProps} />;
       default:
         return null;
     }

ui/js/reducers/claims.js

@@ -173,11 +173,11 @@ reducers[types.ABANDON_CLAIM_SUCCEEDED] = function(state, action) {
   // so we need to remove the support from the state
   // but this is not working, even after calling resolve on the uri.
   if (supports && supports.length > 0) {
-    indexToDelete = supports.findIndex(support => {
+    const indexToDelete = supports.findIndex(support => {
       return support.txid === txid && support.nout === nout;
     });
 
-    supports.splice[(indexToDelete, 1)];
+    supports.splice(indexToDelete, 1);
   }
 
   if (!supports || supports.length == 0) {