developer-grants icon indicating copy to clipboard operation
developer-grants copied to clipboard

Published 20 hours ago • verified publisher icon onflow

React Native x FCL Sample Starter

Open fredprux opened this issue 2 years ago • 2 comments

React Native x FCL Sample Starter

Grant category

  • Open source maintenance
  • Developer tools / services

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.

  • Target audience Javascript and React Native developers wishing to create mobile apps for Flow using the cross platform React Native framework and fcl.js
  • Evidence for the need https://github.com/onflow/developer-grants/issues/121](https://github.com/onflow/developer-grants/issues/121

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.

  • Remarks

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

  • Signing up

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
  • Logging in

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
  • Buying tickets User story: As a user, I want to be able to buy a bus ticket. I would like to see the available ticket types and choose the one that best fits my needs.
  1. I click on the "Buy Ticket" button.
  2. I am taken to a page where I can see the available ticket types, such as a single trip and day tickets etc.
  3. I select the one that I want to purchase.
  4. I select how many tickets I would like to buy (default 1 ticket)
  5. I click „Buy ticket” button
  6. I confirm purchase
  7. I wait for for the transaction to be processed and for the ticket to be added to my account.
  8. I am now able to see my bus ticket and validate it at any time.
  • Validating tickets

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.
  • Displaying ticket collection

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.
  • Displaying User profile

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
  • Displaying Transaction history and single transaction details

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.
  • Logging out User story: As a user of the Ticket App, I want to be able to log out of my account.
  1. I am currently logged in to the Ticket App using my account.
  2. On the homepage, I click on the "User Profile" button.
  3. I select “Log out” option from the menu.
  4. I am asked to confirm that I want to log out of my account.
  5. I click "Yes" to confirm that I want to log out.
  6. My account is now logged out and I am taken to the login page.

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. [email protected]
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. [email protected]
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 avatar Feb 10 '23 11:02 fredprux

@chrisackermann any updates regarding that application?

fredprux avatar Jun 12 '23 07:06 fredprux

@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

nialexsan avatar Jun 12 '23 16:06 nialexsan