pair() doesn't work for valid URIs in React Native / Android

[preetish-brine]

Discussed in https://github.com/orgs/WalletConnect/discussions/4467

^{Originally posted by preetish-brine April 22, 2024}
Hey guys, I worked on Migration of the SDK from sign-client "^2.2.1" to @walletconnect/web3wallet "^1.11.2", and I have been facing issues while triggering the pair function to pair to a Dapp URI to my wallet app, I have tried logging the web3wallet client and the pair function instances, nothing seems wrong in that and i am able to log the client instance.

However, the pair function goes into a loop for valid cases, If its a invalid URI, it is returning a Error as Invalid URI but for the else case it gets lost and doesnt trigger a sessionProposal event, I think there is an issue with the relayer subscription of wallet connect and the event emitter is not emitting the session proposal event, It also doesnt return a status of what actually happened inside the code.

export async function web3WalletPair(params) {
  console.log(core.pairing.pair({ uri: params?.uri}), web3WalletClient.pair({ uri: params?.uri}), "PAIR_FN")
    return await web3WalletClient.pair({ uri: params?.uri});;
}

  useEffect(() => {
    const handleDeepLink = async () => {
      if(initialized){
      try {
        const pairing = await web3WalletPair({uri: "wc:9d5edde2f3bfe7a1ce47be066c0fc9d949e364bc17f4861f685f83e47f4b3eaa@2?expiryTimestamp=1713778567&relay-protocol=irn&symKey=1c6922afe4b787d3751ad15553b7b6b8f7dc524d28396f176a6ecd04c41bb69c"});
      } catch (error) {
        Alert.alert(`${error?.toString()}`);
      }
    }
    };
  
    handleDeepLink();
    return () => {
    
    }
  }, [deepLinkURI, web3WalletClient, initialized, AppState.currentState]);

The relayer doesnt send the event in the below session proposal event listener
web3WalletClient.on('session_proposal', onSessionProposal);

const onSessionProposal = useCallback((proposal) => {
Alert.alert(`HERE`);
ModalStore.open('SessionProposalModal', { proposal });

}, []);

However, the pair function goes into a loop for valid cases, If its a invalid URI, it is returning a Error as Invalid URI but for the else case it gets lost and doesnt trigger a sessionProposal event, I think there is an issue with the relayer subscription of wallet connect and the event emitter is not emitting the session proposal event, It also doesnt return a status of what actually happened inside the code.

Can you guys try resolving this on a prioirity, or is there any way to check the events of the relayer ?

[linear[bot]]

CR-15 pair() doesn't work for valid URIs in React Native / Android

[ganchoradkov]

I think there is an issue with the relayer subscription of wallet connect and the event emitter is not emitting the session proposal event, It also doesnt return a status of what actually happened inside the code.

Hey @preetish-brine, could you double check that you're passing valid/unused pairing URI please. The pair method creates pairing and subscribes to the topic provided in the URI. If that topic was already subscribed by another client and proposal was consumed, you will not receive it second time.

[ganchoradkov]

Additionally, please make sure that you're subscribed to receive session_proposal before you call .pair as you could be running into race conditions due to the reliance on useEffects (judging from the snippets above)

[preetish-brine]

I think there is an issue with the relayer subscription of wallet connect and the event emitter is not emitting the session proposal event, It also doesnt return a status of what actually happened inside the code.

Hey @preetish-brine, could you double check that you're passing valid/unused pairing URI please. The pair method creates pairing and subscribes to the topic provided in the URI. If that topic was already subscribed by another client and proposal was consumed, you will not receive it second time.

I have tried to clear caches and generate new URI schemes as well , doesnt seem to work, I am already aware of the cache issue and was facing the same while integrating deep link to sign client, used to make it run by doing clear cache and generating new URI schemes

@ganchoradkov

[preetish-brine]

Additionally, please make sure that you're subscribed to receive session_proposal before you call .pair as you could be running into race conditions due to the reliance on useEffects (judging from the snippets above)
@ganchoradkov
Yes my subscription logic is same as it was for the signClient

useEffect(() => {
  if (initialized) {
    console.log("INIT_WEB3", web3WalletClient);
    web3WalletClient.on('session_proposal', onSessionProposal);
    web3WalletClient.on('session_request', onSessionRequest);
    // TODOs
    web3WalletClient.on('session_ping', (data) => console.log('ping', data));
    web3WalletClient.on('session_event', (data) => console.log('event', data));
    web3WalletClient.on('session_update', (data) => console.log('update', data));
    web3WalletClient.on('session_delete', (data) => {
      // console.log('delete', data);
      // showInfoNotification('Dapps successfully disconnected!');
    });
  }
}, [initialized, onSessionProposal, onSessionRequest]);

[ganchoradkov]

It seems that both useEffects

1. that sets the event listeners
2. the one that calls pair

are run at the same time by initialized potentially causing a race condition.
I would suggest to test the logic by having them in the same useEffect or check out our RN example wallets here https://github.com/WalletConnect/react-native-examples/tree/main/wallets

[preetish-brine]

It seems that both useEffects

1. that sets the event listeners
2. the one that calls pair

are run at the same time by initialized potentially causing a race condition. I would suggest to test the logic by having them in the same useEffect or check out our RN example wallets here https://github.com/WalletConnect/react-native-examples/tree/main/wallets

I actually tested the sign client SDK in the similar pattern and it was working in that case, i think race condition is not the actual issue,

Also i moved the pair to a callback initiated by a user button click and the behavior is same. my closest assumption of the reason of this issue is the relayer / event emitter is somehow not emitting the event

@ganchoradkov

[glitch-txs]

@preetish-brine could you provide a minimal reproducible example of the issue please?

[alwx]

I tried investigating it all a bit and found out that your own examples serve as the best repoducible example of this issue.

Try running these two:

• https://github.com/WalletConnect/react-native-examples/tree/main/wallets/rn_cli_wallet_068_5
• https://github.com/WalletConnect/react-native-examples/tree/main/wallets/rn_cli_wallet

The first one works (it uses version 1.8.8 of @walletconnect/web3wallet) while second one doesn't.
It shows the popup and expects the pairing to be established but it never happens.

[ignaciosantise]

Hey @alwx 👋 I'll need your help to reproduce the issue, as it works well on my android device using the rn_cli_wallet example

Screenrecorder.May.29.2024.mp4

Does it always happen? Or just in cold boots of the app?

[ignaciosantise]

Maybe this helps: a while ago we had an issue related with events and it turned out that there was a conflict with different versions of the events package. Checking your yarn.lock file, you have multiple versions of it

https://github.com/status-im/status-mobile/blob/841a6140e339d878aa7a0bec3acebdc55bb1b04e/yarn.lock#L5728-L5742

Can you check if installing just one version fixes the issue? You can do it by adding this to your package.json and run yarn install again

resolutions: {
  "events": "3.3.0"
}

The older version is being installed by node-libs-react-native

[alwx]

@ignaciosantise I'm trying it on emulator (AVD), maybe using a physical device makes a difference? I will check it today on a physical device and with the solution you're proposing, and then will come back to you.

[alwx]

Interesting but running the example (rn_cli_wallet) on real device leads to more or less similar results, except that I see this error in RN logs now:

 ERROR  {"context": "core"} Missing or invalid. pair() uri#relay-protocol

Adding "events": "3.3.0" doesn't seem helpful either and affects nothing. Can it be because of node version? Mine is v18.16.1

[ignaciosantise]

Hey @alwx 👋 it should work on emulators too.

Some questions:

1. Are you testing with the latest version of rn_cli_wallet? Could you upload a video with the errors?
2. Are you using a VPN? If so, can you test turning it off?

[alwx]

@ignaciosantise
Sorry, I got distracted by other issues.

But did the testing again right now, and here is the video. Github doesn't allow to attach videos more than 10 MB in size, so here is the link to it: https://files.alwxdev.com/rn_cli_wallet_video.mov

I am not using any VPN. This is rn_cli_wallet without any modifications, adding "events": "3.3.0" to resoultions changes nothing.

[alwx]

@ignaciosantise we temporarily fixed our issue by downgrading @walletconnect/web3wallet to 1.10.2 (status-im/status-mobile#20600). But obviously it still means that pairing is broken in the current version of WalletConnect.

[ignaciosantise]

Hey @alwx sorry for the delay. Seeing your video, it seems there's something wrong with that pairing uri. How are you generating it? Can you try getting the uri from here ?

This are the specs for the Pairing URIs -> https://specs.walletconnect.com/2.0/specs/clients/core/pairing/pairing-uri

edit: okey, the URI in the command line is OK, but the one being pasted in the input is incomplete. right? It only contains expiryTimestamp

[ignaciosantise]

I copied the URI from your command line and i get the expired error. So i guess the issue is on how the command line pastes the uri in the input 🤔

Can you check what happens if you go to https://react-app.walletconnect.com/ from the emulator? and copying the uri from there