Add notifications playground

apps/wallet-mobile/ios/Podfile.lock

@@ -361,6 +361,8 @@ PODS:
   - react-native-mmkv (2.11.0):
     - MMKV (>= 1.2.13)
     - React-Core
+  - react-native-notifications (5.1.0):
+    - React-Core
   - react-native-pager-view (6.2.0):
     - React-Core
   - react-native-quick-base64 (2.0.6):
@@ -595,6 +597,7 @@ DEPENDENCIES:
   - "react-native-haskell-shelley (from `../../../node_modules/@emurgo/csl-mobile-bridge`)"
   - "react-native-message_signing-library (from `../../../node_modules/@emurgo/msl-mobile-bridge`)"
   - react-native-mmkv (from `../../../node_modules/react-native-mmkv`)
+  - react-native-notifications (from `../../../node_modules/react-native-notifications`)
   - react-native-pager-view (from `../../../node_modules/react-native-pager-view`)
   - react-native-quick-base64 (from `../../../node_modules/react-native-quick-base64`)
   - react-native-randombytes (from `../../../node_modules/react-native-randombytes`)
@@ -750,6 +753,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/@emurgo/msl-mobile-bridge"
   react-native-mmkv:
     :path: "../../../node_modules/react-native-mmkv"
+  react-native-notifications:
+    :path: "../../../node_modules/react-native-notifications"
   react-native-pager-view:
     :path: "../../../node_modules/react-native-pager-view"
   react-native-quick-base64:
@@ -831,7 +836,7 @@ SPEC CHECKSUMS:
   amplitude-react-native: 1ea3d5e1f80ccc357dd178c55c29e51c89f1cd11
   boost: 57d2868c099736d80fcd648bf211b4431e51a558
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
   EXBarCodeScanner: 8e23fae8d267dbef9f04817833a494200f1fce35
   EXCamera: 0fbfa338a3776af2722d626a3437abe33f708aad
@@ -849,7 +854,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 12ea01e587c9594e7b144e1bfc86ac4d9ac28fde
   FBReactNativeSpec: faca7d16c37626ca5780a87adef703817722fe61
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: d7cc127932c89c53374452d6f93473f1970d8e88
   libaom: 144606b1da4b5915a1054383c3a4459ccdb3c661
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
@@ -885,6 +890,7 @@ SPEC CHECKSUMS:
   react-native-haskell-shelley: f3eaa102ff7b60063a4aff8bd36d23cb4de49c2e
   react-native-message_signing-library: 040317fed382be05d79e2ecbe5852d1a20ce68df
   react-native-mmkv: e97c0c79403fb94577e5d902ab1ebd42b0715b43
+  react-native-notifications: 4601a5a8db4ced6ae7cfc43b44d35fe437ac50c4
   react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
   react-native-quick-base64: 62290829c619fbabca4c41cfec75ae759d08fc1c
   react-native-randombytes: b6677f7d495c27e9ee0dbd77ebc97b3c59173729

apps/wallet-mobile/ios/yoroi/AppDelegate.mm

@@ -1,6 +1,7 @@
 #import <React/RCTLinkingManager.h>
 #import "AppDelegate.h"
 #import "RNBootSplash.h"
+#import "RNNotifications.h"
 
 #import <React/RCTBundleURLProvider.h>
 
@@ -16,6 +17,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   // react-native-bootsplash
   UIView *rootView = self.window.rootViewController.view;
   [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
+  [RNNotifications startMonitorNotifications];
 
   return [super application:application didFinishLaunchingWithOptions:launchOptions];
 }
@@ -53,4 +55,17 @@ - (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull N
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
 }
+
+- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
+  [RNNotifications didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+}
+
+- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
+  [RNNotifications didFailToRegisterForRemoteNotificationsWithError:error];
+}
+
+- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
+  [RNNotifications didReceiveBackgroundNotification:userInfo withCompletionHandler:completionHandler];
+}
+
 @end

apps/wallet-mobile/package.json

@@ -180,6 +180,7 @@
     "react-native-localize": "^3.0.2",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-mmkv": "^2.11.0",
+    "react-native-notifications": "^5.1.0",
     "react-native-pager-view": "^6.2.0",
     "react-native-paper": "4.12.8",
     "react-native-permissions": "^3.8.0",

apps/wallet-mobile/src/AppNavigator.tsx

@@ -38,6 +38,7 @@ import {useStatusBar} from './hooks/useStatusBar'
 import {agreementDate} from './kernel/config'
 import {AppRoutes, defaultStackNavigationOptions} from './kernel/navigation'
 import {WalletNavigator} from './WalletNavigator'
+import {NotificationsDevScreen} from './features/Notifications/useCases/NotificationsDevScreen'
 
 const Stack = createStackNavigator<AppRoutes>()
 const navRef = React.createRef<NavigationContainerRef<ReactNavigation.RootParamList>>()
@@ -203,6 +204,8 @@ export const AppNavigator = () => {
               <Stack.Screen name="playground" component={Playground} />
 
               <Stack.Screen name="portfolio-dashboard" component={PortfolioScreen} />
+
+              <Stack.Screen name="notifications" component={NotificationsDevScreen} />
             </Stack.Group>
           )}
         </Stack.Navigator>

apps/wallet-mobile/src/features/Dev/DeveloperScreen.tsx

@@ -174,6 +174,8 @@ export const DeveloperScreen = () => {
           title="RO Mainnet For Forced Addresses"
         />
 
+        <Button style={styles.button} onPress={() => navigation.navigate('notifications')} title="Notifications" />
+
         {!wallet?.isMainnet && (
           <>
             <TextInput

apps/wallet-mobile/src/features/Notifications/useCases/NotificationsDevScreen.tsx

@@ -0,0 +1,41 @@
+import {Text, View} from 'react-native'
+import * as React from 'react'
+import {SafeAreaView} from 'react-native-safe-area-context'
+import {Button} from '../../../components'
+import {useEffect} from 'react'
+import {Notifications, Notification} from 'react-native-notifications'
+
+export const NotificationsDevScreen = () => {
+  useEffect(() => {
+    Notifications.registerRemoteNotifications()
+
+    const s = Notifications.events().registerNotificationReceivedForeground(
+      (notification: Notification, completion) => {
+        console.log(`Notification received in foreground: ${notification.title} : ${notification.body}`)
+        completion({alert: true, sound: false, badge: false})
+      },
+    )
+
+    return () => {
+      s.remove()
+    }
+  }, [])
+
+  const handleOnPress = () => {
+    const notification = new Notification({
+      title: 'Test',
+      body: 'Test',
+      sound: 'default',
+    })
+    Notifications.postLocalNotification(notification.payload)
+  }
+
+  return (
+    <SafeAreaView edges={['bottom', 'top', 'left', 'right']}>
+      <View style={{padding: 16}}>
+        <Text style={{fontSize: 24}}>Notifications Playground</Text>
+        <Button title="Show random notification" shelleyTheme onPress={handleOnPress} />
+      </View>
+    </SafeAreaView>
+  )
+}

apps/wallet-mobile/src/kernel/navigation.tsx

@@ -381,6 +381,7 @@ export type AppRoutes = PortfolioRoutes & {
   'choose-biometric-login': undefined
   'dark-theme-announcement': undefined
   'setup-wallet': undefined
+  notifications: undefined
 }
 export type AppRouteNavigation = StackNavigationProp<AppRoutes>
 

apps/wallet-mobile/translations/messages/src/AppNavigator.json

@@ -4,59 +4,59 @@
     "defaultMessage": "!!!Enter PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 232,
+      "line": 235,
       "column": 17,
-      "index": 8456
+      "index": 8640
     },
     "end": {
-      "line": 235,
+      "line": 238,
       "column": 3,
-      "index": 8546
+      "index": 8730
     }
   },
   {
     "id": "components.initialization.custompinscreen.title",
     "defaultMessage": "!!!Set PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 236,
+      "line": 239,
       "column": 18,
-      "index": 8566
+      "index": 8750
     },
     "end": {
-      "line": 239,
+      "line": 242,
       "column": 3,
-      "index": 8664
+      "index": 8848
     }
   },
   {
     "id": "global.actions.dialogs.walletKeysInvalidated.title",
     "defaultMessage": "!!!Auth with OS changes",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 240,
+      "line": 243,
       "column": 25,
-      "index": 8691
+      "index": 8875
     },
     "end": {
-      "line": 243,
+      "line": 246,
       "column": 3,
-      "index": 8805
+      "index": 8989
     }
   },
   {
     "id": "global.actions.dialogs.biometricsChange.message",
     "defaultMessage": "!!!Auth with OS changed detected",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 244,
+      "line": 247,
       "column": 27,
-      "index": 8834
+      "index": 9018
     },
     "end": {
-      "line": 247,
+      "line": 250,
       "column": 3,
-      "index": 8955
+      "index": 9139
     }
   }
 ]

yarn.lock

@@ -19437,6 +19437,11 @@ react-native-modal-selector@^2.1.1:
   dependencies:
     prop-types "^15.5.10"
 
+react-native-notifications@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-notifications/-/react-native-notifications-5.1.0.tgz#8cba105fd57ab9d5df9d27284acf1e2b4f3d7ea3"
+  integrity sha512-laqDSDlCvEASmJR6cXpqaryK855ejQd07vrfYERzhv68YDOoSkKy/URExRP4vAfAOVqHhix80tLbNUcfvZk2VQ==
+
 react-native-pager-view@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.2.0.tgz#51380d93fbe47f6380dc71d613a787bf27a4ca37"