feat: add link component (#117)

BoltzExchange · Feb 25, 2019 · efcaa53 · efcaa53
1 parent bb08715
commit efcaa53
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 112 deletions.
diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
-
+import Link from '../link';
 /*
  * Link button
  */
 
-const LinkBtnStyles = theme => ({
+const ButtonStyles = theme => ({
   wrapper: {
     padding: '10px',
     color: theme.colors.white,
@@ -20,28 +20,16 @@ const LinkBtnStyles = theme => ({
   },
 });
 
-const StyledLinkButton = ({ classes, text, to, style, external, onPress }) =>
+const Button = ({ classes, text, to, style, external, onPress }) =>
   external ? (
-    <a
-      style={style ? style : undefined}
-      target="_blank"
-      rel="noopener noreferrer"
-      href={to}
-      className={classes.wrapper}
-    >
-      {text}
-    </a>
+    <Link text={text} style={style} to={to} className={classes.wrapper} />
   ) : (
-    <span
-      style={style ? style : undefined}
-      className={classes.wrapper}
-      onClick={() => onPress()}
-    >
+    <span style={style} className={classes.wrapper} onClick={() => onPress()}>
       {text}
     </span>
   );
 
-StyledLinkButton.propTypes = {
+Button.propTypes = {
   classes: PropTypes.object,
   external: PropTypes.bool.isRequired,
   text: PropTypes.string.isRequired,
@@ -50,4 +38,4 @@ StyledLinkButton.propTypes = {
   style: PropTypes.object,
 };
 
-export const LinkButton = injectSheet(LinkBtnStyles)(StyledLinkButton);
+export default injectSheet(ButtonStyles)(Button);
diff --git a/src/components/link/index.js b/src/components/link/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Link = ({ text, style, className, to, openNew = true }) => (
+  <a
+    style={style}
+    className={className}
+    rel="noopener noreferrer"
+    target={openNew ? '_blank' : '_self'}
+    href={to}
+  >
+    {text}
+  </a>
+);
+
+Link.propTypes = {
+  text: PropTypes.string.isRequired,
+  style: PropTypes.object,
+  className: PropTypes.any,
+  to: PropTypes.string.isRequired,
+  openNew: PropTypes.bool,
+};
+
+export default Link;
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
@@ -1,50 +1,18 @@
 import React from 'react';
-import Modal from 'react-responsive-modal';
 import PropTypes from 'prop-types';
+import Modal from 'react-responsive-modal';
 
-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 data that could identify
-            our 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>
-  );
-};
+const ModalComponent = ({ isOpen, onClose, children }) => (
+  <Modal open={isOpen} onClose={onClose} center>
+    {children}
+  </Modal>
+);
 
 ModalComponent.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func,
 };

diff --git a/src/components/taskbar/index.js b/src/components/taskbar/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import View from '../view';
-import { LinkButton } from '../button';
+import Button from '../button';
 import { network } from '../../constants';
 
 const boltz_logo = require('../../asset/icons/boltz_logo.png');
@@ -57,14 +57,10 @@ const TaskBar = ({ classes, goHome, goRefund, goFaq }) => (
       <span className={classes.subLogoText}>{network} alpha</span>
     </View>
     <View className={classes.buttons}>
-      <LinkButton text="Swap" onPress={() => goHome()} />
-      <LinkButton text="Refund" onPress={() => goRefund()} />
-      <LinkButton text="FAQ" onPress={() => goFaq()} />
-      <LinkButton
-        external
-        text="Github"
-        to="https://github.com/BoltzExchange"
-      />
+      <Button text="Swap" onPress={() => goHome()} />
+      <Button text="Refund" onPress={() => goRefund()} />
+      <Button text="FAQ" onPress={() => goFaq()} />
+      <Button external text="Github" to="https://github.com/BoltzExchange" />
     </View>
   </View>
 );

diff --git a/src/views/faq/faq.js b/src/views/faq/faq.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import View from '../../components/view';
+import Link from '../../components/link';
 import TaskBar from '../../components/taskbar';
 import Question from '../../components/question';
 import NodeInfo from '../../components/nodeinfo';
@@ -63,14 +64,7 @@ class Faq extends React.Component {
                   Please note that Boltz is currently in its alpha stage so dont
                   be too reckless when using it. If you experience any issues or
                   have some feedback feel free to{' '}
-                  <a
-                    href={twitterLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    contact us
-                  </a>
-                  .
+                  <Link to={twitterLink} text={'contact us'} />.
                 </p>
               )}
               width={'auto'}
@@ -84,8 +78,8 @@ class Faq extends React.Component {
               content={style => (
                 <p className={style}>
                   We appreciate any channels you open with our Lightning nodes
-                  and <a href={twitterLink}>on request</a> we will also open one
-                  to you:
+                  and <Link to={twitterLink} text={'on request'} /> we will also
+                  open one to you:
                   <NodeInfo name={'BTC LND NODE'} size={150} uri={bitcoinLnd} />
                   <NodeInfo
                     name={'LTC LND NODE'}
@@ -113,27 +107,21 @@ class Faq extends React.Component {
                   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={
+                  <Link
+                    to={
                       'https://medium.com/boltzhq/submarine-swaps-c509ce0fb1db'
                     }
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    our blog post about how Boltz works
-                  </a>
+                    text={'our blog post about how Boltz works'}
+                  />
                   <br />
                   <br />
                   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'}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    our GitHub
-                  </a>
+                  <Link
+                    to={'https://github.com/boltzexchange'}
+                    text={'our GitHub'}
+                  />
                   . Also we will soon add a version of our frontend that you can
                   host yourself easily.
                 </p>
@@ -149,14 +137,8 @@ class Faq extends React.Component {
                   All regular and Lightning wallets are supported by Boltz.
                   Although we encourage you to run a full node and manage your
                   own keys, there are custodial wallets solutions, like{' '}
-                  <a
-                    href={'https://bluewallet.io/'}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    BlueWallet
-                  </a>
-                  , that work out of the box can make testing Boltz very easy.
+                  <Link to={'https://bluewallet.io/'} text={'BlueWallet'} />,
+                  that work out of the box can make testing Boltz very easy.
                 </p>
               )}
             />

diff --git a/src/views/landingpage/landingpage.js b/src/views/landingpage/landingpage.js
@@ -8,11 +8,51 @@ import TaskBar from '../../components/taskbar';
 import SwapTab from '../../components/swaptab';
 import ModalComponent from '../../components/modal';
 import BackGround from '../../components/background';
-import { LinkButton } from '../../components/button';
+import Button from '../../components/button';
+import Link from '../../components/link';
 import { bitcoinNetwork, litecoinNetwork } from '../../constants';
 
 const boltz_logo = require('../../asset/icons/boltz_logo.png');
 
+const ModalContent = () => (
+  <View style={{ fontSize: '20px' }} noFlex>
+    <p>
+      On 4th of September 2018, in a{' '}
+      <Link
+        to={
+          'https://info.shapeshift.io/blog/2018/09/04/introducing-shapeshift-membership/'
+        }
+        text={'blogpost'}
+      />
+      , 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 data that could identify our
+        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>
+  </View>
+);
+
 const styles = theme => ({
   wrapper: {
     height: '100%',
@@ -124,11 +164,13 @@ class LandingPage extends React.Component {
               <br />
               An Account.
             </p>
-            <LinkButton text="WHY?" onPress={() => this.toggleModal()} />
+            <Button text="WHY?" onPress={() => this.toggleModal()} />
             <ModalComponent
               isOpen={this.state.isOpen}
               onClose={this.toggleModal}
-            />
+            >
+              <ModalContent />
+            </ModalComponent>
           </View>
           {loading ? (
             <View className={classes.loading}>

diff --git a/src/views/refund/steps/completeRefund.js b/src/views/refund/steps/completeRefund.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
+import Link from '../../../components/link';
 import View from '../../../components/view';
 import { getExplorer } from '../../../scripts/utils';
 import { FaCheckCircle } from 'react-icons/fa';
@@ -35,13 +36,10 @@ const StyledCompleteRefund = ({ classes, currency, refundTransactionHash }) => (
     <FaCheckCircle size={200} className={classes.icon} />
     <span className={classes.title}> Success! </span>
     <p className={classes.transaction}>
-      <a
-        href={`${getExplorer(currency)}/${refundTransactionHash}`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Click here
-      </a>{' '}
+      <Link
+        to={`${getExplorer(currency)}/${refundTransactionHash}`}
+        text={'Click here'}
+      />{' '}
       to see the refund transaction
     </p>
   </View>