zk-passport / openpassport

Generate privacy-preserving ID proofs
https://openpassport.app
306 stars 53 forks source link

improve NFC reading UX on android #130

Open remicolin opened 2 months ago

remicolin commented 2 months ago

Issue Description: when users scan their passport using NFC on Android, the following steps occur:

  1. they click on the button "Scan with NFC" and a sheet opens at the bottom of the screen.
  2. they hold their passport against their phone, moving it slowly until the NFC reader detects the chip in the passport.
  3. when the NFC reader detects the chip, the phone vibrates, indicating that users should stop moving the phone.
  4. once the passport reading is complete, the sheet closes, and the user is brought to the next screen. image

Problem: the vibration alone is not sufficient to inform users that they need to stop moving the phone and that the phone is currently reading the chip.

Request: we would like an implementation similar to the one on iOS, with an animation showing the progress of the reading and displaying which datagroup is currently being read.

image
onlydustapp[bot] commented 1 month ago

Hey @Joy-Adah! Thanks for showing interest. We've created an application for you to contribute to Proof of Passport. Go check it out on OnlyDust!

BernalHQ commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, my name is Bernal. I am a software developer from Costa Rica. Currently, I work as a back-end developer. In my previous job, I worked as a full-stack developer. Personally, I enjoy developing both the back end and the front end. I have 4 years of experience in the software development industry. Some technologies I have worked with include: Typescript, React, C#, and Node.

How I plan on tackling this issue

To reach the solution, the first step is to understand how the project works. This involves familiarizing yourself with the project's documentation, structure, and codebase. Next, thoroughly review the issue description to grasp the problem fully. Based on this understanding, brainstorm and propose a viable solution. Once you have a clear plan, implement the solution in the code. After coding, conduct comprehensive tests to ensure the fix resolves the issue without introducing new problems. Finally, review your changes and prepare them for submission, ensuring all aspects of the issue have been addressed effectively.

remicolin commented 1 month ago

@BernalHQ can you give me a human written version of how you plan to tackle the issue?

BernalHQ commented 1 month ago

Hi @remicolin. yes a can.

First, I took a time to get the enough knowledge of how the project works.

Then, i going to identify where android vibration trigger and do some logic to implement a animition that tell the user that stop moving the passport. Probaby this animation goint to be inspired in the IOS animation.

Here, in the animation, probable ask you, if the animation has to be the same as IOS system.

Then i goint to do some test to proof the animation.

and that´s it.

I'd really love to work on this issue.

remicolin commented 1 month ago

@BernalHQ sweet, you can start working on it! if you want i can provide you screen recording of the iOS version which is basically empty dots that turn green. feel free to dm on tg @colinremi

onlydustapp[bot] commented 1 month ago

Hi @remicolin! Maintainers during the ODHack #6.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

BernalHQ commented 1 month ago

Hi @remicolin, thanks for the oportunity. I going to start work it on it. And yes, please provide me a example of the IOS version animation.

eliotstock commented 4 days ago

Is this fixed? I can't scan either of my passports on Android. Using a Pixel 8.