[bug]: unable to proceed after external wallet confirmation

[work-kevin-flynn]

Description

Our walletconnect integration on RN is unable to proceed after confirming from external wallet, and debugging on RN only led to this mysterious decoding issue as seen in screenshot

One of wallets we are supporting is MetaMask, however other wallets currently face the same time issue so I think it is somewhere further downstream like walletconnect, just not sure whether it is the RN library or core.

Here are the open issues in walletconnect monorepos FYI

https://github.com/WalletConnect/walletconnect-monorepo/issues/4275 https://github.com/WalletConnect/walletconnect-monorepo/issues/5415

and more logs from debugger

 INFO  {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_created
 INFO  {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_created
 INFO  {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_created
 INFO  {"context": "core"} {"context": "core/expirer"} Emitting expirer_deleted
 INFO  {"context": "core"} Core Initialization Success
 INFO  {"context": "core"} {"context": "core/expirer"} Emitting expirer_deleted
 INFO  {"context": "client"} SignClient Initialization Success
 INFO  Cleaning up inactive pairings...
 INFO  {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_deleted
 INFO  {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_deleted
 INFO  {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_deleted
 INFO  Inactive pairings cleared: 4
 LOG  ---modal-react-native pairingUri - pairingError wc:d31564d51afca62e47c0f13430aa8942d648a89aad1d8ca5ca391ef09e1b89db@2?relay-protocol=irn&symKey=72f2885b2a33540aba05e844891a4310b3062583519485304e7e20d44980208c  -  false
 LOG  -0-0-0 undefined ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/= 6 -1618315363
 LOG  -0-0-0 undefined ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/= 6 -1618315363
 INFO  {"context": "core"} {"context": "core/history"} Emitting history_created
 INFO  {"context": "core"} {"context": "core/expirer"} Emitting expirer_created
 INFO  [2024-11-19T05:02:28.553Z] Information: (WebSockets transport) There was an error with the transport.
 INFO  {"context": "client"} session request queue is empty.
 LOG  -0-0-0 undefined ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/= 6 -1618315363
 LOG  -0-0-0 undefined ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/= 6 -1618315363
 INFO  {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired
 INFO  {"context": "core"} {"context": "core/expirer"} Emitting expirer_expired

• the log lines with -0-0-0 and are what I manually added to node_modules packages
• the lines with ---modal-react-native are from local fork of modal-react-native

WalletConnect Modal SDK version

1.1.0

Output of npx react-native info

System: OS: macOS 13.6 CPU: (12) arm64 Apple M2 Pro Memory: 108.70 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 20.0.0 path: ~/.nvm/versions/node/v20.0.0/bin/node Yarn: version: 1.22.22 path: ~/.nvm/versions/node/v20.0.0/bin/yarn npm: version: 9.6.4 path: ~/.nvm/versions/node/v20.0.0/bin/npm Watchman: version: 2024.11.11.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.16.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.2 - iOS 17.2 - macOS 14.2 - tvOS 17.2 - visionOS 1.0 - watchOS 10.2 Android SDK: Not Found IDEs: Android Studio: 2024.2 AI-242.23339.11.2421.12550806 Xcode: version: 15.2/15C500b path: /usr/bin/xcodebuild Languages: Java: version: 17.0.13 path: /usr/bin/javac Ruby: version: 3.3.6 path: /opt/homebrew/opt/ruby/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.3.1 wanted: ^18.3.1 react-native: installed: 0.75.4 wanted: ^0.75.0 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Expo Version (if applies)

51

Steps to reproduce

• Open wallet connect modal
• Choose QR code
• Scan QR with one of the external wallet app (MetaMask/Trust/Bitget/Binance etc)
• Confirm in external wallet

Expectation - the modal proceeds after confirmation Actual - the modal hangs and does nothing

Snack, code example, screenshot, or link to a repository

import React, { useCallback, useEffect } from 'react';
import { View } from 'react-native';
import '@walletconnect/react-native-compat';
import { WalletConnectModal, useWalletConnectModal } from '@walletconnect/modal-react-native';

export default function App() {
  const { open, isConnected, provider } = useWalletConnectModal();
  useEffect(() => {
    if (provider) {
      provider?.on('chainChanged', (newChain: unknown) => {
        console.log('useEffect::ethereum on "chainChanged"', newChain);
        //setChain(newChain as string);
      });
      provider?.on('connect', () => {
        console.log('on connect');
      });
      provider?.on('message', (m) => {
        console.log('on message', m);
      });
      provider?.on('accountsChanged', (accounts) => {
        console.log('on "accountsChanged"', accounts);
      });
    }

    return () => {
      provider?.events.removeAllListeners();
    };
  }, [provider]);

  return (
    <View style={styles.container}>
      <WalletConnectModal projectId={"01ac2a8120c729889d392c74a978b009"} providerMetadata={{
  name: 'test',
  description: 'test',
  url: 'https://snack.expo.dev',
  icons: [
  ]
}} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

[ignaciosantise]

hey @work-kevin-flynn can you try adding a resolution so the sdk uses the latest walletconnect deps? To see if it solves the issue:

In your package.json add this if you use YARN

  "resolutions": {
    "@walletconnect/core": "2.17.1",
    "@walletconnect/universal-provider": "2.17.1"
  },

and this if you use NPM

  "overrides": {
    "@walletconnect/core": "2.17.1",
    "@walletconnect/universal-provider": "2.17.1"
  },

Then install the dependencies and test

[work-kevin-flynn]

@ignaciosantise let me try and update again!

[ignaciosantise]

@work-kevin-flynn was this solved? can i close the issue?