Refactor LoadingScreen to use IDDocument type and update loading text logic (#1106)

- Changed passportData state type from PassportData to IDDocument for better type handling.
- Updated getLoadingScreenText function to accept signatureAlgorithm and curveOrExponent directly instead of PassportMetadata.
- Adjusted loading text and animation logic based on document category, improving clarity and maintainability.

app/src/screens/system/Loading.tsx

@@ -10,6 +10,7 @@ import { Text, YStack } from 'tamagui';
 import type { StaticScreenProps } from '@react-navigation/native';
 import { useIsFocused } from '@react-navigation/native';
 
+import { IDDocument } from '@selfxyz/common/dist/esm/src/utils/types';
 import type { PassportData } from '@selfxyz/common/types';
 
 import failAnimation from '@/assets/animations/loading/fail.json';
@@ -45,7 +46,7 @@ const LoadingScreen: React.FC<LoadingScreenProps> = ({}) => {
   >(proveLoadingAnimation);
 
   // Passport data state
-  const [passportData, setPassportData] = useState<PassportData | null>(null);
+  const [passportData, setPassportData] = useState<IDDocument | null>(null);
 
   // Loading text state
   const [loadingText, setLoadingText] = useState<{
@@ -112,32 +113,47 @@ const LoadingScreen: React.FC<LoadingScreenProps> = ({}) => {
       return;
     }
 
-    // Update UI if passport data is available
-    if (passportData?.passportMetadata) {
-      // Update loading text based on current state
-      const { actionText, estimatedTime } = getLoadingScreenText(
-        currentState as ProvingStateType,
-        passportData?.passportMetadata,
-      );
-      setLoadingText({ actionText, estimatedTime });
+    let { signatureAlgorithm, curveOrExponent } = {
+      signatureAlgorithm: 'rsa',
+      curveOrExponent: '65537',
+    };
+    switch (passportData?.documentCategory) {
+      case 'passport':
+      case 'id_card':
+        if (passportData?.passportMetadata) {
+          signatureAlgorithm =
+            passportData?.passportMetadata?.cscaSignatureAlgorithm;
+          curveOrExponent = passportData?.passportMetadata?.cscaCurveOrExponent;
+        }
+        break;
+      case 'aadhaar':
+        break; // keep the default values for aadhaar
+    }
 
-      // Update animation based on state
-      switch (currentState) {
-        case 'completed':
-          setAnimationSource(successAnimation);
-          break;
-        case 'error':
-        case 'failure':
-        case 'passport_not_supported':
-          setAnimationSource(failAnimation);
-          break;
-        case 'account_recovery_choice':
-        case 'passport_data_not_found':
-          setAnimationSource(failAnimation);
-          break;
-        default:
-          setAnimationSource(proveLoadingAnimation);
-      }
+    const { actionText, estimatedTime } = getLoadingScreenText(
+      currentState as ProvingStateType,
+      signatureAlgorithm,
+      curveOrExponent,
+    );
+    setLoadingText({ actionText, estimatedTime });
+
+    // Update animation based on state
+    switch (currentState) {
+      case 'completed':
+        // setAnimationSource(successAnimation);
+        break;
+      case 'error':
+      case 'failure':
+      case 'passport_not_supported':
+        setAnimationSource(failAnimation);
+        break;
+      case 'account_recovery_choice':
+      case 'passport_data_not_found':
+        setAnimationSource(failAnimation);
+        break;
+      default:
+        setAnimationSource(proveLoadingAnimation);
+        break;
     }
 
     // Stop haptics if we're in a terminal state
@@ -153,7 +169,7 @@ const LoadingScreen: React.FC<LoadingScreenProps> = ({}) => {
     return () => {
       loadingScreenProgress(false);
     };
-  }, [currentState, isFocused, fcmToken, passportData?.passportMetadata]);
+  }, [currentState, isFocused, fcmToken, passportData]);
 
   // Determine if animation should loop based on terminal states
   const shouldLoopAnimation = !terminalStates.includes(

app/src/utils/proving/loadingScreenStateText.ts

@@ -9,14 +9,10 @@ interface LoadingScreenText {
   estimatedTime: string;
 }
 
-export interface PassportMetadata {
-  signatureAlgorithm: string;
-  curveOrExponent: string;
-}
-
 export function getLoadingScreenText(
   state: ProvingStateType,
-  metadata: PassportMetadata,
+  signatureAlgorithm: string,
+  curveOrExponent: string,
   type: 'dsc' | 'register' = 'register',
 ): LoadingScreenText {
   switch (state) {
@@ -60,9 +56,10 @@ export function getLoadingScreenText(
     case 'proving':
       return {
         actionText: 'Generating ZK proof',
-        estimatedTime: metadata
-          ? getProvingTimeEstimate(metadata, type)
-          : '30 - 90 SECONDS',
+        estimatedTime:
+          signatureAlgorithm && curveOrExponent
+            ? getProvingTimeEstimate(signatureAlgorithm, curveOrExponent, type)
+            : '30 - 90 SECONDS',
       };
     case 'post_proving':
       return {
@@ -111,13 +108,14 @@ export function getLoadingScreenText(
 }
 
 export function getProvingTimeEstimate(
-  metadata: PassportMetadata | undefined,
+  signatureAlgorithm: string,
+  curveOrExponent: string,
   type: 'dsc' | 'register',
 ): string {
-  if (!metadata) return '30 - 90 SECONDS';
+  if (!signatureAlgorithm || !curveOrExponent) return '30 - 90 SECONDS';
 
-  const algorithm = metadata.signatureAlgorithm?.toLowerCase();
-  const curveOrExponent = metadata.curveOrExponent;
+  const algorithm = signatureAlgorithm?.toLowerCase();
+  const curve = curveOrExponent;
 
   // RSA algorithms
   if (algorithm?.includes('rsa')) {
@@ -130,13 +128,13 @@ export function getProvingTimeEstimate(
   // ECDSA algorithms
   if (algorithm?.includes('ecdsa')) {
     // Check bit size from curve name
-    if (curveOrExponent?.includes('224') || curveOrExponent?.includes('256')) {
+    if (curve?.includes('224') || curve?.includes('256')) {
       return type === 'dsc' ? '25 SECONDS' : '50 SECONDS';
     }
-    if (curveOrExponent?.includes('384')) {
+    if (curve?.includes('384')) {
       return type === 'dsc' ? '45 SECONDS' : '90 SECONDS';
     }
-    if (curveOrExponent?.includes('512') || curveOrExponent?.includes('521')) {
+    if (curve?.includes('512') || curve?.includes('521')) {
       return type === 'dsc' ? '100 SECONDS' : '200 SECONDS';
     }
   }