Feat(Mobile): add firebase integrations and bootstrap usage

apps/mobile/.easignore

@@ -0,0 +1,63 @@
+# Auto generated storybook file
+.storybook/storybook.requires.ts
+
+# From jest
+html
+coverage
+
+# macOS
+.DS_Store
+
+/.idea
+# Tamagui UI generates a lot of cache files
+.tamagui
+
+*storybook.log
+/storybook-static
+
+# Android and iOS build files
+/android/*
+/ios/*
+
+# @generated expo-cli sync-8d4afeec25ea8a192358fae2f8e2fc766bdce4ec
+# The following patterns were generated by expo-cli
+
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @end expo-cli

apps/mobile/.gitignore

@@ -18,6 +18,8 @@ coverage
 # Android and iOS build files
 /android/*
 /ios/*
+google-services.json
+GoogleService-Info.plist
 
 # @generated expo-cli sync-8d4afeec25ea8a192358fae2f8e2fc766bdce4ec
 # The following patterns were generated by expo-cli

apps/mobile/app.config.js

@@ -28,6 +28,10 @@ export default {
       supportsTablet: true,
       appleTeamId: 'MXRS32BBL4',
       bundleIdentifier: IS_DEV ? 'global.safe.mobileapp.dev' : 'global.safe.mobileapp',
+      entitlements: {
+        'aps-environment': 'production',
+      },
+      googleServicesFile: process.env.GOOGLE_SERVICES_PLIST ?? './GoogleService-Info.plist',
     },
     android: {
       adaptiveIcon: {
@@ -36,6 +40,7 @@ export default {
         monochromeImage: './assets/images/monochrome-icon.png',
       },
       package: IS_DEV ? 'global.safe.mobileapp.dev' : 'global.safe.mobileapp',
+      googleServicesFile: process.env.GOOGLE_SERVICES_JSON ?? './google-services.json',
     },
     web: {
       bundler: 'metro',
@@ -63,6 +68,16 @@ export default {
         },
       ],
       ['./expo-plugins/withDrawableAssets.js', './assets/android/drawable'],
+      [
+        'expo-build-properties',
+        {
+          ios: {
+            useFrameworks: 'static',
+          },
+        },
+      ],
+      '@react-native-firebase/app',
+      '@react-native-firebase/messaging',
     ],
     experiments: {
       typedRoutes: true,

apps/mobile/app/_layout.tsx

@@ -1,5 +1,6 @@
 import { Stack } from 'expo-router'
 import 'react-native-reanimated'
+
 import { SafeThemeProvider } from '@/src/theme/provider/safeTheme'
 import { Provider } from 'react-redux'
 import { persistor, store } from '@/src/store'
@@ -14,8 +15,11 @@ import { SafeToastProvider } from '@/src/theme/provider/toastProvider'
 import { configureReanimatedLogger, ReanimatedLogLevel } from 'react-native-reanimated'
 import { OnboardingHeader } from '@/src/features/Onboarding/components/OnboardingHeader'
 import { install } from 'react-native-quick-crypto'
+import { NotificationProvider } from '@/src/context/NotificationContext'
+import { initNotificationService } from '@/src/services/notifications/FCMService'
 
 install()
+initNotificationService()
 
 configureReanimatedLogger({
   level: ReanimatedLogLevel.warn,
@@ -28,43 +32,45 @@ function RootLayout() {
   return (
     <GestureHandlerRootView>
       <Provider store={store}>
-        <PortalProvider shouldAddRootHost>
-          <BottomSheetModalProvider>
-            <PersistGate loading={null} persistor={persistor}>
-              <SafeThemeProvider>
-                <SafeToastProvider>
-                  <Stack
-                    screenOptions={({ navigation }) => ({
-                      headerBackButtonDisplayMode: 'minimal',
-                      headerShadowVisible: false,
-                      headerLeft: (props) => (
-                        <HeaderBackButton
-                          {...props}
-                          testID={'go-back'}
-                          onPress={navigation.goBack}
-                          displayMode={'minimal'}
-                        />
-                      ),
-                    })}
-                  >
-                    <Stack.Screen
-                      name="index"
-                      options={{
-                        header: OnboardingHeader,
-                      }}
-                    />
-                    <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-                    <Stack.Screen name="pending-transactions" options={{ headerShown: true, title: '' }} />
-                    <Stack.Screen name="signers" options={{ headerShown: true, title: 'Signers' }} />
-                    <Stack.Screen name="notifications" options={{ headerShown: true, title: 'Notifications' }} />
-                    <Stack.Screen name="app-settings" options={{ headerShown: true, title: 'Settings' }} />
-                    <Stack.Screen name="+not-found" />
-                  </Stack>
-                </SafeToastProvider>
-              </SafeThemeProvider>
-            </PersistGate>
-          </BottomSheetModalProvider>
-        </PortalProvider>
+        <NotificationProvider>
+          <PortalProvider shouldAddRootHost>
+            <BottomSheetModalProvider>
+              <PersistGate loading={null} persistor={persistor}>
+                <SafeThemeProvider>
+                  <SafeToastProvider>
+                    <Stack
+                      screenOptions={({ navigation }) => ({
+                        headerBackButtonDisplayMode: 'minimal',
+                        headerShadowVisible: false,
+                        headerLeft: (props) => (
+                          <HeaderBackButton
+                            {...props}
+                            testID={'go-back'}
+                            onPress={navigation.goBack}
+                            displayMode={'minimal'}
+                          />
+                        ),
+                      })}
+                    >
+                      <Stack.Screen
+                        name="index"
+                        options={{
+                          header: OnboardingHeader,
+                        }}
+                      />
+                      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+                      <Stack.Screen name="pending-transactions" options={{ headerShown: true, title: '' }} />
+                      <Stack.Screen name="signers" options={{ headerShown: true, title: 'Signers' }} />
+                      <Stack.Screen name="notifications" options={{ headerShown: true, title: 'Notifications' }} />
+                      <Stack.Screen name="app-settings" options={{ headerShown: true, title: 'Settings' }} />
+                      <Stack.Screen name="+not-found" />
+                    </Stack>
+                  </SafeToastProvider>
+                </SafeThemeProvider>
+              </PersistGate>
+            </BottomSheetModalProvider>
+          </PortalProvider>
+        </NotificationProvider>
       </Provider>
     </GestureHandlerRootView>
   )

apps/mobile/eas.json

@@ -42,6 +42,16 @@
       "extends": "base",
       "environment": "production",
       "autoIncrement": true,
+      "ios": {
+        "env": {
+          "GOOGLE_SERVICES_FILE": "./GoogleService-Info.plist"
+        }
+      },
+      "android": {
+        "env": {
+          "GOOGLE_SERVICES_FILE": "./google-services.json"
+        }
+      },
       "env": {
         "APP_VARIANT": "production"
       }

apps/mobile/package.json

@@ -43,6 +43,8 @@
     "@expo/vector-icons": "^14.0.2",
     "@react-native-clipboard/clipboard": "^1.15.0",
     "@react-native-community/blur": "^4.4.1",
+    "@react-native-firebase/app": "^21.6.2",
+    "@react-native-firebase/messaging": "^21.6.2",
     "@react-native-menu/menu": "^1.1.6",
     "@react-native/babel-preset": "^0.76.2",
     "@react-navigation/material-top-tabs": "^7.1.0",
@@ -64,16 +66,20 @@
     "ethers": "^6.13.4",
     "expo": "~52.0.14",
     "expo-blur": "~14.0.1",
-    "expo-constants": "~17.0.2",
+    "expo-build-properties": "~0.13.2",
+    "expo-constants": "~17.0.4",
     "expo-dev-client": "~5.0.5",
+    "expo-device": "~7.0.2",
     "expo-font": "~13.0.3",
     "expo-image": "~2.0.3",
     "expo-linear-gradient": "^14.0.1",
     "expo-linking": "~7.0.3",
+    "expo-notifications": "~0.29.12",
     "expo-router": "~4.0.15",
     "expo-splash-screen": "^0.29.16",
     "expo-status-bar": "~2.0.0",
     "expo-system-ui": "~4.0.6",
+    "expo-task-manager": "^12.0.4",
     "expo-web-browser": "~14.0.1",
     "lodash": "^4.17.21",
     "moti": "^0.29.0",

apps/mobile/src/context/NotificationContext.tsx

@@ -0,0 +1,68 @@
+import React, { createContext, useContext, useState, useEffect, useRef, ReactNode } from 'react'
+import * as Notifications from 'expo-notifications'
+import { registerForPushNotificationsAsync } from '@/src/services/notifications/FCMService'
+
+interface NotificationContextType {
+  expoPushToken: string | null
+  notification: Notifications.Notification | null
+  error: Error | null
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined)
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext)
+  if (context === undefined) {
+    throw new Error('useNotification must be used within a NotificationProvider')
+  }
+  return context
+}
+
+interface NotificationProviderProps {
+  children: ReactNode
+}
+
+export const NotificationProvider: React.FC<NotificationProviderProps> = ({ children }) => {
+  const [expoPushToken, setExpoPushToken] = useState<string | null>(null)
+  const [notification, setNotification] = useState<Notifications.Notification | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+
+  const notificationListener = useRef<Notifications.EventSubscription>()
+  const responseListener = useRef<Notifications.EventSubscription>()
+
+  useEffect(() => {
+    registerForPushNotificationsAsync().then(
+      (token) => setExpoPushToken(token ?? null),
+      (error) => setError(error),
+    )
+
+    notificationListener.current = Notifications.addNotificationReceivedListener((notification) => {
+      console.log('🔔 Notification Received: ', notification)
+      setNotification(notification)
+    })
+
+    responseListener.current = Notifications.addNotificationResponseReceivedListener((response) => {
+      console.log(
+        '🔔 Notification Response: ',
+        JSON.stringify(response, null, 2),
+        JSON.stringify(response.notification.request.content.data, null, 2),
+      )
+      // Handle the notification response here after discussing with the Aaron
+    })
+
+    return () => {
+      if (notificationListener.current) {
+        Notifications.removeNotificationSubscription(notificationListener.current)
+      }
+      if (responseListener.current) {
+        Notifications.removeNotificationSubscription(responseListener.current)
+      }
+    }
+  }, [])
+
+  return (
+    <NotificationContext.Provider value={{ expoPushToken, notification, error }}>
+      {children}
+    </NotificationContext.Provider>
+  )
+}