Merge pull request #1080 from lightninglabs/dev/notification-dropdown

Dev/notification dropdown

mobile/package-lock.json

@@ -9186,6 +9186,25 @@
         "public-encrypt": "^4.0.0"
       }
     },
+    "react-native-dropdownalert": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-native-dropdownalert/-/react-native-dropdownalert-3.10.0.tgz",
+      "integrity": "sha512-cwKiy1dDCbEVm5GTgas7ktmHbE+hYJhAaE++h4U0Tbq1Bl6BV3bC8L3tTY+igFBOKiH1kQUCSF+9YgrdoifFRA==",
+      "requires": {
+        "prop-types": "15.5.10"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.5.10",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz",
+          "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=",
+          "requires": {
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.3.1"
+          }
+        }
+      }
+    },
     "react-native-gesture-handler": {
       "version": "1.0.14",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.0.14.tgz",

mobile/package.json

@@ -26,6 +26,7 @@
     "qr-image": "^3.2.0",
     "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-native-dropdownalert": "^3.10.0",
     "react-navigation": "^3.0.9"
   }
 }

mobile/rn-cli.config.js

@@ -28,6 +28,10 @@ module.exports = {
       protobufjs: path.resolve(__dirname, 'node_modules/protobufjs'),
       sinon: path.resolve(__dirname, 'node_modules/sinon'),
       '@babel/runtime': path.resolve(__dirname, 'node_modules/@babel/runtime'),
+      'react-native-dropdownalert': path.resolve(
+        __dirname,
+        'node_modules/react-native-dropdownalert'
+      ),
     },
   },
   projectRoot: path.resolve(__dirname),

src/action/notification.js

@@ -14,6 +14,14 @@ class NotificationAction {
     this._nav = nav;
   }
 
+  /**
+   * Set the dropdown component used on mobile.
+   * @param {Object} dropdown The component reference
+   */
+  setDropdown(dropdown) {
+    this._dropdown = dropdown;
+  }
+
   /**
    * The main api used to display notifications thorughout the application. Several
    * types of notifications can be displayed including `info` `error` or `success`.
@@ -43,6 +51,10 @@ class NotificationAction {
     if (!wait) this._store.unseenNtfnCount += 1;
     clearTimeout(this.tdisplay);
     this.tdisplay = setTimeout(() => this.close(), NOTIFICATION_DELAY);
+    // render dropdown on mobile
+    if (this._dropdown) {
+      this._dropdown.alertWithType('custom', '', msg);
+    }
   }
 
   /**

src/component/notification-wrapper.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { NotificationBar } from './notification';
+import DropdownAlert from 'react-native-dropdownalert';
+import { Alert } from './notification';
+import { SmallSpinner } from './spinner';
+import { color, font } from './style';
+import { NOTIFICATION_DELAY } from '../config';
 
 //
 // Notification Wrapper
@@ -12,23 +16,51 @@ const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
   },
+  dropdown: {
+    backgroundColor: color.blackDark,
+  },
+  text: {
+    fontFamily: 'OpenSans Regular',
+    fontSize: font.sizeXS,
+    lineHeight: font.lineHeightXS,
+    color: color.white,
+  },
+  alert: {
+    alignSelf: 'center',
+    marginLeft: 15,
+    marginRight: 2,
+  },
+  spinner: {
+    alignSelf: 'flex-end',
+    marginRight: 15,
+    marginBottom: 6,
+  },
 });
 
-const NotificationWrapper = ({ store, children }) => {
-  const { lastNotification, displayNotification } = store;
-  return (
-    <View style={styles.wrapper}>
-      <NotificationBar
-        notification={lastNotification}
-        display={displayNotification}
-      />
-      {children}
-    </View>
-  );
-};
+const NotificationWrapper = ({ store, notify, children }) => (
+  <View style={styles.wrapper}>
+    {children}
+    <DropdownAlert
+      ref={ref => notify.setDropdown(ref)}
+      containerStyle={styles.dropdown}
+      messageStyle={styles.text}
+      renderImage={() => (
+        <Alert
+          type={(store.lastNotification || {}).type}
+          style={styles.alert}
+        />
+      )}
+      showCancel={(store.lastNotification || {}).waiting}
+      renderCancel={() => <SmallSpinner style={styles.spinner} />}
+      closeInterval={NOTIFICATION_DELAY}
+      replaceEnabled={false}
+    />
+  </View>
+);
 
 NotificationWrapper.propTypes = {
   store: PropTypes.object.isRequired,
+  notify: PropTypes.object.isRequired,
   children: PropTypes.node,
 };
 

src/view/main-mobile.js

@@ -46,6 +46,7 @@ import TransactionDetailView from './transaction-detail-mobile';
 
 import {
   nav,
+  notify,
   wallet,
   payment,
   invoice,
@@ -263,7 +264,7 @@ export default class App extends React.Component {
   render() {
     return (
       <FontLoader>
-        <NotificationWrapper store={store}>
+        <NotificationWrapper store={store} notify={notify}>
           <AppContainer ref={navRef => nav.setTopLevelNavigator(navRef)} />
         </NotificationWrapper>
       </FontLoader>