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]

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?