Using Ocean.js with WalletConnect in React Native

[TimDaub]

Lately, there have been reports on Discord that ocean.js can't be used on React Native with WalletConnect given the use of web3modal. But clearly, when opening market.oceanprotocol.com, using WalletConnect is possible. So it seems to be a problem specifically with React Native and WalletConnect.

So to either resolve this issue through collecting information or by proposing code changes, I'd like to understand what's holding someone on React Native back to use this library. Finally, if I can, I'd like to send a PR that can potentially resolve the issues with React Native and WalletConnect.

Do maintainers of this repository have further information on what seems to be the issue?

For reference, here's the report I saw on Discord: https://docs.google.com/document/d/1HsW4-RqANjkAPIUgjGpZ5ZMsTzODYQu6_7QJLHWLa4I/edit#heading=h.gw5r9qshjkib

[mihaisc]

Hi @TimDaub, thanks for the feedback.
I'm not very familiar with all the quirks of React Native , in theory it's similar with React but since it's made to run on mobile it has some limitations.
The problem here is that people are not trying to recreate what we did in the market (that is a web platform) , they are just trying to copy it in mobile without properly understanding what is going on (maybe in part we also share some responsibility here because of our lack in tutorials/docs) . As you can see in the doc/comment even in the market there is clear separation between ocean.js and web3. At some point we even changed the web3 library. And that is the point, at the end of the day for ocean.js it doesn't matter how you get the web3 object.
web3modal is just a common library used to interact with wallets, it is not needed by ocean.js. ocean.js just needs a web3 instance. So for mobile you either find a 3rd party library that handles the creation/integration of web3 with a wallet, or you look in web3modal and replicate how they interact with WalletConnect.
So the main difference between the market and a mobile app is that there are more web3 utils available for the web and we could just use web3modal and not have to develop something from scratch to handle this.
I

[TimDaub]

As you can see in the doc/comment even in the market there is clear separation between ocean.js and web3.

yes, I've also noticed that. Only the market implements: https://github.com/oceanprotocol/market/blob/34e424b13fcb9ce69f1f1114c865027f6863d905/package.json#L37

ocean.js just needs a web3 instance.

That's my understanding too.

Ok, thanks. So it sounds like there's a general misunderstanding about web3, WalletConnect and how to use it with ocean.js.

Edit: For now, I'll leave this issue open until we understand where is the point of contention and to document it upon closing as an issue comment here.

[mihaisc]

Edit: For now, I'll leave this issue open until we understand where is the point of contention and to document it upon closing as an issue comment here.

Sure, happy to answer any other questions.

[TimDaub]

signal-2021-12-14-003642_001.mp4

WalletConnect and ocean.js are compatible. But it may be necessary to deactivate the qr code modal when launching the WalletConnectProvider:

const connector = useWalletConnect();
const provider = new WalletConnectProvider({
  infuraId: '',
  connector,
  qrcode: false,
});