diff --git a/app/_layout.tsx b/app/_layout.tsx
index 7b993aa7a..5ab9dbb41 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -9,11 +9,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { reconnect } from "@wagmi/core";
import { type FontSource, useFonts } from "expo-font";
import { Slot, SplashScreen } from "expo-router";
-import Head from "expo-router/head";
import { StatusBar } from "expo-status-bar";
import React, { useEffect } from "react";
-import { Platform } from "react-native";
-import { OneSignal } from "react-native-onesignal";
import * as Sentry from "sentry-expo";
import { TamaguiProvider } from "tamagui";
import { WagmiProvider, createConfig, custom } from "wagmi";
@@ -21,8 +18,9 @@ import { WagmiProvider, createConfig, custom } from "wagmi";
import metadata from "../package.json";
import tamaguiConfig from "../tamagui.config";
import alchemyConnector from "../utils/alchemyConnector";
-import { alchemyAPIKey, chain, oneSignalAPPId } from "../utils/constants";
+import { alchemyAPIKey, chain } from "../utils/constants";
import handleError from "../utils/handleError";
+import useOneSignal from "../utils/onesignal";
export { ErrorBoundary } from "expo-router";
@@ -40,10 +38,6 @@ Sentry.init({
autoSessionTracking: true,
});
-if (oneSignalAPPId) {
- OneSignal.initialize(oneSignalAPPId);
-}
-
const provider = new AlchemyProvider({ apiKey: alchemyAPIKey, chain });
const wagmiConfig = createConfig({
chains: [chain],
@@ -69,31 +63,14 @@ export default function RootLayout() {
useEffect(() => {
reconnect(wagmiConfig).catch(handleError);
- // TODO(jg): use real user id
- if (oneSignalAPPId) OneSignal.login("0000000");
}, []);
- if (!loaded) return;
+ const initialized = useOneSignal({});
+
+ if (!loaded || !initialized) return;
return (
<>
- {Platform.OS === "web" && (
-
-
-
-
- )}
-
diff --git a/public/onesignal/sw.js b/public/OneSignalSDKWorker.js
similarity index 100%
rename from public/onesignal/sw.js
rename to public/OneSignalSDKWorker.js
diff --git a/utils/onesignal.ts b/utils/onesignal.ts
new file mode 100644
index 000000000..1d1ff00fb
--- /dev/null
+++ b/utils/onesignal.ts
@@ -0,0 +1,77 @@
+import { useState, useEffect, useRef } from "react";
+import { Platform } from "react-native";
+import { OneSignal as RNOneSignal } from "react-native-onesignal";
+import ROneSignal from "react-onesignal";
+
+import { oneSignalAPPId } from "./constants";
+
+type OneSignalProperties = {
+ userId?: string;
+};
+
+type Instance =
+ | {
+ type: "native";
+ value: typeof RNOneSignal;
+ }
+ | {
+ type: "web";
+ value: typeof ROneSignal;
+ };
+
+export default function useOneSignal({ userId }: OneSignalProperties) {
+ const instance = useRef(null);
+ const [initialized, setInitialized] = useState(false);
+
+ useEffect(() => {
+ const load = async function () {
+ if (!oneSignalAPPId) {
+ return;
+ }
+
+ if (!initialized) {
+ switch (Platform.OS) {
+ case "web": {
+ await ROneSignal.init({
+ appId: oneSignalAPPId,
+ allowLocalhostAsSecureOrigin: true,
+ });
+ instance.current = { type: "web", value: ROneSignal };
+ break;
+ }
+ case "ios":
+ case "android": {
+ RNOneSignal.initialize(oneSignalAPPId);
+ instance.current = { type: "native", value: RNOneSignal };
+ break;
+ }
+ }
+
+ setInitialized(true);
+ }
+
+ if (instance.current && userId) {
+ await instance.current.value.login(userId);
+ }
+ };
+
+ load().catch(() => {
+ setInitialized(true);
+ });
+
+ return () => {
+ if (!userId || !instance.current) {
+ return;
+ }
+
+ const logout = instance.current.value.logout();
+ if (logout instanceof Promise) {
+ logout.catch(() => {
+ // ignore
+ });
+ }
+ };
+ }, [userId, initialized]);
+
+ return initialized;
+}