Add dashboard intro (#389)

app/locales/en-US/dashboard.json

@@ -1,4 +1,8 @@
 {
+	"intro": {
+		"title": "✨ Thanks for Helping Us Test HyperDEX!",
+		"description": "<0>Please keep in mind <1>this project is still in Alpha</1>.</0><1>Although loss of funds is unlikely, you should only trade with real currency if you can take that risk.</1><2>If you just want to test HyperDEX, try trading between the test currencies <1>BEER</1> and <3>PIZZA</3> instead. You can get free <5>BEER</5> at the <7><0>BEER</0> faucet</7>.</2><3>HyperDEX is Open Source software provided &qoute;as is&qoute;, without warranty of any kind. The authors or copyright holders are not liable for any damages caused as a result of using this software.</3><4>By using HyperDEX you are agreeing to the terms of the <1>MIT License</1>.</4>"
+	},
 	"activity": {
 		"noActivity": "No activity yet",
 		"recentActivity": "Recent Activity",

app/renderer/views/Dashboard/Intro.js

@@ -0,0 +1,43 @@
+import {remote} from 'electron';
+import React from 'react';
+import {Trans} from 'react-i18next';
+import Modal from 'components/Modal';
+import ExternalLink from 'components/ExternalLink';
+import {instance, translate} from '../../translate';
+
+const config = remote.require('./config');
+const t = translate('dashboard');
+
+class Intro extends React.Component {
+	state = {
+		shouldOpen: !config.get('hasShownDashboardIntro'),
+	}
+
+	closedHandler = () => {
+		config.set('hasShownDashboardIntro', true);
+		this.setState({shouldOpen: false});
+	};
+
+	render() {
+		return (
+			<div>
+				<Modal
+					title={t('intro.title')}
+					open={this.state.shouldOpen}
+					didClose={this.closedHandler}
+					width="500px"
+				>
+					<Trans i18n={instance} i18nKey="intro.description" t={t}>
+						<p>Please keep in mind <strong>this project is still in Alpha</strong>.</p>
+						<p>Although loss of funds is unlikely, you should only trade with real currency if you can take that risk.</p>
+						<p>If you just want to test HyperDEX, try trading between the test currencies <strong>BEER</strong> and <strong>PIZZA</strong> instead. You can get free <strong>BEER</strong> at the <ExternalLink url="https://www.atomicexplorer.com/#/faucet"><strong>BEER</strong> faucet</ExternalLink>.</p>
+						<p>HyperDEX is Open Source software provided &qoute;as is&qoute;, without warranty of any kind. The authors or copyright holders are not liable for any damages caused as a result of using this software.</p>
+						<p>By using HyperDEX you are agreeing to the terms of the <ExternalLink url="https://github.com/hyperdexapp/hyperdex/blob/master/LICENSE">MIT License</ExternalLink>.</p>
+					</Trans>
+				</Modal>
+			</div>
+		);
+	}
+}
+
+export default Intro;

app/renderer/views/Dashboard/index.js

@@ -3,6 +3,7 @@ import {Subscribe} from 'unstated';
 import dashboardContainer from 'containers/Dashboard';
 import exchangeContainer from 'containers/Exchange';
 import TabView from 'views/TabView';
+import Intro from './Intro';
 import List from './List';
 import Chart from './Chart';
 import Activity from './Activity';
@@ -19,6 +20,7 @@ const Dashboard = () => {
 				if (state.activeView === 'Portfolio') {
 					return (
 						<TabView className="Dashboard Dashboard--Portfolio">
+							<Intro/>
 							<List/>
 							<Chart/>
 							<Activity/>