feat: add modal (#64)

* feat: add modal

* feat: add text to why

* fix: minor wording changes

package.json

@@ -38,6 +38,7 @@
     "react-jss": "^8.6.1",
     "react-loader-spinner": "^2.3.0",
     "react-redux": "^5.1.1",
+    "react-responsive-modal": "^3.5.1",
     "react-scripts": "^2.1.3",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",

src/components/modal/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Modal from 'react-responsive-modal';
+import PropTypes from 'prop-types';
+
+const ModalComponent = props => {
+  const { isOpen, onClose } = props;
+
+  return (
+    <Modal open={isOpen} onClose={onClose} center>
+      <div style={{ fontSize: '20px' }}>
+        <p>
+          On 4th of September 2018, in a{' '}
+          <a href="https://info.shapeshift.io/blog/2018/09/04/introducing-shapeshift-membership/">
+            blogpost
+          </a>
+          , Shapeshift, one of the largest cryptocurrency entities, scummed to
+          user data collection.
+        </p>
+        <p>
+          By creating an account on a custodial exchange like Shapeshift, you
+          are giving the government and anyone who can access that KYC data, the
+          power to not only know that you have crypto assets but also to
+          confiscate them during a trade.
+        </p>
+        <p>
+          We built Boltz with a dream of a fairer financial world, with the
+          primary goal to empower users with financial sovereignty. Therefore,{' '}
+          <b>
+            Boltz does not and will never collect any personal data from users
+          </b>
+          .
+        </p>
+        <p>
+          Also, Boltz leverages atomic swaps in a way, so that trades either
+          complete in full or get refunded. Users can rest assured to be in
+          possession of their funds at all times, without worrying about who is
+          behind Boltz and if this entity is trustworthy.
+        </p>
+        <p>
+          Trading <b>{`shouldn't`}</b> require an account.
+        </p>
+      </div>
+    </Modal>
+  );
+};
+
+ModalComponent.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+};
+
+export default ModalComponent;

src/views/landingpage/landingpage.js

@@ -8,6 +8,7 @@ import TaskBar from '../../components/taskbar';
 import SwapTab from '../../components/swaptab';
 import { bitcoinNetwork, litecoinNetwork } from '../../constants';
 import { generateKeys } from '../../action';
+import ModalComponent from '../../components/modal';
 
 const boltz_logo = require('../../asset/icons/boltz_logo.png');
 
@@ -53,12 +54,23 @@ const styles = theme => ({
 });
 
 class LandingPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
   componentDidMount() {
     this.props.getPairs(() => {
       this.forceUpdate();
     });
   }
 
+  toggleModal = () => {
+    this.setState(prev => ({ isOpen: !prev.isOpen }));
+  };
+
   render() {
     const {
       classes,
@@ -88,7 +100,11 @@ class LandingPage extends React.Component {
               <br />
               An Account.
             </p>
-            <LinkButton text="WHY?" onPress={() => window.alert('WIP')} />
+            <LinkButton text="WHY?" onPress={() => this.toggleModal()} />
+            <ModalComponent
+              isOpen={this.state.isOpen}
+              onClose={this.toggleModal}
+            />
           </View>
           {Object.keys(rates).length === 0 || currencies.length === 0 ? (
             <View className={classes.loading}>