Metamask connection request popup does not open

[yk-saito]

I have implemented a Wallet connection in my mobile application using walletconnect_flutter_v2, but I am unable to get a good connection.

Specifically, the metamask wallet application opens, but the connection request popup does not open within the wallet.

[Development environment]

• Flutter: 3.13.8
• Android Studio Device: Pixel 7
• Metamask: 7.8.0
• walletconnect_flutter_v2: ^2.0.0

[Code]

class SignIn extends StatelessWidget {
  static Web3App? _walletConnect;
  static String? _url;
  static SessionData? _sessionData;

  String get deepLinkUrl => 'metamask://wc?uri=$_url';

  Future<void> _initWalletConnect() async {
    _walletConnect = await Web3App.createInstance(
      projectId: 'MY_PROJECTID',
      metadata: const PairingMetadata(
        name: 'Flutter WalletConnect',
        description: 'Flutter WalletConnect Dapp Example',
        url: 'https://walletconnect.com/',
        icons: [
          'https://walletconnect.com/walletconnect-logo.png',
        ],
      ),
    );
  }

  Future<String?> connectWallet() async {
    if (_walletConnect == null) {
      await _initWalletConnect();
    }

    final ConnectResponse connectResponse = await _walletConnect!.connect(
      requiredNamespaces: {
        'eip155': const RequiredNamespace(
          chains: ['eip155:80001'],
          methods: [
            'eth_signTransaction',
            'eth_sendTransaction',
          ],
          events: [
            'chainChanged',
            'accountsChanged',
          ],
        ),
      },
    );

    final Uri? uri = connectResponse.uri;

    if (uri == null) {
      return null;
    }

    final String encodedUrl = Uri.encodeComponent('$uri');

    _url = encodedUrl;

    await launchUrlString(
      deepLinkUrl,
      mode: LaunchMode.externalApplication,
    );

    _sessionData = await connectResponse.session.future;  // ★ The process is not returning.

    final String account = NamespaceUtils.getAccount(
      _sessionData!.namespaces.values.first.accounts.first,
    );

    return account;
  }

• Referenced issue for implementation: https://github.com/WalletConnect/WalletConnectFlutterV2/issues/113

No error logs are shown. I have checked the code with debugPrint and it seems to be stuck at await connectResponse.session.future;.

If anyone is aware of the cause or has a solution, I would greatly appreciate your guidance. Thank you.

[quetool]

Hello @yk-saito ! I have tested your very same code both on Android and iOS and I have been always able to connect to MM every time. With Android it took a bit more of seconds to appear than on iOS but pop up always appeared. Complete code I tried here https://gist.github.com/quetool/f934b449ed0027f8b435622a2719328a

[yk-saito]

@quetool ,thank you for taking the time to check.

I tried running the code again on Android emulator and iOS device in my environment, but unfortunately, the connection confirmation popup still did not appear, even after waiting for 30 minutes.

This issue might be related to my development environment. I will take another look at it and try to figure out what might be going wrong. Thank you for providing the code as well ☺️

[quetool]

@yk-saito , so you are running your code on simulator and then with MetaMask opened in your physical device you scan the QR code?

[bobwith2bees]

@yk-saito

I wrote this doc to help with troubleshooting:

• https://gitlab.com/graflr/flutter_web3_demo/-/wikis/WalletConnect-Interop

Make sure to clear any existing WalletConnect sessions on the Metamask and your app side. I have had cases where I had a number of stale connections that prevented Metamask from seeing new ones.

[quetool]

Thanks @bobwith2bees! About the stale session, yes, MM sometimes fails on clearing the session on their side after you delete it from your dapp side, indeed I have faced that as well.

[yk-saito]

@quetool , @bobwith2bees , I was able to get the connection request popup to appear.

The issue was due to an incorrect setup of the Mumbai testnet on the MetaMask side. It was my mistake.

@bobwith2bees Thank you for the wonderful wiki. After reading through the steps provided there, I revisited my code and settings and realized my mistake.

Thank you both so much. I really appreciate all the information and help you've provided 🙇 !