feat: setup mobile style (#160)

* feat: setup mobile style * chore: lint * chore: fix loading error * refactor: fix style issues * refactor: change project layout * refactor: project layout * refactor: move dataStorage into state * refactor: add title to mobile home page * refactor: fix bug in invoice input and fix styles * refactor: fix styles now they are less shitty :) * refactor: fix some bugs * Update src/components/navigationbar/desktopnavigationbar.js Co-Authored-By: ImmanuelSegol <[email protected]> * chore: fix bugs and lint code * refactor: fix issue where id dosent exsist on swapResponse * refactor: fix reverse swap flow * chore: lint
BoltzExchange · Apr 24, 2019 · 7280913 · 7280913
1 parent 397078b
commit 7280913
Show file tree

Hide file tree

Showing 47 changed files with 1,766 additions and 1,110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/actions/datastorageActions.js b/src/actions/datastorageActions.js
@@ -0,0 +1,27 @@
+import * as actionTypes from '../constants/actions';
+
+/**
+ * Save the id of reverse swap to save
+ * @param {String} id
+ */
+export const dataStorageSetId = id => ({
+  type: actionTypes.SET_ID,
+  payload: id,
+});
+
+/**
+ *  Save asset type and amount of the reverse swap.
+ * @param {String} asset
+ * @param {Number} amount
+ */
+export const dataStorageSetAsset = (asset, amount) => ({
+  type: actionTypes.SET_ID,
+  payload: {
+    asset,
+    amount,
+  },
+});
+
+export const dataStorageClear = () => ({
+  type: actionTypes.CLEAR_DATA_STORAGE,
+});
diff --git a/src/action/index.js → src/actions/index.js b/src/action/index.js → src/actions/index.js
@@ -2,5 +2,5 @@ import { generateKeys } from './keys';
 import history from '../constants/history';
 import Navigation from './navigation';
 
-export const navigation = new Navigation(history);
-export { generateKeys };
+const navigation = new Navigation(history);
+export { generateKeys, navigation };
diff --git a/src/action/keys/index.js → src/actions/keys.js b/src/action/keys/index.js → src/actions/keys.js
@@ -1,5 +1,5 @@
 import { ECPair } from 'bitcoinjs-lib';
-import { getHexString } from '../../utils';
+import { getHexString } from '../utils';
 
 export const generateKeys = network => {
   const keys = ECPair.makeRandom({ network });

diff --git a/src/views/landingpage/landingpageActions.js → src/actions/landingPageActions.js b/src/views/landingpage/landingpageActions.js → src/actions/landingPageActions.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
-import { boltzApi } from '../../constants';
-import { splitPairId } from '../../utils';
-import * as actionTypes from '../../constants/actions';
+import { boltzApi } from '../constants';
+import { splitPairId } from '../utils';
+import * as actionTypes from '../constants/actions';
 
 const pairsRequest = () => ({
   type: actionTypes.PAIRS_REQUEST,

diff --git a/src/action/navigation/index.js → src/actions/navigation.js b/src/action/navigation/index.js → src/actions/navigation.js
@@ -1,4 +1,4 @@
-import * as routes from '../../constants/routes';
+import * as routes from '../constants/routes';
 
 class Navigation {
   constructor(history) {

diff --git a/src/views/refund/refundActions.js → src/actions/refundActions.js b/src/views/refund/refundActions.js → src/actions/refundActions.js
@@ -1,14 +1,14 @@
 import axios from 'axios';
 import { ECPair, address, Transaction } from 'bitcoinjs-lib';
 import { constructRefundTransaction, detectSwap } from 'boltz-core';
-import { boltzApi } from '../../constants';
-import * as actionTypes from '../../constants/actions';
+import { boltzApi } from '../constants';
+import * as actionTypes from '../constants/actions';
 import {
   getHexBuffer,
   getNetwork,
   getFeeEstimation,
   getExplorer,
-} from '../../utils';
+} from '../utils';
 
 const verifyRefundFile = (fileJSON, keys) => {
   const verify = keys.every(key => fileJSON.hasOwnProperty(key));

diff --git a/src/views/reverse/reverseActions.js → src/actions/reverseActions.js b/src/views/reverse/reverseActions.js → src/actions/reverseActions.js
@@ -2,14 +2,14 @@ import axios from 'axios';
 import EventSource from 'eventsource';
 import { Transaction, ECPair, address } from 'bitcoinjs-lib';
 import { detectSwap, constructClaimTransaction } from 'boltz-core';
-import * as actionTypes from '../../constants/actions';
-import { boltzApi, SwapUpdateEvent } from '../../constants';
+import * as actionTypes from '../constants/actions';
+import { boltzApi, SwapUpdateEvent } from '../constants';
 import {
   toSatoshi,
   getNetwork,
   getHexBuffer,
   getFeeEstimation,
-} from '../../utils';
+} from '../utils';
 
 let latestSwapEvent = '';
 

diff --git a/src/views/swap/swapActions.js → src/actions/swapActions.js b/src/views/swap/swapActions.js → src/actions/swapActions.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import EventSource from 'eventsource';
-import { boltzApi, SwapUpdateEvent } from '../../constants';
-import * as actionTypes from '../../constants/actions';
+import { boltzApi, SwapUpdateEvent } from '../constants';
+import * as actionTypes from '../constants/actions';
 
 export const completeSwap = () => {
   return {

diff --git a/src/asset/fonts/SFProText-Regular.ttf b/src/asset/fonts/SFProText-Regular.ttf
diff --git a/src/components/controls/index.js b/src/components/controls/index.js
@@ -23,14 +23,12 @@ const styles = theme => ({
   text: {
     color: '#fff',
     fontWeight: '300',
-    '@media (max-width: 425px)': {
-      fontSize: p => (p.mobile ? '20px' : undefined),
-    },
+    fontSize: p => (p.mobile ? '20px' : '25px'),
   },
   errorCommand: {
-    fontSize: '25px',
     paddingRight: '10px',
     color: theme.colors.white,
+    fontSize: p => (p.mobile ? '20px' : '25px'),
   },
   nextIcon: {
     paddingRight: '10px',

diff --git a/src/components/modalcontent/index.js b/src/components/modalcontent/index.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import View from '../view';
+import Link from '../link';
+
+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>
+);
+
+export default ModalContent;
diff --git a/src/components/taskbar/index.js → ...nts/navigationbar/desktopnavigationbar.js b/src/components/taskbar/index.js → ...nts/navigationbar/desktopnavigationbar.js
@@ -4,10 +4,55 @@ import injectSheet from 'react-jss';
 import View from '../view';
 import Button from '../button';
 import { network } from '../../constants';
-import { navigation } from '../../action/index';
+import { navigation } from '../../actions';
 
 const boltz_logo = require('../../asset/icons/boltz_logo.png');
 
+const DeskTopNavigationBar = ({ classes }) => (
+  <View className={classes.wrapper}>
+    <View className={classes.logo} onClick={() => navigation.navHome()}>
+      <img
+        src={boltz_logo}
+        height={40}
+        width={40}
+        className={classes.img}
+        alt="logo"
+      />
+      <span className={classes.logoText}>Boltz</span>
+      <span className={classes.subLogoText}>{network} beta</span>
+    </View>
+    <View className={classes.buttons}>
+      <Button
+        className={classes.responsiveBtn}
+        text="Swap"
+        onPress={() => navigation.navHome()}
+      />
+      <Button
+        className={classes.responsiveBtn}
+        text="Refund"
+        onPress={() => navigation.navRefund()}
+      />
+      <Button
+        className={classes.responsiveBtn}
+        text="FAQ"
+        onPress={() => navigation.navFaq()}
+      />
+      <Button
+        className={classes.responsiveBtn}
+        external
+        text="Twitter"
+        to="https://twitter.com/boltzhq"
+      />
+      <Button
+        className={classes.responsiveBtn}
+        external
+        text="Github"
+        to="https://github.com/BoltzExchange"
+      />
+    </View>
+  </View>
+);
+
 const styles = theme => ({
   wrapper: {
     flex: '1 1 content',
@@ -34,7 +79,7 @@ const styles = theme => ({
   },
   responsiveBtn: {
     '@media (max-width: 320px)': {
-      fontSize: '24px',
+      fontSize: '20px',
     },
   },
   img: {
@@ -55,53 +100,8 @@ const styles = theme => ({
   },
 });
 
-const TaskBar = ({ classes }) => (
-  <View className={classes.wrapper}>
-    <View className={classes.logo} onClick={() => navigation.navHome()}>
-      <img
-        src={boltz_logo}
-        height={38}
-        width={38}
-        className={classes.img}
-        alt="logo"
-      />
-      <span className={classes.logoText}>Boltz</span>
-      <span className={classes.subLogoText}>{network} beta</span>
-    </View>
-    <View className={classes.buttons}>
-      <Button
-        className={classes.responsiveBtn}
-        text="Swap"
-        onPress={() => navigation.navHome()}
-      />
-      <Button
-        className={classes.responsiveBtn}
-        text="Refund"
-        onPress={() => navigation.navRefund()}
-      />
-      <Button
-        className={classes.responsiveBtn}
-        text="FAQ"
-        onPress={() => navigation.navFaq()}
-      />
-      <Button
-        className={classes.responsiveBtn}
-        external
-        text="Twitter"
-        to="https://twitter.com/boltzhq"
-      />
-      <Button
-        className={classes.responsiveBtn}
-        external
-        text="Github"
-        to="https://github.com/BoltzExchange"
-      />
-    </View>
-  </View>
-);
-
-TaskBar.propTypes = {
+DeskTopNavigationBar.propTypes = {
   classes: PropTypes.object,
 };
 
-export default injectSheet(styles)(TaskBar);
+export default injectSheet(styles)(DeskTopNavigationBar);
diff --git a/src/components/navigationbar/index.js b/src/components/navigationbar/index.js
@@ -0,0 +1,14 @@
+import React, { lazy } from 'react';
+import PlatformSelector from '../../hoc/platformSelector';
+
+const DeskTopNavigationBar = lazy(() => import('./desktopnavigationbar'));
+const MobileNavigationBar = lazy(() => import('./mobilenavigationbar'));
+
+const NavigationBar = props => (
+  <PlatformSelector
+    mobile={<MobileNavigationBar {...props} />}
+    desktop={<DeskTopNavigationBar {...props} />}
+  />
+);
+
+export default NavigationBar;