added periodic monitor of blox status

Author: ehsan6sha

apps/box/android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,7 @@
     xmlns:tools="http://schemas.android.com/tools">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE_DATA_SYNC"/>
     <uses-permission android:name="android.permission.BLUETOOTH" tools:remove="android:maxSdkVersion" />

apps/box/ios/Box/AppDelegate.swift

@@ -2,6 +2,7 @@ import UIKit
 import React
 import React_RCTAppDelegate
 import ReactAppDependencyProvider
+import TSBackgroundFetch
 
 @main
 class AppDelegate: RCTAppDelegate {
@@ -17,6 +18,9 @@ class AppDelegate: RCTAppDelegate {
         // They will be passed down to the ViewController used by React Native.
         self.initialProps = [:]
 
+        // Initialize background fetch
+        TSBackgroundFetch.sharedInstance().didFinishLaunching()
+
         return super.application(application, didFinishLaunchingWithOptions: launchOptions)
     }
 

apps/box/ios/Box/Info.plist

@@ -101,6 +101,15 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>fetch</string>
+		<string>processing</string>
+	</array>
+	<key>BGTaskSchedulerPermittedIdentifiers</key>
+	<array>
+		<string>com.transistorsoft.fetch</string>
+	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

apps/box/package.json

@@ -90,7 +90,8 @@
     "whatwg-fetch": "*",
     "zustand": "*",
     "@web3modal/wagmi-react-native": "*",
-    "react-native-randombytes": "*"
+    "react-native-randombytes": "*",
+    "react-native-background-fetch": "*"
   },
   "devDependencies": {
     "@babel/core": "*",

apps/box/src/app/App.tsx

@@ -30,6 +30,7 @@ import { copyToClipboard } from '../utils/clipboard';
 import { fula } from '@functionland/react-native-fula';
 import { AppKitProvider, AppKit } from '@reown/appkit-react-native';
 import { appKit } from '../config/appKitConfig';
+import { configureBackgroundBloxCheck } from '../services/backgroundBloxCheck';
 
 if (Platform.OS === 'android') {
   if (UIManager.setLayoutAnimationEnabledExperimental) {
@@ -81,8 +82,15 @@ export const App = () => {
 const AppContent = () => {
   const appState = useRef(AppState.currentState);
   const debugMode = useSettingsStore((state) => state.debugMode);
+  const bloxStatusCheckInterval = useSettingsStore((state) => state.bloxStatusCheckInterval);
   const { isDebugModeEnable } = useLogger();
 
+  useEffect(() => {
+    if (bloxStatusCheckInterval !== undefined) {
+      configureBackgroundBloxCheck(bloxStatusCheckInterval).catch(console.error);
+    }
+  }, [bloxStatusCheckInterval]);
+
   useEffect(() => {
     if (!__DEV__) {
       console.log = () => null;

apps/box/src/components/SettingsList/SettingsMenu.tsx

@@ -9,13 +9,22 @@ import { useNavigation } from '@react-navigation/native';
 import { useSettingsStore, useColorMode } from '../../stores';
 import { CHAIN_DISPLAY_NAMES } from '../../contracts/config';
 
+const INTERVAL_LABELS: Record<number, string> = {
+  0: 'Disabled',
+  480: 'Every 8 hours',
+  1440: 'Every 24 hours',
+};
+
 export const SettingsMenu = () => {
   const navigation =
     useNavigation<SettingsStackNavigationProps<Routes.Settings>>();
   const rootNavigation = useNavigation();
 
   const mode = useColorMode();
   const selectedChain = useSettingsStore((state) => state.selectedChain);
+  const bloxStatusCheckInterval = useSettingsStore(
+    (state) => state.bloxStatusCheckInterval
+  );
 
   // Add app component gallery in development mode
   const appGallery = __DEV__
@@ -30,9 +39,9 @@ export const SettingsMenu = () => {
 
   const menuItems = [
     {
-      name: 'Connected dApps',
-      detail: null,
-      onPress: () => navigation.navigate(Routes.ConnectedDApps),
+      name: 'Blox Status Monitor',
+      detail: INTERVAL_LABELS[bloxStatusCheckInterval] ?? 'Disabled',
+      onPress: () => navigation.navigate(Routes.BloxStatusMonitor),
     },
     {
       name: 'Mode',

apps/box/src/main.tsx

@@ -16,6 +16,10 @@ if (typeof fetch === 'undefined') {
 
 AppRegistry.registerComponent('Box', () => App);
 
+import BackgroundFetch from 'react-native-background-fetch';
+import { headlessBloxCheckTask } from './services/backgroundBloxCheck';
+BackgroundFetch.registerHeadlessTask(headlessBloxCheckTask);
+
 LogBox.ignoreLogs([
   'Require cycle: ../../node_modules/',
   'InteractionManager has been deprecated',

apps/box/src/navigation/MainTabs.navigator.tsx

@@ -35,6 +35,7 @@ import {
   ModeScreen,
   ChainSelectionScreen,
   ConnectedDAppsScreen,
+  BloxStatusMonitorScreen,
 } from '../screens/Settings';
 import { ComponentGalleryNavigator } from './ComponentGallery.navigator';
 import { GlobalBottomSheet } from '../components/GlobalBottomSheet';
@@ -319,6 +320,10 @@ const SettingsNavigator = () => {
         name={Routes.ConnectedDApps}
         component={ConnectedDAppsScreen}
       />
+      <SettingsStack.Screen
+        name={Routes.BloxStatusMonitor}
+        component={BloxStatusMonitorScreen}
+      />
       <SettingsStack.Screen name={Routes.Mode} component={ModeScreen} />
       <SettingsStack.Screen name={Routes.ChainSelection} component={ChainSelectionScreen} />
       <SettingsStack.Screen name={Routes.Pools} component={PoolsScreen} />

apps/box/src/navigation/navigationConfig.ts

@@ -39,6 +39,7 @@ export enum Routes {
   // Settings Stack
   Settings = 'Settings',
   ConnectedDApps = 'ConnectedDApps',
+  BloxStatusMonitor = 'BloxStatusMonitor',
   Mode = 'Mode',
   ChainSelection = 'ChainSelection',
   Pools = 'Pools',
@@ -93,6 +94,7 @@ export type SettingsStackParamList = {
     returnDeepLink?: string;
     accountId?: string;
   };
+  [Routes.BloxStatusMonitor]: undefined;
   [Routes.Mode]: undefined;
   [Routes.ChainSelection]: undefined;
   [Routes.Pools]: undefined;

apps/box/src/screens/Settings/BloxStatusMonitor.screen.tsx

@@ -0,0 +1,55 @@
+import {
+  FxBox,
+  FxRadioButton,
+  FxRadioButtonWithLabel,
+  FxText,
+} from '@functionland/component-library';
+import React from 'react';
+import { SubHeaderText } from '../../components/Text';
+import { useSettingsStore } from '../../stores';
+
+const INTERVAL_OPTIONS = [
+  { value: '0', label: 'Disabled' },
+  { value: '480', label: 'Every 8 hours' },
+  { value: '1440', label: 'Every 24 hours' },
+] as const;
+
+export const BloxStatusMonitorScreen = () => {
+  const bloxStatusCheckInterval = useSettingsStore(
+    (state) => state.bloxStatusCheckInterval
+  );
+  const setBloxStatusCheckInterval = useSettingsStore(
+    (state) => state.setBloxStatusCheckInterval
+  );
+
+  return (
+    <FxBox marginHorizontal="20">
+      <SubHeaderText marginVertical="16">Blox Status Monitor</SubHeaderText>
+      <FxText variant="bodySmallRegular" marginBottom="8">
+        Check interval
+      </FxText>
+      <FxText variant="bodyXSRegular" color="content3" marginBottom="16">
+        When enabled, the app periodically checks if your bloxes are reachable
+        and notifies you of any that are disconnected — even when the app is
+        closed.
+      </FxText>
+      <FxRadioButton.Group
+        value={String(bloxStatusCheckInterval)}
+        onValueChange={(val: string) =>
+          setBloxStatusCheckInterval(Number(val))
+        }
+      >
+        {INTERVAL_OPTIONS.map((opt) => (
+          <FxBox key={opt.value} marginBottom="8">
+            <FxRadioButtonWithLabel value={opt.value} label={opt.label} />
+          </FxBox>
+        ))}
+      </FxRadioButton.Group>
+      <FxText variant="bodyXSRegular" color="content3" marginTop="16">
+        Note: On iOS, the system controls exact timing and may delay background
+        tasks based on battery state and usage patterns. Each blox check takes
+        approximately 30 seconds.
+      </FxText>
+    </FxBox>
+  );
+};