feat: add better alerts for main event (#135)

* feat: add better visual alerts for events
BoltzExchange · Mar 22, 2019 · b4b6de4 · b4b6de4
1 parent 4fde169
commit b4b6de4
Show file tree

Hide file tree

Showing 13 changed files with 217 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "react-icons": "^3.5.0",
     "react-jss": "^8.6.1",
     "react-loader-spinner": "^2.3.0",
+    "react-notifications-component": "^1.0.1",
     "react-redux": "^5.1.1",
     "react-responsive-modal": "^3.6.0",
     "react-scripts": "^2.1.8",

diff --git a/src/constants/actions/index.js b/src/constants/actions/index.js
@@ -11,6 +11,7 @@ export const PAIRS_REQUEST = 'PAIRS_REQUEST';
 export const PAIRS_RESPONSE = 'PAIRS_RESPONSE';
 export const LIMITS_REQUEST = 'LIMITS_REQUEST';
 export const LIMITS_RESPONSE = 'LIMITS_RESPONSE';
+export const RESOURCE_ERROR = 'RESOURCE_ERROR';
 
 /**
  * Swap actions

diff --git a/src/constants/messages.js b/src/constants/messages.js
@@ -0,0 +1,10 @@
+export const lostConnection = {
+  title: 'Lost connection',
+  message:
+    'We lost the connection to Boltz and are trying to reconnect. Do not close this window!',
+};
+
+export const reconnected = {
+  title: 'Reestablished connection',
+  message: 'We have reestablished connection to Boltz!',
+};
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
@@ -150,3 +150,33 @@ export const getFeeEstimation = callback => {
       });
   };
 };
+
+/**
+ * @param {{message: string, title: string }} info title and message
+ * @param {number} type type of alert
+ */
+export const notificationData = (info, alertType) => {
+  let type;
+  switch (alertType) {
+    case 0:
+      type = 'danger';
+      break;
+    case 1:
+      type = 'warning';
+      break;
+    default:
+      type = 'success';
+      break;
+  }
+  return {
+    message: info.message,
+    title: info.title,
+    type,
+    insert: 'top-left',
+    container: 'top-left',
+    animationIn: ['animated', 'fadeIn'],
+    animationOut: ['animated', 'fadeOut'],
+    dismiss: { duration: 3500 },
+    dismissable: { click: true },
+  };
+};
diff --git a/src/views/index.js b/src/views/index.js
@@ -4,6 +4,7 @@ import { ThemeProvider, preset, jss } from 'react-jss';
 import store from '../state';
 import theme from '../constants/theme';
 import Router from '../views/router';
+import 'react-notifications-component/dist/theme.css';
 
 jss.setup(preset);
 class App extends Component {

diff --git a/src/views/landingpage/index.js b/src/views/landingpage/index.js
@@ -9,6 +9,7 @@ const mapStateToProps = state => ({
   rates: state.landingpageReducer.rates,
   currencies: state.landingpageReducer.currencies,
   limits: state.landingpageReducer.limits,
+  errorMessage: state.landingpageReducer.errorMessage,
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/src/views/landingpage/landingpage.js b/src/views/landingpage/landingpage.js
@@ -11,109 +11,21 @@ import BackGround from '../../components/background';
 import Button from '../../components/button';
 import Link from '../../components/link';
 import { bitcoinNetwork, litecoinNetwork } from '../../constants';
+import { notificationData } from '../../scripts/utils';
+import ReactNotification from 'react-notifications-component';
 
 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: {
-    flex: '1 0 100%',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    '@media (max-width: 800px)': {
-      flexDirection: 'column',
-    },
-  },
-  infoWrapper: {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: theme.fontSize.sizeXXL,
-    color: theme.colors.white,
-    '@media (min-width: 1500px)': {
-      fontSize: theme.fontSize.sizeXXXL,
-    },
-  },
-  description: {
-    fontSize: theme.fontSize.sizeXXL,
-    '@media (min-width: 1500px)': {
-      fontSize: theme.fontSize.sizeXXXL,
-    },
-  },
-  loading: {
-    width: '600px',
-    height: '400px',
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.white,
-    '@media (min-width: 1500px)': {
-      width: '800px',
-      height: '600px',
-    },
-  },
-  loadingLogo: {
-    width: '200px',
-    height: '200px',
-    display: 'block',
-    marginBottom: '10px',
-  },
-  loadingText: {
-    fontSize: '20px',
-  },
-});
-
 class LandingPage extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       isOpen: false,
     };
+    this.notificationDom = React.createRef();
   }
 
-  componentDidMount() {
+  componentDidMount = () => {
     this.props.getPairs(() => {
       this.props.getLimits(this.props.rates, () => {});
     });
@@ -123,9 +35,25 @@ class LandingPage extends React.Component {
         this.webln = provider;
       });
     } catch (error) {
-      console.log(`Could not enable webln: ${error}`);
+      this.addNotification(
+        {
+          message: error.toString(),
+          title: 'Could not enable webln',
+        },
+        1
+      );
     }
-  }
+  };
+
+  componentDidUpdate = () => {
+    if (this.props.errorMessage) {
+      this.addNotification(this.props.errorMessage, 0);
+    }
+  };
+
+  addNotification = (info, type) => {
+    this.notificationDom.current.addNotification(notificationData(info, type));
+  };
 
   toggleModal = () => {
     this.setState(prev => ({ isOpen: !prev.isOpen }));
@@ -153,6 +81,7 @@ class LandingPage extends React.Component {
 
     return (
       <BackGround>
+        <ReactNotification ref={this.notificationDom} />
         <TaskBar goHome={goHome} goRefund={goRefund} goFaq={goFaq} />
         <View className={classes.wrapper}>
           <View className={classes.infoWrapper}>
@@ -234,6 +163,95 @@ LandingPage.propTypes = {
   rates: PropTypes.object.isRequired,
   currencies: PropTypes.array.isRequired,
   limits: PropTypes.object.isRequired,
+  errorMessage: PropTypes.object.isRequired,
 };
 
+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: {
+    flex: '1 0 100%',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  infoWrapper: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: theme.fontSize.sizeXXL,
+    color: theme.colors.white,
+    '@media (min-width: 1500px)': {
+      fontSize: theme.fontSize.sizeXXXL,
+    },
+  },
+  description: {
+    fontSize: theme.fontSize.sizeXXL,
+    '@media (min-width: 1500px)': {
+      fontSize: theme.fontSize.sizeXXXL,
+    },
+  },
+  loading: {
+    width: '600px',
+    height: '400px',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.white,
+    '@media (min-width: 1500px)': {
+      width: '800px',
+      height: '600px',
+    },
+  },
+  loadingLogo: {
+    width: '200px',
+    height: '200px',
+    display: 'block',
+    marginBottom: '10px',
+  },
+  loadingText: {
+    fontSize: '20px',
+  },
+});
+
 export default injectSheet(styles)(LandingPage);
diff --git a/src/views/landingpage/landingpageActions.js b/src/views/landingpage/landingpageActions.js
@@ -22,6 +22,11 @@ const limitsResponse = data => ({
   payload: data,
 });
 
+const loadingResourceError = message => ({
+  type: actionTypes.RESOURCE_ERROR,
+  payload: message,
+});
+
 const parseRates = pairs => {
   const rates = {};
 
@@ -98,7 +103,13 @@ export const getPairs = cb => {
         cb();
       })
       .catch(error => {
-        window.alert(`Could not get rates: ${error}`);
+        const errorMessage = error.toString();
+        dispatch(
+          loadingResourceError({
+            message: errorMessage,
+            title: 'Could not get rates',
+          })
+        );
       });
   };
 };
@@ -142,7 +153,11 @@ export const getLimits = (rates, cb) => {
         cb();
       })
       .catch(error => {
-        window.alert(`Could not get limits: ${error}`);
+        const errorMessage = error.toString();
+        loadingResourceError({
+          message: errorMessage,
+          title: 'Could not get limits',
+        });
       });
   };
 };