React Native sample app for WalletConnect v2

[linxianxi]

When will it come? Or is there a react-native wallet example for v1?

[anuragkumarjsk]

I have used Provider object from walletconnect V1 to wrap around my App component in react-native. Do we have a simmilar provision in V2, because i see the provider object missing in Documentation for V2

Do we also have a sample implementation

[ardasatata]

any update on this??, does anyone have the working example of RN with walletConnect v2? Thanks

[iketw]

@ardasatata @chadyj https://github.com/WalletConnect/react-native-examples

[emzet93]

@ikethirdweb thanks 🙏 But it looks like that all this example does is basically calling SignClient.init in effect and setting state boolean value to true once it's initialized.

But what next? How can we use this client? In v1 in @walletconnect/react-native-dapp we had provider component and hooks connected to it's context, which we could call to show wallet picker modals and allowed further interaction with wallet.

How can it be done now? Docs for web are based on web3modal which, as far as I know, won't work in react native. Is there any example, guidance how to actually connect to specific wallet in RN? Or is there any detailed documentation for SignClient.

I would like to migrate to v2 because of dropping v1 support but I really have no clue where to start

[iketw]

@ikethirdweb thanks 🙏 But it looks like that all this example does is basically calling SignClient.init in effect and setting state boolean value to true once it's initialized.

But what next? How can we use this client? In v1 in @walletconnect/react-native-dapp we had provider component and hooks connected to it's context, which we could call to show wallet picker modals and allowed further interaction with wallet.

How can it be done now? Docs for web are based on web3modal which, as far as I know, won't work in react native. Is there any example, guidance how to actually connect to specific wallet in RN? Or is there any detailed documentation for SignClient.

I would like to migrate to v2 because of dropping v1 support but I really have no clue where to start

I feel your pain, I went through the same. I got it semi-working by following the code in this sample code: https://github.com/WalletConnect/web-examples/tree/main/dapps/react-dapp-v2-with-ethers.

Note that the only difference is that instead of opening the uri with the web3modal you need to use Linking.openUrl(uri) in React Native. The only wallet I got it working with was the Trust Wallet on Mainnet, anything else just failed. Good luck!

[emzet93]

@ikethirdweb thanks! I started to try building this on my own too and now I was digging in sources of v1 to find out how to generate uri 😅

If I make any reasonable progress, I will share it here ;)

[m1heng]

After read through threads about react native, I just had few conclusion, and need confirmation from the team.

1. There is not direct replace for implementation in https://docs.walletconnect.com/1.0/quick-start/dapps/react-native, much manual migration job need to be done ( manually setup singer, manually setup explore, wrap singer into a provider[I still don't know how to do this part easily], give it to a tool like ether or wagmi, write a UI for wallet selection).
2. If I use sign@v2, I lost supporting metamask old version user(or maybe larger number of user), even the available new v2 compatible version of metamask is not yet ready.
3. as far as I can see from @web3modal/ethereum, it still have compatible code for walletconnectV1, does it mean when we do the migration, we have to also have compatible logic for v1? which means manually implement v1 from singer

[crypblizz8]

Hey all, so there are two sides to react native: dapp and wallet side:

• Wallet: Full wallet example should be merged in the next few days. This shows the complete web3wallet/sign flow. The PR is here

• dApp: The react-native-dapp package will no longer work after V1 is deprecated so am creating a migration example dApp connecting to ethereum-provider and getting the deepLinks for the popular wallet listings as per our Explorer page. Can provide another update on this EoW.

[rafaeluzzi]

• migration example dApp

Any update on this? This will be very helpful, thanks!

[AlexMasmej]

@crypblizz8 +1, would love an update here for v2 RN dapps!

[crypblizz8]

Hey there @AlexMasmej @rafaeluzzi, the example for the dApp side is up. https://github.com/WalletConnect/react-native-examples/tree/main/dapps/v2Explorer

Video Preview of the result:

https://user-images.githubusercontent.com/45455218/220596539-f41fc82e-c84e-485e-8d3d-947b7ccf0c24.mov

Will add more info to the README later today.

[nnabinh]

@crypblizz8

I tried your example. However, when I do signer.signCommit('Hello world'), it's calling window.localStorage.getItem which is not available in mobile app.

I also replaced the SignClient and indicated native AsyncStorage, but still got no luck. Can you point me to where I should look at for fixing this?

[crypblizz8]

Hi @nnabinh, could you share your code so I can help to reproduce? Thanks

[StevenBarnett1]

I converted dapps/v2Explorer to work in expo successfully from your react native standalone, but I'm running into some issues.

const getAddress = useCallback(async () => {
    try {
      const signer = await web3Provider.getSigner();
      const currentAddress = await signer.getAddress();
      setCurrentAccount(currentAddress);
    } catch (err) {
      console.log('Error for initializing second', err);
    }
  }, []);

when calling signer.getAddress() it always throws [TypeError: Cannot read property 'length' of undefined]. Why is this happening? signer exists and getAddress is a valid function on it.

Is there a way to integrate a QR scanner into the dapp side? I need to be able to scan desktop wallet QR codes from my mobile dapp to open a walletconnect connection.

How can I configure this to use polygon? Do i just add it to the RPC map & chains for universalProvider.connect()? If so, afterwards how do I specify the wallet to transfer on polygon vs Ethereum when doing a send?

 universalProviderSession = await universalProvider.connect({
      namespaces: {
        eip155: {
          methods: [
            'eth_sendTransaction',
            'eth_signTransaction',
            'eth_sign',
            'personal_sign',
            'eth_signTypedData',
          ],
          chains: ['eip155:1'],
          events: ['chainChanged', 'accountsChanged'],
          rpcMap: {
            1: `https://rpc.walletconnect.com?chainId=eip155:1&projectId=${ENV_PROJECT_ID}`,
          },
        },
      },
    });

[iketw]

How does this work on expo? Your example in dapps/v2Explorer is build for react native standalone and not expo. I see you have a rn_expo_wallet directory but I built that and it doesnt do anything. How do i bring up the UI to connect to your preferred wallet like in v1???

EDIT: I made dapps/v2Explorer work in expo, but in the list of apps i dont see metamask? Why is it missing some wallets? Also, in your code:

const getAddress = useCallback(async () => {
    try {
      const signer = await web3Provider.getSigner();
      const currentAddress = await signer.getAddress();
      setCurrentAccount(currentAddress);
    } catch (err) {
      console.log('Error for initializing second', err);
    }
  }, []);

when calling signer.getAddress() it always throws an error [TypeError: Cannot read property 'length' of undefined]. Why is this happening? signer exists and getAddress is a valid function on it.

In your example video above, you have the phone bring up the QR scanner. How did you do this?

Also, what is the point of the rn_expo_wallet directory? dApps/v2Explorer seems to have all of the functionality to connect the wallet and create transactions?

Lastly, how can I configure this to use polygon?

I don't work at WC but I know some of the answers here:

1. Metamask doesn't show up because this is a WalletConnect V2 example. Only wallets that support the WC V2 protocol will show up: You can check the ones that support WCV2 here: https://explorer.walletconnect.com/?type=wallet&version=2
2. rn_expo_wallet is the implementation of the wallet side and dapp/v2Explorer is the implementation of the application side.
3. In the video above, notice that the QR Scanner is not part of the v2Explorer app, that's the wallet side that opened and had the QR Scanner already opened.

Not sure what's going on with your signer and about Polygon, as long as you have it as the active chain in your wallet it should work (notice that I've had great difficulty finding wallets that support chains other than Ethereum), otherwise you'll need to manually switchChains I believe.

Question for you, did you get this working with Expo Go? If you could explain what were the steps you took to make it work wtih Expo I'd appreciate it.

Thanks!

[StevenBarnett1]

Yeah I got it working with expo. Basically just copy all of the files from dappv2Explorer into your existing project then view the screen (in the example its in src/screens/App.tsx & change the ENV_PROJECT_ID. I dont know if you're supposed to change ENV_RELAY_URL. I have mine set like their example 'wss://relay.walletconnect.com'. If you're running into issues lmk.

The relevant files are ExplorerItem, ExplorerModal, ExplorerModalHeader, ExplorerUtils, InitialExplorerContent, UniversalProvider, useInitialization, ViewAllBox, ViewAllExplorerContent, App

I still dont understand what rn_expo_wallet / the wallet side of this project is? What is its purpose can you explain a little more? Is it the wallet that you would be connecting to your Walletconnected wallet to transfer funds in?

[iketw]

Yeah I got it working with expo. Basically just copy all of the files from dappv2Explorer into your existing project then view the screen (in the example its in src/screens/App.tsx & change the ENV_PROJECT_ID. I dont know if you're supposed to change ENV_RELAY_URL. I have mine set like their example 'wss://relay.walletconnect.com'. If you're running into issues lmk.

I still dont understand what rn_expo_wallet / the wallet side of this project is? What is its purpose can you explain a little more? Is it the wallet that you would be connecting to your Walletconnected wallet to transfer funds in?

Right, that's the wallet example implementation they have. The code in there is what MetaMask, Rainbow or any other wallet needs to do to support wallet connect

[desfero]

@crypblizz8 thanks a lot for the example integration. Have one question, how the redirect back to the app is handled right now?

[glitch-txs]

just saw this @desfero, please feel free to open a discussion if you have further questions 🙏

[engrwaqasali]

Is there a way to integrate a QR scanner into the dapp side? I need to be able to scan desktop wallet QR codes from my mobile dapp to open a walletconnect connection

{"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Successfully Restored subscriptions for subscription DEBUG {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Outgoing Relay Payload DEBUG {"context": "core"} {"context": "core/relayer"} Publishing Request Payload DEBUG {"context": "core"} {"context": "core/relayer"} Failed to Publish Request ERROR {"context": "core"} {"context": "core/relayer"} [RangeError: Maximum call stack size exceeded] DEBUG {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Outgoing Relay Payload stalled INFO {"context": "core"} {"context": "core/relayer"} No topics subscribed to after init, closing transport

i am able to scan the qr code, but not sure how to make the connection of Desktop webapp Qrcode to the wallet in react-native, it gives me the above logs

is ther a good example or step by step instructions for it

PS::i am new to web3