[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

WalletConnect/walletconnect-monorepo#4275
WalletConnect/walletconnect-monorepo#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!