Merge pull request #161 from zk-passport/new-ux

New ux

.github/workflows/action.yml

@@ -53,8 +53,4 @@ jobs:
 
       - name: Run Tests
         working-directory: ./circuits
-        run: yarn test
-
-      - name: Run Tests
-        working-directory: ./circuits
-        run: yarn test
+        run: yarn test

app/App.tsx

@@ -9,28 +9,36 @@ import useNavigationStore from './src/stores/navigationStore';
 import { AMPLITUDE_KEY } from '@env';
 import * as amplitude from '@amplitude/analytics-react-native';
 import useUserStore from './src/stores/userStore';
+import { bgWhite } from './src/utils/colors';
 global.Buffer = Buffer;
 
 function App(): JSX.Element {
   const toast = useToastController();
   const setToast = useNavigationStore((state) => state.setToast);
   const initUserStore = useUserStore((state) => state.initUserStore);
+  const setSelectedTab = useNavigationStore((state) => state.setSelectedTab);
+
+  useEffect(() => {
+    initUserStore();
+  }, [initUserStore]);
 
   useEffect(() => {
     setToast(toast);
   }, [toast, setToast]);
-
+  useEffect(() => {
+    setSelectedTab('splash');
+  }, [setSelectedTab]);
   useEffect(() => {
     if (AMPLITUDE_KEY) {
       amplitude.init(AMPLITUDE_KEY);
     }
-    initUserStore();
+    //initUserStore();
   }, []);
 
   // TODO: when passportData already stored, retrieve and jump to main screen
 
   return (
-    <YStack f={1} bc="#161616" h="100%" w="100%">
+    <YStack f={1} bc={bgWhite} h="100%" w="100%">
       <YStack h="100%" w="100%">
         <MainScreen />
       </YStack>

app/android/app/build.gradle

@@ -140,6 +140,8 @@ dependencies {
     implementation project(':passportreader')
     implementation 'org.jmrtd:jmrtd:0.7.18'
 
+    implementation 'com.github.blikoon:QRCodeScanner:0.1.2'
+
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'

app/android/app/src/main/java/com/awesomeproject/MainApplication.java

@@ -13,6 +13,7 @@
 import java.util.List;
 import com.proofofpassport.prover.ProverPackage;
 import com.rnfs.RNFSPackage;
+import com.proofofpassport.QRCodeScannerPackage;
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -32,6 +33,7 @@ protected List<ReactPackage> getPackages() {
       // Add the custom package here
       packages.add(new CameraActivityPackage());
       packages.add(new ProverPackage());
+      packages.add(new QRCodeScannerPackage());
 
     return packages;
 }

app/android/app/src/main/java/com/awesomeproject/QRCodeScannerModule.java

@@ -0,0 +1,93 @@
+package com.proofofpassport;
+
+import android.app.Activity;
+import android.content.Intent;
+import android.content.pm.PackageManager;
+import androidx.annotation.NonNull;
+import androidx.core.app.ActivityCompat;
+import androidx.core.content.ContextCompat;
+import com.facebook.react.bridge.ActivityEventListener;
+import com.facebook.react.bridge.BaseActivityEventListener;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.blikoon.qrcodescanner.QrCodeActivity;
+import android.Manifest;
+
+public class QRCodeScannerModule extends ReactContextBaseJavaModule {
+
+    private static final int REQUEST_CODE_QR_SCAN = 101;
+    private static final int PERMISSION_REQUEST_CAMERA = 1;
+    private Promise scanPromise;
+
+    private final ActivityEventListener activityEventListener = new BaseActivityEventListener() {
+        @Override
+        public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
+            if (requestCode == REQUEST_CODE_QR_SCAN) {
+                if (scanPromise != null) {
+                    if (resultCode == Activity.RESULT_OK) {
+                        String result = data.getStringExtra("com.blikoon.qrcodescanner.got_qr_scan_relult");
+                        scanPromise.resolve(result);
+                    } else {
+                        scanPromise.reject("SCAN_FAILED", "QR Code scanning failed or was cancelled");
+                    }
+                    scanPromise = null;
+                }
+            }
+        }
+    };
+
+    QRCodeScannerModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        reactContext.addActivityEventListener(activityEventListener);
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "QRCodeScanner";
+    }
+
+    @ReactMethod
+    public void scanQRCode(Promise promise) {
+        Activity currentActivity = getCurrentActivity();
+        if (currentActivity == null) {
+            promise.reject("ACTIVITY_DOES_NOT_EXIST", "Activity doesn't exist");
+            return;
+        }
+
+        scanPromise = promise;
+
+        if (ContextCompat.checkSelfPermission(currentActivity, Manifest.permission.CAMERA)
+                != PackageManager.PERMISSION_GRANTED) {
+            ActivityCompat.requestPermissions(currentActivity,
+                    new String[]{Manifest.permission.CAMERA},
+                    PERMISSION_REQUEST_CAMERA);
+        } else {
+            startQRScanner(currentActivity);
+        }
+    }
+
+    private void startQRScanner(Activity activity) {
+        Intent intent = new Intent(activity, QrCodeActivity.class);
+        activity.startActivityForResult(intent, REQUEST_CODE_QR_SCAN);
+    }
+
+    // Add this method to handle permission result
+    public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
+        if (requestCode == PERMISSION_REQUEST_CAMERA) {
+            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
+                Activity currentActivity = getCurrentActivity();
+                if (currentActivity != null) {
+                    startQRScanner(currentActivity);
+                }
+            } else {
+                if (scanPromise != null) {
+                    scanPromise.reject("PERMISSION_DENIED", "Camera permission was denied");
+                    scanPromise = null;
+                }
+            }
+        }
+    }
+}

app/android/app/src/main/java/com/awesomeproject/QRCodeScannerPackage.java

@@ -0,0 +1,24 @@
+package com.proofofpassport;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class QRCodeScannerPackage implements ReactPackage {
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new QRCodeScannerModule(reactContext));
+        return modules;
+    }
+}

app/android/app/src/main/res/values/styles.xml

@@ -4,6 +4,11 @@
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="android:statusBarColor">#F5F5F5</item>
+        <item name="android:navigationBarColor">#F5F5F5</item>
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLightNavigationBar">true</item>
+        <item name="android:windowBackground">#F5F5F5</item>
     </style>
 
-</resources>
+</resources>

app/deployments/deployed_addresses.json

@@ -1,11 +1,11 @@
 {
-  "Deploy_Registry#Formatter": "0x15cAe49aFFD6C9f918BC454A255C05997A74F960",
-  "Deploy_Registry#PoseidonT3": "0xdfAC8e1AECc55C4c8B8eC55D666A5a5BB8fbAE5c",
-  "Deploy_Registry#Registry": "0xBabF700EdE592Aa69e14B5BAE1859ee4164C3323",
-  "Deploy_Registry#Verifier_disclose": "0x36BDB37Ab78feB585B782A734C07D04C4c5A66B4",
-  "Deploy_Registry#Verifier_dsc_4096": "0x97c7D14A52e1576dADf8a7CCDf92a246aeb0C493",
-  "Deploy_Registry#Verifier_register_sha1WithRSAEncryption_65537": "0x8392b122Bcbf1eF99dFf1b183C5D4939EDf699A2",
-  "Deploy_Registry#Verifier_register_sha256WithRSAEncryption_65537": "0x2f5505803a3FCa5322A70A6471C91C34545AEa5D",
-  "Deploy_Registry#ProofOfPassportRegister": "0xEd7495516a957dD7d378d8A78846646461cFF25f",
-  "Deploy_Registry#SBT": "0x601Fd54FD11C5E77DE84d877e55B829aff20f0A6"
+  "Deploy_Registry#Formatter": "0xD73395ad7391a3285d2e2a2259031ED6Eb753a2c",
+  "Deploy_Registry#PoseidonT3": "0xbc16D1BD4Be33Cff388Bcbd61285b08BDCdeb86C",
+  "Deploy_Registry#Registry": "0xe2778F3b0302359d947531C2E668b46cFbE97206",
+  "Deploy_Registry#Verifier_disclose": "0xE2e39e0b823c1290788303094cb75B474899EAf6",
+  "Deploy_Registry#Verifier_dsc_sha256_rsa_4096": "0xFD3AFBb0E0565cc28E99d9e11629c4c20e1e517D",
+  "Deploy_Registry#Verifier_register_sha1WithRSAEncryption_65537": "0x434547E86530A583137c9990ffb87682F0d5ca48",
+  "Deploy_Registry#Verifier_register_sha256WithRSAEncryption_65537": "0xDc5e3E81b4b3bC22f79C3a90dbb57EBB9aEdAAfF",
+  "Deploy_Registry#ProofOfPassportRegister": "0x3F346FFdC5d583e4126AF01A02Ac5b9CdB3f1909",
+  "Deploy_Registry#SBT": "0x33f41D706587a7AC6c2061B1893e6eb29615822B"
 }

app/ios/LottieView.swift

@@ -0,0 +1,41 @@
+//
+//  LottieView.swift
+//  FreedomTools
+//
+//  Created by Ivan Lele on 27.02.2024.
+//
+
+import Lottie
+import SwiftUI
+
+struct LottieView: UIViewRepresentable {
+    var animationFileName: String
+    let loopMode: LottieLoopMode
+
+    func updateUIView(_ uiView: UIViewType, context: Context) {}
+
+    func makeUIView(context: Context) -> some UIView {
+        let view = UIView(frame: .zero)
+
+        let animationView = LottieAnimationView(name: animationFileName)
+        animationView.loopMode = loopMode
+        animationView.contentMode = .scaleAspectFit
+
+        animationView.play()
+
+        animationView.translatesAutoresizingMaskIntoConstraints = false
+        view.addSubview(animationView)
+
+        NSLayoutConstraint.activate([
+            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
+            animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
+        ])
+
+        return view
+    }
+}
+
+#Preview {
+    LottieView(animationFileName: "passport", loopMode: .loop)
+        .frame(width: 300)
+}

app/ios/MRZScannerModule.swift

@@ -28,6 +28,8 @@ class MRZScannerModule: NSObject, RCTBridgeModule {
 
           var hostingController: UIHostingController<ScannerWithInstructions>? = nil
           var scannerView = QKMRZScannerViewRepresentable()
+          let lottieView = LottieView(animationFileName: "passport", loopMode: .loop)
+
           scannerView.onScanResult = { scanResult in
               let resultDict: [String: Any] = [
                   "documentNumber": scanResult.documentNumber,
@@ -41,7 +43,7 @@ class MRZScannerModule: NSObject, RCTBridgeModule {
           }
 
           // Wrap the scanner view and instruction text in a new SwiftUI view
-          let scannerWithInstructions = ScannerWithInstructions(scannerView: scannerView)
+          let scannerWithInstructions = ScannerWithInstructions(scannerView: scannerView, lottieView: lottieView)
           hostingController = UIHostingController(rootView: scannerWithInstructions)
           rootViewController.present(hostingController!, animated: true, completion: nil)
       }
@@ -55,14 +57,29 @@ class MRZScannerModule: NSObject, RCTBridgeModule {
 // Define a new SwiftUI view that includes the scanner and instruction text
 struct ScannerWithInstructions: View {
     var scannerView: QKMRZScannerViewRepresentable
+    var lottieView: LottieView
 
     var body: some View {
-        VStack {
-            scannerView
-            Text("Avoid glare or reflections during scanning.")
-                .font(.title3)
-                .padding()
-                .multilineTextAlignment(.center)
+        ZStack {
+            Color.white.ignoresSafeArea() // This creates a white background for the entire view
+
+            VStack {
+                ZStack {
+                    scannerView
+                        .mask {
+                            RoundedRectangle(cornerRadius: 15)
+                                .frame(width: 370, height: 270)
+                        }
+                    lottieView.frame(width: 360, height: 230)
+                }
+                .frame(height: 320)
+                Text("Hold your passport on a flat surface while scanning")
+                    .font(.custom("Inter-Regular", size: 20))
+                    .foregroundColor(.black)
+                    .multilineTextAlignment(.center)
+                    .frame(width: 300)
+                    .padding()
+            }
         }
     }
-}
+}

app/ios/Podfile

@@ -41,6 +41,8 @@ target 'ProofOfPassport' do
   pod 'NFCPassportReader', git: 'https://github.com/0xturboblitz/NFCPassportReader.git', commit: '310ecb519655d9ed8b1afc5eb490b2f51a4d3595'
   pod 'QKMRZScanner'
   pod 'RNFS', :path => '../node_modules/react-native-fs'
+  pod 'lottie-ios'
+  pod 'SwiftQRScanner', :git => 'https://github.com/vinodiOS/SwiftQRScanner'
 
   use_react_native!(
     :path => config[:reactNativePath],
@@ -79,4 +81,4 @@ target 'ProofOfPassport' do
     )
     __apply_Xcode_12_5_M1_post_install_workaround(installer)
   end
-end
+end