Correctly handle inverse values for sell orders (#358)

atomiclabs · Jun 15, 2018 · 167b892 · 167b892
1 parent 54c705a
commit 167b892
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 64 deletions.
diff --git a/app/renderer/components/SwapDetails.js b/app/renderer/components/SwapDetails.js
@@ -19,6 +19,27 @@ const stageToTitle = new Map([
 	['alicespend', 'Alice Spend'],
 ]);
 
+const getOverview = swap => {
+	const isBuyOrder = swap.orderType === 'buy';
+	const overview = {
+		fromTitle: 'Exchanging:',
+		forTitle: 'For:',
+		fromCurrency: isBuyOrder ? swap.quoteCurrency : swap.baseCurrency,
+		forCurrency: isBuyOrder ? swap.baseCurrency : swap.quoteCurrency,
+		fromAmount: isBuyOrder ? swap.broadcast.quoteCurrencyAmount : swap.broadcast.baseCurrencyAmount,
+		forAmount: isBuyOrder ? swap.broadcast.baseCurrencyAmount : swap.broadcast.quoteCurrencyAmount,
+	};
+
+	if (swap.executed.quoteCurrencyAmount) {
+		overview.fromTitle = 'You exchanged:';
+		overview.forTitle = 'You received:';
+		overview.fromAmount = isBuyOrder ? swap.executed.quoteCurrencyAmount : swap.executed.baseCurrencyAmount;
+		overview.forAmount = isBuyOrder ? swap.executed.baseCurrencyAmount : swap.executed.quoteCurrencyAmount;
+	}
+
+	return overview;
+};
+
 class SwapDetails extends React.Component {
 	state = {
 		isOpen: false,
@@ -73,7 +94,7 @@ class SwapDetails extends React.Component {
 				<div key={value}>
 					<h6>{title(value)}</h6>
 					<p>
-						<span className="label">Buy:</span> {zeroPadFraction(swap[value].baseCurrencyAmount)} {baseCurrency}
+						<span className="label">{title(swap.orderType)}:</span> {zeroPadFraction(swap[value].baseCurrencyAmount)} {baseCurrency}
 						<br/>
 						<span className="label">For:</span> {zeroPadFraction(swap[value].quoteCurrencyAmount)} {quoteCurrency}
 						<br/>
@@ -83,57 +104,30 @@ class SwapDetails extends React.Component {
 			);
 		});
 
-		const overviewData = (() => {
-			let overview = {
-				quoteTitle: 'Requesting:',
-				baseTitle: 'For:',
-				quoteAmount: swap.requested.quoteCurrencyAmount,
-				baseAmount: swap.requested.baseCurrencyAmount,
-			};
-
-			if (swap.broadcast.quoteCurrencyAmount) {
-				overview = {
-					quoteTitle: 'Exchanging:',
-					baseTitle: 'For:',
-					quoteAmount: swap.broadcast.quoteCurrencyAmount,
-					baseAmount: swap.broadcast.baseCurrencyAmount,
-				};
-			}
-
-			if (swap.executed.quoteCurrencyAmount) {
-				overview = {
-					quoteTitle: 'You exchanged:',
-					baseTitle: 'You received:',
-					quoteAmount: swap.executed.quoteCurrencyAmount,
-					baseAmount: swap.executed.baseCurrencyAmount,
-				};
-			}
-
-			return overview;
-		})();
+		const overview = getOverview(swap);
 
 		return (
 			<div className="modal-wrapper">
 				<Modal
 					className="SwapDetails"
-					title={`${baseCurrency}/${quoteCurrency} Swap \u{00A0}• \u{00A0}${formatDate(swap.timeStarted, 'HH:mm DD/MM/YY')}`}
+					title={`${baseCurrency}/${quoteCurrency} ${title(swap.orderType)} Order \u{00A0}• \u{00A0}${formatDate(swap.timeStarted, 'HH:mm DD/MM/YY')}`}
 					icon="/assets/swap-icon.svg"
 					open={this.state.isOpen}
 					onClose={this.close}
 					width="660px"
 				>
 					<React.Fragment>
 						<div className="section overview">
-							<div className="quote">
-								<CurrencyIcon symbol={quoteCurrency}/>
-								<p>{overviewData.quoteTitle}</p>
-								<p className="amount">{overviewData.quoteAmount} {quoteCurrency}</p>
+							<div className="from">
+								<CurrencyIcon symbol={overview.fromCurrency}/>
+								<p>{overview.fromTitle}</p>
+								<p className="amount">{overview.fromAmount} {overview.fromCurrency}</p>
 							</div>
 							<div className="arrow">→</div>
-							<div className="base">
-								<CurrencyIcon symbol={baseCurrency}/>
-								<p>{overviewData.baseTitle}</p>
-								<p className="amount">{overviewData.baseAmount} {baseCurrency}</p>
+							<div className="for">
+								<CurrencyIcon symbol={overview.forCurrency}/>
+								<p>{overview.forTitle}</p>
+								<p className="amount">{overview.forAmount} {overview.forCurrency}</p>
 							</div>
 						</div>
 						<div className="section progress">

diff --git a/app/renderer/components/SwapDetails.scss b/app/renderer/components/SwapDetails.scss
@@ -25,8 +25,8 @@
 			margin: 0 50px;
 		}
 
-		.quote,
-		.base {
+		.from,
+		.for {
 			display: flex;
 			flex-direction: column;
 			align-items: center;

diff --git a/app/renderer/components/SwapList.js b/app/renderer/components/SwapList.js
@@ -39,11 +39,11 @@ class CancelButton extends React.Component {
 }
 
 const SwapItem = ({swap, showCancel}) => (
-	<div className="row">
+	<div className={`row ${swap.orderType}`}>
 		<div className="timestamp">{formatDate(swap.timeStarted, 'HH:mm DD/MM/YY')}</div>
 		<div className="pairs">{swap.baseCurrency}/{swap.quoteCurrency}</div>
-		<div className="base-amount">+{swap.baseCurrencyAmount} {swap.baseCurrency}</div>
-		<div className="quote-amount">-{swap.quoteCurrencyAmount} {swap.quoteCurrency}</div>
+		<div className="base-amount">{swap.baseCurrencyAmount} {swap.baseCurrency}</div>
+		<div className="quote-amount">{swap.quoteCurrencyAmount} {swap.quoteCurrency}</div>
 		<div className="status">
 			<div className="status__icon" data-status={swap.status}>{swap.statusFormatted}</div>
 		</div>

diff --git a/app/renderer/components/SwapList.scss b/app/renderer/components/SwapList.scss
@@ -91,12 +91,22 @@
 		color: var(--text-color);
 	}
 
-	.quote-amount {
+	.buy .quote-amount,
+	.sell .base-amount {
 		color: var(--red-color);
+
+		&::before {
+			content: '-';
+		}
 	}
 
-	.base-amount {
+	.sell .quote-amount,
+	.buy .base-amount {
 		color: var(--green-color);
+
+		&::before {
+			content: '+';
+		}
 	}
 
 	.status {

diff --git a/app/renderer/swap-db.js b/app/renderer/swap-db.js
@@ -91,27 +91,35 @@ class SwapDB {
 
 		const {uuid, timeStarted, request, response, messages} = data;
 
+		// If we place a sell order marketmaker just inverts the values and places a buy
+		// on the opposite pair. We need to normalise this otherwise we'll show the
+		// wrong base/quote currencies.
+		const isBuyOrder = (request.baseCurrency === response.base);
+		const responseBaseCurrencyAmount = isBuyOrder ? response.basevalue : response.relvalue;
+		const responseQuoteCurrencyAmount = isBuyOrder ? response.relvalue : response.basevalue;
+
 		const swap = {
 			uuid,
 			timeStarted,
+			orderType: isBuyOrder ? 'buy' : 'sell',
 			status: 'pending',
 			statusFormatted: 'pending',
 			error: false,
 			progress: 0,
-			baseCurrency: response.base,
-			quoteCurrency: response.rel,
-			baseCurrencyAmount: roundTo(response.basevalue, 8),
-			quoteCurrencyAmount: roundTo(response.relvalue, 8),
-			price: roundTo(response.relvalue / response.basevalue, 8),
+			baseCurrency: request.baseCurrency,
+			quoteCurrency: request.quoteCurrency,
+			baseCurrencyAmount: roundTo(responseBaseCurrencyAmount, 8),
+			quoteCurrencyAmount: roundTo(responseQuoteCurrencyAmount, 8),
+			price: roundTo(responseQuoteCurrencyAmount / responseBaseCurrencyAmount, 8),
 			requested: {
 				baseCurrencyAmount: roundTo(request.amount, 8),
 				quoteCurrencyAmount: roundTo(request.total, 8),
 				price: roundTo(request.price, 8),
 			},
 			broadcast: {
-				baseCurrencyAmount: roundTo(response.basevalue, 8),
-				quoteCurrencyAmount: roundTo(response.relvalue, 8),
-				price: roundTo(response.relvalue / response.basevalue, 8),
+				baseCurrencyAmount: roundTo(responseBaseCurrencyAmount, 8),
+				quoteCurrencyAmount: roundTo(responseQuoteCurrencyAmount, 8),
+				price: roundTo(responseQuoteCurrencyAmount / responseBaseCurrencyAmount, 8),
 			},
 			executed: {
 				baseCurrencyAmount: undefined,
@@ -154,13 +162,18 @@ class SwapDB {
 					amount: message.srcamount,
 				});
 
-				swap.baseCurrencyAmount = roundTo(message.srcamount, 8);
-				swap.quoteCurrencyAmount = roundTo(message.destamount, 8);
-				swap.price = roundTo(message.destamount / message.srcamount, 8);
+				const executedBaseCurrencyAmount = isBuyOrder ? message.srcamount : message.destamount;
+				const executedQuoteCurrencyAmount = isBuyOrder ? message.destamount : message.srcamount;
+				swap.baseCurrencyAmount = roundTo(executedBaseCurrencyAmount, 8);
+				swap.quoteCurrencyAmount = roundTo(executedQuoteCurrencyAmount, 8);
+				swap.price = roundTo(executedQuoteCurrencyAmount / executedBaseCurrencyAmount, 8);
 				swap.executed.baseCurrencyAmount = swap.baseCurrencyAmount;
 				swap.executed.quoteCurrencyAmount = swap.quoteCurrencyAmount;
 				swap.executed.price = swap.price;
 				swap.executed.percentCheaperThanRequested = roundTo(100 - ((swap.executed.price / swap.requested.price) * 100), 2);
+				if (!isBuyOrder) {
+					swap.executed.percentCheaperThanRequested = -swap.executed.percentCheaperThanRequested;
+				}
 			}
 
 			if (message.method === 'failed') {

diff --git a/app/renderer/views/Exchange/Swaps.js b/app/renderer/views/Exchange/Swaps.js
@@ -34,14 +34,10 @@ const All = () => (
 const Split = () => {
 	const {state} = exchangeContainer;
 
-	const filteredData = state.swapHistory.filter(swap => {
-		const tradingPair = [state.baseCurrency, state.quoteCurrency];
-
-		return (
-			tradingPair.includes(swap.baseCurrency) &&
-			tradingPair.includes(swap.quoteCurrency)
-		);
-	});
+	const filteredData = state.swapHistory.filter(x =>
+		x.baseCurrency === state.baseCurrency &&
+		x.quoteCurrency === state.quoteCurrency
+	);
 
 	return (
 		<SwapList swaps={filteredData}/>