anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.53k stars 938 forks source link

React Native Support #229

Open dnosk opened 2 years ago

dnosk commented 2 years ago

Is your feature request related to a problem? Please describe. I'm looking to build wallet adapter for mobile apps.

Describe the solution you'd like Ideally, this would function similar to current react UI example projects, but on mobile.

Describe alternatives you've considered It's possible react UI would work inside of mobile, but popular wallets such as Phantom don't have a mobile app or a QR scan feature.

jordaaash commented 2 years ago

@dnosk is this something you would like to work on implementing?

dnosk commented 2 years ago

Appreciate the offer, I was more looking to implement into my own React Native app. Curious what contributing to solana labs looks like - any docs?

jordaaash commented 2 years ago

There aren't any docs on contributing, but the process is pretty simple.

I recommend following the steps here first just to make sure you are able to run it locally: https://github.com/solana-labs/wallet-adapter#build-from-source

If you have implementation questions or decisions you want to discuss, we can do that here.

After that, just fork the project, create a new branch, and open a pull request!

jordaaash commented 2 years ago

Also, it's worth noting that Phantom has a mobile app in beta testing. Slope has one in production. I believe Solflare has one in development.

dnosk commented 2 years ago

Awesome! Anyway to connect someone from those teams here (if you know them)?

jordaaash commented 2 years ago

Sure, I can loop some people in from those teams when there's a more detailed proposal to review. For now, I think it would help to establish the use cases, user flows, scope, and how it makes sense for it to be part of the project.

jordaaash commented 2 years ago

Closing this as out of scope. If you're interested in building this, please comment and we can reopen and discuss.

tsdmrfth commented 2 years ago

Hey everyone. I would like to discuss the issue. I am planning to build a mobile dApp using React Native and the app itself requires a wallet connection. I have spare time to build this. Also doing this could be a good profit for the Solana project ecosystem I think because you know React Native has a huge developer community. This library would make the development process of the React Native dApps much easier!

jordaaash commented 2 years ago

@tsdmrfth that's great! I reopened the issue, your contributions are very welcome. However, I might suggest creating a dedicated repository outside of this, and we can see if it makes sense as part of the core, or to link to as we do with the Angular packages here (and will soon do with Vue and Svelte). Is that okay?

tsdmrfth commented 2 years ago

@jordansexton Hey! Yeah, I can build something as a kind of an MVP version in a dedicated repository but before that, I'd like to discuss how that could be done in React Native and get some advice

jordaaash commented 2 years ago

I'd like to discuss how that could be done in React Native and get some advice

Sure. Fundamentally what I think we'd need is a standardized way for mobile wallet apps to communicate with other mobile apps, in both directions.

https://github.com/solana-labs/solana-pay/issues/26 proposes a mechanism for wallets to communicate with an HTTP endpoint, but this could potentially work with a deep link too.

The mobile app could deep link to solana: which wallets can register themselves to handle universal links from. This should prompt the user to choose a wallet app to handle the link, which would prompt the user to connect.

The link could contain a return deep link to get back to the app, with the public key of the wallet. The same could be done to sign transactions.

This is a bit clunky as UX goes, so we should also look at actions/intents on Android, Safari web extensions, and other native APIs that might work to communicate between two running apps.

We should also look at how WalletConnect and Metamask do these things, if they do at all. None of this is specific to React Native yet, but I think once we figure out the UX, that should be more straightforward.

tsdmrfth commented 2 years ago

@jordansexton The deep link solution seems possible to implement but in that case, it seems like we should define an app-to-app communication structure with the wallet provider app developers. I think we can connect someone from the wallet provider teams. Also as an idea, how about using a WebView for the wallet connection? Do you think this is possible?

jordaaash commented 2 years ago

we should define an app-to-app communication structure with the wallet provider app developers. I think we can connect someone from the wallet provider teams.

I think the first step is to do some research on what technical solutions are available and the tradeoffs they have, and then define a spec proposal to gather feedback. I'm connected with most of the teams working on wallets that support Solana, but it helps to have a skeleton of specific ideas to build consensus around (this is what we did with Solana Pay).

Also as an idea, how about using a WebView for the wallet connection? Do you think this is possible?

I'm not sure what you mean. Can you lay out specifically how this would work and what the user flow would be?

tsdmrfth commented 2 years ago

I think the first step is to do some research on what technical solutions are available and the tradeoffs they have and then define a spec proposal to gather feedback. I'm connected with most of the teams working on wallets that support Solana, but it helps to have a skeleton of specific ideas to build consensus around (this is what we did with Solana Pay).

I have implemented the deep link feature to the current project at the company and it's pretty straightforward but for this package to work as intended each wallet provider should register itself for a deep link scheme and develop a handler mechanism to return public wallet addresses back. I think this may be the best solution for us. The deep linking works on both android and iOS without hassle as far as I've experienced during the development process of it on the company project.

I'm not sure what you mean. Can you lay out specifically how this would work and what the user flow would be?

It was just a idea that I was thinking on it maybe 2 months ago but I think that's way more complex than the deep link solution. So we can ignore it :)

jordaaash commented 2 years ago

each wallet provider should register itself for a deep link scheme and develop a handler mechanism to return public wallet addresses back. I think this may be the best solution for us.

I agree that this should be supported. But thinking beyond the crypto native crowd, jumping between two apps twice (to connect then sign a transaction, and for every transaction you need to sign) isn't great.

This is a bit clunky as UX goes, so we should also look at actions/intents on Android, Safari web extensions, and other native APIs that might work to communicate between two running apps.

We should also look at how WalletConnect and Metamask do these things, if they do at all.

Deep links are obvious. Let's start with the premise that we can do better than deep links and invalidate that first.

tsdmrfth commented 2 years ago

I agree that this should be supported. But thinking beyond the crypto native crowd, jumping between two apps twice (to connect then sign a transaction, and for every transaction you need to sign) isn't great.

Yeah, that could be annoying for the users.

Deep links are obvious. Let's start with the premise that we can do better than deep links and invalidate that first.

Right. I'll do my research about your suggestions!

tsdmrfth commented 2 years ago

Hi. I did lots of research about inter-app communication, WalletConnect, actions/intents on Android, and Safari web extensions.

Let's start with actions/intents on Android: It looks like it can be used to solve communication between two apps but there is almost no difference for our use case between this and deep linking.

Safari web extensions: It's not something related to React Native...

WalletConnect: They have a JSON-RPC bridge server that pushes messages from dApps to the wallets back and forth. Once the connection with a wallet is initiated dApps will then be able to use the connector object to call functions of the object itself. This approach still needs a kind of handler mechanism in the wallet apps

tsdmrfth commented 2 years ago

I agree that this should be supported. But thinking beyond the crypto native crowd, jumping between two apps twice (to connect then sign a transaction, and for every transaction you need to sign) isn't great.

@jordansexton I was thinking about this. It's a problem for web dApps as well because you know each time users have to approve the transactions using their wallets' browser extension

akelaholmes commented 2 years ago

So just to be clear: right now there's no way for a iOS/mobile app to connect to the Phantom wallet app/any Solana wallet app right? Even if you spin up a webpage within the app to try to connect since there's no equivalent of WalletConnect on Solana?

jordaaash commented 2 years ago

To everyone -- please keep discussion here relevant to the issue, and to this project. If you don't understand the scope of this project or the difference between this library and wallets themselves, please use Discord for questions.

right now there's no way for a iOS/mobile app to connect to the Phantom wallet app/any Solana wallet app right?

This is a question for Phantom, not this project. But I believe the answer is no, it's currently not possible to connect to the Phantom mobile app from a mobile browser or another app.

Even if you spin up a webpage within the app to try to connect since there's no equivalent of WalletConnect on Solana?

The only way to connect with Phantom currently using this project is inside the Phantom app's dapp browser.

WalletConnect doesn't support Solana yet, and there are no wallets to my knowledge that use WalletConnect 2.0 which works for chains other than EVM chains.

akelaholmes commented 2 years ago

@jordansexton thank you!

tsdmrfth commented 2 years ago

@akelaholmes Can't say there is no way. Deep linking can be used still

tsdmrfth commented 2 years ago

WalletConnect doesn't support Solana yet, and there are no wallets to my knowledge that use WalletConnect 2.0 which works for chains other than EVM chains.

@jordansexton Do you think we need to wait for WalletConnect to support Solana chain? I think for Solana we need something special so which could be used for Solana Pay as well...

ishan-torus commented 2 years ago

Hey guys, we at web3auth , are building a SDK that requires minimal setup and enables you to have a wallet inbuilt in your dapp. We use Chrome Custom Tabs and AuthenticationServices for a in app experience to the user. It's in a early phase but we have made some good progress (attaching a recording of the same), currently we are having some issues with adding polyfills to use solana-web3.js in the rn environemt

https://user-images.githubusercontent.com/90746419/155450768-51ad6e2c-f4ee-45a6-ad78-f98b122fcf68.mp4

tsdmrfth commented 2 years ago

Hey, @ishan-torus Are you able to use one of the available wallets from this library?

safaiyeh commented 2 years ago

Hey all im happy to help here as much as possible to push towards supporting Solana on mobile.

Some concerns we faced at ME is that first-party buys are not allowed on the App Store. Meaning we aren't allowed to support buying directly on our native app. One step forward would be a good deep link standard across mobile wallets into their respect dapp browsers. Could help jump start some unification there rather than implementing every individual deep link SDK.

Would love some thoughts from the team! @jordansexton @tsdmrfth @ishan-torus

tsdmrfth commented 2 years ago

Hey @safaiyeh Do you have any idea about how a connection between dApp and wallet could establish?

safaiyeh commented 2 years ago

Hey @safaiyeh Do you have any idea about how a connection between dApp and wallet could establish?

For example, we pass a URL of the listing and it opens in the wallets web view & trigger the connect flow. Instead of wallet signing in our mobile apple

Phantom has done some good work here: https://phantom.app/blog/introducing-phantom-deeplinks