diff --git a/app/renderer/components/SwapDetails.js b/app/renderer/components/SwapDetails.js
index 0a9a74900f..0cc81d32ef 100644
--- a/app/renderer/components/SwapDetails.js
+++ b/app/renderer/components/SwapDetails.js
@@ -1,8 +1,10 @@
 import {remote, clipboard} from 'electron';
 import title from 'title';
 import React from 'react';
+import {Subscribe} from 'unstated';
 import PropTypes from 'prop-types';
 import formatDate from 'date-fns/format';
+import exchangeContainer from 'containers/Exchange';
 import Modal from 'components/Modal';
 import Progress from 'components/Progress';
 import CurrencyIcon from 'components/CurrencyIcon';
@@ -43,11 +45,12 @@ const getOverview = swap => {
 
 class SwapDetails extends React.Component {
 	static propTypes = {
-		swap: PropTypes.object,
+		swapId: PropTypes.string,
+		open: PropTypes.bool,
+		didClose: PropTypes.func,
 	}
 
 	state = {
-		isOpen: false,
 		showAdvanced: config.get('swapModalShowAdvanced'),
 	};
 
@@ -56,16 +59,19 @@ class SwapDetails extends React.Component {
 		config.set('swapModalShowAdvanced', showAdvanced);
 	};
 
-	open = () => {
-		this.setState({isOpen: true});
-	};
-
-	close = () => {
-		this.setState({isOpen: false});
-	};
-
 	render() {
-		const {swap} = this.props;
+		const {
+			exchangeContainer,
+			swapId,
+			open,
+			didClose,
+		} = this.props;
+
+		if (!swapId) {
+			return null;
+		}
+
+		const swap = exchangeContainer.state.swapHistory.find(swap => swap.uuid === swapId);
 		const {baseCurrency, quoteCurrency} = swap;
 
 		const transactions = swap.transactions.map(tx => (
@@ -132,8 +138,8 @@ class SwapDetails extends React.Component {
 					className="SwapDetails"
 					title={titleComponent}
 					icon="/assets/swap-icon.svg"
-					open={this.state.isOpen}
-					onClose={this.close}
+					open={open}
+					didClose={didClose}
 					width="660px"
 				>
 					<>
@@ -225,10 +231,15 @@ class SwapDetails extends React.Component {
 						)}
 					</>
 				</Modal>
-				<button type="button" className="view__button" onClick={this.open}>{t('details.view')}</button>
 			</div>
 		);
 	}
 }
 
-export default SwapDetails;
+export default props => (
+	<Subscribe to={[exchangeContainer]}>
+		{container => (
+			<SwapDetails {...props} exchangeContainer={container}/>
+		)}
+	</Subscribe>
+);
diff --git a/app/renderer/components/SwapList.js b/app/renderer/components/SwapList.js
index 5cf7fd7fb3..c3b317fd06 100644
--- a/app/renderer/components/SwapList.js
+++ b/app/renderer/components/SwapList.js
@@ -83,7 +83,7 @@ const SwapHeader = props => (
 	</div>
 );
 
-const SwapItem = ({style, swap, showCancel}) => (
+const SwapItem = ({style, swap, showCancel, openSwap}) => (
 	<div className={`row ${swap.orderType}`} style={style}>
 		<div className="timestamp">{formatDate(swap.timeStarted, 'HH:mm DD/MM/YY')}</div>
 		<div className="pairs">{swap.baseCurrency}/{swap.quoteCurrency}</div>
@@ -99,7 +99,7 @@ const SwapItem = ({style, swap, showCancel}) => (
 				</div>
 			)}
 			<div className="view">
-				<SwapDetails swap={swap}/>
+				<button type="button" className="view__button" onClick={openSwap}>{t('details.view')}</button>
 			</div>
 		</div>
 	</div>
@@ -109,6 +109,15 @@ class SwapList extends React.Component {
 	state = {
 		sortBy: this.props.sortBy,
 		sortDirection: this.props.sortDirection,
+		openedSwapId: null,
+	};
+
+	openSwap = swapId => {
+		this.setState({openedSwapId: swapId});
+	};
+
+	closeSwap = () => {
+		this.setState({openedSwapId: null});
 	};
 
 	cache = new CellMeasurerCache({
@@ -146,20 +155,35 @@ class SwapList extends React.Component {
 	renderRow = swaps => ({index, key, parent, style}) => {
 		const {showCancel} = this.props;
 		const swap = swaps[index];
+		const openSwap = () => this.openSwap(swap.uuid);
 
 		return (
 			<CellMeasurer key={key} cache={this.cache} parent={parent} rowIndex={index}>
-				<SwapItem showCancel={showCancel} style={style} swap={swap}/>
+				<SwapItem showCancel={showCancel} style={style} swap={swap} openSwap={openSwap}/>
 			</CellMeasurer>
 		);
 	};
 
+	Details = () => (
+		<SwapDetails
+			swapId={this.state.openedSwapId}
+			open={Boolean(this.state.openedSwapId)}
+			didClose={this.closeSwap}
+		/>
+	);
+
 	render() {
+		const {Details} = this;
 		let {showHeader, swaps, limit} = this.props;
 		const {sortBy, sortDirection} = this.state;
 
 		if (swaps.length === 0) {
-			return <Empty show text={t('list.empty')}/>;
+			return (
+				<>
+					<Details/>
+					<Empty show text={t('list.empty')}/>
+				</>
+			);
 		}
 
 		const shouldLimit = limit && limit < swaps.length;
@@ -177,7 +201,14 @@ class SwapList extends React.Component {
 
 		return (
 			<div className="SwapList">
-				{showHeader && <SwapHeader onClick={this.handleSort} sortBy={sortBy} sortDirection={sortDirection}/>}
+				<Details/>
+				{showHeader && (
+					<SwapHeader
+						onClick={this.handleSort}
+						sortBy={sortBy}
+						sortDirection={sortDirection}
+					/>
+				)}
 				<div className="container">
 					<AutoSizer onResize={this.handleResize}>
 						{({width, height}) => (