fix: cleaning of swap reducers (#90)

* refactor: fix complete swap reducers * refactor: reset state * refactor: fix style issues #95 * refactor: lint * refactor: user correct nextStage in reverse swap * refactor: clean up background style * refactor: completeSwap * refactor: fix reducer issue
BoltzExchange · Feb 19, 2019 · 168472d · 168472d
1 parent 5f3b526
commit 168472d
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 66 deletions.
diff --git a/src/components/background/index.js b/src/components/background/index.js
@@ -5,31 +5,22 @@ import injectSheet from 'react-jss';
 
 const styles = theme => ({
   wrapper: {
+    height: '100vh',
     width: '100vw',
-    minHeight: '100vh',
-    flexDirection: 'column',
     backgroundImage: 'linear-gradient(to bottom, #114357, #f29492)',
-  },
-  boltzWrapper: {
-    marginTop: '25px',
-    marginBottom: '25px',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    position: 'relative',
-    alignItems: 'center',
+    flexDirection: 'column',
   },
   boltz: {
-    bottom: 0,
+    color: theme.colors.white,
     fontSize: '15px',
-    fontStyle: 'normal',
-    alignSelf: 'center',
-    lineHeight: 'normal',
     fontWeight: 'normal',
+    fontStyle: 'normal',
     fontStretch: 'normal',
+    lineHeight: 'normal',
     letterSpacing: 'normal',
-    verticalAlign: 'bottom',
-    color: theme.colors.white,
-    zIndex: 2,
+    alignSelf: 'center',
+    paddingBottom: '10px',
+    zIndex: 99999,
   },
 });
 

diff --git a/src/components/nodeinfo/index.js b/src/components/nodeinfo/index.js
@@ -11,6 +11,7 @@ const styles = () => ({
     alignContent: 'center',
     flexDirection: 'column',
     justifyContent: 'center',
+    margin: '120px',
   },
   name: {
     marginBottom: '0px',
@@ -25,25 +26,19 @@ const styles = () => ({
   },
 });
 
-class NodeInfo extends React.Component {
-  render() {
-    const { classes, name, uri } = this.props;
-
-    return (
-      <View className={classes.node}>
-        <h3 className={classes.name}>{name}:</h3>
-
-        <QrCode className={classes.qr} size={200} link={uri} />
-        <code className={classes.uri}>{uri}</code>
-      </View>
-    );
-  }
-}
+const NodeInfo = ({ classes, size, name, uri }) => (
+  <View className={classes.node}>
+    <h3 className={classes.name}>{name}:</h3>
+    <QrCode className={classes.qr} size={size} link={uri} />
+    <code className={classes.uri}>{uri}</code>
+  </View>
+);
 
 NodeInfo.propTypes = {
   classes: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   uri: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
 };
 
 export default injectSheet(styles)(NodeInfo);
diff --git a/src/components/swaptab/index.js b/src/components/swaptab/index.js
@@ -144,15 +144,15 @@ class SwapTab extends React.Component {
     )}/${this.parseBoltSuffix(this.state.quote, false)}`;
   };
 
-  componentWillMount() {
-    if (localStorage.length !== 0) {
+  componentWillMount = () => {
+    if (localStorage.getItem('quote')) {
       this.setState({
         base: localStorage.getItem('base'),
         quote: localStorage.getItem('quote'),
         baseAmount: localStorage.getItem('baseAmount'),
       });
     }
-  }
+  };
 
   componentDidMount = () => {
     const symbol = this.getSymbol();

diff --git a/src/views/faq/faq.js b/src/views/faq/faq.js
@@ -9,27 +9,17 @@ import { bitcoinLnd, litecoinLnd } from '../../constants';
 
 const twitterLink = 'https://twitter.com/boltzhq';
 
-const styles = theme => ({
+const styles = () => ({
   wrapper: {
+    flex: 1,
     alignItems: 'center',
-    justifyContent: 'space-around',
+    justifyContent: 'center',
+    overflowY: 'scroll',
   },
   tab: {
+    height: '100vh',
     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',
@@ -70,8 +60,8 @@ class Faq extends React.Component {
               <a href={twitterLink}>on request</a> we will also open one to you:
             </p>
 
-            <NodeInfo name={'Bitcoin LND node'} uri={bitcoinLnd} />
-            <NodeInfo name={'Litecoin LND node'} uri={litecoinLnd} />
+            <NodeInfo size={150} name={'Bitcoin LND node'} uri={bitcoinLnd} />
+            <NodeInfo size={150} name={'Litecoin LND node'} uri={litecoinLnd} />
 
             <h2 className={classes.questionTitle}>
               Why should one use a non custodial exchange?
@@ -85,6 +75,8 @@ class Faq extends React.Component {
               you can read more about this in{' '}
               <a
                 href={'https://medium.com/boltzhq/submarine-swaps-c509ce0fb1db'}
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 our blog post about how Boltz works
               </a>
@@ -94,9 +86,15 @@ class Faq extends React.Component {
               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.
+              <a
+                href={'https://github.com/boltzexchange'}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                our GitHub
+              </a>
+              . Also we will soon add a version of our frontend that you can
+              host yourself easily.
             </p>
 
             <h2 className={classes.questionTitle}>

diff --git a/src/views/landingpage/landingpage.js b/src/views/landingpage/landingpage.js
@@ -103,6 +103,11 @@ class LandingPage extends React.Component {
       limits,
     } = this.props;
 
+    const loading =
+      Object.keys(rates).length === 0 ||
+      currencies.length === 0 ||
+      Object.keys(limits).length === 0;
+
     return (
       <BackGround>
         <TaskBar goHome={goHome} goRefund={goRefund} goFaq={goFaq} />
@@ -125,9 +130,7 @@ class LandingPage extends React.Component {
               onClose={this.toggleModal}
             />
           </View>
-          {Object.keys(rates).length === 0 ||
-          currencies.length === 0 ||
-          Object.keys(limits).length === 0 ? (
+          {loading ? (
             <View className={classes.loading}>
               <img
                 alt="logo"

diff --git a/src/views/reverse/reverse.js b/src/views/reverse/reverse.js
@@ -25,7 +25,6 @@ const ReverseSwap = ({
   completeSwap,
   goHome,
   webln,
-  nextStage,
   swapInfo,
   swapResponse,
   isFetching,
@@ -87,23 +86,28 @@ const ReverseSwap = ({
             />
             <StepsWizard.Control
               num={2}
-              render={() => (
+              render={props => (
                 <Controls
                   loading={isFetching}
                   text={'Done'}
                   loadingText={swapStatus}
                   loadingRender={() => <Loading />}
                   onPress={() => {
-                    completeSwap();
-                    nextStage();
+                    props.nextStage();
                   }}
                 />
               )}
             />
             <StepsWizard.Control
               num={3}
               render={() => (
-                <Controls text={'Swap Again!'} onPress={() => goHome()} />
+                <Controls
+                  text={'Swap Again!'}
+                  onPress={() => {
+                    completeSwap();
+                    goHome();
+                  }}
+                />
               )}
             />
           </StepsWizard.Controls>

diff --git a/src/views/reverse/reverseReducer.js b/src/views/reverse/reverseReducer.js
@@ -62,7 +62,7 @@ const reducer = (state = initalState, action) => {
       };
 
     case actionTypes.COMPLETE_REVERSE_SWAP:
-      return initalState;
+      return { ...initalState };
 
     default:
       return state;

diff --git a/src/views/swap/swap.js b/src/views/swap/swap.js
@@ -114,7 +114,6 @@ const Swap = ({
                   errorAction={() => startSwap(swapInfo, props.nextStage)}
                   loadingRender={() => <Loading />}
                   onPress={() => {
-                    completeSwap();
                     props.nextStage();
                   }}
                 />
@@ -123,7 +122,13 @@ const Swap = ({
             <StepsWizard.Control
               num={4}
               render={() => (
-                <Controls text={'Swap Again!'} onPress={() => goHome()} />
+                <Controls
+                  text={'Swap Again!'}
+                  onPress={() => {
+                    completeSwap();
+                    goHome();
+                  }}
+                />
               )}
             />
           </StepsWizard.Controls>

diff --git a/src/views/swap/swapReducer.js b/src/views/swap/swapReducer.js
@@ -73,7 +73,7 @@ const reducer = (state = initalState, action) => {
       };
 
     case actionTypes.COMPLETE_SWAP:
-      return initalState;
+      return { ...initalState };
 
     default:
       return state;