update dropdown notification

FantomWallet/src/App.js

@@ -1,36 +1,30 @@
-/* eslint-disable*/
-
 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
  *
  * @format
  * @flow
  */
-import "~/utils/shim"
+import "~/utils/shim";
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
-import { StatusBar } from 'react-native'
+import { StatusBar } from 'react-native';
 import { PersistGate } from 'redux-persist/integration/react';
 
 import RootNavigator from '~/navigation/RootNavigator';
-import { NavigationService } from '~/navigation/helpers'
+import { NavigationService } from '~/navigation/helpers';
 import { store, persistor } from '~/redux/store';
+import DropdownNotification from '~/components/DropdownNotification';
 
-// from debug network
-// $FlowFixMe
-GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
-
-export default () => {
-  return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <>
-          <StatusBar barStyle="light-content" />
-          <RootNavigator ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)} />
-        </>
-      </PersistGate>
-    </Provider>
-  );
-}
+export default () => (
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <>
+        <StatusBar barStyle="light-content" />
+        <RootNavigator ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)} />
+        <DropdownNotification />
+      </>
+    </PersistGate>
+  </Provider>
+);

FantomWallet/src/components/DropdownNotification/DropdownNotification.js

@@ -0,0 +1,38 @@
+// @flow
+import React, { useRef, useEffect } from 'react';
+import { connect } from 'react-redux';
+import DropdownAlert from 'react-native-dropdownalert';
+
+import { setDopdownAlert as setDopdownAlertAction } from '~/redux/notification/actions';
+
+type Props = {
+  type: string,
+  text: string | false,
+  style: { [string]: string },
+  setDopdownAlert: (string, false) => void
+}
+
+const DropdownNotification = ({ type, text, style = {}, setDopdownAlert }: Props) => {
+  const _dropdown: any = useRef(null);
+  const close = () => setDopdownAlert('', false);
+  useEffect(() => {
+    if (!text) return;
+    _dropdown.current.alertWithType(type, text, '');
+  }, [text]);
+  return (
+    <DropdownAlert
+      containerStyle={{ backgroundColor: 'rgb(0,168,251)', ...style }}
+      ref={_dropdown}
+      onClose={close}
+      useNativeDriver
+    />
+  );
+};
+
+export default connect(state => ({
+  type: state.notification.type,
+  text: state.notification.text,
+  style: state.notification.style,
+}), ({
+  setDopdownAlert: setDopdownAlertAction,
+}))(DropdownNotification);

FantomWallet/src/components/DropdownNotification/index.js

@@ -0,0 +1 @@
+export { default } from './DropdownNotification';

FantomWallet/src/redux/keys/saga/generateWallet.js

@@ -5,6 +5,7 @@ import EthUtil from 'ethereumjs-util';
 import Hdkey from 'hdkey';
 
 import { types, setKeys } from '../actions';
+import { setDopdownAlert } from '~/redux/notification/actions';
 
 type Action = {
   payload: {
@@ -26,7 +27,7 @@ export function* generateWallet({ payload: { mnemonic, cb } }: Action): any {
     yield put(setKeys({ masterKey, privateKey, publicKey }));
     cb();
   } catch (e) {
-    console.log(e);
+    yield put(setDopdownAlert('error', e.message));
   }
 }
 

FantomWallet/src/redux/notification/actions.js

@@ -0,0 +1,13 @@
+// @flow
+export const types = {
+  SET_DROPDOWN_ALERT: 'notification/set_dropdown_alert',
+};
+export const setDopdownAlert = (
+  type: string, text: string | false, style?: { [string]: string } = {},
+) => ({
+  type: types.SET_DROPDOWN_ALERT,
+  payload: {
+    type, text, style,
+  },
+});
+

FantomWallet/src/redux/notification/reducer.js

@@ -0,0 +1,35 @@
+// @flow
+import { types } from './actions';
+
+type Notification = {
+  type: string,
+  text: string | false,
+  style?: { [string]: string }
+};
+
+type actionType = {
+  type: string,
+  payload: Notification
+};
+
+const initialState = {
+  type: '',
+  text: false,
+  style: {},
+};
+
+const notificationReducer = (state: Notification = initialState, action: actionType) => {
+  switch (action.type) {
+    case types.SET_DROPDOWN_ALERT:
+      return {
+        ...state,
+        type: action.payload.type,
+        text: action.payload.text,
+        style: action.payload.style,
+      };
+    default:
+      return state;
+  }
+};
+
+export default notificationReducer;

FantomWallet/src/redux/rootReducer.js

@@ -3,11 +3,13 @@ import { combineReducers } from 'redux';
 import keys from './keys/reducer';
 import addressBook from './addressBook/reducer';
 import wallet from './wallet/reducer';
+import notification from './notification/reducer';
 
 const appReducers = combineReducers({
   keys,
   addressBook,
   wallet,
+  notification,
 });
 
 export default appReducers;

FantomWallet/src/redux/store.js

@@ -8,6 +8,7 @@ import rootSaga from './rootSaga';
 const persistConfig = {
   key: 'root',
   storage,
+  blacklist: ['notification'],
 };
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

FantomWallet/src/redux/wallet/saga/getBalance.js

@@ -3,6 +3,7 @@ import { takeLatest, put, select } from 'redux-saga/effects';
 import Web3 from 'web3';
 
 import { types, setBalance } from '../actions';
+import { setDopdownAlert } from '~/redux/notification/actions';
 import Web3Agent from '~/services/api/web3';
 import { scientificToDecimal } from '../../../utils/converts';
 
@@ -16,6 +17,7 @@ export function* getBalance(): any {
 
     yield put(setBalance({ balance, loading: false }));
   } catch (e) {
+    yield put(setDopdownAlert('error', e.message));
     yield put(setBalance({ balance: '0', loading: false }));
   }
 }

FantomWallet/src/services/api/web3.js

@@ -53,6 +53,12 @@ class Web3Agent {
   }
 }
 
+
+// from debug network
+/* eslint-disable no-undef */
+// $FlowFixMe
+GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
+
 export default {
   Fantom: new Web3Agent(URL_FANTOM),
   Ethereum: new Web3Agent(URL_ETHEREUM),

FantomWallet/src/views/Home/Deposit/__snapshots__/index.test.js.snap

@@ -39,21 +39,7 @@ exports[`renders correctly 1`] = `
         }
       }
     />
-    <DepositNavigationBar
-      renderToastNotification={[Function]}
-    />
+    <DepositNavigationBar />
   </View>
-  <RNDropDownWallet
-    containerStyle={
-      Object {
-        "backgroundColor": "rgb(0,168,251)",
-      }
-    }
-    style={
-      Object {
-        "backgroundColor": "red",
-      }
-    }
-  />
 </View>
 `;

FantomWallet/src/views/Home/Deposit/depositView/__snapshots__/index.test.js.snap

@@ -9,8 +9,6 @@ exports[`renders correctly 1`] = `
     }
   }
 >
-  <Connect(DepositViewInfo)
-    renderToastNotification={[Function]}
-  />
+  <Connect(DepositViewInfoContainer) />
 </View>
 `;

FantomWallet/src/views/Home/Deposit/depositView/index.js

@@ -6,17 +6,12 @@ import { View } from 'react-native';
 import styles from './styles';
 import DepositViewInfo from '../DepositViewInfo';
 
-type Props = {
-  renderToastNotification: () => void,
-  navigation: any,
-};
-
 /**
  * DepositNavigationBar: This component is meant for handling deposit screen.
  */
-const DepositNavigationBar = ({ navigation, renderToastNotification }: Props) => (
+const DepositNavigationBar = () => (
   <View style={styles.mainContainerStyle}>
-    <DepositViewInfo renderToastNotification={renderToastNotification} navigation={navigation} />
+    <DepositViewInfo />
   </View>
 );
 

FantomWallet/src/views/Home/Deposit/depositViewInfo/__snapshots__/index.test.js.snap

@@ -9,11 +9,25 @@ exports[`renders correctly 1`] = `
     }
   }
 >
-  <QRCodeShare
-    billingAmount=""
-    copyAddress={[Function]}
-    qrLink=""
-  />
+  <View
+    style={
+      Object {
+        "marginBottom": 26.68,
+        "marginTop": 12,
+        "padding": 16,
+      }
+    }
+  >
+    <QRGenerator
+      billingAmount=""
+      qrLink=""
+      titleText="Address QR Code"
+    />
+    <ForwardRef(QRCodeSave)
+      amount=""
+      content=""
+    />
+  </View>
   <BillingAmountScreen
     headerText="FTM"
     onAmountChange={[Function]}
@@ -84,28 +98,5 @@ exports[`renders correctly 1`] = `
       }
     }
   />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "position": "absolute",
-        "top": 0,
-        "width": 750,
-      }
-    }
-  >
-    <RNDropDownWallet
-      containerStyle={
-        Object {
-          "backgroundColor": "rgb(0,168,251)",
-        }
-      }
-      style={
-        Object {
-          "backgroundColor": "red",
-        }
-      }
-    />
-  </View>
 </ScrollViewMock>
 `;

FantomWallet/src/views/Home/Deposit/depositViewInfo/index.js

@@ -14,16 +14,17 @@ import QRGenerator from '~/components/QRCode/QRCodeGenerator';
 import QRCodeSave from '~/components/QRCode/QRCodeSave';
 import BillingAmountScreen from '../BillingAmountView/index';
 import { DEVICE_HEIGHT, DEVICE_WIDTH } from '~/common/constants';
+import { setDopdownAlert } from '~/redux/notification/actions';
 
 type Props = {
   publicKey: string,
-  renderToastNotification: (string) => void,
+  setAlert: (string, string) => void,
 }
 
 /**
  * DepositViewInfo: This component is meant for redering deposit screen related information.
  */
-export const DepositViewInfoContainer = ({ publicKey, renderToastNotification }: Props) => {
+export const DepositViewInfoContainer = ({ publicKey, setAlert }: Props) => {
   const [amount, setAmount] = useState('');
   const [qrAddress, setQrAddress] = useState('');
   const scrollView = useRef<any>(null);
@@ -40,7 +41,7 @@ export const DepositViewInfoContainer = ({ publicKey, renderToastNotification }:
   const onCopyAddress = async () => {
     // Copies address to clipboard
     await Clipboard.setString(qrAddress);
-    renderToastNotification('Copied');
+    setAlert('custom', 'Copied');
   };
 
   const onTextFieldFocus = () => {
@@ -103,8 +104,8 @@ export const DepositViewInfoContainer = ({ publicKey, renderToastNotification }:
   );
 };
 
-const mapStateToProps = state => ({
+export default connect(state => ({
   publicKey: state.keys.publicKey,
-});
-
-export default connect(mapStateToProps)(DepositViewInfoContainer);
+}), ({
+  setAlert: setDopdownAlert,
+}))(DepositViewInfoContainer);