Limit the amount of swaps in the Exchange view (#445)

atomiclabs · Jul 27, 2018 · 3e97ea9 · 3e97ea9
1 parent 7779532
commit 3e97ea9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/app/locales/en-US/exchange.json b/app/locales/en-US/exchange.json
@@ -29,6 +29,7 @@
 	"quit": "Quit",
 	"swaps": {
 		"all": "All",
-		"title": "Swaps"
+		"title": "Recent Swaps",
+		"viewAllSwaps": "View all swaps"
 	}
 }
diff --git a/app/renderer/components/SwapList.js b/app/renderer/components/SwapList.js
@@ -3,12 +3,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {format as formatDate} from 'date-fns';
 import appContainer from 'containers/App';
+import tradesContainer from 'containers/Trades';
 import Empty from 'components/Empty';
+import Link from 'components/Link';
 import SwapDetails from 'components/SwapDetails';
 import {translate} from '../translate';
 import './SwapList.scss';
 
-const t = translate('swap');
+const t = translate(['swap', 'exchange']);
 
 // eslint-disable-next-line no-unused-vars
 class CancelButton extends React.Component {
@@ -67,11 +69,15 @@ const SwapItem = ({swap}) => (
 	</div>
 );
 
-const SwapList = ({swaps, showCancel}) => {
+const SwapList = ({swaps, limit, showCancel}) => {
 	if (swaps.length === 0) {
 		return <Empty show text={t('list.empty')}/>;
 	}
 
+	if (limit) {
+		swaps = swaps.slice(0, limit);
+	}
+
 	return (
 		<div className="SwapList">
 			{
@@ -83,6 +89,17 @@ const SwapList = ({swaps, showCancel}) => {
 					/>
 				))
 			}
+			{limit &&
+				<Link
+					className="view-all-swaps"
+					onClick={() => {
+						appContainer.setActiveView('Trades');
+						tradesContainer.setActiveView('SwapHistory');
+					}}
+				>
+					{t('swaps.viewAllSwaps')}
+				</Link>
+			}
 		</div>
 	);
 };

diff --git a/app/renderer/components/SwapList.scss b/app/renderer/components/SwapList.scss
@@ -1,4 +1,6 @@
 .SwapList {
+	display: flex;
+	flex-direction: column;
 	flex: 1;
 	overflow-x: hidden;
 	overflow-y: auto;
@@ -182,6 +184,13 @@
 	.cancel :not([disabled]) {
 		filter: hue-rotate(130deg) saturate(160%);
 	}
+
+	.view-all-swaps {
+		align-self: center;
+		margin: 20px 0;
+		font-size: 14px;
+		opacity: 0.8;
+	}
 }
 
 @media (min-width: 1400px) {

diff --git a/app/renderer/views/Exchange/Swaps.js b/app/renderer/views/Exchange/Swaps.js
@@ -8,6 +8,8 @@ import './Swaps.scss';
 
 const t = translate('exchange');
 
+const swapLimit = 50;
+
 const TabButton = props => (
 	<span
 		className={
@@ -31,7 +33,7 @@ const TabView = ({component}) => (
 );
 
 const All = () => (
-	<SwapList swaps={exchangeContainer.state.swapHistory}/>
+	<SwapList swaps={exchangeContainer.state.swapHistory} limit={swapLimit}/>
 );
 
 const Split = () => {
@@ -43,7 +45,7 @@ const Split = () => {
 	);
 
 	return (
-		<SwapList swaps={filteredData}/>
+		<SwapList swaps={filteredData} limit={swapLimit}/>
 	);
 };