modal-react-native [bug]: Can't connect MetaMask when reopening the app from the background.

Description

I can't connect MetaMask when reopening the app from the background.

Reopen the app from background, Disconnect then reconnect and accept on MetaMask. My application is showing loading status, not trigger successful connection event.

https://github.com/WalletConnect/modal-react-native/assets/69961781/4be7cd54-9ecd-47a4-aa13-9c217f1048b7

WalletConnect Modal SDK version

1.0.0-rc.11

Output of `npx react-native info`

System: OS: macOS 13.1 CPU: (8) arm64 Apple M1 Memory: 201.75 MB / 16.00 GB Shell: version: 5.8.1 path: /bin/zsh Binaries: Node: version: 16.15.1 path: ~/.nvm/versions/node/v16.15.1/bin/node Yarn: version: 1.22.19 path: ~/.nvm/versions/node/v16.15.1/bin/yarn npm: version: 9.6.1 path: ~/.nvm/versions/node/v16.15.1/bin/npm Watchman: version: 2022.03.21.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.11.3 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 22.4 - iOS 16.4 - macOS 13.3 - tvOS 16.4 - watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.9971841 Xcode: version: 14.3.1/14E300c path: /usr/bin/xcodebuild Languages: Java: version: 11.0.14.1 path: /usr/bin/javac Ruby: version: 3.1.3 npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.4 wanted: 0.72.4 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Expo Version (if applies)

No response

Steps to reproduce

Connect success
Running in the background for about 1 minute (Back to home screen)
Open App again
Disconnect and connect again.

WalletConnect not trigger event connect success

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

My example App.tsx

import React, {useEffect, useState} from 'react';
import {SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native';
import {
  WalletConnectModal,
  useWalletConnectModal,
} from '@walletconnect/modal-react-native';

const projectId = 'f4a74f07509fd80b3a3ddcb0f30d26e7';

const providerMetadata = {
  name: 'YOUR_PROJECT_NAME',
  description: 'YOUR_PROJECT_DESCRIPTION',
  url: 'https://your-project-website.com/',
  icons: ['https://your-project-logo.com/'],
  redirect: {
    native: 'YOUR_APP_SCHEME://',
    universal: 'YOUR_APP_UNIVERSAL_LINK.com',
  },
};

let sessionParams = {
  namespaces: {
    eip155: {
      methods: [
        'eth_sendTransaction',
        'personal_sign',
        'wallet_addEthereumChain',
        'wallet_switchEthereumChain',
        'eth_chainId',
      ],
      chains: [
        'eip155:1', //eth
      ],
      events: ['chainChanged', 'accountsChanged', 'connect', 'disconnect'],
      rpcMap: {},
    },
  },
  optionalNamespaces: {
    eip155: {
      methods: [
        'eth_sendTransaction',
        'personal_sign',
        'wallet_addEthereumChain',
        'wallet_switchEthereumChain',
        'eth_chainId',
      ],
      chains: [
        'eip155:137', //polygon
        'eip155:56', //bsc
      ],
      events: ['chainChanged', 'accountsChanged', 'connect', 'disconnect'],
      rpcMap: {},
    },
  },
};

function App() {
  const {open, isConnected, provider} = useWalletConnectModal();
  const [chainId, setChainId] = useState<any>(null);

  const _getChainId = async () => {
    const id = await provider?.request({
      method: 'eth_chainId',
    });
    setChainId(id);
  };

  useEffect(() => {
    _getChainId();
    provider?.on('chainChanged', _getChainId);
    return () => provider?.off('chainChanged', _getChainId);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [provider, isConnected]);

  const _open = async () => {
    open();
  };

  const _disconnect = () => {
    provider?.disconnect();
  };

  const _switchChain = () => {
    const newChainId = Number(chainId) === 1 ? 137 : 1;
    provider
      ?.request({
        method: 'wallet_switchEthereumChain',
        params: [
          {
            chainId: `0x${newChainId.toString(16)}`,
          },
        ],
      })
      .catch(error => {
        console.log({error});
      });
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={[styles.text, styles.chain]}>ChainId: {chainId}</Text>
      <TouchableOpacity
        style={styles.btn}
        onPress={isConnected ? _disconnect : _open}>
        <Text style={styles.text}>
          {isConnected ? 'Disconnect' : 'Connect'}
        </Text>
      </TouchableOpacity>
      {isConnected ? (
        <TouchableOpacity style={styles.btn} onPress={_switchChain}>
          <Text style={styles.text}>Switch chain</Text>
        </TouchableOpacity>
      ) : null}
      <WalletConnectModal
        projectId={projectId}
        sessionParams={sessionParams}
        providerMetadata={providerMetadata}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btn: {
    borderWidth: 1,
    borderColor: '#cccccc',
    padding: 10,
    borderRadius: 5,
    margin: 10,
  },
  chain: {
    fontWeight: 'bold',
  },
  text: {
    color: '#3b3b3b',
  },
});

export default App;