apibara
React Native + PWA demo
With onchain summer we have seen more applications that decided to build a mobile PWA (Progressive Web App) as opposed to a web app. These apps (frentech, frenpet among many) were praised for their superior user experience and ease of onboarding.
EU regulation is also forcing Apple to allow sideloading on iOS in the first half of 2024, so we can expect an explosion in mobile dapps.
I believe Starknet with its native account abstraction can provide the best user experience when it comes to mobile dapps. The idea is to build a community template that builders can use to boostrap their mobile dapp using React Native.
Overview
The demo will show how to build the following user interactions:
- welcome flow to guide the user through deploying an arcade account
- a simple screen to interact with a starknet smart contract through the arcade account
Welcome screen
The goal of the welcome screen is to guide the user through deploying and funding an arcade account (or burner account). Before an account can be deployed on Starknet, it needs to be pre-funded by another account.
This step requires some research to build the best possible user experience. I'm going to define what experience we ideally want to implement, and then what we can implement using the same steps as the burner account demo.
Ideal flow
- A secret key is generated on the device and it's used to initialize the arcade account. This step is the same as the burner demo.
- The user is shown the address of their new wallet, together with a link to a companion web app from where they will fund and deploy their wallet using one of the existing wallets.
- Users goes on the web app, connects their web wallet, and funds + deploys + initialize the arcade account. Thanks to Starknet multicall, this is a single transaction (maybe?)!
- Users goes back to the mobile app, clicks "done" and is transferred to the app screen.
Not-so-ideal flow
- A secret key is generated on the device and it's used to initialize the arcade account. This step is the same as the burner demo (same as before).
- The user is shown the address of their new wallet, together with a link to a companion web app from where they will fund and deploy their wallet using one of the existing wallets (same as before).
- Users goes on the web app and funds the new wallet.
- Users goes back to mobile app and deploys the arcade wallet.
- Users goes back to the web app and initializes the arcade wallet using their web wallet.
- Users goes back to the mobile app, clicks "done" is transferred to the app screen.
App screen
Main screen
The app screen shows developers how to interact with their smart contract using the arcade account. For this demo, we develop a simple smart contract to increase and decrease a counter. The twist is that the counter belongs to the arcade account's owner account and is shared between all the users' arcade accounts.
Settings screen
The settings screen simply shows the account's address and a link to the companion web app used to manage the account.
Companion web app
The companion web app is used to create the arcade account. It should also contain a way to nuke the account and transfer all funds back to the owner account.
Arcade account
We need to develop/adapt an arcade account that can be deployed and initialized from a factory contract (to make the fund + deploy + initialize action a single transaction).
Demo smart contract
The demo smart contract will be simple. It's a simple map ownerAccount => counter, with two methods to increment and decrement the counter.
Hey @dbejarano820 , we have someone working on #352 and #349. Maybe you can implement #350?
Sounds good @fracek , I'll wait for the required issues to be resolved and then get started on #350
Is there someone working on #348 too? I see that one and #349 are required for it
Hi @fracek what's the situation at this issue? I would love to work on the React Native part. But IMHO it might be better to implement a WC adapter (currently only argent mobile supports) and do everything at the app. However if I'm not wrong, there is no WalletConnect adapter right now and starknetkit doesn't work with React Native. I can start by implementing a WC Adapter that will work with both React Web and React Native. I've created a WC adapter for unruggable.meme
Hey @ugur-eren, this issue is blocked waiting for the next version of starknet react (v3). I agree that if we can do it with wallet connect it may be better for sure.
