search

onflow / developer-grants

Grants for developers that contribute to the broader developer ecosystem
Apache License 2.0
50 stars 18 forks source link

React Native x FCL Sample Starter #146

Open fredprux opened 1 year ago

fredprux commented 1 year ago

React Native x FCL Sample Starter

Grant category

Description

There are several great FCL starters and sample apps for web frameworks like Next.js, Svelte, etc. Many web developers use React Native to build cross platform and mobile native apps. A full featured sample application built with React Native and FCL (fcl.js) would encourage more devs to create mobile apps for Flow. First we want to develop upgrades to fcl.js to support an alternative to iframe/pop/tab methods and post messaging between discovery and wallet approval windows and then create a full featured sample app.

This is a response to RFPS https://github.com/onflow/developer-grants/issues/121 .

Problem statement

There is currently no FCL sample or harness app for React Native. In order to create one, some upgrades to the fcl.js library are required. For example, some current features of fcl.js and wallet discovery rely on the existence of a browser window object, iframes, and post messaging between windows.

Proposed solution

Milestone 1

Milestone Idea Upgrades to fcl.js to support an alternative to iframe/pop/tab methods and post messaging between discovery and wallet approval windows.

There are two possible approaches to implement native app wallet integration using fcl library:

  1. Redirect user to his mobile browser
  2. Extend fcl standard to allow app developers display custom forms without embedding iframes

We plan on using the first one but we are open for using the second one or other basing on Onflow Board recommendation. This allows to keep the original wallet look and feel but it is not fully native solution. User would still need to be redirected to web browser.

On the other hand second approach gives much more flexibility by suggesting changes to the fcl itself. We would create json data structures that hold all required information to render simple form for any wallet. So the responsibility would be transferred to the native app creator to properly parse it and display form in any shape. Main drawback of this is that some of the unique style of the wallets would not be possible to display. Only part of the external wallet branding would be possible to display. But in this way it is possible to achieve full native support without any redirects to other apps or web browsers. If we were to use that option then we would need to add 2880 USD to the Milestone 1 budget and we would then also deliver an example code snippet displaying communication of wallet and FCL.

Milestone 2

Milestone Idea

The Ticket App is a sample application that will be build on the Flow blockchain that allows users to purchase, validate, and manage bus tickets. With this app, users can purchase different types of bus tickets, view their transaction history, access their user profile information, and see all of their tickets stored in their Flow wallet.

We intend to use all the methods of Fcl (JS) in that native react app and that above discussed scenario allows us to do so in real world scenario.

Wireframes:

https://app.excalidraw.com/l/3DlJZtdf3O8/4q3yHZogVgO

Functionalities

User Story: As a new user, I want to be able to sign up for the Ticket App account with a Flow Wallet so that I can buy ticket

  1. I open the Ticket App on my device.
  2. I click on the "Sign Up" button.
  3. I select a specific Flow Wallet from the the list
  4. I enter email address
  5. I am sent a verification email to the address I provided.
  6. I verifiy my account with passcode from email
  7. I confirm signing up with flow wallet
  8. I’m logged in to the app

User Story: As a user of the Ticket App, I want to be able to log in using my Flow Wallet so that I can access my ticket information and purchase new tickets.

  1. I open the Ticket App on my device.
  2. I click on the "Log In" button.
  3. I select a specific Flow Wallet from the the list
  4. I am taken to a confirmation page where I am asked to confirm my intent to log in using my Flow Wallet. I click on the "Confirm" button.
  5. I’m logged in to the app

User story: As a user, I want to be able to validate my bus ticket when boarding the bus. I want to be able to check the validity of my ticket by seeing the dates it is valid from and until.

  1. I open my Ticket App
  2. On the homepage, I see a list of tickets: active, to validate and archive.
  3. I click on the specific ticket to validate
  4. I see ticket details and click „Validate ticket” button
  5. The ticket is now active and I can see the dates it is valid from and until.

User story: As a user of the Ticket App, I want to be able to see a collection of my tickets and access information about each one. I want to be able to view my active tickets, tickets that are waiting to be validated, and my archived tickets.

  1. I open my Ticket App
  2. On the homepage, I click on the „Ticket Wallet” button.
  3. I am taken to my digital wallet where I can see two tabs: "My Tickets" (Active tickets and tickets ready to be validate) and "Archive Tickets".
  4. I can click on any ticket to view more detailed information about it, including its validity dates, purchase information, ticket type, issuer, issuer signature, ticket id, ticket owner.

User story: As a user of the Ticket App, I want to be able to easily access and view my user profile, including my account ID from the Flow blockchain.

  1. I log in to the Ticket App using my account.
  2. On the homepage, I click on the "My Profile" button.
  3. I am taken to a page where I can see my user profile information, including my account ID from the Flow blockchain.
  4. I can also see other options in User profile as: Transaction history and logged out button

User story: As a user of the Ticket App, I want to be able to view my transaction history of ticket activity on the Flow blockchain. I want to see all of my ticket purchases and validations. I also would like to see details of single transaction.

  1. I log in to the Ticket App using my account.
  2. On the homepage, I click on the "My Profile" button.
  3. I select from the User Profile menu Transaction history option.
  4. I can see a list of all of my ticket purchases and validations, organized by date.
  5. For each transaction, I can see the date it took place, the parties involved (from - to), the price paid, and the ticket ID (token ID) associated with the ticket.
  6. I can see whether the transaction was a ticket purchase (buy) or a ticket validation (validate).
  7. I can click on any transaction in the list to view its details.
  8. I am taken to a page that displays more details of selected transaction.

Impact

Our solution aims to simplify the process of creating applications in the Flow ecosystem by utilizing Native React. This will allow developers to take advantage of the strengths of both technologies, resulting in a more efficient and user-friendly experience. To further support the development community, we will also be providing a sample app that will be open source. This will provide developers with a firsthand look at how the app is built, allowing them to investigate and learn from it. We believe that this will help to accelerate the growth of the Flow ecosystem and make it even more accessible to developers of all skill levels.

Milestones and funding

Milestone Deliverables Timeline Risks USD proposal
1 - Fcl.js upgrades FCL JS fork compatible with React Native platform and documentation like here https://github.com/Outblock/flow-swift 6 weeks - 9240
1b - Custom wallet experience Example code snippet displaying communication of wallet and FCL 2 weeks - 2880
2 - Sample app Open source sample app showcasing FCL functionalities on native react application and documentation 10 weeks - 27615
3 - Maintenance Resolving issuing and fixing bugs 6 months - 6300

Total funding proposed: 43155 USD or 46035 USD (including 1b milestone)

Team

Name Role Bio Contact
Maciej Malik Full-Stack Engineer (Project tech lead) A seasoned professional developer with 7 years of experience, has honed their skills in web 3 development and successfully completed 7 large scale projects on various blockchains. With a Master's degree in Computer Science, they have a strong foundation in the field and a passion for blockchain, embedded platforms, and microcontrollers. As a true enthusiast, their hobby revolves around exploring the latest advancements in these areas and bringing them to life through their work. With a proven track record of delivering innovative solutions, this developer is well-equipped to tackle any challenge that comes their way. maciej.malik@silksh.pl
Fryderyk Pryjma Project lead A well-rounded and highly skilled individual, he brings a wealth of knowledge and experience to his role as a PO, UX and Design Lead. With a solid education in ICT and a progression to HTI, he specializes in web 3 projects but also has a background in ROV. His passion for sports, particularly orienteering, only adds to his well-roundedness. His strong understanding of both technology and design allows him to craft intuitive user experiences that meet and exceed the expectations of his clients. This combination of education, experience, and passion makes him an asset to any project he is a part of. fryderyk.pryjma@silksh.pl
Various Silk Software House members Front end developers, DevOps and QAs Our team of 40 developers consists of highly skilled and experienced individuals who have a proven track record in delivering top-notch solutions for blockchain projects. The group is comprised of QA professionals, DevOps engineers, and front-end developers who bring a wealth of knowledge and expertise to the table. -
fredprux commented 1 year ago

@chrisackermann any updates regarding that application?

nialexsan commented 1 year ago

@fredprux we currently have a PR to FCL with react-native support and HTTP/POST back-channel support: https://github.com/onflow/fcl-js/pull/1666

there is a sample app in progress and some further changes to FCL with deeplink front-channel support