fix: input on landing page

* refactor: fix input * feat: accurate numbers * chore: remove loggers
BoltzExchange · Jan 13, 2019 · 1fa26e9 · 1fa26e9
1 parent 1192e1b
commit 1fa26e9
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src",
-    "lint-fix": "eslint --fix src"
+    "lint:fix": "eslint --fix src"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "bignumber.js": "^8.0.1",
     "bitcoinjs-lib": "^4.0.2",
     "boltz-core": "0.0.3",
     "eventsource": "^1.0.7",

diff --git a/src/components/input/index.js b/src/components/input/index.js
@@ -17,16 +17,8 @@ const styles = theme => ({
 });
 
 class Input extends React.Component {
-  static getDerivedStateFromProps = nextProps => {
-    if (nextProps.value && nextProps.disable) {
-      return { value: nextProps.value };
-    }
-  };
-
   onChange = e => {
-    this.setState({ value: e.target.value }, () => {
-      this.props.onChange(this.state.value);
-    });
+    this.props.onChange(e.target.value);
   };
 
   render() {

diff --git a/src/components/swaptab/index.js b/src/components/swaptab/index.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
+import { BigNumber } from 'bignumber.js';
 import View from '../view';
 import Input from '../input';
 import DropDown from '../dropdown';
 import Text, { InfoText } from '../text';
 import { MIN, MAX } from '../../constants/fees';
 import Controls from '../controls';
 
-const boltz_logo = require('../../asset/icons/boltz_logo.png');
-
 const styles = theme => ({
   wrapper: {
     margin: '15px',
@@ -77,21 +76,6 @@ const styles = theme => ({
   text: {
     fontSize: '20px',
   },
-  loading: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '400px',
-    width: '600px',
-    backgroundColor: theme.colors.white,
-    '@media (min-width: 1500px)': {
-      width: '800px',
-      height: '600px',
-    },
-  },
-  loadingLogo: {
-    width: '200px',
-    height: '200px',
-  },
 });
 
 class SwapTab extends React.Component {
@@ -107,10 +91,18 @@ class SwapTab extends React.Component {
     };
   }
 
+  componentDidMount = () => {
+    this.setState(
+      {
+        rate: this.props.rates[`${this.state.base}/${this.state.quote}`],
+      },
+      () => this.updateQuoteAmount(this.state.baseAmount)
+    );
+  };
+
   componentDidUpdate = (prevProps, prevState) => {
     // Update the rate if the request finished or the currencies changed
     if (
-      prevProps.loading ||
       prevState.base !== this.state.base ||
       prevState.quote !== this.state.quote
     ) {
@@ -121,38 +113,29 @@ class SwapTab extends React.Component {
   };
 
   checkBaseAmount = baseAmount => {
-    const valid = baseAmount <= MAX && baseAmount >= MIN;
-
-    if (!valid) {
-      this.setState({
-        error: true,
-      });
-    }
-    return valid;
+    return baseAmount <= MAX && baseAmount >= MIN;
   };
 
   updateBaseAmount = quoteAmount => {
-    const newBaseAmount = (quoteAmount / this.state.rate.rate).toFixed(8);
-
-    if (this.checkBaseAmount(newBaseAmount)) {
-      this.setState({
-        quoteAmount: Number.parseFloat(quoteAmount).toFixed(8),
-        baseAmount: newBaseAmount,
-        error: false,
-      });
-    }
+    const rate = new BigNumber(this.state.rate.rate);
+    const newBaseAmount = new BigNumber(quoteAmount).dividedBy(rate).toNumber();
+    const error = !this.checkBaseAmount(newBaseAmount);
+    this.setState({
+      quoteAmount: Number.parseFloat(quoteAmount),
+      baseAmount: newBaseAmount,
+      error,
+    });
   };
 
   updateQuoteAmount = baseAmount => {
-    const newQuoteAmount = (baseAmount * this.state.rate.rate).toFixed(8);
-
-    if (this.checkBaseAmount(baseAmount)) {
-      this.setState({
-        quoteAmount: newQuoteAmount,
-        baseAmount: Number.parseFloat(baseAmount).toFixed(8),
-        error: false,
-      });
-    }
+    const rate = new BigNumber(this.state.rate.rate);
+    const newQuoteAmount = new BigNumber(baseAmount).times(rate).toFixed(8);
+    const error = !this.checkBaseAmount(baseAmount);
+    this.setState({
+      quoteAmount: newQuoteAmount,
+      baseAmount: Number.parseFloat(baseAmount),
+      error,
+    });
   };
 
   shouldSubmit = () => {
@@ -179,24 +162,10 @@ class SwapTab extends React.Component {
   };
 
   render() {
-    const { classes, rates, currencies, loading } = this.props;
-    let { error, base, quote, baseAmount, quoteAmount, rate } = this.state;
+    const { classes, rates, currencies } = this.props;
+    const { error, base, quote, baseAmount, quoteAmount } = this.state;
 
-    if (quoteAmount === 0 && rate !== undefined) {
-      this.updateQuoteAmount(baseAmount);
-    }
-
-    return loading ? (
-      <View className={classes.loading}>
-        <img
-          src={boltz_logo}
-          height={100}
-          width={100}
-          className={classes.loadingLogo}
-          alt="logo"
-        />
-      </View>
-    ) : (
+    return (
       <View className={classes.wrapper}>
         <View className={classes.stats}>
           <InfoText title="Min amount:" text={`${MIN}`} />
@@ -257,7 +226,6 @@ SwapTab.propTypes = {
   onPress: PropTypes.func,
   rates: PropTypes.object.isRequired,
   currencies: PropTypes.array.isRequired,
-  loading: PropTypes.bool.isRequired,
 };
 
 export default injectSheet(styles)(SwapTab);
diff --git a/src/views/landingpage/landingpage.js b/src/views/landingpage/landingpage.js
@@ -9,6 +9,8 @@ import SwapTab from '../../components/swaptab';
 import { bitcoinNetwork, litecoinNetwork } from '../../constants';
 import { generateKeys } from '../../action';
 
+const boltz_logo = require('../../asset/icons/boltz_logo.png');
+
 const styles = theme => ({
   wrapper: {
     height: '100%',
@@ -33,6 +35,21 @@ const styles = theme => ({
       fontSize: theme.fontSize.sizeXXXL,
     },
   },
+  loading: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '400px',
+    width: '600px',
+    backgroundColor: theme.colors.white,
+    '@media (min-width: 1500px)': {
+      width: '800px',
+      height: '600px',
+    },
+  },
+  loadingLogo: {
+    width: '200px',
+    height: '200px',
+  },
 });
 
 class LandingPage extends React.Component {
@@ -71,23 +88,34 @@ class LandingPage extends React.Component {
             </p>
             <LinkButton text="WHY?" onPress={() => window.alert('WIP')} />
           </View>
-          <SwapTab
-            loading={Object.keys(rates).length === 0 || currencies.length === 0}
-            onPress={state => {
-              const keys = generateKeys(
-                state.base === 'BTC' ? bitcoinNetwork : litecoinNetwork
-              );
+          {Object.keys(rates).length === 0 || currencies.length === 0 ? (
+            <View className={classes.loading}>
+              <img
+                src={boltz_logo}
+                height={100}
+                width={100}
+                className={classes.loadingLogo}
+                alt="logo"
+              />
+            </View>
+          ) : (
+            <SwapTab
+              onPress={state => {
+                const keys = generateKeys(
+                  state.base === 'BTC' ? bitcoinNetwork : litecoinNetwork
+                );
 
-              initSwap({
-                ...state,
-                keys,
-              });
+                initSwap({
+                  ...state,
+                  keys,
+                });
 
-              goSwap();
-            }}
-            rates={rates}
-            currencies={currencies}
-          />
+                goSwap();
+              }}
+              rates={rates}
+              currencies={currencies}
+            />
+          )}
         </View>
       </BackGround>
     );

diff --git a/src/views/swap/swapActions.js b/src/views/swap/swapActions.js
@@ -64,7 +64,6 @@ export const startSwap = (swapInfo, cb) => {
       })
       .catch(error => {
         window.alert('Failed to execute swap');
-        console.log(error);
         dispatch(swapResponse(false, error.data));
       });
   };