feat: add push notifications

.gitignore

@@ -34,5 +34,7 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
-android
-ios
+/ios
+/android
+
+google-services.json

README.md

@@ -9,3 +9,17 @@ A simple lightning mobile wallet interface that works great with [Alby Hub](http
 `yarn install`
 
 `yarn start`
+
+### Notifications
+
+Push notifications are only available when running the app on a **physical device** using the following commands:
+
+For iOS:
+
+`yarn ios:device`
+
+For Android:
+
+`yarn android:device`
+
+**Note:** Notifications do not work in the Expo Go app. You must run the app on a standalone build or a device using the above commands.

RELEASE.md

@@ -2,7 +2,7 @@
 
 1. Update version in
 
-- `app.json`
+- `app.config.js`
 - `package.json`
 
 2. Create a git tag and push it (a new draft release will be created)

app.config.js

@@ -0,0 +1,108 @@
+import withMessagingServicePlugin from "./plugins/android/withMessageServicePlugin";
+import withOpenSSLPlugin from "./plugins/ios/withOpenSSLPlugin";
+
+export default ({ config }) => {
+  return {
+    ...config,
+    name: "Alby Go",
+    slug: "alby-mobile",
+    version: "1.8.1",
+    scheme: ["lightning", "bitcoin", "alby", "nostr+walletconnect"],
+    orientation: "portrait",
+    icon: "./assets/icon.png",
+    userInterfaceStyle: "automatic",
+    newArchEnabled: true,
+    assetBundlePatterns: ["**/*"],
+    plugins: [
+      [
+        withMessagingServicePlugin,
+        {
+          androidFMSFilePath: "./assets/android/MessagingService.kt",
+        },
+      ],
+      [withOpenSSLPlugin],
+      [
+        "expo-notification-service-extension-plugin",
+        {
+          mode: "production",
+          iosNSEFilePath: "./assets/ios/NotificationService.m",
+        },
+      ],
+      [
+        "expo-splash-screen",
+        {
+          backgroundColor: "#0B0930",
+          image: "./assets/icon.png",
+          imageWidth: "150",
+        },
+      ],
+      [
+        "expo-local-authentication",
+        {
+          faceIDPermission: "Allow Alby Go to use Face ID.",
+        },
+      ],
+      [
+        "expo-camera",
+        {
+          cameraPermission:
+            "Allow Alby Go to use the camera to scan wallet connection and payment QR codes",
+          recordAudioAndroid: false,
+        },
+      ],
+      [
+        "expo-font",
+        {
+          fonts: [
+            "./assets/fonts/OpenRunde-Regular.otf",
+            "./assets/fonts/OpenRunde-Medium.otf",
+            "./assets/fonts/OpenRunde-Semibold.otf",
+            "./assets/fonts/OpenRunde-Bold.otf",
+          ],
+        },
+      ],
+      [
+        "expo-notifications",
+        {
+          icon: "./assets/notification.png",
+        },
+      ],
+      "expo-router",
+      "expo-secure-store",
+    ],
+    ios: {
+      supportsTablet: true,
+      bundleIdentifier: "com.getalby.mobile",
+      config: {
+        usesNonExemptEncryption: false,
+      },
+      infoPlist: {
+        LSMinimumSystemVersion: "12.0",
+        UIBackgroundModes: ["remote-notification"],
+      },
+      userInterfaceStyle: "automatic",
+    },
+    android: {
+      package: "com.getalby.mobile",
+      icon: "./assets/icon.png",
+      adaptiveIcon: {
+        foregroundImage: "./assets/adaptive-icon.png",
+        backgroundImage: "./assets/adaptive-icon-bg.png",
+        monochromeImage: "./assets/monochromatic.png",
+      },
+      permissions: [
+        "android.permission.CAMERA",
+        "android.permission.USE_BIOMETRIC",
+        "android.permission.USE_FINGERPRINT",
+      ],
+      userInterfaceStyle: "automatic",
+      googleServicesFile: process.env.GOOGLE_SERVICES_JSON,
+    },
+    extra: {
+      eas: {
+        projectId: "294965ec-3a67-4994-8794-5cc1117ef155",
+      },
+    },
+    owner: "roland_alby",
+  };
+};

app/(app)/settings/notifications.js

@@ -0,0 +1,5 @@
+import { Notifications } from "../../../pages/settings/Notifications";
+
+export default function Page() {
+  return <Notifications />;
+}

app/_layout.tsx

@@ -15,14 +15,16 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import Toast from "react-native-toast-message";
 import { SWRConfig } from "swr";
 import { toastConfig } from "~/components/ToastConfig";
+import { NotificationProvider } from "~/context/Notification";
 import { UserInactivityProvider } from "~/context/UserInactivity";
 import "~/global.css";
 import { useInfo } from "~/hooks/useInfo";
 import { SessionProvider } from "~/hooks/useSession";
-import { NAV_THEME } from "~/lib/constants";
+import { IS_EXPO_GO, NAV_THEME } from "~/lib/constants";
 import { isBiometricSupported } from "~/lib/isBiometricSupported";
 import { useAppStore } from "~/lib/state/appStore";
 import { useColorScheme } from "~/lib/useColorScheme";
+import { registerForPushNotificationsAsync } from "~/services/Notifications";
 
 const LIGHT_THEME: Theme = {
   ...DefaultTheme,
@@ -67,6 +69,15 @@ export default function RootLayout() {
     }
   }
 
+  async function checkAndPromptForNotifications() {
+    const isEnabled = useAppStore.getState().isNotificationsEnabled;
+    // prompt the user to enable notifications on first open
+    if (isEnabled === null) {
+      const enabled = await registerForPushNotificationsAsync();
+      useAppStore.getState().setNotificationsEnabled(enabled);
+    }
+  }
+
   const loadTheme = React.useCallback((): Promise<void> => {
     return new Promise((resolve) => {
       const theme = useAppStore.getState().theme;
@@ -85,6 +96,9 @@ export default function RootLayout() {
         await Promise.all([loadTheme(), loadFonts(), checkBiometricStatus()]);
       } finally {
         setResourcesLoaded(true);
+        if (!IS_EXPO_GO) {
+          await checkAndPromptForNotifications();
+        }
         SplashScreen.hide();
       }
     };
@@ -98,26 +112,28 @@ export default function RootLayout() {
 
   return (
     <SWRConfig value={swrConfiguration}>
-      <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-        <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-        <SafeAreaView
-          className="w-full h-full bg-background"
-          edges={["left", "right", "bottom"]}
-        >
-          <UserInactivityProvider>
-            <SessionProvider>
-              <Slot />
-            </SessionProvider>
-          </UserInactivityProvider>
-          <Toast
-            config={toastConfig}
-            position="bottom"
-            bottomOffset={140}
-            topOffset={140}
-          />
-          <PortalHost />
-        </SafeAreaView>
-      </ThemeProvider>
+      <NotificationProvider>
+        <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+          <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+          <SafeAreaView
+            className="w-full h-full bg-background"
+            edges={["left", "right", "bottom"]}
+          >
+            <UserInactivityProvider>
+              <SessionProvider>
+                <Slot />
+              </SessionProvider>
+            </UserInactivityProvider>
+            <Toast
+              config={toastConfig}
+              position="bottom"
+              bottomOffset={140}
+              topOffset={140}
+            />
+            <PortalHost />
+          </SafeAreaView>
+        </ThemeProvider>
+      </NotificationProvider>
     </SWRConfig>
   );
 }