feat: add FAQ section

src/action/navigation/index.js

@@ -12,13 +12,16 @@ class Navigation {
   }
 
   goHome = () => navAction(routes.home);
+
   goSwap = () => navAction(routes.swap);
   goReverseSwap = () => navAction(routes.reverseSwap);
   goSwapConfirm = () => navAction(routes.swapConfirm);
   goSwapDownloadRefund = () => navAction(routes.swapDownloadRefund);
   goSwapDone = () => navAction(routes.swapDone);
 
   goRefund = () => navAction(routes.refund);
+
+  goFaq = () => navAction(routes.faq);
 }
 
 export default Navigation;

src/components/background/index.js

@@ -5,10 +5,21 @@ import injectSheet from 'react-jss';
 
 const styles = theme => ({
   wrapper: {
-    backgroundImage: 'linear-gradient(to bottom, #114357, #f29492)',
+    width: '100vw',
+    minHeight: '100vh',
     flexDirection: 'column',
+    backgroundImage: 'linear-gradient(to bottom, #114357, #f29492)',
+  },
+  boltzWrapper: {
+    position: 'relative',
+    alignItems: 'center',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: '25px',
+    marginBottom: '25px',
   },
   boltz: {
+    verticalAlign: 'bottom',
     color: theme.colors.white,
     fontSize: '15px',
     fontWeight: 'normal',
@@ -17,15 +28,16 @@ const styles = theme => ({
     lineHeight: 'normal',
     letterSpacing: 'normal',
     alignSelf: 'center',
-    paddingBottom: '24px',
-    zIndex: 99999,
+    zIndex: 2,
   },
 });
 
 const BackGround = ({ classes, children }) => (
-  <View className={classes.wrapper} style={{ height: '100vh', width: '100vw' }}>
+  <View className={classes.wrapper}>
     {children}
-    <span className={classes.boltz}>@ 2019 Boltz</span>
+    <div className={classes.boltzWrapper}>
+      <span className={classes.boltz}>@ 2019 Boltz</span>
+    </div>
   </View>
 );
 

src/components/modal/index.js

@@ -26,9 +26,9 @@ const ModalComponent = props => {
           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
+            Boltz does not and will never collect any data that could identify
+            our users.
           </b>
-          .
         </p>
         <p>
           Also, Boltz leverages atomic swaps in a way, so that trades either

src/components/nodeinfo/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import View from '../view';
+import QrCode from '../qrcode';
+
+const styles = () => ({
+  node: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  name: {
+    marginBottom: '0px',
+  },
+  uri: {
+    width: '90%',
+    flexWrap: 'wrap',
+    paddingTop: '80px',
+    wordBreak: 'break-all',
+  },
+  qr: {
+    flexWrap: 'wrap',
+  },
+});
+
+class NodeInfo extends React.Component {
+  render() {
+    const { classes, name, uri } = this.props;
+
+    return (
+      <View className={classes.node}>
+        <h3 className={classes.name}>{name}:</h3>
+
+        <View>
+          <code className={classes.uri}>{uri}</code>
+          <QrCode className={classes.qr} size={200} link={uri} />
+        </View>
+      </View>
+    );
+  }
+}
+
+NodeInfo.propTypes = {
+  classes: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  uri: PropTypes.string.isRequired,
+};
+
+export default injectSheet(styles)(NodeInfo);

src/components/qrcode/index.js

@@ -3,24 +3,31 @@ import Qrious from 'qrious';
 import PropTypes from 'prop-types';
 
 class QrCode extends React.Component {
+  id = '';
+
   componentDidMount() {
     const { size, link } = this.props;
+
     this.qr = new Qrious({
-      element: document.getElementById('qr'),
+      element: document.getElementById(this.id),
     });
+
     this.qr.set({
+      size,
+      level: 'H',
+      value: link,
       background: 'white',
-      backgroundAlpha: 1,
       foreground: 'black',
+      backgroundAlpha: 1,
       foregroundAlpha: 1,
-      level: 'H',
-      padding: 1,
-      size,
-      value: link,
     });
   }
+
   render() {
-    return <canvas id={'qr'} />;
+    const { link } = this.props;
+    this.id = `qr-${link.substring(0, 4)}`;
+
+    return <canvas id={this.id} />;
   }
 }
 

src/components/taskbar/index.js

@@ -40,7 +40,7 @@ const styles = theme => ({
   },
 });
 
-const TaskBar = ({ classes, goHome, goRefund }) => (
+const TaskBar = ({ classes, goHome, goRefund, goFaq }) => (
   <View className={classes.wrapper}>
     <View className={classes.logo}>
       <img
@@ -56,7 +56,7 @@ const TaskBar = ({ classes, goHome, goRefund }) => (
     <View className={classes.buttons}>
       <LinkButton text="Swap" onPress={() => goHome()} />
       <LinkButton text="Refund" onPress={() => goRefund()} />
-      <LinkButton text="FAQ" onPress={() => window.alert('WIP')} />
+      <LinkButton text="FAQ" onPress={() => goFaq()} />
       <LinkButton
         external
         text="Github"
@@ -70,6 +70,7 @@ TaskBar.propTypes = {
   classes: PropTypes.object,
   goHome: PropTypes.func.isRequired,
   goRefund: PropTypes.func.isRequired,
+  goFaq: PropTypes.func.isRequired,
 };
 
 export default injectSheet(styles)(TaskBar);

src/constants/routes/index.js

@@ -20,3 +20,8 @@ export const reverseSwap = 'ReverseSwap';
  * Refund routes
  */
 export const refund = 'Refund';
+
+/**
+ * FAQ routes
+ */
+export const faq = 'Faq';

src/views/faq/faq.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import View from '../../components/view';
+import TaskBar from '../../components/taskbar';
+import NodeInfo from '../../components/nodeinfo';
+import BackGround from '../../components/background';
+
+const twitterLink = 'https://twitter.com/boltzhq';
+
+const styles = theme => ({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  tab: {
+    width: '800px',
+    marginTop: '20px',
+    paddingTop: '20px',
+    paddingBottom: '20px',
+    paddingStart: '50px',
+    paddingEnd: '50px',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.white,
+    '@media (min-width: 1500px)': {
+      width: '1000px',
+    },
+  },
+  questionTitle: {
+    marginBottom: '0px',
+  },
+});
+
+class Faq extends React.Component {
+  render() {
+    const { classes, goHome, goRefund, goFaq } = this.props;
+
+    document.body.style.overflowX = 'hidden';
+
+    return (
+      <BackGround>
+        <TaskBar goHome={goHome} goRefund={goRefund} goFaq={goFaq} />
+        <View className={classes.wrapper}>
+          <View className={classes.tab}>
+            <h1>Boltz FAQ</h1>
+
+            <h2 className={classes.questionTitle}>What is Boltz?</h2>
+            <p>
+              Boltz is an instant and non custodial crypto currency exchange
+              that focuses on the adoption of second layer scaling technologies
+              like the Lightning network and the privacy of its users. We
+              neither use any trackers nor log any data that could identify our
+              users.{' '}
+              <b>Please note that Boltz is currently in its alpha stage</b> so
+              so {`don't`} be too reckless when using it. If you experience any
+              issues or have some feedback feel free to{' '}
+              <a href={twitterLink}>contact us</a>.
+            </p>
+
+            <h2 className={classes.questionTitle}>
+              How to open Lightning channels with Boltz?
+            </h2>
+            <p>
+              We appreciate any channels you open with our Lightning nodes and{' '}
+              <a href={twitterLink}>on request</a> we will also open one to you:
+            </p>
+
+            <NodeInfo
+              name={'Bitcoin LND node'}
+              uri={
+                '026165850492521f4ac8abd9bd8088123446d126f648ca35e60f88177dc149ceb2@104.196.200.39:9735'
+              }
+            />
+
+            <NodeInfo
+              name={'Litecoin LND node'}
+              uri={
+                '02a4cb9d9c40ab508be3641a3b42be249e7cacfc7fea600485f9e37e46382aaa49@104.196.200.39:10735'
+              }
+            />
+
+            <h2 className={classes.questionTitle}>
+              Why should one use a non custodial exchange?
+            </h2>
+            <p>
+              Non custodial exchanges give you full control over your funds. All
+              trades on Boltz are executed in a way that we cannot steal any
+              money from you. Period. Either the trade happens entirely and you
+              get the exact amount of the asset you were promised or you will be
+              able to do a refund. This concept is called <i>atomicity</i> and
+              you can read more about this in{' '}
+              <a
+                href={'https://medium.com/boltzhq/submarine-swaps-c509ce0fb1db'}
+              >
+                our blog post about how Boltz works
+              </a>
+              .
+            </p>
+            <p>
+              If you are <i>really</i> technical you can proof read our source
+              code and verify that the claims above are valid because everything
+              is open source and can be found on{' '}
+              <a href={'https://github.com/boltzexchange'}>our GitHub</a>. Also
+              we will soon add a version of our frontend that you can host
+              yourself easily.
+            </p>
+
+            <h2 className={classes.questionTitle}>
+              What wallets are supported by Boltz?
+            </h2>
+            <p>
+              All regular and Lightning wallets are supported by Boltz. Although
+              we recommend users to run a full node and manage their own keys,
+              there are custodial wallets solutions, like{' '}
+              <a href={'https://bluewallet.io/'}>BlueWallet</a>, that can make
+              testing Boltz very easy.
+            </p>
+          </View>
+        </View>
+      </BackGround>
+    );
+  }
+}
+
+Faq.propTypes = {
+  classes: PropTypes.object.isRequired,
+  goHome: PropTypes.func.isRequired,
+  goRefund: PropTypes.func.isRequired,
+  goFaq: PropTypes.func.isRequired,
+};
+
+export default injectSheet(styles)(Faq);

src/views/faq/index.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import Faq from './faq';
+import { nav } from '../../action';
+
+const mapDispatchToProps = dispatch => ({
+  goHome: () => dispatch(nav.goHome()),
+  goSwap: () => dispatch(nav.goSwap()),
+  goRefund: () => dispatch(nav.goRefund()),
+  goFaq: () => dispatch(nav.goFaq()),
+});
+
+export default connect(
+  () => {},
+  mapDispatchToProps
+)(Faq);

src/views/landingpage/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
+import { nav } from '../../action';
 import LandingPage from './landingpage';
 import { initSwap } from '../swap/swapActions';
-import { initReverseSwap } from '../reverse/reverseActions';
-import { nav } from '../../action';
 import * as actions from './landingpageActions';
+import { initReverseSwap } from '../reverse/reverseActions';
 
 const mapStateToProps = state => ({
   rates: state.landingpageReducer.rates,
@@ -12,10 +12,11 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
+  goHome: () => dispatch(nav.goHome()),
   goSwap: () => dispatch(nav.goSwap()),
   goReverseSwap: () => dispatch(nav.goReverseSwap()),
   goRefund: () => dispatch(nav.goRefund()),
-  goHome: () => dispatch(nav.goHome()),
+  goFaq: () => dispatch(nav.goFaq()),
   initSwap: state => dispatch(initSwap(state)),
   initReverseSwap: state => dispatch(initReverseSwap(state)),
   getPairs: cb => dispatch(actions.getPairs(cb)),