Windows (#415)

ehsan6sha · web-flow · commit 3e3c5106d030 · 2026-03-06T10:37:54.000-05:00
* Added manual pair device

* permissoin fix
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 256
-        versionName "2.5.0"
+        versionCode 257
+        versionName "2.5.1"
 
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
diff --git a/apps/box/android/app/src/main/AndroidManifest.xml b/apps/box/android/app/src/main/AndroidManifest.xml
@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.CAMERA"/>
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
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.5.0;
+				MARKETING_VERSION = 2.5.1;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -627,7 +627,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.5.0;
+				MARKETING_VERSION = 2.5.1;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
diff --git a/apps/box/ios/Box/Info.plist b/apps/box/ios/Box/Info.plist
@@ -73,6 +73,8 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSCameraUsageDescription</key>
+	<string>This app uses the camera to scan QR codes for auto-pin pairing setup.</string>
 	<key>NSBluetoothAlwaysUsageDescription</key>
 	<string>This app uses Bluetooth to connect to nearby devices for setting up the hardware iOT device locally without wifi.</string>
 	<key>NSBluetoothPeripheralUsageDescription</key>
diff --git a/apps/box/package.json b/apps/box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "box",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "private": true,
   "dependencies": {
     "@babel/core": "*",
@@ -78,6 +78,7 @@
     "react-native-syntax-highlighter": "*",
     "react-native-tab-view": "*",
     "react-native-url-polyfill": "*",
+    "react-native-vision-camera": "*",
     "react-native-webview": "*",
     "react-native-wheel-color-picker": "*",
     "react-native-wifi-reborn": "*",
diff --git a/apps/box/src/components/SettingsList/SettingsMenu.tsx b/apps/box/src/components/SettingsList/SettingsMenu.tsx
@@ -80,6 +80,11 @@ export const SettingsMenu = () => {
     //   detail: null,
     //   onPress: () => navigation.navigate(Routes.BloxLogs),
     // },
+    {
+      name: 'Auto-Pin Pairing',
+      detail: null,
+      onPress: () => navigation.navigate(Routes.AutoPinPairing),
+    },
     {
       name: 'About',
       detail: null,
diff --git a/apps/box/src/screens/Settings/AutoPinPairing/AutoPinPairing.screen.tsx b/apps/box/src/screens/Settings/AutoPinPairing/AutoPinPairing.screen.tsx
@@ -1,10 +1,17 @@
 import React, { useState } from 'react';
-import { Alert, Linking } from 'react-native';
+import {
+  Alert,
+  Linking,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
 import {
   FxBox,
   FxButton,
   FxSafeAreaBox,
   FxText,
+  useFxTheme,
 } from '@functionland/component-library';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { blockchain, fula } from '@functionland/react-native-fula';
@@ -14,6 +21,8 @@ import {
 } from '../../../navigation/navigationConfig';
 import { useBloxsStore } from '../../../stores/useBloxsStore';
 import { useDAppsStore } from '../../../stores/dAppsSettingsStore';
+import { copyToClipboard } from '../../../utils/clipboard';
+import { QRScannerModal } from './QRScannerModal';
 
 type Props = NativeStackScreenProps<
   SettingsStackParamList,
@@ -24,19 +33,32 @@ export const AutoPinPairingScreen = ({ route, navigation }: Props) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
+  const [scannerVisible, setScannerVisible] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  // Manual mode state
+  const [tokenInput, setTokenInput] = useState('');
+  const [endpointInput, setEndpointInput] = useState('');
+  const [pairingSecret, setPairingSecret] = useState<string | null>(null);
 
   const bloxs = useBloxsStore((state) => state.bloxs);
   const currentBloxPeerId = useBloxsStore((state) => state.currentBloxPeerId);
   const addOrUpdateDApp = useDAppsStore((state) => state.addOrUpdateDApp);
 
+  const theme = useFxTheme();
+
+  // Deep link params
   const token = route?.params?.token;
   const endpoint = route?.params?.endpoint;
   const returnUrl = route?.params?.returnUrl;
 
+  const isDeepLinkMode = !!token;
+
   const currentBlox = bloxs[currentBloxPeerId];
   const bloxName = currentBlox?.name || 'My Blox';
 
-  const handlePair = async () => {
+  // Deep link mode handler (existing behavior)
+  const handleDeepLinkPair = async () => {
     if (!token || !endpoint) {
       setError('Missing pairing parameters');
       return;
@@ -106,9 +128,102 @@ export const AutoPinPairingScreen = ({ route, navigation }: Props) => {
     }
   };
 
-  // Note: We intentionally don't auto-trigger pairing.
-  // User must read the confirmation and press the button.
+  // Manual mode handler
+  const handleManualPair = async () => {
+    if (!tokenInput || !endpointInput) {
+      setError('Please fill in both API Key and Endpoint');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setPairingSecret(null);
+
+    try {
+      await fula.isReady(false);
 
+      const result = await blockchain.autoPinPair(tokenInput, endpointInput);
+
+      if (result?.pairing_secret) {
+        setPairingSecret(result.pairing_secret);
+      } else {
+        setError('Unexpected response from blox');
+      }
+    } catch (e: any) {
+      const msg = e?.message || e?.toString() || 'Unknown error';
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopy = () => {
+    if (pairingSecret) {
+      copyToClipboard(pairingSecret);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleQRScanned = (api: string, qrEndpoint: string) => {
+    setTokenInput(api);
+    setEndpointInput(qrEndpoint);
+    setScannerVisible(false);
+  };
+
+  // Deep link mode UI (unchanged behavior)
+  if (isDeepLinkMode) {
+    return (
+      <FxSafeAreaBox flex={1} edges={['top']} paddingHorizontal="20">
+        <FxBox marginTop="32">
+          <FxText variant="h300" marginBottom="16">
+            Auto-Pin Pairing
+          </FxText>
+
+          <FxText variant="bodyMediumRegular" marginBottom="24" color="content2">
+            FxFiles wants to enable auto-pinning on your blox. This will
+            automatically pin your uploaded files to{' '}
+            <FxText variant="bodySmallSemibold">{bloxName}</FxText>, allowing you to
+            download them directly from your local network.
+          </FxText>
+
+          {error && (
+            <FxBox
+              backgroundColor="errorBase"
+              padding="16"
+              borderRadius="s"
+              marginBottom="16"
+            >
+              <FxText color="content1">{error}</FxText>
+            </FxBox>
+          )}
+
+          {success ? (
+            <FxBox
+              backgroundColor="greenBackground"
+              padding="16"
+              borderRadius="s"
+            >
+              <FxText color="content1">
+                Auto-pinning is enabled! Your files will be automatically pinned
+                to this blox.
+              </FxText>
+            </FxBox>
+          ) : (
+            <FxButton
+              size="large"
+              onPress={handleDeepLinkPair}
+              disabled={loading || !token || !endpoint}
+            >
+              {loading ? 'Pairing...' : 'Enable Auto-Pin'}
+            </FxButton>
+          )}
+        </FxBox>
+      </FxSafeAreaBox>
+    );
+  }
+
+  // Manual mode UI
   return (
     <FxSafeAreaBox flex={1} edges={['top']} paddingHorizontal="20">
       <FxBox marginTop="32">
@@ -117,12 +232,59 @@ export const AutoPinPairingScreen = ({ route, navigation }: Props) => {
         </FxText>
 
         <FxText variant="bodyMediumRegular" marginBottom="24" color="content2">
-          FxFiles wants to enable auto-pinning on your blox. This will
-          automatically pin your uploaded files to{' '}
-          <FxText variant="bodySmallSemibold">{bloxName}</FxText>, allowing you to
-          download them directly from your local network.
+          Scan a QR code or enter the API key and endpoint manually to pair an
+          app for auto-pinning.
         </FxText>
 
+        <FxButton
+          size="large"
+          marginBottom="24"
+          onPress={() => setScannerVisible(true)}
+        >
+          Scan QR Code
+        </FxButton>
+
+        <FxText variant="bodySmallSemibold" marginBottom="8" color="content2">
+          API Key
+        </FxText>
+        <TextInput
+          style={[
+            styles.input,
+            {
+              color: theme.colors.content1,
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.backgroundSecondary,
+            },
+          ]}
+          value={tokenInput}
+          onChangeText={setTokenInput}
+          placeholder="Enter API key"
+          placeholderTextColor={theme.colors.content3}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        <FxText variant="bodySmallSemibold" marginBottom="8" color="content2">
+          Endpoint
+        </FxText>
+        <TextInput
+          style={[
+            styles.input,
+            {
+              color: theme.colors.content1,
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.backgroundSecondary,
+            },
+          ]}
+          value={endpointInput}
+          onChangeText={setEndpointInput}
+          placeholder="Enter endpoint URL"
+          placeholderTextColor={theme.colors.content3}
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="url"
+        />
+
         {error && (
           <FxBox
             backgroundColor="errorBase"
@@ -134,27 +296,67 @@ export const AutoPinPairingScreen = ({ route, navigation }: Props) => {
           </FxBox>
         )}
 
-        {success ? (
-          <FxBox
-            backgroundColor="greenBackground"
-            padding="16"
-            borderRadius="s"
-          >
-            <FxText color="content1">
-              Auto-pinning is enabled! Your files will be automatically pinned
-              to this blox.
+        {pairingSecret ? (
+          <FxBox marginBottom="16">
+            <FxText variant="bodySmallSemibold" marginBottom="8" color="content2">
+              Pairing Secret
             </FxText>
+            <TouchableOpacity onPress={handleCopy} activeOpacity={0.7}>
+              <FxBox
+                backgroundColor="backgroundSecondary"
+                padding="16"
+                borderRadius="s"
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                <FxText
+                  variant="bodyMediumRegular"
+                  color="content1"
+                  style={styles.secretText}
+                >
+                  {pairingSecret}
+                </FxText>
+                <FxText
+                  variant="bodySmallSemibold"
+                  color={copied ? 'greenBase' : 'primary'}
+                >
+                  {copied ? 'Copied!' : 'Copy'}
+                </FxText>
+              </FxBox>
+            </TouchableOpacity>
           </FxBox>
         ) : (
           <FxButton
             size="large"
-            onPress={handlePair}
-            disabled={loading || !token || !endpoint}
+            onPress={handleManualPair}
+            disabled={loading || !tokenInput || !endpointInput}
           >
-            {loading ? 'Pairing...' : 'Enable Auto-Pin'}
+            {loading ? 'Getting Secret...' : 'Get Secret'}
           </FxButton>
         )}
       </FxBox>
+
+      <QRScannerModal
+        visible={scannerVisible}
+        onScanned={handleQRScanned}
+        onClose={() => setScannerVisible(false)}
+      />
     </FxSafeAreaBox>
   );
 };
+
+const styles = StyleSheet.create({
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+    marginBottom: 16,
+  },
+  secretText: {
+    flex: 1,
+    marginRight: 12,
+  },
+});
diff --git a/apps/box/src/screens/Settings/AutoPinPairing/QRScannerModal.tsx b/apps/box/src/screens/Settings/AutoPinPairing/QRScannerModal.tsx
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
