feat(mobile): add integration with gateway backend for notifications feature

apps/mobile/index.js

@@ -1,8 +1,9 @@
-import { registerRootComponent } from 'expo';
+import './shim'
+import { registerRootComponent } from 'expo'
 
-import App from './App';
+import App from './App'
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,
 // the environment is set up appropriately
-registerRootComponent(App);
+registerRootComponent(App)

apps/mobile/package.json

@@ -45,8 +45,8 @@
     "@notifee/react-native": "^9.1.8",
     "@react-native-clipboard/clipboard": "^1.15.0",
     "@react-native-community/blur": "^4.4.1",
-    "@react-native-firebase/app": "^21.7.1",
-    "@react-native-firebase/messaging": "^21.7.1",
+    "@react-native-firebase/app": "^21.8.0",
+    "@react-native-firebase/messaging": "^21.8.0",
     "@react-native-menu/menu": "^1.1.6",
     "@react-native/babel-preset": "^0.76.2",
     "@react-navigation/material-top-tabs": "^7.1.0",
@@ -85,7 +85,7 @@
     "moti": "^0.29.0",
     "react": "18.3.1",
     "react-dom": "^18.3.1",
-    "react-native": "0.76.3",
+    "react-native": "0.76.7",
     "react-native-collapsible-tab-view": "^8.0.0",
     "react-native-device-crypto": "^0.1.7",
     "react-native-device-info": "^14.0.1",
@@ -95,7 +95,7 @@
     "react-native-mmkv": "^3.1.0",
     "react-native-pager-view": "^6.5.1",
     "react-native-progress": "^5.0.1",
-    "react-native-quick-crypto": "^0.7.11",
+    "react-native-quick-crypto": "^0.7.12",
     "react-native-reanimated": "~3.16.7",
     "react-native-safe-area-context": "~5.1.0",
     "react-native-screens": "~4.5.0",
@@ -104,6 +104,7 @@
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
+    "siwe": "^3.0.0",
     "tamagui": "^1.117.1",
     "timezone-mock": "^1.3.6",
     "tsconfig-paths-webpack-plugin": "^4.2.0"

apps/mobile/shim.js

@@ -0,0 +1,26 @@
+import { install } from 'react-native-quick-crypto'
+install()
+
+import { ethers } from 'ethers'
+
+import crypto from 'react-native-quick-crypto'
+
+ethers.randomBytes.register((length) => {
+  return new Uint8Array(crypto.randomBytes(length))
+})
+
+ethers.computeHmac.register((algo, key, data) => {
+  return crypto.createHmac(algo, key).update(data).digest()
+})
+
+ethers.pbkdf2.register((passwd, salt, iter, keylen, algo) => {
+  return crypto.pbkdf2Sync(passwd, salt, iter, keylen, algo)
+})
+
+ethers.sha256.register((data) => {
+  return crypto.createHash('sha256').update(data).digest()
+})
+
+ethers.sha512.register((data) => {
+  return crypto.createHash('sha512').update(data).digest()
+})

apps/mobile/src/app/_layout.tsx

@@ -1,3 +1,4 @@
+import '../../shim'
 import { Stack } from 'expo-router'
 import 'react-native-reanimated'
 import { SafeThemeProvider } from '@/src/theme/provider/safeTheme'
@@ -13,14 +14,11 @@ import { NotificationsProvider } from '@/src/context/NotificationsContext'
 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 { getDefaultScreenOptions } from '@/src/navigation/hooks/utils'
 import { NavigationGuardHOC } from '@/src/navigation/NavigationGuardHOC'
 import { StatusBar } from 'expo-status-bar'
 import { TestCtrls } from '@/src/tests/e2e-maestro/components/TestCtrls'
 
-install()
-
 configureReanimatedLogger({
   level: ReanimatedLogLevel.warn,
   strict: false,

apps/mobile/src/app/notifications-opt-in.tsx

@@ -1,18 +1,58 @@
-import React from 'react'
-import { useColorScheme } from 'react-native'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useColorScheme, AppState } from 'react-native'
 import { OptIn } from '@/src/components/OptIn'
 import useNotifications from '@/src/hooks/useNotifications'
-import { router, useFocusEffect } from 'expo-router'
+import NotificationsService from '@/src/services/notifications/NotificationService'
+import { router } from 'expo-router'
+import { useDelegateKey } from '../hooks/useDelegateKey'
+import { useAuthGetNonceV1Query } from '@safe-global/store/gateway/AUTO_GENERATED/auth'
+import Logger from '@/src/utils/logger'
 
 function NotificationsOptIn() {
   const { enableNotifications, isAppNotificationEnabled } = useNotifications()
+  const appState = useRef(AppState.currentState)
+  const { data } = useAuthGetNonceV1Query()
+  const { createDelegate } = useDelegateKey()
+
   const colorScheme = useColorScheme()
 
-  useFocusEffect(() => {
+  const toggleNotificationsOn = useCallback(async () => {
+    try {
+      const deviceNotificationStatus = await NotificationsService.isDeviceNotificationEnabled()
+      if (deviceNotificationStatus) {
+        enableNotifications()
+        await createDelegate(data)
+      } else {
+        await NotificationsService.getAllPermissions(true)
+      }
+    } catch (error) {
+      Logger.error('Error enabling push notifications', error)
+    }
+  }, [data])
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', async (nextAppState) => {
+      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+        const deviceNotificationStatus = await NotificationsService.isDeviceNotificationEnabled()
+        if (deviceNotificationStatus && !isAppNotificationEnabled) {
+          enableNotifications()
+          await createDelegate(data)
+        }
+      }
+
+      appState.current = nextAppState
+    })
+
+    return () => {
+      subscription.remove()
+    }
+  }, [])
+
+  useEffect(() => {
     if (isAppNotificationEnabled) {
       router.replace('/(tabs)')
     }
-  })
+  }, [isAppNotificationEnabled])
 
   const image =
     colorScheme === 'dark'
@@ -27,7 +67,7 @@ function NotificationsOptIn() {
       image={image}
       isVisible
       ctaButton={{
-        onPress: enableNotifications,
+        onPress: toggleNotificationsOn,
         label: 'Enable notifications',
       }}
       secondaryButton={{

apps/mobile/src/features/Assets/components/Navbar/Navbar.tsx

@@ -21,6 +21,7 @@ export const Navbar = () => {
   const router = useRouter()
   const activeSafe = useDefinedActiveSafe()
   const isAppNotificationEnabled = useAppSelector(selectAppNotificationStatus)
+
   const handleNotificationAccess = () => {
     if (!isAppNotificationEnabled) {
       router.navigate('/notifications-opt-in')

apps/mobile/src/features/Notifications/Notifications.container.tsx

@@ -1,15 +1,53 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { AppState } from 'react-native'
+import { useAppDispatch } from '@/src/store/hooks'
+import NotificationsService from '@/src/services/notifications/NotificationService'
+import { toggleAppNotifications } from '@/src/store/notificationsSlice'
+import { useDelegateKey } from '@/src/hooks/useDelegateKey'
+import useNotifications from '@/src/hooks/useNotifications'
+import { useAuthGetNonceV1Query } from '@safe-global/store/gateway/AUTO_GENERATED/auth'
 
-import { useAppSelector, useAppDispatch } from '@/src/store/hooks'
-import { selectAppNotificationStatus, toggleAppNotifications } from '@/src/store/notificationsSlice'
 import { NotificationView } from '@/src/features/Notifications/components/NotificationView'
 
 export const NotificationsContainer = () => {
   const dispatch = useAppDispatch()
-  const isAppNotificationEnabled = useAppSelector(selectAppNotificationStatus)
+  const { enableNotifications, isAppNotificationEnabled } = useNotifications()
+  const { data } = useAuthGetNonceV1Query()
+  const { createDelegate, deleteDelegate, error } = useDelegateKey()
+  const appState = useRef(AppState.currentState)
 
-  const handleToggleAppNotifications = useCallback(() => {
-    dispatch(toggleAppNotifications(!isAppNotificationEnabled))
+  const handleToggleAppNotifications = useCallback(async () => {
+    const deviceNotificationStatus = await NotificationsService.isDeviceNotificationEnabled()
+
+    if (!deviceNotificationStatus && !isAppNotificationEnabled) {
+      await NotificationsService.requestPushNotificationsPermission()
+    } else if (deviceNotificationStatus && !isAppNotificationEnabled) {
+      enableNotifications()
+      await createDelegate(data)
+    } else {
+      await deleteDelegate()
+      if (!error) {
+        dispatch(toggleAppNotifications(!isAppNotificationEnabled))
+      }
+    }
+  }, [isAppNotificationEnabled])
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', async (nextAppState) => {
+      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+        const deviceNotificationStatus = await NotificationsService.isDeviceNotificationEnabled()
+        if (deviceNotificationStatus && !isAppNotificationEnabled) {
+          enableNotifications()
+          await createDelegate(data)
+        }
+      }
+
+      appState.current = nextAppState
+    })
+
+    return () => {
+      subscription.remove()
+    }
   }, [isAppNotificationEnabled])
 
   return <NotificationView onChange={handleToggleAppNotifications} value={isAppNotificationEnabled} />

apps/mobile/src/hooks/useDelegateKey.ts

@@ -0,0 +1,120 @@
+import { useState, useCallback } from 'react'
+import { Wallet } from 'ethers'
+
+import { AuthNonce } from '@safe-global/store/gateway/AUTO_GENERATED/auth'
+import { AddressInfo } from '@safe-global/store/gateway/AUTO_GENERATED/safes'
+
+import Logger from '@/src/utils/logger'
+import { Address } from '@/src/types/address'
+import { selectActiveSafe } from '@/src/store/activeSafeSlice'
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks'
+import { useSign } from './useSign'
+import { useGTW } from './useGTW'
+
+import { selectFCMToken } from '../store/notificationsSlice'
+import { addDelegatedAddress } from '../store/delegatedSlice'
+import { useSiwe } from './useSiwe'
+import { getSigner } from '../utils/notifications'
+import { DELEGATED_ACCOUNT_TYPE, ERROR_MSG } from '../store/constants'
+
+export function useDelegateKey(safeOwner?: AddressInfo) {
+  // Local states
+  const [loading, setLoading] = useState<boolean>(false)
+  const [error, setError] = useState<unknown>(null)
+  const [delegatedAccountType, setDelegatedAccountType] = useState<DELEGATED_ACCOUNT_TYPE>()
+
+  // Custom hooks
+  const { getPrivateKey, storePrivateKey } = useSign()
+  const { createDelegatedKeyOnBackEnd, deleteDelegatedKeyOnBackEnd } = useGTW()
+  const { createSiweMessage } = useSiwe()
+  // Redux
+  const dispatch = useAppDispatch()
+  const activeSafe = useAppSelector(selectActiveSafe)
+
+  // const appSigners = useAppSelector(selectSigners)
+  const fcmToken = useAppSelector(selectFCMToken)
+
+  // Step 0 - Get the nonce to be included in the message to be sent to the backend
+  const createDelegate = useCallback(async (data: AuthNonce | undefined) => {
+    setLoading(true)
+    setError(null)
+
+    const nonce = data?.nonce
+    if (!activeSafe || !fcmToken || !nonce) {
+      throw Logger.info(ERROR_MSG)
+    }
+
+    try {
+      // Step 1 - Try to get the safe owner's private key from keychain
+      const safeOwnerPK = safeOwner && (await getPrivateKey(safeOwner.value))
+
+      const delegatedAccType = safeOwnerPK ? DELEGATED_ACCOUNT_TYPE.OWNER : DELEGATED_ACCOUNT_TYPE.REGULAR
+      setDelegatedAccountType(delegatedAccType)
+
+      // Step 2 - Create a new random (delegated) private key
+      const randomDelegatedAccount = Wallet.createRandom()
+
+      if (!randomDelegatedAccount) {
+        throw Logger.error(ERROR_MSG, error)
+      }
+
+      // Step 2.1 - Store the delegated account in the redux store
+      dispatch(
+        addDelegatedAddress({ delegatedAddress: randomDelegatedAccount.address as Address, safes: [activeSafe] }),
+      )
+
+      // Step 2.2 - Store it in the keychain
+      storePrivateKey(randomDelegatedAccount.address, randomDelegatedAccount.privateKey)
+
+      // Step 2.3 - Define the signer account
+      const signerAccount = getSigner(safeOwnerPK, randomDelegatedAccount)
+
+      // Step 3 - Create a message following the SIWE standard
+      const siweMessage = createSiweMessage({
+        address: signerAccount.address,
+        chainId: Number(activeSafe.chainId),
+        nonce,
+        statement: 'SafeWallet wants you to sign in with your Ethereum account',
+      })
+
+      // Step 4 - Triggers the backend to create the delegate
+      await createDelegatedKeyOnBackEnd({
+        safeAddress: activeSafe.address,
+        signer: signerAccount,
+        message: siweMessage,
+        chainId: activeSafe.chainId,
+        fcmToken,
+        delegatedAccount: randomDelegatedAccount,
+        delegatedAccountType: delegatedAccType,
+      })
+    } catch (err) {
+      Logger.error('useDelegateKey: Something went wrong', err)
+      setError(err)
+      return
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const deleteDelegate = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      await deleteDelegatedKeyOnBackEnd(activeSafe)
+    } catch (err) {
+      Logger.error('useDelegateKey: Something went wrong', err)
+      setError(err)
+      return
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  return {
+    loading,
+    error,
+    createDelegate,
+    deleteDelegate,
+    delegatedAccountType,
+  }
+}