add websockets

app/package.json

@@ -49,6 +49,7 @@
     "react-native-passport-reader": "^1.0.3",
     "react-native-svg": "13.4.0",
     "react-native-zip-archive": "^6.1.0",
+    "socket.io-client": "^4.7.5",
     "tamagui": "^1.103.0",
     "zustand": "^4.5.2"
   },

app/src/screens/MainScreen.tsx

@@ -5,7 +5,7 @@ import Dialog from "react-native-dialog";
 import { ethers } from 'ethers';
 // import ressources
 import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4, H3, Separator } from 'tamagui'
-import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser, CalendarSearch, Cross, X, UserPlus } from '@tamagui/lucide-icons';
+import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser, CalendarSearch, Cross, X, UserPlus, Wifi } from '@tamagui/lucide-icons';
 import Xlogo from '../images/x.png'
 import Telegram from '../images/telegram.png'
 import Github from '../images/github.png'
@@ -45,6 +45,7 @@ import StartScreen from './StartScreen';
 import CustomButton from '../components/CustomButton';
 import StepOneStepTwo from '../components/StepOneStepTwo';
 import SplashScreen from './SplashScreen';
+import WebSocketTest from './WebSocketTest';
 
 const MainScreen: React.FC = () => {
   const [NFCScanIsOpen, setNFCScanIsOpen] = useState(false);
@@ -476,6 +477,14 @@ const MainScreen: React.FC = () => {
                         <UserPlus color={textColor2} />
                       </Button>
                     </Fieldset>
+                    <Fieldset gap="$4" mt="$1" horizontal>
+                      <Label color={textColor1} width={200} justifyContent="flex-end" htmlFor="skip" >
+                        websocket screen
+                      </Label>
+                      <Button bg={componentBgColor} jc="center" borderColor={borderColor} borderWidth={1.2} size="$3.5" ml="$2" onPress={() => setSelectedTab('websocket')}>
+                        <Wifi color={textColor2} />
+                      </Button>
+                    </Fieldset>
                   </>
                 )}
 
@@ -793,6 +802,9 @@ const MainScreen: React.FC = () => {
             <StartScreen
             />
           </Tabs.Content>
+          <Tabs.Content value="websocket" f={1}>
+            <WebSocketTest />
+          </Tabs.Content>
           <Tabs.Content value="scan" f={1}>
             <CameraScreen
               sheetIsOpen={sheetIsOpen}

app/src/screens/ProveScreen.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { YStack, XStack, Text, Checkbox, Input, Button, Spinner, Image, useWindowDimensions, ScrollView, Fieldset } from 'tamagui';
-import { Check, Plus, Minus, PenTool, ShieldCheck } from '@tamagui/lucide-icons';
-import { getFirstName, maskString } from '../../utils/utils';
-import { attributeToPosition, COMMITMENT_TREE_TRACKER_URL } from '../../../common/src/constants/constants';
+import { Check, } from '@tamagui/lucide-icons';
+import { attributeToPosition, } from '../../../common/src/constants/constants';
 import USER from '../images/user.png'
 import { bgGreen, borderColor, componentBgColor, componentBgColor2, separatorColor, textBlack, textColor1, textColor2 } from '../utils/colors';
 import { ethers } from 'ethers';
@@ -15,13 +14,14 @@ import { AppType } from '../../../common/src/utils/appType';
 import useSbtStore from '../stores/sbtStore';
 import CustomButton from '../components/CustomButton';
 import { generateCircuitInputsDisclose } from '../../../common/src/utils/generateInputs';
-import { PASSPORT_ATTESTATION_ID, RPC_URL, SignatureAlgorithm } from '../../../common/src/constants/constants';
+import { PASSPORT_ATTESTATION_ID } from '../../../common/src/constants/constants';
 import axios from 'axios';
-//import { getTreeFromTracker } from '../../../common/src/utils/commitmentTree';
 import { stringToNumber } from '../../../common/src/utils/utils';
 import { revealBitmapFromAttributes } from '../../../common/src/utils/revealBitmap';
 import { getTreeFromTracker } from '../../../common/src/utils/pubkeyTree';
 import { generateProof } from '../utils/prover';
+import io, { Socket } from 'socket.io-client';
+
 interface ProveScreenProps {
   setSheetRegisterIsOpen: (value: boolean) => void;
 }
@@ -41,59 +41,81 @@ const ProveScreen: React.FC<ProveScreenProps> = ({ setSheetRegisterIsOpen }) =>
     secret,
   } = useUserStore()
 
-  // const {
-  //   fields,
-  //   handleProve,
-  //   circuit,
-  // } = selectedAp
-  const handleProve = async () => {
-    console.log("handleProve");
+  const [proofStatus, setProofStatus] = useState<string>('');
 
-    const tree = await getTreeFromTracker(setRequestingMerkle);
+  const [socket, setSocket] = useState<Socket | null>(null);
 
-    const base_majority = [BigInt(1).toString(), BigInt(8).toString()];
-    const majority = (selectedApp.disclosureOptions?.older_than ? Array.from(selectedApp.disclosureOptions.older_than).map(char => {
-      try {
-        return BigInt(char).toString();
-      } catch (error) {
-        console.error(`Failed to convert ${char} to BigInt:`, error);
-        return null; // or handle the error as needed
-      }
-    }).filter(char => char !== null) : base_majority);
-
-    const inputs = generateCircuitInputsDisclose(
-      secret,
-      PASSPORT_ATTESTATION_ID,
-      passportData,
-      tree as any,
-      [BigInt(49).toString(), BigInt(50).toString()],
-      revealBitmapFromAttributes(selectedApp.disclosureOptions as any),
-      selectedApp.scope,
-      stringToNumber(selectedApp.userId).toString()
-
-    )
-    console.log("inputs", inputs);
-    const proof = await generateProof(
-      selectedApp.circuit,
-      inputs,
-    );
-    toast.show('🔥', {
-      message: JSON.stringify(proof),
-      customData: {
-
-        type: "info",
-      },
+  useEffect(() => {
+    const newSocket = io('https://proofofpassport-merkle-tree.xyz', {
+      path: '/websocket',
+      transports: ['websocket'],
+      query: { sessionId: selectedApp.userId, clientType: 'mobile' }
     });
 
+    newSocket.on('connect', () => {
+      console.log('Connected to WebSocket server');
+    });
 
-  }
+    newSocket.on('disconnect', () => {
+      console.log('Disconnected from WebSocket server');
+    });
 
-  // const {
-  //   address,
-  //   majority,
-  //   disclosure,
-  //   update
-  // } = useAppStore();
+    newSocket.on('connect_error', (error) => {
+      console.error('Connection error:', error);
+    });
+
+    setSocket(newSocket);
+
+    return () => {
+      newSocket.disconnect();
+    };
+  }, [selectedApp.userId]);
+
+  const handleProve = async () => {
+    try {
+      if (!socket || !socket.connected) {
+        throw new Error('WebSocket not connected');
+      }
+
+      socket.emit('proof_generation_start', { sessionId: selectedApp.userId });
+      setProofStatus('Generating proof...');
+
+      const tree = await getTreeFromTracker(setRequestingMerkle);
+
+      const inputs = generateCircuitInputsDisclose(
+        secret,
+        PASSPORT_ATTESTATION_ID,
+        passportData,
+        tree as any,
+        [BigInt(49).toString(), BigInt(50).toString()],
+        revealBitmapFromAttributes(selectedApp.disclosureOptions as any),
+        selectedApp.scope,
+        stringToNumber(selectedApp.userId).toString()
+      );
+
+      console.log("inputs", inputs);
+      const proof = await generateProof(
+        selectedApp.circuit,
+        inputs,
+      );
+
+      setProofStatus('Sending proof to verification...');
+
+      // Send the proof via WebSocket
+      socket.emit('proof_generated', { sessionId: selectedApp.userId, proof });
+
+      // Wait for verification result
+      const verificationResult = await new Promise((resolve) => {
+        socket.once('proof_verification_result', resolve);
+      });
+
+      setProofStatus(`Proof verification result: ${JSON.stringify(verificationResult)}`);
+
+    } catch (error) {
+      console.error('Error in handleProve:', error);
+      setProofStatus(`Error: ${error || 'An unknown error occurred'}`);
+    }
+  };
 
   const {
     registered,
@@ -105,12 +127,6 @@ const ProveScreen: React.FC<ProveScreenProps> = ({ setSheetRegisterIsOpen }) =>
     if (requiredOrOptional === 'required') {
       return;
     }
-    // update({
-    //   disclosure: {
-    //     ...disclosure,
-    //     [field]: !disclosure[field as keyof typeof disclosure]
-    //   }
-    // });
   };
   const handleAcknoledge = () => {
     setAcknowledged(!acknowledged);
@@ -118,8 +134,6 @@ const ProveScreen: React.FC<ProveScreenProps> = ({ setSheetRegisterIsOpen }) =>
   const { height } = useWindowDimensions();
 
   useEffect(() => {
-    // this already checks if downloading is required
-    // downloadZkey(circuit);
   }, [])
 
   const disclosureFieldsToText = (key: string, value: string = "") => {
@@ -145,9 +159,6 @@ const ProveScreen: React.FC<ProveScreenProps> = ({ setSheetRegisterIsOpen }) =>
         </Text>
       </YStack>
 
-      {/* <Text mt="$8" fontSize="$8" color={textBlack}>
-        I want to prove that:
-      </Text> */}
       <YStack mt="$6">
 
 
@@ -178,7 +189,6 @@ const ProveScreen: React.FC<ProveScreenProps> = ({ setSheetRegisterIsOpen }) =>
                 {key_ === 'older_than' ? (
                   <XStack gap="$1.5" jc='center' ai='center'>
                     <XStack mr="$2">
-                      {/* <Text color={textColor1} w="$1" fontSize={16}>{majority}</Text> */}
                       <Text color={textBlack} fontSize="$6">{disclosureFieldsToText('older_than', (selectedApp.disclosureOptions as any).older_than)}</Text>
                     </XStack>
                   </XStack>
@@ -232,6 +242,12 @@ const ProveScreen: React.FC<ProveScreenProps> = ({ setSheetRegisterIsOpen }) =>
       })} />
 
 
+      {proofStatus && (
+        <Text mt="$4" fontSize="$6" color={textBlack}>
+          {proofStatus}
+        </Text>
+      )}
+
     </YStack >
   );
 };

app/src/screens/WebSocketTest.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Button, Text, StyleSheet } from 'react-native';
+import io, { Socket } from 'socket.io-client';
+
+const WebSocketTest: React.FC = () => {
+    const [status, setStatus] = useState('Disconnected');
+    const [socket, setSocket] = useState<Socket | null>(null);
+    const sessionId = '123'; // In a real app, this should be dynamically generated or received from the web app
+
+    const initializeSocket = useCallback(() => {
+        const newSocket = io('https://proofofpassport-merkle-tree.xyz', {
+            path: '/websocket',
+            transports: ['websocket'],
+            query: { sessionId, clientType: 'mobile' }
+        });
+
+        newSocket.on('connect', () => {
+            setStatus('Connected to server');
+            console.log('Connected to WebSocket server');
+            newSocket.emit('mobile_connected', { sessionId });
+        });
+
+        newSocket.on('disconnect', () => {
+            setStatus('Disconnected from server');
+            console.log('Disconnected from WebSocket server');
+        });
+
+        newSocket.on('handshake_response', (data: { message: string }) => {
+            setStatus(`Server response: ${data.message}`);
+            console.log('Handshake response:', data.message);
+        });
+
+        newSocket.on('connect_error', (error) => {
+            console.error('Connection error:', error);
+            setStatus(`Connection error: ${error.message}`);
+        });
+
+        setSocket(newSocket);
+
+        return newSocket;
+    }, []);
+
+    useEffect(() => {
+        const newSocket = initializeSocket();
+
+        return () => {
+            newSocket.disconnect();
+        };
+    }, [initializeSocket]);
+
+    const handleHandshake = () => {
+        if (socket && socket.connected) {
+            socket.emit('handshake', { message: 'Hello from React Native!', sessionId });
+            setStatus('Handshake initiated...');
+        } else {
+            setStatus('Socket not connected. Attempting to reconnect...');
+            const newSocket = initializeSocket();
+            setSocket(newSocket);
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            <Button title="Initiate Handshake" onPress={handleHandshake} />
+            <Text style={styles.statusText}>{status}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    statusText: {
+        marginTop: 20,
+        fontSize: 16,
+    },
+});
+
+export default WebSocketTest;