@dubsdotapp/expo 0.2.53 → 0.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.2.53",
+  "version": "0.2.55",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -33,7 +33,8 @@
     "expo-device": ">=6.0.0",
     "expo-secure-store": ">=13.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.72.0"
+    "react-native": ">=0.72.0",
+    "expo-notifications": ">=0.28.0"
   },
   "peerDependenciesMeta": {
     "expo-secure-store": {
@@ -41,6 +42,9 @@
     },
     "expo-device": {
       "optional": true
+    },
+    "expo-notifications": {
+      "optional": true
     }
   },
   "optionalDependencies": {

package/src/client.ts

@@ -410,6 +410,24 @@ export class DubsClient {
     this._token = null;
   }
 
+  // ── Push Notifications ──
+
+  async registerPushToken(params: { token: string; platform: string; deviceName?: string }): Promise<void> {
+    await this.request<{ success: true; data: { tokenId: number; token: string } }>(
+      'POST',
+      '/push/expo-token',
+      params,
+    );
+  }
+
+  async unregisterPushToken(token: string): Promise<void> {
+    await this.request<{ success: true; data: { message: string } }>(
+      'DELETE',
+      '/push/expo-token',
+      { token },
+    );
+  }
+
   // ── Error Utilities ──
 
   async parseError(error: unknown): Promise<ParsedError> {

package/src/hooks/index.ts

@@ -16,3 +16,5 @@ export { useAuth } from './useAuth';
 export type { UseAuthResult } from './useAuth';
 export { useUFCFightCard } from './useUFCFightCard';
 export { useUFCFighterDetail } from './useUFCFighterDetail';
+export { usePushNotifications } from './usePushNotifications';
+export type { PushNotificationStatus } from './usePushNotifications';

package/src/hooks/usePushNotifications.ts

@@ -0,0 +1,169 @@
+import { useState, useCallback, useRef, useMemo } from 'react';
+import { Platform } from 'react-native';
+import { useDubs } from '../provider';
+
+export interface PushNotificationStatus {
+  /** Whether notification permission has been granted */
+  hasPermission: boolean;
+  /** The Expo push token, if registered */
+  expoPushToken: string | null;
+  /** Whether a registration operation is in progress */
+  loading: boolean;
+  /** The last error encountered */
+  error: Error | null;
+  /**
+   * Request notification permission and register the push token.
+   * Does NOT auto-prompt — must be called explicitly (e.g. from an onboarding screen).
+   */
+  register: () => Promise<boolean>;
+  /** Unregister the current push token */
+  unregister: () => Promise<void>;
+  /**
+   * Silently re-register if permission was already granted (no prompt).
+   * Safe to call on app startup for returning users.
+   */
+  restoreIfGranted: () => Promise<void>;
+}
+
+export function usePushNotifications(): PushNotificationStatus {
+  const { client, appName } = useDubs();
+  const channelId = useMemo(() => appName.toLowerCase().replace(/[^a-z0-9-]/g, ''), [appName]);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [expoPushToken, setExpoPushToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const registering = useRef(false);
+
+  const getNotificationsModule = useCallback(() => {
+    try {
+      return require('expo-notifications');
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const getDeviceName = useCallback((): string | null => {
+    try {
+      const Device = require('expo-device');
+      return Device.deviceName || null;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const setupAndroidChannels = useCallback((Notifications: any) => {
+    if (Platform.OS === 'android') {
+      Notifications.setNotificationChannelAsync(channelId || 'default', {
+        name: appName || 'Default',
+        importance: Notifications.AndroidImportance?.MAX ?? 4,
+        vibrationPattern: [0, 250, 250, 250],
+      }).catch(() => {});
+    }
+  }, [channelId, appName]);
+
+  const registerTokenWithServer = useCallback(async (token: string) => {
+    const deviceName = getDeviceName();
+    await client.registerPushToken({
+      token,
+      platform: Platform.OS,
+      deviceName: deviceName || undefined,
+    });
+  }, [client, getDeviceName]);
+
+  const register = useCallback(async (): Promise<boolean> => {
+    if (registering.current) return false;
+    registering.current = true;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const Notifications = getNotificationsModule();
+      if (!Notifications) {
+        throw new Error('expo-notifications is not installed');
+      }
+
+      // Request permission
+      const { status: existingStatus } = await Notifications.getPermissionsAsync();
+      let finalStatus = existingStatus;
+
+      if (existingStatus !== 'granted') {
+        const { status } = await Notifications.requestPermissionsAsync();
+        finalStatus = status;
+      }
+
+      if (finalStatus !== 'granted') {
+        setHasPermission(false);
+        setLoading(false);
+        registering.current = false;
+        return false;
+      }
+
+      setHasPermission(true);
+
+      // Get Expo push token
+      const tokenResult = await Notifications.getExpoPushTokenAsync();
+      const token = tokenResult.data;
+      setExpoPushToken(token);
+
+      // Register with server
+      await registerTokenWithServer(token);
+
+      // Setup Android channels
+      setupAndroidChannels(Notifications);
+
+      setLoading(false);
+      registering.current = false;
+      return true;
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      setLoading(false);
+      registering.current = false;
+      console.error('[usePushNotifications] Registration error:', e.message);
+      return false;
+    }
+  }, [getNotificationsModule, registerTokenWithServer, setupAndroidChannels]);
+
+  const unregister = useCallback(async () => {
+    if (!expoPushToken) return;
+    try {
+      await client.unregisterPushToken(expoPushToken);
+      setExpoPushToken(null);
+    } catch (err) {
+      console.error('[usePushNotifications] Unregister error:', err);
+    }
+  }, [client, expoPushToken]);
+
+  const restoreIfGranted = useCallback(async () => {
+    try {
+      const Notifications = getNotificationsModule();
+      if (!Notifications) return;
+
+      const { status } = await Notifications.getPermissionsAsync();
+      if (status !== 'granted') return;
+
+      setHasPermission(true);
+
+      const tokenResult = await Notifications.getExpoPushTokenAsync();
+      const token = tokenResult.data;
+      setExpoPushToken(token);
+
+      // Re-register silently
+      await registerTokenWithServer(token);
+      setupAndroidChannels(Notifications);
+    } catch (err) {
+      // Silent failure — this is a background restore
+      console.log('[usePushNotifications] Restore skipped:', err instanceof Error ? err.message : err);
+    }
+  }, [getNotificationsModule, registerTokenWithServer, setupAndroidChannels]);
+
+  return {
+    hasPermission,
+    expoPushToken,
+    loading,
+    error,
+    register,
+    unregister,
+    restoreIfGranted,
+  };
+}

package/src/index.ts

@@ -94,6 +94,7 @@ export {
   useAuth,
   useUFCFightCard,
   useUFCFighterDetail,
+  usePushNotifications,
 } from './hooks';
 export type {
   CreateGameMutationResult,
@@ -102,6 +103,7 @@ export type {
   ClaimMutationResult,
   ClaimStatus,
   UseAuthResult,
+  PushNotificationStatus,
 } from './hooks';
 
 // UI

package/src/ui/AuthGate.tsx

@@ -14,6 +14,7 @@ import {
   ScrollView,
 } from 'react-native';
 import { useAuth } from '../hooks';
+import { usePushNotifications } from '../hooks/usePushNotifications';
 import { useDubs } from '../provider';
 import { AuthContext } from '../auth-context';
 import { useDubsTheme } from './theme';
@@ -76,6 +77,8 @@ export function AuthGate({
   const auth = useAuth();
   const [phase, setPhase] = useState<'init' | 'active'>('init');
   const [registrationPhase, setRegistrationPhase] = useState(false);
+  const [showPushSetup, setShowPushSetup] = useState(false);
+  const [isRestoredSession, setIsRestoredSession] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
@@ -86,7 +89,7 @@ export function AuthGate({
         if (savedToken) {
           const restored = await auth.restoreSession(savedToken);
           if (cancelled) return;
-          if (restored) { setPhase('active'); return; }
+          if (restored) { setIsRestoredSession(true); setPhase('active'); return; }
           await onSaveToken(null);
         }
         if (cancelled) return;
@@ -104,6 +107,13 @@ export function AuthGate({
     if (auth.status === 'needsRegistration') setRegistrationPhase(true);
   }, [auth.status]);
 
+  // Show push setup after new registration completes (not restored sessions)
+  useEffect(() => {
+    if (auth.status === 'authenticated' && registrationPhase && !isRestoredSession) {
+      setShowPushSetup(true);
+    }
+  }, [auth.status, registrationPhase, isRestoredSession]);
+
   useEffect(() => {
     if (auth.token) onSaveToken(auth.token);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -130,7 +140,21 @@ export function AuthGate({
   }
 
   if (auth.status === 'authenticated') {
-    return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
+    if (showPushSetup) {
+      return (
+        <PushSetupScreen
+          accentColor={accentColor}
+          appName={appName}
+          onComplete={() => setShowPushSetup(false)}
+        />
+      );
+    }
+    return (
+      <AuthContext.Provider value={auth}>
+        <PushTokenRestorer />
+        {children}
+      </AuthContext.Provider>
+    );
   }
 
   if (registrationPhase) {
@@ -561,6 +585,131 @@ function DefaultRegistrationScreen({
   );
 }
 
+// ── Push Token Restorer (silent, zero UI) ──
+// Runs inside DubsContext + AuthGate when user is authenticated.
+// Silently re-registers the push token for returning users who already granted permission.
+// Does NOT prompt — the prompt only happens in PushSetupScreen during onboarding.
+
+function PushTokenRestorer() {
+  const push = usePushNotifications();
+  const restored = useRef(false);
+
+  useEffect(() => {
+    if (restored.current) return;
+    restored.current = true;
+    push.restoreIfGranted();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
+
+// ── Push Setup Screen (Step 3 of onboarding) ──
+
+function PushSetupScreen({
+  accentColor,
+  appName,
+  onComplete,
+}: {
+  accentColor?: string;
+  appName: string;
+  onComplete: () => void;
+}) {
+  const t = useDubsTheme();
+  const accent = accentColor || t.accent;
+  const push = usePushNotifications();
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(30)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
+      Animated.timing(slideAnim, { toValue: 0, duration: 300, useNativeDriver: true }),
+    ]).start();
+  }, [fadeAnim, slideAnim]);
+
+  const handleEnable = async () => {
+    await push.register();
+    onComplete();
+  };
+
+  const benefits = [
+    'A fight you picked on goes LIVE',
+    'Your pick wins or loses',
+    'Final results and rankings',
+  ];
+
+  return (
+    <View style={[s.container, { backgroundColor: t.background }]}>
+      <Animated.View
+        style={[
+          s.stepContainer,
+          { opacity: fadeAnim, transform: [{ translateY: slideAnim }] },
+        ]}
+      >
+        <View style={s.stepTop}>
+          <Text style={[s.title, { color: t.text }]}>Enable Notifications</Text>
+          <Text style={[s.subtitle, { color: t.textMuted }]}>
+            Stay in the loop with real-time updates
+          </Text>
+          <StepIndicator currentStep={3} />
+
+          <View style={pushStyles.iconContainer}>
+            <View style={[pushStyles.bellCircle, { backgroundColor: accent + '20' }]}>
+              <Text style={[pushStyles.bellIcon, { color: accent }]}>{'\uD83D\uDD14'}</Text>
+            </View>
+          </View>
+
+          <View style={pushStyles.benefitsList}>
+            <Text style={[pushStyles.benefitsHeader, { color: t.text }]}>
+              Get real-time updates when:
+            </Text>
+            {benefits.map((item, i) => (
+              <View key={i} style={pushStyles.benefitRow}>
+                <View style={[pushStyles.bulletDot, { backgroundColor: accent }]} />
+                <Text style={[pushStyles.benefitText, { color: t.textMuted }]}>{item}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        <View style={s.bottomRow}>
+          <TouchableOpacity
+            style={[s.secondaryBtn, { borderColor: t.border }]}
+            onPress={onComplete}
+            activeOpacity={0.7}
+          >
+            <Text style={[s.secondaryBtnText, { color: t.textMuted }]}>Maybe Later</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[s.primaryBtn, { backgroundColor: accent, flex: 1, opacity: push.loading ? 0.7 : 1 }]}
+            onPress={handleEnable}
+            disabled={push.loading}
+            activeOpacity={0.8}
+          >
+            {push.loading ? (
+              <ActivityIndicator color="#FFFFFF" size="small" />
+            ) : (
+              <Text style={s.primaryBtnText}>Enable Notifications</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const pushStyles = StyleSheet.create({
+  iconContainer: { alignItems: 'center', marginVertical: 24 },
+  bellCircle: { width: 100, height: 100, borderRadius: 50, justifyContent: 'center', alignItems: 'center' },
+  bellIcon: { fontSize: 48 },
+  benefitsList: { paddingHorizontal: 24, gap: 12, marginTop: 8 },
+  benefitsHeader: { fontSize: 17, fontWeight: '700', marginBottom: 4 },
+  benefitRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+  bulletDot: { width: 8, height: 8, borderRadius: 4 },
+  benefitText: { fontSize: 16, flex: 1 },
+});
+
 // ── Styles ──
 
 const s = StyleSheet.create({