General-purpose "Confirm" modal

Added a re-usable "yes/no" confirmation modal where the client just sets the question string and gets a callback to handle "OK". It doesn't make sense to create one modal for each confirmation, especially when it's only used in one place.

Replaced one of the existing modal as an example.

ui/component/walletSwap/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import WalletSwap from './view';
 import { doOpenModal } from 'redux/actions/app';
-import { doAddCoinSwap, doQueryCoinSwapStatus } from 'redux/actions/coinSwap';
+import { doAddCoinSwap, doRemoveCoinSwap, doQueryCoinSwapStatus } from 'redux/actions/coinSwap';
 import { doToast } from 'redux/actions/notifications';
 import { selectCoinSwaps } from 'redux/selectors/coinSwap';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
@@ -18,6 +18,7 @@ const perform = (dispatch) => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   doToast: (options) => dispatch(doToast(options)),
   addCoinSwap: (coinSwap) => dispatch(doAddCoinSwap(coinSwap)),
+  removeCoinSwap: (chargeCode) => dispatch(doRemoveCoinSwap(chargeCode)),
   getNewAddress: () => dispatch(doGetNewAddress()),
   checkAddressIsMine: (address) => dispatch(doCheckAddressIsMine(address)),
   queryCoinSwapStatus: (sendAddress) => dispatch(doQueryCoinSwapStatus(sendAddress)),

ui/component/walletSwap/view.jsx

@@ -59,6 +59,7 @@ type Props = {
   isAuthenticated: boolean,
   doToast: ({ message: string }) => void,
   addCoinSwap: (CoinSwapInfo) => void,
+  removeCoinSwap: (string) => void,
   getNewAddress: () => void,
   checkAddressIsMine: (string) => void,
   openModal: (string, {}) => void,
@@ -72,6 +73,7 @@ function WalletSwap(props: Props) {
     coinSwaps,
     isAuthenticated,
     addCoinSwap,
+    removeCoinSwap,
     getNewAddress,
     checkAddressIsMine,
     openModal,
@@ -103,9 +105,15 @@ function WalletSwap(props: Props) {
     setSwap(null);
   }
 
-  function removeCoinSwap(chargeCode) {
+  function handleRemoveSwap(chargeCode) {
-    openModal(MODALS.CONFIRM_REMOVE_BTC_SWAP_ADDRESS, {
+    openModal(MODALS.CONFIRM, {
-      chargeCode: chargeCode,
+      title: __('Remove Swap'),
+      subtitle: <I18nMessage tokens={{ address: <em>{`${chargeCode}`}</em> }}>Remove %address%?</I18nMessage>,
+      body: <p className="help--warning">{__('This process cannot be reversed.')}</p>,
+      onConfirm: (closeModal) => {
+        removeCoinSwap(chargeCode);
+        closeModal();
+      },
     });
   }
 
@@ -657,7 +665,7 @@ function WalletSwap(props: Props) {
                             button="link"
                             icon={ICONS.REMOVE}
                             title={__('Remove swap')}
-                            onClick={() => removeCoinSwap(x.chargeCode)}
+                            onClick={() => handleRemoveSwap(x.chargeCode)}
                           />
                         </td>
                       </tr>

ui/constants/modal_types.js

@@ -1,3 +1,4 @@
+export const CONFIRM = 'confirm';
 export const CONFIRM_FILE_REMOVE = 'confirm_file_remove';
 export const CONFIRM_EXTERNAL_RESOURCE = 'confirm_external_resource';
 export const COMMENT_ACKNOWEDGEMENT = 'comment_acknowlegement';
@@ -42,7 +43,6 @@ export const SYNC_ENABLE = 'SYNC_ENABLE';
 export const IMAGE_UPLOAD = 'image_upload';
 export const MOBILE_SEARCH = 'mobile_search';
 export const VIEW_IMAGE = 'view_image';
-export const CONFIRM_REMOVE_BTC_SWAP_ADDRESS = 'confirm_remove_btc_swap_address';
 export const BLOCK_CHANNEL = 'block_channel';
 export const COLLECTION_ADD = 'collection_add';
 export const COLLECTION_DELETE = 'collection_delete';

ui/modal/modalConfirm/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+
+import ModalConfirm from './view';
+
+const perform = (dispatch) => ({
+  doHideModal: () => dispatch(doHideModal()),
+});
+
+export default connect(null, perform)(ModalConfirm);

ui/modal/modalConfirm/view.jsx

@@ -0,0 +1,55 @@
+// @flow
+import React from 'react';
+import type { Node } from 'react';
+import Button from 'component/button';
+import Card from 'component/common/card';
+import Spinner from 'component/spinner';
+import { Modal } from 'modal/modal';
+
+type Props = {
+  title: string,
+  subtitle?: string | Node,
+  body?: string | Node,
+  labelOk?: string,
+  labelCancel?: string,
+  onConfirm: (closeModal: () => void, setIsBusy: (boolean) => void) => void,
+  // --- perform ---
+  doHideModal: () => void,
+};
+
+export default function ModalConfirm(props: Props) {
+  const { title, subtitle, body, labelOk, labelCancel, onConfirm, doHideModal } = props;
+  const [isBusy, setIsBusy] = React.useState(false);
+
+  function handleOnClick() {
+    if (onConfirm) {
+      onConfirm(doHideModal, setIsBusy);
+    }
+  }
+
+  function getOkLabel() {
+    return isBusy ? <Spinner type="small" /> : labelOk || __('OK');
+  }
+
+  function getCancelLabel() {
+    return labelCancel || __('Cancel');
+  }
+
+  return (
+    <Modal isOpen type="card" onAborted={doHideModal}>
+      <Card
+        title={title}
+        subtitle={subtitle}
+        body={body}
+        actions={
+          <>
+            <div className="section__actions">
+              <Button button="primary" label={getOkLabel()} disabled={isBusy} onClick={handleOnClick} />
+              <Button button="link" label={getCancelLabel()} disabled={isBusy} onClick={doHideModal} />
+            </div>
+          </>
+        }
+      />
+    </Modal>
+  );
+}

ui/modal/modalRemoveBtcSwapAddress/index.js

@@ -1,13 +0,0 @@
-import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
-import ModalRemoveBtcSwapAddress from './view';
-import { doRemoveCoinSwap } from 'redux/actions/coinSwap';
-
-const select = (state, props) => ({});
-
-const perform = (dispatch) => ({
-  removeCoinSwap: (chargeCode) => dispatch(doRemoveCoinSwap(chargeCode)),
-  closeModal: () => dispatch(doHideModal()),
-});
-
-export default connect(select, perform)(ModalRemoveBtcSwapAddress);

ui/modal/modalRemoveBtcSwapAddress/view.jsx

@@ -1,43 +0,0 @@
-// @flow
-import React from 'react';
-import { Modal } from 'modal/modal';
-import Button from 'component/button';
-import Card from 'component/common/card';
-import I18nMessage from 'component/i18nMessage';
-
-type Props = {
-  chargeCode: string,
-  removeCoinSwap: (string) => void,
-  closeModal: () => void,
-};
-
-function ModalRemoveBtcSwapAddress(props: Props) {
-  const { chargeCode, removeCoinSwap, closeModal } = props;
-
-  return (
-    <Modal isOpen contentLabel={__('Confirm Swap Removal')} type="card" onAborted={closeModal}>
-      <Card
-        title={__('Remove Swap')}
-        subtitle={<I18nMessage tokens={{ address: <em>{`${chargeCode}`}</em> }}>Remove %address%?</I18nMessage>}
-        body={<p className="help--warning">{__('This process cannot be reversed.')}</p>}
-        actions={
-          <>
-            <div className="section__actions">
-              <Button
-                button="primary"
-                label={__('OK')}
-                onClick={() => {
-                  removeCoinSwap(chargeCode);
-                  closeModal();
-                }}
-              />
-              <Button button="link" label={__('Cancel')} onClick={closeModal} />
-            </div>
-          </>
-        }
-      />
-    </Modal>
-  );
-}
-
-export default ModalRemoveBtcSwapAddress;

ui/modal/modalRouter/view.jsx

@@ -23,6 +23,7 @@ const ModalClaimCollectionAdd = lazyImport(() =>
 const ModalCommentAcknowledgement = lazyImport(() =>
   import('modal/modalCommentAcknowledgement' /* webpackChunkName: "modalCommentAcknowledgement" */)
 );
+const ModalConfirm = lazyImport(() => import('modal/modalConfirm' /* webpackChunkName: "modalConfirm" */));
 const ModalConfirmAge = lazyImport(() => import('modal/modalConfirmAge' /* webpackChunkName: "modalConfirmAge" */));
 const ModalConfirmThumbnailUpload = lazyImport(() =>
   import('modal/modalConfirmThumbnailUpload' /* webpackChunkName: "modalConfirmThumbnailUpload" */)
@@ -63,9 +64,6 @@ const ModalPublish = lazyImport(() => import('modal/modalPublish' /* webpackChun
 const ModalPublishPreview = lazyImport(() =>
   import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */)
 );
-const ModalRemoveBtcSwapAddress = lazyImport(() =>
-  import('modal/modalRemoveBtcSwapAddress' /* webpackChunkName: "modalRemoveBtcSwapAddress" */)
-);
 const ModalRemoveCard = lazyImport(() => import('modal/modalRemoveCard' /* webpackChunkName: "modalRemoveCard" */));
 const ModalRemoveComment = lazyImport(() =>
   import('modal/modalRemoveComment' /* webpackChunkName: "modalRemoveComment" */)
@@ -124,6 +122,8 @@ function ModalRouter(props: Props) {
 
   function getModal(id) {
     switch (id) {
+      case MODALS.CONFIRM:
+        return ModalConfirm;
       case MODALS.UPGRADE:
         return ModalUpgrade;
       case MODALS.DOWNLOADING:
@@ -198,8 +198,6 @@ function ModalRouter(props: Props) {
         return ModalViewImage;
       case MODALS.MASS_TIP_UNLOCK:
         return ModalMassTipsUnlock;
-      case MODALS.CONFIRM_REMOVE_BTC_SWAP_ADDRESS:
-        return ModalRemoveBtcSwapAddress;
       case MODALS.BLOCK_CHANNEL:
         return ModalBlockChannel;
       case MODALS.COLLECTION_ADD: