fix: navigation tabs

* feat: add error tab for swap

* feat: redux-router

* refactor: refund tab

* feat: fee

* feat: swap values

package.json

@@ -2,6 +2,7 @@
   "name": "boltz-frontend",
   "version": "1.0.0",
   "dependencies": {
+    "connected-react-router": "^5.0.1",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",

src/components/input/index.js

@@ -12,45 +12,56 @@ const styles = theme => ({
     backgroundColor: theme.colors.lightGrey,
     width: '200px',
     height: '50px',
-    '&:focus': {
-      outline: 'none',
-    },
+    outline: p => (p.error ? '1px solid red' : 'none'),
   },
 });
 
 class Input extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { text: 0 };
+    this.state = { value: 0 };
   }
 
   onChange = e => {
-    if (e.target.value >= 0) {
-      this.setState({ text: e.target.value });
+    if (e.target.value) {
+      this.setState({ value: e.target.value });
+      this.props.onChange && this.props.onChange(e.target.value);
     }
   };
 
   render() {
-    const { classes, isText, style, disable } = this.props;
+    const { classes, style, disable, min, step, value, max } = this.props;
     return (
       <input
         disabled={disable}
-        min="0"
+        step={step}
+        min={min}
+        max={max}
         style={style ? style : undefined}
         className={classes.wrapper}
         onChange={e => this.onChange(e)}
-        value={this.state.text}
-        type={isText ? 'text' : 'number'}
+        value={value ? value : this.state.value}
+        type={'number'}
       />
     );
   }
 }
 
+Input.defaultProps = {
+  min: 0,
+  step: 1,
+};
+
 Input.propTypes = {
   classes: PropTypes.object.isRequired,
-  isText: PropTypes.bool.isRequired,
+  onChange: PropTypes.func,
   style: PropTypes.object,
   disable: PropTypes.bool,
+  error: PropTypes.bool,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+  step: PropTypes.number,
 };
 
 export default injectSheet(styles)(Input);

src/views/landingPage/landingPage.js → src/components/landingpage/index.js

@@ -33,7 +33,7 @@ const styles = theme => ({
   },
 });
 
-const LandingPage = ({ classes, toggleSwapMode }) => {
+const LandingPage = ({ classes, toggleSwapMode, setSwapAmount }) => {
   return (
     <BackGround>
       <TaskBar />
@@ -52,16 +52,22 @@ const LandingPage = ({ classes, toggleSwapMode }) => {
           </p>
           <LinkButton text="WHY?" to="/faq" />
         </View>
-        <SwapTab onClick={() => toggleSwapMode()} />
+        <SwapTab
+          onClick={(sent, received) => {
+            setSwapAmount(sent, received);
+            toggleSwapMode();
+          }}
+        />
       </View>
     </BackGround>
   );
 };
 
 LandingPage.propTypes = {
-  classes: PropTypes.object,
+  classes: PropTypes.object.isRequired,
   inSwapMode: PropTypes.bool,
   toggleSwapMode: PropTypes.func,
+  setSwapAmount: PropTypes.func,
 };
 
 export default injectSheet(styles)(LandingPage);

src/components/swaptab/index.js

@@ -5,6 +5,7 @@ import View from '../view';
 import Input from '../input';
 import DropDown from '../dropdown';
 import Text, { InfoText } from '../text';
+import { MIN, MAX, FEE } from '../../constants/fees';
 import { FaArrowRight } from 'react-icons/fa';
 
 const types = ['BTC', 'T-BTC'];
@@ -67,32 +68,71 @@ const styles = theme => ({
   },
 });
 
-const SwapTab = ({ classes, onClick }) => (
-  <View className={classes.wrapper}>
-    <View className={classes.stats}>
-      <InfoText title="min:" text="0.005 BTC" />
-      <InfoText title="max:" text="0.5 BTC" />
-      <InfoText title="fee:" text="0.0001 BTC" />
-      <InfoText title="rate:" text="1 BTC = 1 BTC" />
-    </View>
-    <View className={classes.options}>
-      <View className={classes.select}>
-        <Text text="You send:" className={classes.text} />
-        <Input />
-        <DropDown fields={types} />
-      </View>
-      <View className={classes.select}>
-        <Text text="You receive:" className={classes.text} />
-        <Input />
-        <DropDown fields={types} />
+class SwapTab extends React.Component {
+  state = {
+    sent: 0,
+    received: 0,
+    error: false,
+  };
+
+  setSwapData = sent => {
+    if (sent > MAX || sent < MIN) {
+      this.setState({
+        error: true,
+      });
+    } else {
+      this.setState({
+        sent,
+        received: Number.parseFloat(sent - FEE).toFixed(4),
+        error: false,
+      });
+    }
+  };
+
+  shouldSubmit = () => {
+    const { error, sent, received } = this.state;
+    if (!error && sent !== 0) {
+      this.props.onClick(sent, received);
+    }
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <View className={classes.wrapper}>
+        <View className={classes.stats}>
+          <InfoText title="min:" text={`${MIN} BTC`} />
+          <InfoText title="max:" text={`${MAX} BTC`} />
+          <InfoText title="fee:" text={`${FEE} BTC`} />
+          <InfoText title="rate:" text="1 BTC = 1 BTC" />
+        </View>
+        <View className={classes.options}>
+          <View className={classes.select}>
+            <Text text="You send:" className={classes.text} />
+            <Input
+              min={MIN}
+              max={MAX}
+              step={0.001}
+              error={this.state.error}
+              onChange={e => this.setSwapData(e)}
+            />
+            <DropDown fields={types} />
+          </View>
+          <View className={classes.select}>
+            <Text text="You receive:" className={classes.text} />
+            <Input disable value={this.state.received} />
+            <DropDown fields={types} />
+          </View>
+        </View>
+        <View className={classes.next} onClick={() => this.shouldSubmit()}>
+          <Text text="Start swap" className={classes.nextText} />
+          <FaArrowRight className={classes.icon} />
+        </View>
       </View>
-    </View>
-    <View className={classes.next} onClick={() => onClick()}>
-      <Text text="Start swap" className={classes.nextText} />
-      <FaArrowRight className={classes.icon} />
-    </View>
-  </View>
-);
+    );
+  }
+}
+
 SwapTab.propTypes = {
   classes: PropTypes.object,
   onClick: PropTypes.func,

src/components/taskbar/index.js

@@ -28,7 +28,7 @@ const TaskBar = ({ classes }) => (
       alt="logo"
     />
     <View className={classes.buttons}>
-      <LinkButton text="Swap" to="/swap" />
+      <LinkButton text="Swap" to="/" />
       <LinkButton text="Refund" to="/refund" />
       <LinkButton text="FAQ" to="/faq" />
       <LinkButton

src/constants/actions/index.js

@@ -1,2 +1,3 @@
 export const ENTER_SWAP_MODE = 'ENTER_SWAP_MODE';
 export const ENTER_REFUND_MODE = 'ENTER_REFUND_MODE';
+export const SET_SWAP_AMOUNT = 'SET_SWAP_AMOUNT';

src/constants/fees/index.js

@@ -0,0 +1,4 @@
+export const MIN = 0.005;
+export const MAX = 0.5;
+// TODO: get the fee from boltz-backend.
+export const FEE = 0.0001;

src/state/index.js

@@ -1,7 +1,16 @@
-import { applyMiddleware, createStore } from 'redux';
+import { applyMiddleware, createStore, compose } from 'redux';
+import { createBrowserHistory } from 'history';
+import { routerMiddleware } from 'connected-react-router';
+import createRootReducer from './rootReducer';
+
 import logger from 'redux-logger';
-import rootReducer from './rootReducer';
 
-const store = createStore(rootReducer, applyMiddleware(logger));
+const history = createBrowserHistory();
+
+const store = createStore(
+  createRootReducer(history),
+  compose(applyMiddleware(logger, routerMiddleware(history)))
+);
 
+export { history };
 export default store;

src/state/rootReducer.js

@@ -1,10 +1,13 @@
 import { combineReducers } from 'redux';
-import swapReducer from '../views/landingPage/landingPageReducer';
+import { connectRouter } from 'connected-react-router';
+import swapReducer from '../views/swap/swapReducer';
 import refundReducer from '../views/refund/refundReducer';
 
-const rootReducer = combineReducers({
-  swapReducer,
-  refundReducer,
-});
+const createRootReducer = history =>
+  combineReducers({
+    router: connectRouter(history),
+    swapReducer,
+    refundReducer,
+  });
 
-export default rootReducer;
+export default createRootReducer;

src/views/index.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import { ThemeProvider, preset, jss } from 'react-jss';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
-import store from '../state';
+import { Route, Switch } from 'react-router-dom';
+import { ConnectedRouter } from 'connected-react-router';
+import store, { history } from '../state';
 import theme from '../constants/theme';
 import Container from '../components/container';
 
-import LandingPage from '../views/landingPage';
 import Swap from '../views/swap';
 import Refund from '../views/refund';
 
@@ -16,16 +16,17 @@ class App extends Component {
   render() {
     return (
       <Provider store={store}>
-        <Router>
+        <ConnectedRouter history={history}>
           <ThemeProvider theme={theme}>
             <Container>
-              <Route exact path={'/'} component={LandingPage} />
-              <Route exact path={'/swap'} component={Swap} />
-              <Route exact path={'/refund'} component={Refund} />
-              <Route exact path={'/catalog'} />
+              <Switch>
+                <Route exact path={'/'} component={Swap} />
+                <Route exact path={'/refund'} component={Refund} />
+                <Route exact path={'/catalog'} />
+              </Switch>
             </Container>
           </ThemeProvider>
-        </Router>
+        </ConnectedRouter>
       </Provider>
     );
   }

src/views/refund/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { push } from 'connected-react-router';
 import Refund from './refund';
 import * as actions from './refundActions';
 
@@ -8,6 +9,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   toggleRefundMode: () => dispatch(actions.toggleRefundMode()),
+  push: path => dispatch(push(path)),
 });
 
 export default connect(