Swap modal improvements (#483)

Fixes #177
atomiclabs · Aug 27, 2018 · 007f56e · 007f56e
1 parent a95f256
commit 007f56e
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 47 deletions.
diff --git a/app/config.js b/app/config.js
@@ -13,6 +13,7 @@ const defaults = {
 		height: minWindowSize.height,
 	},
 	theme: is.macos ? 'system' : 'dark',
+	swapModalShowAdvanced: false,
 	enabledCoins: [
 		'BCH',
 		'BEER',

diff --git a/app/locales/en-US/swap.json b/app/locales/en-US/swap.json
@@ -50,5 +50,9 @@
 	},
 	"statusInformation": {
 		"reverted": "The swap was reverted due to connectivity issues."
+	},
+	"toggleAdvancedButton": {
+		"more": "More",
+		"less": "Less"
 	}
 }
diff --git a/app/renderer/components/SwapDetails.js b/app/renderer/components/SwapDetails.js
@@ -1,4 +1,4 @@
-import {clipboard} from 'electron';
+import {remote, clipboard} from 'electron';
 import title from 'title';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -8,13 +8,16 @@ import Progress from 'components/Progress';
 import CurrencyIcon from 'components/CurrencyIcon';
 import Button from 'components/Button';
 import ExternalLink from 'components/ExternalLink';
+import Link from 'components/Link';
+import RightArrowIcon from 'icons/RightArrow';
 import {isDevelopment} from '../../util-common';
 import swapTransactions from '../swap-transactions';
 import blockExplorer from '../block-explorer';
 import {zeroPadFraction} from '../util';
 import {translate} from '../translate';
 import './SwapDetails.scss';
 
+const config = remote.require('./config');
 const t = translate('swap');
 
 const getOverview = swap => {
@@ -45,6 +48,12 @@ class SwapDetails extends React.Component {
 
 	state = {
 		isOpen: false,
+		showAdvanced: config.get('swapModalShowAdvanced'),
+	};
+
+	setShowAdvanced = showAdvanced => {
+		this.setState({showAdvanced});
+		config.set('swapModalShowAdvanced', showAdvanced);
 	};
 
 	open = () => {
@@ -138,59 +147,82 @@ class SwapDetails extends React.Component {
 						/>
 						<div className="section overview">
 							<div className="from">
+								{swap.isActive && (
+									<div className="currency-animation">
+										<div className="scale-wrapper">
+											<CurrencyIcon className="to" symbol={overview.forCurrency}/>
+											<CurrencyIcon className="from" symbol={overview.fromCurrency}/>
+										</div>
+									</div>
+								)}
 								<CurrencyIcon symbol={overview.fromCurrency}/>
 								<p>{overview.fromTitle}</p>
 								<p className="amount">{overview.fromAmount} {overview.fromCurrency}</p>
 							</div>
-							<div className="arrow">→</div>
-							<div className="for">
+							{!swap.isActive && (
+								<RightArrowIcon className="RightArrow" size="20px"/>
+							)}
+							<div className="to">
 								<CurrencyIcon symbol={overview.forCurrency}/>
 								<p>{overview.forTitle}</p>
 								<p className="amount">{overview.forAmount} {overview.forCurrency}</p>
 							</div>
 						</div>
-						<div className="section progress">
-							<p>
-								{(swap.status === 'failed' && swap.error) && (
-									swap.error.message
-								)}
-							</p>
-							{swap.statusInformation && (
-								<p>{swap.statusInformation}</p>
-							)}
-						</div>
-						<div className="section details">
-							<div className="offer-wrapper">
-								<h4>{t('details.yourOffer')}</h4>
-								<div className="offer">
-									{prices}
-								</div>
-								{swap.executed.percentCheaperThanRequested > 0 && (
+						<Link
+							className={`toggle-advanced ${this.state.showAdvanced && 'is-shown'}`}
+							onClick={() => {
+								this.setShowAdvanced(!this.state.showAdvanced);
+							}}
+						>
+							<RightArrowIcon className="toggle-advanced__arrow" size="8px"/>
+							{this.state.showAdvanced ? t('toggleAdvancedButton.less') : t('toggleAdvancedButton.more')}
+						</Link>
+						{this.state.showAdvanced && (
+							<div className="details">
+								<div className="section progress">
 									<p>
-										{t('details.stats', {
-											percentCheaperThanRequested: swap.executed.percentCheaperThanRequested,
-										})}
+										{(swap.status === 'failed' && swap.error) && (
+											swap.error.message
+										)}
 									</p>
-								)}
-							</div>
-							{(transactions.length > 0) && (
-								<React.Fragment>
-									<h4>{t('details.transactions')}</h4>
-									<div className="transactions">
-										{transactions}
+									{swap.statusInformation && (
+										<p>{swap.statusInformation}</p>
+									)}
+								</div>
+								<div className="section details">
+									<div className="offer-wrapper">
+										<h4>{t('details.yourOffer')}</h4>
+										<div className="offer">
+											{prices}
+										</div>
+										{swap.executed.percentCheaperThanRequested > 0 && (
+											<p>
+												{t('details.stats', {
+													percentCheaperThanRequested: swap.executed.percentCheaperThanRequested,
+												})}
+											</p>
+										)}
 									</div>
-								</React.Fragment>
-							)}
-							<p>ID: {swap.uuid}</p>
-							{isDevelopment &&
-								<Button
-									value={t('details.copyDebugData')}
-									onClick={() => {
-										clipboard.writeText(JSON.stringify(swap, null, '\t'));
-									}}
-								/>
-							}
-						</div>
+									{(transactions.length > 0) && (
+										<React.Fragment>
+											<h4>{t('details.transactions')}</h4>
+											<div className="transactions">
+												{transactions}
+											</div>
+										</React.Fragment>
+									)}
+									<p>ID: {swap.uuid}</p>
+									{isDevelopment &&
+										<Button
+											value={t('details.copyDebugData')}
+											onClick={() => {
+												clipboard.writeText(JSON.stringify(swap, null, '\t'));
+											}}
+										/>
+									}
+								</div>
+							</div>
+						)}
 					</React.Fragment>
 				</Modal>
 				<button type="button" className="view__button" onClick={this.open}>{t('details.view')}</button>

diff --git a/app/renderer/components/SwapDetails.scss b/app/renderer/components/SwapDetails.scss
@@ -1,3 +1,81 @@
+@mixin center($width, $height) {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: $width;
+	height: $height;
+	margin-top: -($height / 2);
+	margin-left: -($width / 2);
+}
+
+@keyframes currency-animation-move {
+	0% {
+		opacity: 0;
+		transform: translate(-120px);
+	}
+
+	40% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 1;
+	}
+
+	90% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate(120px);
+	}
+}
+
+@keyframes currency-animation-scale {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(0.5);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes currency-animation-opacity {
+	0% {
+		opacity: 0;
+	}
+
+	30% {
+		opacity: 0.4;
+		filter: saturate(0%);
+	}
+
+	50% {
+		opacity: 1;
+		filter: saturate(100%);
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-in-right-arrow {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 0.2;
+	}
+}
+
 @keyframes fadeIn {
 	0% {
 		opacity: 0;
@@ -31,22 +109,55 @@
 	}
 
 	.overview {
+		position: relative;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		padding: 0 0 20px; /* TODO: Figure out why this has to be set to so much */
 
-		.arrow {
-			color: var(--text-color);
-			font-size: 24px;
-			margin: 0 50px;
+		.currency-animation {
+			@include center(60px, 60px);
+			animation: currency-animation-move 2s 0.5s infinite normal ease-in-out forwards;
+			z-index: -999;
+			margin-top: -63px;
+
+			.scale-wrapper {
+				@include center(60px, 60px);
+				animation: currency-animation-scale 2s 0.5s infinite normal ease-in-out forwards;
+
+				.from,
+				.to {
+					position: absolute;
+					top: -5px;
+				}
+
+				.to {
+					animation: currency-animation-opacity 2s 0.5s infinite normal ease-in-out forwards;
+					z-index: 10;
+				}
+			}
+		}
+
+		.RightArrow {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			opacity: 0.2;
+			animation: fade-in-right-arrow 0.5s linear;
+			margin-top: -10px;
+		}
+
+		.from {
+			margin-right: 100px;
 		}
 
 		.from,
-		.for {
+		.to {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			width: 160px;
 
 			img {
 				display: block;
@@ -80,6 +191,44 @@
 		text-align: center;
 	}
 
+	.toggle-advanced {
+		position: absolute;
+		bottom: 13px;
+		left: 50%;
+		transform: translate(-50%, 0);
+		font-size: 12px;
+		opacity: 0.6;
+		cursor: default;
+		transition: 0.2s ease-out;
+
+		&:hover {
+			opacity: 1;
+		}
+
+		&::after,
+		&::before {
+			content: none;
+		}
+
+		&__arrow {
+			position: absolute;
+			left: 50%;
+			bottom: -8px;
+			transform: translate(-50%, 0) rotate(90deg);
+		}
+	}
+
+	.toggle-advanced.is-shown {
+		bottom: 5px;
+
+		.toggle-advanced__arrow {
+			position: absolute;
+			left: 50%;
+			top: -6px;
+			transform: translate(-50%, 0) rotate(270deg);
+		}
+	}
+
 	.details {
 		flex: 1;
 		overflow-x: hidden;

diff --git a/app/renderer/icons/RightArrow.js b/app/renderer/icons/RightArrow.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import Svg from 'components/Svg';
+
+const RightArrow = props => (
+	<Svg {...props} viewBox="0 0 6 11">
+		<path d="M.25 10.54a.93.93 0 0 1 0-1.28L3.93 5.4.25 1.54a.93.93 0 0 1 0-1.28.83.83 0 0 1 1.21 0l4.29 4.5c.33.35.33.92 0 1.28l-4.29 4.5a.83.83 0 0 1-1.2 0"/>
+	</Svg>
+);
+
+export default RightArrow;
diff --git a/app/renderer/swap-db.js b/app/renderer/swap-db.js
@@ -116,6 +116,9 @@ class SwapDB {
 			orderType: isBuyOrder ? 'buy' : 'sell',
 			status: 'pending',
 			statusFormatted: t('status.pending').toLowerCase(),
+			get isActive() {
+				return !['completed', 'failed'].includes(this.status);
+			},
 			error: false,
 			progress: 0,
 			baseCurrency: request.baseCurrency,