Added blox manager, made switching and status check better

ehsan6sha · ehsan6sha · commit 1bf3d0ac0601 · 2026-02-13T02:57:04.000-05:00
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -37,7 +37,11 @@
       "WebFetch(domain:docs.reown.com)",
       "WebFetch(domain:docs.metamask.io)",
       "WebFetch(domain:developer.trustwallet.com)",
-      "WebFetch(domain:specs.walletconnect.com)"
+      "WebFetch(domain:specs.walletconnect.com)",
+      "Bash(wc:*)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:api.github.com)",
+      "Bash(curl:*)"
     ]
   }
 }
diff --git a/apps/box/android/app/build.gradle b/apps/box/android/app/build.gradle
@@ -86,8 +86,8 @@ android {
         applicationId "land.fx.blox"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 252
-        versionName "2.3.0"
+        versionCode 253
+        versionName "2.3.1"
 
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
diff --git a/apps/box/ios/Box.xcodeproj/project.pbxproj b/apps/box/ios/Box.xcodeproj/project.pbxproj
@@ -589,7 +589,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.3.0;
+				MARKETING_VERSION = 2.3.1;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -627,7 +627,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.3.0;
+				MARKETING_VERSION = 2.3.1;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
diff --git a/apps/box/package.json b/apps/box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "box",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "private": true,
   "dependencies": {
     "@babel/core": "*",
diff --git a/apps/box/src/components/BloxSelectionBottomSheet.tsx b/apps/box/src/components/BloxSelectionBottomSheet.tsx
@@ -31,6 +31,7 @@ const BloxListItem = ({ blox, isSelected, connectionStatus, onSelect }: BloxList
     switch (connectionStatus) {
       case 'CONNECTED':
         return 'successBase';
+      case 'SWITCHING':
       case 'CHECKING':
         return 'warningBase';
       default:
diff --git a/apps/box/src/components/CurrentBloxIndicator.tsx b/apps/box/src/components/CurrentBloxIndicator.tsx
@@ -31,6 +31,7 @@ export const CurrentBloxIndicator = ({
     switch (connectionStatus) {
       case 'CONNECTED':
         return 'successBase';
+      case 'SWITCHING':
       case 'CHECKING':
         return 'warningBase';
       default:
@@ -42,6 +43,8 @@ export const CurrentBloxIndicator = ({
     switch (connectionStatus) {
       case 'CONNECTED':
         return t('currentBloxIndicator.connected');
+      case 'SWITCHING':
+        return t('currentBloxIndicator.switching');
       case 'CHECKING':
         return t('currentBloxIndicator.checking');
       case 'DISCONNECTED':
diff --git a/apps/box/src/i18n/locales/en/translation.json b/apps/box/src/i18n/locales/en/translation.json
@@ -229,6 +229,7 @@
       "noBloxSelected": "No Blox Selected",
       "connected": "Connected",
       "checking": "Checking",
+      "switching": "Switching",
       "disconnected": "Disconnected"
     },
     "bleDeviceSelection": {
diff --git a/apps/box/src/models/blox.ts b/apps/box/src/models/blox.ts
@@ -17,6 +17,7 @@ export interface TBloxFolderSize {
 export type TBloxConectionStatus =
   | 'CONNECTED'
   | 'CHECKING'
+  | 'SWITCHING'
   | 'DISCONNECTED'
   | 'NO INTERNET'
   | 'NO CLIENT';
diff --git a/apps/box/src/navigation/Root.navigator.tsx b/apps/box/src/navigation/Root.navigator.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { InitialSetupNavigator } from './InitialSetup.navigator';
 import { MainTabsNavigator } from './MainTabs.navigator';
+import { BloxManagerScreen } from '../screens/BloxManager.screen';
 import { Routes, RootStackParamList } from './navigationConfig';
 import { useUserProfileStore } from '../stores/useUserProfileStore';
 import { useBloxsStore } from '../stores';
@@ -50,6 +51,11 @@ export const RootNavigator = () => {
         component={MainTabsNavigator}
         options={{ headerShown: false }}
       />
+      <RootStack.Screen
+        name={Routes.BloxManager}
+        component={BloxManagerScreen}
+        options={{ headerShown: false }}
+      />
     </RootStack.Navigator>
   );
 };
diff --git a/apps/box/src/navigation/navigationConfig.ts b/apps/box/src/navigation/navigationConfig.ts
@@ -33,6 +33,9 @@ export enum Routes {
   SettingsTab = 'SettingsTab',
   ChatAITab = 'ChatAITab',
 
+  // Blox Manager
+  BloxManager = 'BloxManager',
+
   // Settings Stack
   Settings = 'Settings',
   ConnectedDApps = 'ConnectedDApps',
@@ -67,6 +70,7 @@ export type RootStackParamList = {
   [Routes.Hub]: undefined;
   [Routes.Plugin]: undefined;
   [Routes.ChatAI]: undefined;
+  [Routes.BloxManager]: undefined;
 };
 
 export type MainTabsParamList = {
diff --git a/apps/box/src/screens/Blox/components/BloxHeader.tsx b/apps/box/src/screens/Blox/components/BloxHeader.tsx
@@ -5,6 +5,7 @@ import {
   FxText,
   FxPressableOpacity,
   FxChevronDownIcon,
+  FxGridIcon,
   useFxTheme,
   FxSvg,
   FxSvgProps,
@@ -41,7 +42,17 @@ export const BloxHeader = ({ selectedMode, onChangeMode, onAvatarPress }: TBloxH
       </FxPressableOpacity>
 
       <FxBox flexDirection="row" alignItems="center">
-        <FxPressableOpacity 
+        <FxPressableOpacity
+          onPress={() => navigation.navigate(Routes.BloxManager as never)}
+          marginRight="12"
+        >
+          <FxGridIcon
+            width={24}
+            height={24}
+            fill={colors.content1}
+          />
+        </FxPressableOpacity>
+        <FxPressableOpacity
           onPress={() => navigation.navigate(Routes.InitialSetup, {
             screen: Routes.LinkPassword,
           })}
diff --git a/apps/box/src/screens/Blox/components/BloxInteraction.tsx b/apps/box/src/screens/Blox/components/BloxInteraction.tsx
@@ -133,7 +133,7 @@ export const BloxInteraction = ({
                   color={
                     bloxsConnectionStatus[item.peerId] === 'CONNECTED'
                       ? 'successBase'
-                      : bloxsConnectionStatus[item.peerId] === 'CHECKING'
+                      : bloxsConnectionStatus[item.peerId] === 'CHECKING' || bloxsConnectionStatus[item.peerId] === 'SWITCHING'
                         ? 'warningBase'
                         : 'errorBase'
                   }
@@ -143,7 +143,7 @@ export const BloxInteraction = ({
                   color={
                     bloxsConnectionStatus[item.peerId] === 'CONNECTED'
                       ? 'successBase'
-                      : bloxsConnectionStatus[item.peerId] === 'CHECKING'
+                      : bloxsConnectionStatus[item.peerId] === 'CHECKING' || bloxsConnectionStatus[item.peerId] === 'SWITCHING'
                         ? 'warningBase'
                         : 'errorBase'
                   }
diff --git a/apps/box/src/screens/Blox/components/BloxInteractionImproved.tsx b/apps/box/src/screens/Blox/components/BloxInteractionImproved.tsx
@@ -1,20 +1,20 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import {
   FxBox,
   FxPressableOpacity,
   FxText,
   FxChevronDownIcon,
+  FxGridIcon,
   useFxTheme,
-  FxBottomSheetModalMethods,
-  useToast,
 } from '@functionland/component-library';
+import { useNavigation } from '@react-navigation/native';
 import OfficeBloxUnitDark from '../../../app/icons/office-blox-unit-dark.svg';
 import OfficeBloxUnitLight from '../../../app/icons/office-blox-unit-light.svg';
 
 import { useBloxsStore, useSettingsStore } from '../../../stores';
 import { EBloxInteractionType, TBloxInteraction } from '../../../models';
 import { CircleFilledIcon } from '../../../components/Icons';
-import { BloxSelectionBottomSheet } from '../../../components/BloxSelectionBottomSheet';
+import { Routes } from '../../../navigation/navigationConfig';
 
 type TBloxInteractionImprovedProps = {
   bloxs: TBloxInteraction[];
@@ -29,79 +29,23 @@ export const BloxInteractionImproved = ({
   onConnectionPress,
   onBloxPress,
 }: TBloxInteractionImprovedProps) => {
-  const bloxSelectionRef = useRef<FxBottomSheetModalMethods>(null);
-  const { queueToast } = useToast();
-  const [isBloxSwitching, setIsBloxSwitching] = useState(false);
-  
+  const navigation = useNavigation();
+
   const colorScheme = useSettingsStore((store) => store.colorScheme);
   const { colors } = useFxTheme();
 
   const bloxsConnectionStatus = useBloxsStore((state) => state.bloxsConnectionStatus);
   const currentBloxPeerId = useBloxsStore((state) => state.currentBloxPeerId);
-  const switchToBlox = useBloxsStore((state) => state.switchToBlox);
 
   // Find current Blox
   const currentBlox = bloxs.find(blox => blox.peerId === currentBloxPeerId);
   const currentConnectionStatus = currentBloxPeerId ? bloxsConnectionStatus[currentBloxPeerId] : undefined;
 
-  const handleBloxSelection = async (peerId: string) => {
-    if (peerId === currentBloxPeerId) {
-      return; // Already selected
-    }
-
-    setIsBloxSwitching(true);
-    
-    try {
-      queueToast({
-        type: 'info',
-        title: 'Switching Blox',
-        message: 'Establishing connection to selected Blox...',
-      });
-
-      const success = await switchToBlox(peerId);
-      
-      if (success) {
-        queueToast({
-          type: 'success',
-          title: 'Blox Connected',
-          message: 'Successfully connected to the selected Blox device.',
-        });
-      } else {
-        queueToast({
-          type: 'error',
-          title: 'Connection Failed',
-          message: 'Failed to connect to the selected Blox. Please try again.',
-        });
-      }
-    } catch (error) {
-      console.error('Error switching Blox:', error);
-      queueToast({
-        type: 'error',
-        title: 'Switch Failed',
-        message: 'An error occurred while switching Blox devices.',
-      });
-    } finally {
-      setIsBloxSwitching(false);
-    }
-  };
-
-  const showBloxSelection = () => {
-    if (bloxs.length <= 1) {
-      queueToast({
-        type: 'info',
-        title: 'Single Blox',
-        message: 'You only have one Blox device configured.',
-      });
-      return;
-    }
-    
-    bloxSelectionRef.current?.present();
-  };
-
   const getStatusColor = () => {
     switch (currentConnectionStatus) {
       case 'CONNECTED':
         return 'successBase';
+      case 'SWITCHING':
       case 'CHECKING':
         return 'warningBase';
       default:
@@ -139,13 +83,11 @@ export const BloxInteractionImproved = ({
             
             {bloxs.length > 1 && (
               <FxPressableOpacity
-                onPress={showBloxSelection}
-                disabled={isBloxSwitching}
-                opacity={isBloxSwitching ? 0.5 : 1}
+                onPress={() => navigation.navigate(Routes.BloxManager as never)}
                 padding="8"
                 hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
               >
-                <FxChevronDownIcon
+                <FxGridIcon
                   width={16}
                   height={16}
                   fill={colors.content1}
@@ -175,7 +117,7 @@ export const BloxInteractionImproved = ({
               color={getStatusColor()}
               variant="bodySmallRegular"
             >
-              {isBloxSwitching ? 'SWITCHING...' : (currentConnectionStatus?.toString() || 'UNKNOWN')}
+              {currentConnectionStatus === 'SWITCHING' ? 'SWITCHING...' : currentConnectionStatus === 'CHECKING' ? 'CHECKING...' : (currentConnectionStatus?.toString() || 'UNKNOWN')}
             </FxText>
             <FxChevronDownIcon
               width={16}
@@ -187,11 +129,6 @@ export const BloxInteractionImproved = ({
         </FxBox>
       </FxBox>
 
-      {/* Blox Selection Bottom Sheet */}
-      <BloxSelectionBottomSheet
-        ref={bloxSelectionRef}
-        onBloxSelect={handleBloxSelection}
-      />
     </FxBox>
   );
 };
diff --git a/apps/box/src/screens/BloxManager.screen.tsx b/apps/box/src/screens/BloxManager.screen.tsx
diff --git a/apps/box/src/stores/useBloxsStore.ts b/apps/box/src/stores/useBloxsStore.ts
diff --git a/apps/box/src/stores/useUserProfileStore.ts b/apps/box/src/stores/useUserProfileStore.ts
diff --git a/apps/box/src/utils/helper.ts b/apps/box/src/utils/helper.ts

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,11 @@`
`37`	`37`	`"WebFetch(domain:docs.reown.com)",`
`38`	`38`	`"WebFetch(domain:docs.metamask.io)",`
`39`	`39`	`"WebFetch(domain:developer.trustwallet.com)",`
`40`		`- "WebFetch(domain:specs.walletconnect.com)"`
	`40`	`+ "WebFetch(domain:specs.walletconnect.com)",`
	`41`	`+ "Bash(wc:*)",`
	`42`	`+ "WebFetch(domain:raw.githubusercontent.com)",`
	`43`	`+ "WebFetch(domain:api.github.com)",`
	`44`	`+ "Bash(curl:*)"`
`41`	`45`	`]`
`42`	`46`	`}`
`43`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "box",`
`3`		`- "version": "2.3.0",`
	`3`	`+ "version": "2.3.1",`
`4`	`4`	`"private": true,`
`5`	`5`	`"dependencies": {`
`6`	`6`	`"@babel/core": "*",`