Merge branch 'stable/4.24.0' into 'master'

Stable 4.24.0

See merge request minds/mobile-native!1770

Author: msantang78

.env.review

@@ -1 +1,3 @@
 ENV=review
+CODEPUSH_KEY_ANDROID=SkyqwsFZDiT0ae_fRTqSE0TBPoAFBkM3IHh07
+CODEPUSH_KEY_IOS=WVafjCYZztL9aDlEwLSpiFCjzuGlMZ5oKCi1c

App.tsx

@@ -17,6 +17,7 @@ import {
   YellowBox,
 } from 'react-native';
 import { Provider, observer } from 'mobx-react';
+import codePush from 'react-native-code-push';
 
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { NavigationContainer } from '@react-navigation/native';
@@ -39,14 +40,15 @@ import ErrorBoundary from './src/common/components/ErrorBoundary';
 import TosModal from './src/tos/TosModal';
 import ThemedStyles from './src/styles/ThemedStyles';
 import { StoresProvider } from './src/common/hooks/use-stores';
-import AppMessages from './AppMessages';
 import i18n from './src/common/services/i18n.service';
 
 import receiveShareService from './src/common/services/receive-share.service';
 import AppInitManager from './AppInitManager';
 import { WCContextProvider } from './src/blockchain/v2/walletconnect/WalletConnectContext';
 import analyticsService from './src/common/services/analytics.service';
+import AppMessageProvider from 'AppMessageProvider';
 import ExperimentsProvider from 'ExperimentsProvider';
+import { CODE_PUSH_KEY } from '~/config/Config';
 
 YellowBox.ignoreWarnings(['']);
 
@@ -100,12 +102,24 @@ class App extends Component<Props, State> {
     }
     RefreshControl.defaultProps.tintColor = ThemedStyles.getColor('IconActive');
     RefreshControl.defaultProps.colors = [ThemedStyles.getColor('IconActive')];
+
+    // Check for codepush update and restart app immediately if necessary
+    codePush.sync(
+      CODE_PUSH_KEY
+        ? {
+            installMode: codePush.InstallMode.ON_NEXT_RESTART, // install updates on app restart
+            deploymentKey: CODE_PUSH_KEY,
+          }
+        : {
+            mandatoryInstallMode: codePush.InstallMode.IMMEDIATE, // install mandatory updates immediately
+          },
+    );
   }
 
   /**
    * On component did mount
    */
-  async componentDidMount() {
+  componentDidMount() {
     // Register event listeners
     BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
     Linking.addEventListener('url', this.handleOpenURL);
@@ -185,21 +199,22 @@ class App extends Component<Props, State> {
               onStateChange={analyticsService.onNavigatorStateChange}>
               <StoresProvider>
                 <Provider key="app" {...stores}>
-                  <PortalProvider>
-                    <BottomSheetModalProvider>
-                      <ErrorBoundary
-                        message="An error occurred"
-                        containerStyle={ThemedStyles.style.centered}>
-                        <WCContextProvider>
-                          <NavigationStack
-                            key={ThemedStyles.theme + i18n.locale}
-                            showAuthNav={showAuthNav}
-                          />
-                        </WCContextProvider>
-                        <AppMessages />
-                      </ErrorBoundary>
-                    </BottomSheetModalProvider>
-                  </PortalProvider>
+                  <AppMessageProvider key={`message_${ThemedStyles.theme}`}>
+                    <PortalProvider>
+                      <BottomSheetModalProvider>
+                        <ErrorBoundary
+                          message="An error occurred"
+                          containerStyle={ThemedStyles.style.centered}>
+                          <WCContextProvider>
+                            <NavigationStack
+                              key={ThemedStyles.theme + i18n.locale}
+                              showAuthNav={showAuthNav}
+                            />
+                          </WCContextProvider>
+                        </ErrorBoundary>
+                      </BottomSheetModalProvider>
+                    </PortalProvider>
+                  </AppMessageProvider>
                 </Provider>
               </StoresProvider>
             </NavigationContainer>

AppInitManager.ts

@@ -76,15 +76,23 @@ export default class AppInitManager {
           }
         } catch (err) {
           logService.exception('[App] Error initializing the app', err);
-          Alert.alert(
-            'Error',
-            'There was an error initializing the app.\n Do you want to copy the stack trace.',
-            [
-              { text: 'Yes', onPress: () => Clipboard.setString(err.stack) },
-              { text: 'No' },
-            ],
-            { cancelable: false },
-          );
+          if (err instanceof Error) {
+            Alert.alert(
+              'Error',
+              'There was an error initializing the app.\n Do you want to copy the stack trace.',
+              [
+                {
+                  text: 'Yes',
+                  onPress: () => {
+                    if (err instanceof Error)
+                      Clipboard.setString(err.stack || '');
+                  },
+                },
+                { text: 'No' },
+              ],
+              { cancelable: false },
+            );
+          }
         }
       }
     });

AppMessageProvider.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { ThemeProvider } from 'styled-components';
+import {
+  ToastContext,
+  ToastProvider,
+} from '@msantang78/react-native-styled-toast';
+import { registerToast } from 'AppMessages';
+import ThemedStyles from '~/styles/ThemedStyles';
+
+export default function AppMessageProvider({ children }) {
+  const theme = React.useMemo(() => {
+    const bg = ThemedStyles.getColor('PrimaryBorder');
+
+    return {
+      space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
+      colors: {
+        text: ThemedStyles.getColor('PrimaryText'),
+        background: bg,
+        border: bg,
+        muted: bg,
+        success: '#7DBE31',
+        error: '#FC0021',
+        info: '#00FFFF',
+      },
+    };
+  }, [ThemedStyles.theme]);
+  return (
+    <ThemeProvider theme={theme}>
+      <ToastProvider position="TOP" offset={20} maxToasts={5}>
+        <ToastContext.Consumer>
+          {({ toast }) => {
+            registerToast(toast);
+            return <></>;
+          }}
+        </ToastContext.Consumer>
+        {children}
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}

AppMessages.tsx

@@ -1,150 +1,92 @@
-import React, { useCallback } from 'react';
-import FlashMessage, { showMessage } from 'react-native-flash-message';
-import { View, StyleSheet, Platform } from 'react-native';
-
-import IconIon from 'react-native-vector-icons/Ionicons';
-import IconAnt from 'react-native-vector-icons/AntDesign';
-import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';
-import type { MessageType, Icon } from 'react-native-flash-message';
 import ThemedStyles from './src/styles/ThemedStyles';
+import { ToastConfig } from '@msantang78/react-native-styled-toast/dist/Toast';
+
+let toast: undefined | ((config: ToastConfig) => void);
+
+export function registerToast(t) {
+  toast = t;
+}
+
+type MessageType = 'success' | 'info' | 'warning' | 'danger';
+
+function getIcon(type: MessageType): any {
+  switch (type) {
+    case 'success':
+      return {
+        iconColor: '#59A05E',
+        iconFamily: 'Ionicons',
+        iconName: 'md-checkmark',
+      };
+    case 'warning':
+      return {
+        iconColor: '#D49538',
+        iconFamily: 'Ionicons',
+        iconName: 'ios-warning',
+      };
+    case 'info':
+      return {
+        iconColor: '#5282A7',
+        iconFamily: 'EvilIcons',
+        iconName: 'exclamation',
+      };
+    case 'danger':
+      return {
+        iconColor: '#CA4A34',
+        iconFamily: 'MaterialCommunityIcons',
+        iconName: 'alert-octagon',
+      };
+  }
+  return {};
+}
 
 /**
- *  Show a notification message to the user
+ * Show a notification message to the user
  * @param message
  * @param type
- * @param duration use 0 for permanent message
+ * @param duration
+ * @param subMessage
+ * @param shouldVibrate
  */
 export const showNotification = (
   message: string,
   type: MessageType = 'info',
   duration: number = 2800,
-  position: 'top' | 'bottom' | 'center' | undefined = 'bottom',
+  subMessage?: string,
+  shouldVibrate = false,
+  onPress?: () => void,
 ) => {
-  showMessage({
-    floating: true,
-    position,
-    message,
-    icon: type,
-    duration,
-    backgroundColor: '#FFFFFF',
-    //@ts-ignore style parameter is not defined on the type
-    style: styles.container,
-    titleStyle: styles.title,
-    color: '#7D7D82',
-    type,
-  });
-};
+  if (toast) {
+    toast({
+      closeIconColor: ThemedStyles.getColor('SecondaryText'),
+      message,
+      onPress,
+      hideAccent: true,
+      shouldVibrate,
+      allowFontScaling: false,
+      // hideCloseIcon: true,
+      duration,
+      subMessage,
+      ...getIcon(type),
+      closeIconSize: 18,
+      messageProps: {
+        fontFamily: 'Roboto-Medium',
+        fontSize: 15,
+      },
+      iconSize: 24,
+      toastStyles: {
+        borderRadius: 4,
+      },
+      shadow: {
+        shadowColor: '#000000',
+        shadowOffset: {
+          width: 0,
+          height: 1,
+        },
+        shadowOpacity: 0.5,
+        shadowRadius: 2,
 
-/**
- * Icon renderer
- * @param icon
- */
-const renderNotificationIcon = (icon: Icon = 'success') => {
-  const theme = ThemedStyles.style;
-  switch (icon) {
-    case 'success':
-      return (
-        <View style={[styles.success, theme.bgSuccessBackground]}>
-          <IconIon name="md-checkmark" color="white" size={25} />
-        </View>
-      );
-    case 'info':
-      return (
-        <View style={[styles.info, theme.bgInfoBackground]}>
-          <IconAnt name="exclamationcircleo" color="white" size={25} />
-        </View>
-      );
-    case 'warning':
-      return (
-        <View style={[styles.warning, theme.bgWarningBackground]}>
-          <IconIon name="ios-warning" color="white" size={25} />
-        </View>
-      );
-    case 'danger':
-      return (
-        <View style={[styles.danger, theme.bgDangerBackground]}>
-          <IconMC name="alert-octagon" color="white" size={25} />
-        </View>
-      );
+        elevation: 4,
+      },
+    });
   }
-  return null;
 };
-
-/**
- * App messages component
- */
-const AppMessages = () => {
-  const renderNotification = useCallback(
-    (message: any) =>
-      message.renderCustomContent ? message.renderCustomContent() : null,
-    [],
-  );
-  return (
-    <FlashMessage
-      //@ts-ignore renderCustomContent prop is not defined on the type
-      renderCustomContent={renderNotification}
-      renderFlashMessageIcon={renderNotificationIcon}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  info: {
-    height: '100%',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  success: {
-    height: '100%',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  danger: {
-    height: '100%',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  warning: {
-    height: '100%',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 17,
-    padding: 15,
-    paddingRight: 15,
-    marginRight: 55,
-    alignSelf: 'center',
-    flexWrap: 'wrap',
-  },
-  container: {
-    shadowColor: 'black',
-    shadowOpacity: Platform.select({ ios: 0.2, android: 0.3 }),
-    shadowOffset: { width: 0, height: 5 },
-    shadowRadius: 10,
-    elevation: 15,
-    alignItems: 'center',
-    minHeight: 70,
-    borderRadius: 0,
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-    marginTop: 0,
-    marginLeft: 0,
-    marginRight: 0,
-    marginBottom: 0,
-  },
-  messageHorizontalLine: {
-    marginLeft: -20,
-    marginRight: -20,
-  },
-  messageVerticalLine: {
-    marginTop: -10,
-    marginBottom: -14,
-  },
-});
-
-export default AppMessages;