Add running indicator on cant close selector

app/components/modals/CantCloseModals/AccountMixerRunningModal.jsx

@@ -0,0 +1,47 @@
+import Modal from "../Modal";
+import { FormattedMessage as T } from "react-intl";
+import { InvisibleButton, KeyBlueButton } from "buttons";
+import style from "../Modals.module.css";
+
+const AutobuyerRunningModal = ({ show, onCancelModal, onSubmit }) => (
+  <Modal className={style.confirm} {...{ show, onCancelModal }}>
+    <div className={style.confirmHeader}>
+      <div className={style.confirmHeaderTitle}>
+        <T
+          id="account.mixer.running.title"
+          m="Account mixer is running"
+        />
+      </div>
+    </div>
+    {
+      <div className={style.confirmContent}>
+        <T
+          id="account.mixer.running.message"
+          m="Account mixer is currently running. Ongoing mixes will be
+            cancelled and no more Decred will be mixed if Decrediton is
+            closed now."
+        />
+      </div>
+
+    }
+    <div className={style.confirmToolbar}>
+      <KeyBlueButton
+        className={style.confirmConfirmButton}
+        onClick={onSubmit}>
+        {
+          <T
+            id="account.mixer.running.btnConfirm"
+            m="Close Decrediton"
+          />
+        }
+      </KeyBlueButton>
+      <InvisibleButton
+        className={style.confirmCloseButton}
+        onClick={onCancelModal}>
+        <T id="account.mixer.running.btnCancel" m="Cancel" />
+      </InvisibleButton>
+    </div>
+  </Modal>
+);
+
+export default AutobuyerRunningModal;

app/components/modals/CantCloseModals/CantCloseModals.jsx

@@ -1,3 +1,5 @@
+import PurchasingTicketsModal from "./PurchasingTicketsModal";
+import AccountMixerRunningModal from "./AccountMixerRunningModal";
 import AutobuyerRunning from "./AutobuyerRunningModal";
 import HasTicketFeeErro from "./HasTicketFeeError";
 import { useCantCloseModal } from "./hooks";
@@ -8,16 +10,23 @@ const CantCloseModals = () => {
     hasUnpaidFee,
     autobuyerRunningModalVisible,
     onHideCantCloseModal,
-    shutdownApp
+    shutdownApp,
+    accountMixerRunning,
+    purchasingTickets
   } = useCantCloseModal();
   let Component = () => <></>;
-
   if (autBuyerRunning) {
     Component = AutobuyerRunning;
   }
   if (hasUnpaidFee) {
     Component = HasTicketFeeErro;
   }
+  if (accountMixerRunning) {
+    Component = AccountMixerRunningModal;
+  }
+  if (purchasingTickets) {
+    Component = PurchasingTicketsModal;
+  }
 
   return <Component
     show={autobuyerRunningModalVisible}

app/components/modals/CantCloseModals/PurchasingTicketsModal.jsx

@@ -0,0 +1,47 @@
+import Modal from "../Modal";
+import { FormattedMessage as T } from "react-intl";
+import { InvisibleButton, KeyBlueButton } from "buttons";
+import style from "../Modals.module.css";
+
+const AutobuyerRunningModal = ({ show, onCancelModal, onSubmit }) => (
+  <Modal className={style.confirm} {...{ show, onCancelModal }}>
+    <div className={style.confirmHeader}>
+      <div className={style.confirmHeaderTitle}>
+        <T
+          id="tickets.purchasing.title"
+          m="Purchasing Tickets"
+        />
+      </div>
+    </div>
+    {
+      <div className={style.confirmContent}>
+        <T
+          id="tickets.purchasing.message"
+          m="Decrediton is still finalizing ticket purchases. Tickets may not
+            be registered with the VSP if Decrediton is closed now, which can
+            result in missed votes."
+        />
+      </div>
+
+    }
+    <div className={style.confirmToolbar}>
+      <KeyBlueButton
+        className={style.confirmConfirmButton}
+        onClick={onSubmit}>
+        {
+          <T
+            id="tickets.purchasing.confirmModal.btnConfirm"
+            m="Close Decrediton"
+          />
+        }
+      </KeyBlueButton>
+      <InvisibleButton
+        className={style.confirmCloseButton}
+        onClick={onCancelModal}>
+        <T id="tickets.purchasing.confirmModal.btnCancel" m="Cancel" />
+      </InvisibleButton>
+    </div>
+  </Modal>
+);
+
+export default AutobuyerRunningModal;

app/components/modals/CantCloseModals/hooks.js

@@ -8,6 +8,10 @@ export function useCantCloseModal() {
   const autBuyerRunning = useSelector(sel.isTicketAutoBuyerEnabled);
   const hasUnpaidFee = useSelector(sel.getHasUnpaidFee);
   const autobuyerRunningModalVisible = useSelector(sel.autobuyerRunningModalVisible);
+  const runningIndicator = useSelector(sel.getRunningIndicator);
+  const accountMixerRunning = useSelector(sel.getAccountMixerRunning);
+  const purchasingTickets = useSelector(sel.purchaseTicketsRequestAttempt);
+
   const dispatch = useDispatch();
   const onHideCantCloseModal = () => dispatch(hideCantCloseModal());
   const shutdownApp = () => dispatch(da.shutdownApp());
@@ -22,6 +26,9 @@ export function useCantCloseModal() {
     autobuyerRunningModalVisible,
     onHideCantCloseModal,
     shutdownApp,
-    onGoToTicketsStatus
+    onGoToTicketsStatus,
+    runningIndicator,
+    accountMixerRunning,
+    purchasingTickets
   };
 }

app/selectors.js

@@ -1237,7 +1237,6 @@ export const totalSubsidy = compose(
 
 export const ticketBuyerService = get(["grpc", "ticketBuyerService"]);
 export const ticketBuyerConfig = get(["control", "ticketBuyerConfig"]);
-const startAutoBuyerResponse = get(["control", "startAutoBuyerResponse"]);
 
 export const balanceToMaintain = get(["control", "balanceToMaintain"]);
 
@@ -1272,19 +1271,6 @@ export const startAutoBuyerSuccess = get(["control", "startAutoBuyerSuccess"]);
 export const stopAutoBuyerError = get(["control", "stopAutoBuyerError"]);
 export const stopAutoBuyerSuccess = get(["control", "stopAutoBuyerSuccess"]);
 
-// selectors for checking if decrediton can be closed.
-
-export const isTicketAutoBuyerEnabled = bool(startAutoBuyerResponse);
-export const getHasUnpaidFee = createSelector([getVSPTickets], (vspTickets) => {
-  if (!vspTickets) return;
-  return vspTickets[VSP_FEE_PROCESS_ERRORED]
-    ? vspTickets[VSP_FEE_PROCESS_ERRORED].length > 0
-    : false;
-});
-export const getCanClose = not(or(isTicketAutoBuyerEnabled, getHasUnpaidFee));
-
-// end of selectors for closing decrediton.
-
 const purchaseTicketsResponse = get(["control", "purchaseTicketsResponse"]);
 
 export const splitTx = createSelector(
@@ -1365,14 +1351,6 @@ export const purchaseTicketsRequestAttempt = get([
   "purchaseTicketsRequestAttempt"
 ]);
 
-// getRunningIndicator is a indicator for indicate something is runnning on
-// decrediton, like the ticket auto buyer or the mixer.
-export const getRunningIndicator = or(
-  getAccountMixerRunning,
-  getTicketAutoBuyerRunning,
-  purchaseTicketsRequestAttempt
-);
-
 const importScriptRequestAttempt = get([
   "control",
   "importScriptRequestAttempt"
@@ -1682,6 +1660,33 @@ export const trezorWalletCreationMasterPubkeyAttempt = get([
   "walletCreationMasterPubkeyAttempt"
 ]);
 
+// selectors for checking if decrediton can be closed.
+
+// TODO remove duplicated auto buyer running selector
+const startAutoBuyerResponse = get(["control", "startAutoBuyerResponse"]);
+export const isTicketAutoBuyerEnabled = bool(startAutoBuyerResponse);
+
+// getRunningIndicator is a indicator for indicate something is runnning on
+// decrediton, like the ticket auto buyer or the mixer.
+export const getRunningIndicator = or(
+  getAccountMixerRunning,
+  getTicketAutoBuyerRunning,
+  purchaseTicketsRequestAttempt,
+  isTicketAutoBuyerEnabled
+);
+
+export const getHasUnpaidFee = createSelector([getVSPTickets], (vspTickets) => {
+  if (!vspTickets) return;
+  return vspTickets[VSP_FEE_PROCESS_ERRORED]
+    ? vspTickets[VSP_FEE_PROCESS_ERRORED].length > 0
+    : false;
+});
+export const getCanClose = not(or(getRunningIndicator, getHasUnpaidFee));
+
+// end of selectors for closing decrediton.
+
+// ln selectors
+
 export const lnEnabled = bool(and(not(isWatchingOnly), not(isTrezor)));
 export const lnActive = bool(get(["ln", "active"]));
 export const lnStartupStage = get(["ln", "startupStage"]);
@@ -1706,3 +1711,5 @@ export const lnAddInvoiceAttempt = get(["ln", "addInvoiceAttempt"]);
 export const lnSCBPath = get(["ln", "scbPath"]);
 export const lnSCBUpdatedTime = get(["ln", "scbUpdatedTime"]);
 export const lnTowersList = get(["ln", "towersList"]);
+
+// end of ln selectors