diff --git a/ui/component/walletSwap/index.js b/ui/component/walletSwap/index.js
index e9f520d73..54e4d1d7e 100644
--- a/ui/component/walletSwap/index.js
+++ b/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)),
diff --git a/ui/component/walletSwap/view.jsx b/ui/component/walletSwap/view.jsx
index 9a003d4c9..936bd3a73 100644
--- a/ui/component/walletSwap/view.jsx
+++ b/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) {
- openModal(MODALS.CONFIRM_REMOVE_BTC_SWAP_ADDRESS, {
- chargeCode: chargeCode,
+ function handleRemoveSwap(chargeCode) {
+ openModal(MODALS.CONFIRM, {
+ title: __('Remove Swap'),
+ subtitle:
{__('This process cannot be reversed.')}
, + 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)} /> diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js index 2355f3087..7ea2090b4 100644 --- a/ui/constants/modal_types.js +++ b/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'; diff --git a/ui/modal/modalConfirm/index.js b/ui/modal/modalConfirm/index.js new file mode 100644 index 000000000..07570d2c7 --- /dev/null +++ b/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); diff --git a/ui/modal/modalConfirm/view.jsx b/ui/modal/modalConfirm/view.jsx new file mode 100644 index 000000000..a1b05169a --- /dev/null +++ b/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 ?{__('This process cannot be reversed.')}
} - actions={ - <> -