I get an infinite loading screen after connecting the wallet

[AndriiVivcharenko]

Describe the bug I get infinite loading in the modal after connecting the wallet when using version 3.2.0. I don't get any exceptions or error log output.

This issue doesn't occur with version 3.0.21 I can't test it with versions 3.1.0-3.1.3 due to this issue - https://github.com/WalletConnect/Web3ModalFlutter/issues/123.

Tried the following wallets:

• 1inch wallet
• Metamask
• Trust Wallet
• Blockchain.com
• SafePal
• Coinbase Wallet

The same thing happens with each of them.

To Reproduce

1. Create new Web3App instance

   Web3App wcClient = await Web3App.createInstance(
   projectId: dotenv.env['WC_PROJECT_ID']!,
   metadata: const PairingMetadata(
     name: 'Name',
     description: 'Description',
     url: 'Url',
     icons: ['Icon'],
     redirect: Redirect(
       native: 'app://',
       universal: 'Url',
     ),
   ),
   );

2. Create new W3MService

final W3MService w3mService = W3MService(web3App: wcClient);
await w3mService.init();

3. Open the modal somewhere in the app

await w3mService!.disconnect();
await w3mService.openModal(navigatorKey.currentContext!);

Expected behavior the wallet should be connected after the redirection from the wallet.

Screenshots

Smartphones:

• iPhone 8 Plus - iOS 16.7.7
• iPhone x - iOS 16.7.7
• Xiaomi Mi9T Pro - Android 11

[quetool]

Hello @AndriiVivcharenko! At first glance, why are you disconnecting before opening?

Open the modal somewhere in the app await w3mService!.disconnect(); await w3mService.openModal(navigatorKey.currentContext!);

Also, you do can test versions 3.1.0-3.1.3, just use the regular initialization, the one described in the docs. There's no need to create a Web3App instance first, W3MService will create it for you.

[AndriiVivcharenko]

The disconnection is there intentionally, but in this case, it does not affect anything. if I remove it, it still does not work.

Also, you do can test versions 3.1.0-3.1.3, just use the regular initialization, the one described in the docs. There's no need to create a Web3App instance first, W3MService will create it for you.

I tried creating a W3MService as described in the documentation. The same problem occurred, however, now if I reopen the modal window, sometimes a blank wallet screen appears, and sometimes the wallet finally pops up. But it is very inconsistent.

[quetool]

Any console log that you? Or snippet code to reproduce? Do you mind sharing your projectId? Is perfectly safe to share it

[AndriiVivcharenko]

Just tried it in an empty project and with my project ID it works fine. I'll need some time to figure out the exact steps to reproduce in an empty project

[quetool]

Just tried it in an empty project and with my project ID it works fine. I'll need some time to figure out the exact steps to reproduce in an empty project

What do you mean exactly?

[5eeman]

I'm facing pretty much the same problem with 3.1.2. It feels like some callback is not being invoked on return from wallet app.

[quetool]

Guys, I will need a minimum reproducible piece of code, otherwise it's quite difficult to help.

[5eeman]

Ok, so I'm trying plain example from master branch. I've added my project id and trying to connect to Metamask. No connect dialog is being shown inside. That doesn't feel right to me.

For context I'm using Samsung S22, Android 14, latest software. Flutter 3.19.6

[5eeman]

Ok, I've tested also Trust and it works as a charm... But I need MM to test amoy 🤦🏻

[AndriiVivcharenko]

I managed to fix it. I have some logic for the onSessionConnect event that opens a dialog box in the same context.

  await w3mService.init();
  wcClient.onSessionConnect.subscribe(wrapOnSessionConnect(ref, context));

  ///////////

  void Function(SessionConnect?) wrapOnSessionConnect(
    WidgetRef ref, BuildContext context) {
  return (SessionConnect? args) {

    // some code here
    showDialog(context: context, builder: (context) => AuthPopup());
  };
}

This event gets triggered when the modal window is still open. I just moved my showDialog after

await w3mService.openModal(navigatorKey.currentContext!);
// showDialog

and now it works fine.

[quetool]

Ok, I've tested also Trust and it works as a charm... But I need MM to test amoy 🤦🏻

@5eeman I have faced issues myself with Amoy on Metamask although every other chain seems to be working fine, even Sepolia. Try by adding Amoy manually on Metamask then connecting again with Web3Modal

@AndriiVivcharenko this is something I still don't understand what you mean 👇

Just tried it in an empty project and with my project ID it works fine. I'll need some time to figure out the exact steps to reproduce in an empty project

However, about this 👇

This event gets triggered when the modal window is still open. I just moved my showDialog after

Events are independent from the modal itself, events are essentially messages thrown by the relay in regards of different actions so yeah, it could happen that onSessionConnect triggers a few milliseconds before the modal closes but that shouldn't be an issue UX wise. If you are on the latest version of the SDK try using w3mService.onModalConnect.subscribe() instead. https://docs.walletconnect.com/web3modal/flutter/events

[quetool]

Also @AndriiVivcharenko better to subscribe to events before init(), check the example https://github.com/WalletConnect/Web3ModalFlutter/blob/master/example/lib/home_page.dart#L110

[AndriiVivcharenko]

@AndriiVivcharenko this is something I still don't understand what you mean 👇

Just tried it in an empty project and with my project ID it works fine. I'll need some time to figure out the exact steps to reproduce in an empty project

I created an empty flutter project and started dragging pieces of code from the main project until I figured out what the root cause was. That's what I meant.

Events are independent from the modal itself, events are essentially messages thrown by the relay in regards of different actions so yeah, it could happen that onSessionConnect triggers a few milliseconds before the modal closes but that shouldn't be an issue UX wise. If you are on the latest version of the SDK try using w3mService.onModalConnect.subscribe() instead. https://docs.walletconnect.com/web3modal/flutter/events

Also @AndriiVivcharenko better to subscribe to events before init(), check the example https://github.com/WalletConnect/Web3ModalFlutter/blob/master/example/lib/home_page.dart#L110

I just made these changes and it seems to be working fine and stable now. Thank you

[quetool]

@5eeman I'll close this for now but let me know if you still have issues.