diff --git a/app/renderer/components/SwapList.js b/app/renderer/components/SwapList.js
index 3b58bede72..5cf7fd7fb3 100644
--- a/app/renderer/components/SwapList.js
+++ b/app/renderer/components/SwapList.js
@@ -21,12 +21,9 @@ const SortDirections = {
 
 // eslint-disable-next-line no-unused-vars
 class CancelButton extends React.Component {
-	state = {
-		isCancelling: false,
-	}
-
 	cancelSwap = async swapUuid => {
-		this.setState({isCancelling: true});
+		await tradesContainer.setIsSwapCancelling(swapUuid, true);
+		this.forceUpdate();
 
 		try {
 			await appContainer.api.cancelOrder(swapUuid);
@@ -43,7 +40,10 @@ class CancelButton extends React.Component {
 			<button
 				type="button"
 				className="cancel__button"
-				disabled={swap.status !== 'pending' || this.state.isCancelling}
+				disabled={
+					swap.status !== 'pending' ||
+					tradesContainer.state.isSwapCancelling[swap.uuid]
+				}
 				onClick={() => this.cancelSwap(swap.uuid)}
 			>
 				{t('list.cancel')}
diff --git a/app/renderer/containers/Trades.js b/app/renderer/containers/Trades.js
index b6a07bac65..0a17950036 100644
--- a/app/renderer/containers/Trades.js
+++ b/app/renderer/containers/Trades.js
@@ -3,11 +3,20 @@ import {Container} from 'unstated';
 class TradesContainer extends Container {
 	state = {
 		activeView: 'OpenOrders',
+		isSwapCancelling: {},
 	};
 
 	setActiveView = activeView => {
 		this.setState({activeView});
 	};
+
+	setIsSwapCancelling = (swapUuid, isCancelling) => {
+		this.setState(state => {
+			const {isSwapCancelling} = state;
+			isSwapCancelling[swapUuid] = isCancelling;
+			return state;
+		});
+	};
 }
 
 const tradesContainer = new TradesContainer();