@sanctum-key/react-native-sdk 1.0.8 → 1.0.9

package/ios/TransfergratisSdkModule.swift

@@ -4,7 +4,7 @@ import UIKit
 import Photos
 
 // Vue caméra native avec logs et interface améliorée
-public final class SanctumKeySdkView: ExpoView {
+public final class TransfergratisSdkView: ExpoView {
   let onCapture = EventDispatcher()
   let onError = EventDispatcher()
   
@@ -18,13 +18,13 @@ public final class SanctumKeySdkView: ExpoView {
   
   // Logs pour débogage
   private func logDebug(_ message: String) {
-    print("🟦 [SanctumKeySdkView] \(message)")
+    print("🟦 [TransfergratisSdkView] \(message)")
   }
   
   public required init(appContext: AppContext? = nil) {
     super.init(appContext: appContext)
     logDebug("Initialisation de la vue caméra")
-    print("🟦 [SanctumKeySdkView] Init appelé - Vue créée")
+    print("🟦 [TransfergratisSdkView] Init appelé - Vue créée")
     setupViews()
     
     // Test immédiat pour voir si les événements fonctionnent
@@ -180,9 +180,9 @@ public final class SanctumKeySdkView: ExpoView {
 
 // Classe déléguée pour gérer les protocoles qui nécessitent NSObject
 class CameraDelegate: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
-  weak var module: SanctumKeySdkModule?
+  weak var module: TransfergratisSdkModule?
   
-  init(module: SanctumKeySdkModule) {
+  init(module: TransfergratisSdkModule) {
     self.module = module
     super.init()
   }
@@ -228,9 +228,9 @@ class CameraDelegate: NSObject, UIImagePickerControllerDelegate, UINavigationCon
 
 // Classe déléguée pour le sélecteur de fichiers
 class FilePickerDelegate: NSObject, UIDocumentPickerDelegate {
-  weak var module: SanctumKeySdkModule?
+  weak var module: TransfergratisSdkModule?
   
-  init(module: SanctumKeySdkModule) {
+  init(module: TransfergratisSdkModule) {
     self.module = module
     super.init()
   }
@@ -261,7 +261,7 @@ class FilePickerDelegate: NSObject, UIDocumentPickerDelegate {
   }
 }
 
-public class SanctumKeySdkModule: Module {
+public class TransfergratisSdkModule: Module {
   var cameraPromise: Promise?
   var filePickerPromise: Promise?
   var currentPhotoPath: String?
@@ -269,7 +269,7 @@ public class SanctumKeySdkModule: Module {
   private var filePickerDelegate: FilePickerDelegate?
   
   public func definition() -> ModuleDefinition {
-    Name("SanctumKeySdk")
+    Name("TransfergratisSdk")
 
     Constants([
       "PI": Double.pi
@@ -364,12 +364,12 @@ public class SanctumKeySdkModule: Module {
     }
 
     // Vue native pour la caméra avec instructions
-    View(SanctumKeySdkView.self) {
-      Prop("instructions") { (view: SanctumKeySdkView, instructions: String) in
+    View(TransfergratisSdkView.self) {
+      Prop("instructions") { (view: TransfergratisSdkView, instructions: String) in
         view.setInstructions(instructions)
       }
       
-      Prop("showCamera") { (view: SanctumKeySdkView, show: Bool) in
+      Prop("showCamera") { (view: TransfergratisSdkView, show: Bool) in
         view.showCamera(show)
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanctum-key/react-native-sdk",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Sanctum Key React Native SDK",
   "main": "build/src/index.js",
   "types": "build/src/index.d.ts",
@@ -25,13 +25,13 @@
     "kyc",
     "identity-verification"
   ],
-  "repository": "https://github.com/SanctumKeyOrg/KYC-User-Frontend",
+  "repository": "https://github.com/TransfergratisOrg/KYC-User-Frontend",
   "bugs": {
-    "url": "https://github.com/SanctumKeyOrg/KYC-User-Frontend/issues"
+    "url": "https://github.com/TransfergratisOrg/KYC-User-Frontend/issues"
   },
-  "author": "mesha-SanctumKey <loic.lontchi@SanctumKey.com> (https://github.com/mesha-SanctumKey)",
+  "author": "mesha-transfergratis <loic.lontchi@transfergratis.com> (https://github.com/mesha-transfergratis)",
   "license": "MIT",
-  "homepage": "https://github.com/SanctumKeyOrg/KYC-User-Frontend#readme",
+  "homepage": "https://github.com/TransfergratisOrg/KYC-User-Frontend#readme",
   "files": [
     "build",
     "src",

package/src/App.tsx

@@ -2,8 +2,8 @@ import CameraCaptureEx from "./components/example/CameraCaptureEx";
 // import SelfieCaptureEx from "./components/example/SelfieCaptureEx";
 // import { KYCExample } from "./components/KYCExample";
 // import { KYCFlow } from "./components/KYCFlow"
-const LaunchSanctumKeyKYC = () =>{
+const LaunchTransferGratisKYC = () =>{
     return <CameraCaptureEx/>
 }
 
-export default LaunchSanctumKeyKYC;
+export default LaunchTransferGratisKYC;

package/src/{SanctumKeySdk.types.ts → TransfergratisSdk.types.ts}

@@ -15,13 +15,13 @@ export type ErrorEventPayload = {
   message: string;
 };
 
-export type SanctumKeySdkModuleEvents = {
+export type TransfergratisSdkModuleEvents = {
   onCameraCapture: (params: CameraCaptureEventPayload) => void;
   onFileSelected: (params: FileSelectedEventPayload) => void;
   onError: (params: ErrorEventPayload) => void;
 };
 
-export type SanctumKeySdkViewProps = {
+export type TransfergratisSdkViewProps = {
   instructions: string;
   showCamera: boolean;
   onCapture?: (event: { nativeEvent: { action: 'capture' | 'retake' } }) => void;

package/src/{SanctumKeySdkModule.ts → TransfergratisSdkModule.ts}

@@ -2,9 +2,9 @@ import { requireNativeModule } from 'expo-modules-core';
 
 import { NativeModule } from 'expo';
 
-import { SanctumKeySdkModuleEvents } from './SanctumKeySdk.types';
+import { TransfergratisSdkModuleEvents } from './TransfergratisSdk.types';
 
-declare class SanctumKeySdkModule extends NativeModule<SanctumKeySdkModuleEvents> {
+declare class TransfergratisSdkModule extends NativeModule<TransfergratisSdkModuleEvents> {
   PI: number;
   testModule(): Promise<string>;
   requestCameraPermission(): Promise<boolean>;
@@ -13,4 +13,4 @@ declare class SanctumKeySdkModule extends NativeModule<SanctumKeySdkModuleEvents
 }
 
 // This call loads the native module object from the JSI.
-export default requireNativeModule<SanctumKeySdkModule>('SanctumKeySdk');
+export default requireNativeModule<TransfergratisSdkModule>('TransfergratisSdk');

package/src/{SanctumKeySdkModule.web.ts → TransfergratisSdkModule.web.ts}

@@ -1,9 +1,9 @@
 import { registerWebModule } from 'expo-modules-core';
 import { NativeModule } from 'expo';
 
-import { SanctumKeySdkModuleEvents } from './SanctumKeySdk.types';
+import { TransfergratisSdkModuleEvents } from './TransfergratisSdk.types';
 
-class SanctumKeySdkModule extends NativeModule<SanctumKeySdkModuleEvents> {
+class TransfergratisSdkModule extends NativeModule<TransfergratisSdkModuleEvents> {
   PI = Math.PI;
   
   async requestCameraPermission(): Promise<boolean> {
@@ -28,4 +28,4 @@ class SanctumKeySdkModule extends NativeModule<SanctumKeySdkModuleEvents> {
   }
 }
 
-export default registerWebModule(SanctumKeySdkModule, 'SanctumKeySdkModule');
+export default registerWebModule(TransfergratisSdkModule, 'TransfergratisSdkModule');

package/src/TransfergratisSdkView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import { TransfergratisSdkViewProps } from './TransfergratisSdk.types';
+
+const NativeView: React.ComponentType<TransfergratisSdkViewProps> =
+  requireNativeView('TransfergratisSdk');
+
+export default function TransfergratisSdkView(props: TransfergratisSdkViewProps) {
+  return <NativeView {...props} />;
+}

package/src/{SanctumKeySdkView.web.tsx → TransfergratisSdkView.web.tsx}

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { SanctumKeySdkViewProps } from './SanctumKeySdk.types';
+import { TransfergratisSdkViewProps } from './TransfergratisSdk.types';
 
-export default function SanctumKeySdkView(props: SanctumKeySdkViewProps) {
+export default function TransfergratisSdkView(props: TransfergratisSdkViewProps) {
   return (
     <div>
       {/* <iframe

package/src/api/axios.ts

@@ -132,12 +132,12 @@ export default HttpClient;
 
 // ml service api
 export const mlService = new HttpClient({
-    baseURL: 'https://api.ml.SanctumKey.com',
+    baseURL: 'https://api.ml.transfergratis.com',
     apiKey: 'your-api-key',
 });
 // backedn service api
 export const backendService = new HttpClient({
-    baseURL: 'https://api.backend.SanctumKey.com',
+    baseURL: 'https://api.backend.transfergratis.com',
     apiKey: 'your-api-key',
 });
 

package/src/components/EnhancedCameraView.tsx

@@ -1,35 +1,33 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { View, StyleSheet, Text, AppState, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, Text, AppState } from 'react-native';
 import { Camera, useCameraDevice } from 'react-native-vision-camera';
 import VisionCameraModule from '../modules/camera/VisionCameraModule';
 import { useI18n } from '../hooks/useI18n';
 import { EnhancedCameraViewProps } from './OverLay/type';
 import { Button } from './ui/Button';
 
-export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
+export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({ 
   showCamera,
   cameraType: initialCameraType = 'front',
   style,
   onError,
-  onSilentCapture,
+  onSilentCapture, 
   silentCaptureResult,
-  isProcessing = false,
+  isProcessing = false, 
   overlayComponent,
 }) => {
   const { t } = useI18n();
   const camera = useRef<Camera>(null);
-
+  
   const isCapturingRef = useRef(false);
   const isProcessingRef = useRef(isProcessing);
 
   const [cameraType] = useState<'front' | 'back'>(initialCameraType);
-
+  
+  // 🚨 BUG FIX: Initialize to null to prevent the "Flicker" on retake
   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
   const [refreshCamera, setRefreshCamera] = useState(false);
-  
-  // 🚨 ADDED: A timeout state to show a refresh button if the camera gets stuck booting
-  const [showInitTimeout, setShowInitTimeout] = useState(false);
 
   const device = useCameraDevice(cameraType);
 
@@ -56,10 +54,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
   };
 
   useEffect(() => {
-    if (showCamera) {
-      setIsInitialized(false); // Reset init state when checking permissions/refreshing
-      checkPermissions();
-    }
+    if (showCamera) checkPermissions();
   }, [showCamera, refreshCamera]);
 
   useEffect(() => {
@@ -71,26 +66,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     return () => subscription.remove();
   }, [showCamera, hasPermission]);
 
-
-  useEffect(() => {
-    let timer: ReturnType<typeof setTimeout>;
-
-    if (hasPermission && device && showCamera && !isInitialized) {
-        timer = setTimeout(() => setShowInitTimeout(true), 3000); 
-    } else {
-        setShowInitTimeout(false);
-    }
-
-    return () => {
-        if (timer) clearTimeout(timer);
-    };
-  }, [hasPermission, device, showCamera, isInitialized]);
-
-  const onInitialized = useCallback(() => {
-    setIsInitialized(true);
-    setShowInitTimeout(false);
-  }, []);
-
+  const onInitialized = useCallback(() => setIsInitialized(true), []);
   const onCameraError = useCallback((error: any) => {
     onError?.({ message: error.message || t('camera.errorOccurred') });
   }, [onError, t]);
@@ -100,27 +76,30 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     if (silentCaptureResult?.isAnalyzing) return;
 
     try {
-      isCapturingRef.current = true;
+      isCapturingRef.current = true; 
       const photo = await camera.current.takePhoto({
-        enableShutterSound: false,
-        flash: 'off',
+        enableShutterSound: false, 
+        flash: 'off', 
       });
-      const result = await VisionCameraModule.processPhotoResult(photo);
 
+      const result = await VisionCameraModule.processPhotoResult(photo);
+      
       onSilentCapture?.({
-        ...result,
-        path: result.path || photo.path,
+          ...result,
+          path: result.path || photo.path, 
       });
+
     } catch (error) {
       // Silent background fail
     } finally {
-      isCapturingRef.current = false;
+      isCapturingRef.current = false; 
     }
   }, [isInitialized, onSilentCapture, silentCaptureResult]);
 
+  // 🚨 BUG FIX: The Warm-up Timer (Fixes Blurry Images)
   useEffect(() => {
     if (!showCamera || !isInitialized || isProcessing) return;
-
+    
     let isActive = true;
     let intervalId: ReturnType<typeof setInterval>;
 
@@ -128,9 +107,9 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
       if (!isActive) return;
       intervalId = setInterval(() => {
         captureSilentPhoto();
-      }, 1500); 
-    }, 1000);
-
+      }, 1500); // 1.5s gives the hardware more time to stabilize between shots
+    }, 1000); 
+    
     return () => {
       isActive = false;
       clearTimeout(warmupTimer);
@@ -139,75 +118,40 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
   }, [showCamera, isInitialized, isProcessing, captureSilentPhoto]);
 
   // --- RENDERERS ---
-
+  
+  // 🚨 BUG FIX: Show nothing while checking permissions (Stops flicker)
   if (hasPermission === null) {
     return <View style={[styles.container, style]} />;
   }
 
   if (hasPermission === false) {
     return (
-      <View style={[styles.container, style, styles.centerContent]}>
+      <View style={[styles.container, style, { justifyContent: 'center', alignItems: 'center' }]}>
         <Text style={styles.permissionMessage}>{t('camera.permissionRequired')}</Text>
-        <Button
-          title="Refresh Camera"
-          onPress={() => setRefreshCamera(prev => !prev)}
-          variant="primary"
+        <Button 
+           title="Refresh Camera" 
+           onPress={() => setRefreshCamera(prev => !prev)} 
+           variant="primary"
         />
       </View>
     );
   }
 
-  // 🚨 FIX: Don't return an invisible blank screen if the device is loading! 
-  // Give them a UI and a way out.
-  if (!device || !showCamera) {
-    return (
-        <View style={[styles.container, style, styles.centerContent]}>
-            <ActivityIndicator size="large" color="#2DBD60" style={{ marginBottom: 16 }} />
-            <Text style={styles.permissionMessage}>Loading Camera Hardware...</Text>
-            <Button 
-              title="Refresh" 
-              onPress={() => setRefreshCamera(prev => !prev)} 
-              variant="outline" 
-            />
-        </View>
-    );
-  }
+  if (!device || !showCamera) return <View style={[styles.container, style]} />;
 
   return (
     <View style={[styles.container, style]}>
       <Camera
-        // 🚨 FIX: This key forces the native component to completely remount 
-        // when permissions are granted or when manually refreshed.
-        key={`cam-${hasPermission}-${refreshCamera ? '1' : '0'}`} 
         ref={camera}
         style={StyleSheet.absoluteFill}
         device={device}
         isActive={showCamera && !isProcessing}
         photo={true}
-        video={false}
-        audio={false}
+        video={false} 
+        audio={false} 
         onInitialized={onInitialized}
         onError={onCameraError}
       />
-      
-      {/* 🚨 FIX: Floating Refresh Button if the hardware freezes on a black screen */}
-      {!isInitialized && showInitTimeout && (
-          <View style={styles.stuckOverlay}>
-              <ActivityIndicator size="large" color="#2DBD60" style={{ marginBottom: 16 }} />
-              <Text style={{ color: 'white', marginBottom: 16, fontWeight: 'bold' }}>
-                  Camera is taking a while to start...
-              </Text>
-              <Button 
-                title="Restart Camera" 
-                onPress={() => {
-                  setIsInitialized(false);
-                  setRefreshCamera(prev => !prev);
-                }} 
-                variant="primary" 
-              />
-          </View>
-      )}
-
       {overlayComponent}
     </View>
   );
@@ -215,14 +159,5 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: 'black' },
-  centerContent: { justifyContent: 'center', alignItems: 'center', padding: 20 },
-  permissionMessage: { color: 'white', textAlign: 'center', marginBottom: 20, fontSize: 16, fontWeight: '600' },
-  stuckOverlay: {
-      ...StyleSheet.absoluteFillObject,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'rgba(0,0,0,0.85)',
-      zIndex: 1000,
-      padding: 20
-  }
+  permissionMessage: { color: 'white', textAlign: 'center', margin: 20, fontSize: 16 },
 });

package/src/components/KYCElements/EmailVerificationTemplate.tsx

@@ -38,9 +38,6 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
     const [otp, setOtp] = useState('');
     const [localError, setLocalError] = useState<string | null>(null);
     const [isSimulating, setIsSimulating] = useState(false);
-    
-    // 🚨 NEW: Track actual focus state for visual feedback
-    const [isInputFocused, setIsInputFocused] = useState(false);
 
     const inputRef = useRef<TextInput>(null);
 
@@ -59,22 +56,6 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         }
     }, [otp]);
 
-    // --- AUTO FOCUS LOGIC ---
-    useEffect(() => {
-        let focusTimer: ReturnType<typeof setTimeout>;
-        
-        // Only attempt focus when we are on the OTP step AND the loading state is completely finished
-        if (step === 'otp' && !isSimulating) {
-            focusTimer = setTimeout(() => {
-                inputRef.current?.focus();
-            }, 100); 
-        }
-        
-        return () => {
-            if (focusTimer) clearTimeout(focusTimer);
-        };
-    }, [step, isSimulating]);
-
     const handleSendCode = async () => {
         const trimmed = email.trim();
         if (!trimmed || !isValidEmail(trimmed)) {
@@ -88,7 +69,8 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         try {
             await kycService.sendEmailVerificationCode(trimmed, auth);
             setStep('otp');
-            // Note: Removed the buggy setTimeout from here. The useEffect handles it now!
+            // Auto-focus the OTP input shortly after switching steps
+            setTimeout(() => inputRef.current?.focus(), 100);
         } catch (err: any) {
             const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send verification code');
             setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
@@ -114,8 +96,8 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         } catch (err: any) {
             const msg = errorMessage(err) ?? err?.message ?? (t('errors.wrongCode') || 'Invalid verification code');
             setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
-            setOtp(''); 
-            inputRef.current?.focus(); // Refocus on error
+            setOtp(''); // Clear the boxes on error so they can type again
+            inputRef.current?.focus();
         } finally {
             setIsSimulating(false);
         }
@@ -145,19 +127,16 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
             <Pressable style={styles.otpBoxesContainer} onPress={() => inputRef.current?.focus()}>
                 {boxes.map((_, index) => {
                     const digit = otp[index] || '';
+                    const isCurrent = index === otp.length;
                     const isFilled = index < otp.length;
-                    
-                    // 🚨 NEW: Only highlight if the input is ACTUALLY focused. 
-                    const isActiveIndex = index === otp.length || (index === CODE_LENGTH - 1 && otp.length === CODE_LENGTH);
-                    const isCurrent = isInputFocused && isActiveIndex;
 
                     return (
                         <View 
                             key={index} 
                             style={[
                                 styles.otpBox, 
-                                isFilled && styles.otpBoxFilled,
-                                isCurrent && styles.otpBoxActive // Active overrides filled
+                                isCurrent && styles.otpBoxActive,
+                                isFilled && styles.otpBoxFilled
                             ]}
                         >
                             <Text style={styles.otpBoxText}>{digit}</Text>
@@ -196,7 +175,7 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                         
                         <View style={styles.otpWrapper}>
                             {renderOtpBoxes()}
-                            
+                            {/* Hidden TextInput overlaid to handle native keyboard & pasting seamlessly */}
                             <TextInput
                                 ref={inputRef}
                                 style={styles.hiddenInput}
@@ -207,9 +186,6 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                                 editable={!isSimulating}
                                 textContentType="oneTimeCode"
                                 caretHidden={true}
-                                // 🚨 NEW: Track focus state
-                                onFocus={() => setIsInputFocused(true)}
-                                onBlur={() => setIsInputFocused(false)}
                             />
                         </View>
 
@@ -245,8 +221,6 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                                     t('common.codeResent') || 'Code Resent',
                                     t('common.codeResentMessage', { email }) || 'Code resent to ' + email
                                 );
-                                // Refocus after resending
-                                inputRef.current?.focus();
                             } catch (err: any) {
                                 const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send code');
                                 setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
@@ -326,7 +300,7 @@ const styles = StyleSheet.create({
     },
     otpBox: {
         width: '14%',
-        aspectRatio: 1, // keeps it perfectly square
+        aspectRatio: 1,
         borderWidth: 1,
         borderColor: '#e0e0e0',
         borderRadius: 12,
@@ -354,7 +328,7 @@ const styles = StyleSheet.create({
         left: 0,
         width: '100%',
         height: '100%',
-        opacity: 0, // completely invisible but handles native keyboard interactions perfectly
+        opacity: 0,
     },
     errorText: {
         color: '#dc2626',

package/src/components/KYCElements/IDCardCapture.tsx

@@ -270,7 +270,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     return (
       <View style={styles.cameraContainer}>
         <EnhancedCameraView
-          key={currentSide} 
+          key={currentSide} // 🚨 BUG FIX: Forces the camera instance to completely reset when switching sides
           showCamera={true}
           isProcessing={isBusy}
           cameraType={cameraConfig.cameraType}