Web support

[redDwarf03]

Hello @quetool

i'm trying to help you to support Flutter Web.

First, i've updated WalletConnectFlutterV2project: Work was well underway. The only change was to give priority to the kIsWeb control to prevent the Platform conditions from crashing in web mode. See: https://github.com/redDwarf03/WalletConnectFlutterV2/commit/cc39bcfb850e163760c704c3f2541bd473a42eac

After that, i've updated Web3ModalFlutterproject with the same updates like WalletConnectFlutterV2 about the order of the controls (kIsWebfirst) See: https://github.com/redDwarf03/Web3ModalFlutter/commit/19830a182cad75694ccbd3011cb6029f922aefef

My current issue is about this message. I think perhaps api.web3modal doesn't accept platform=platformtype.web.

Could you help me or confirm it to try go continue to test and update the lib to support web platform.

apiUrl https://api.web3modal.com
headers {x-project-id: ce9ee3c8e58873e8708247895990bc27, x-sdk-type: w3m, x-sdk-version: flutter-3.2.0-beta04, user-agent: w3m-flutter-3.2.0-beta04/flutter_2.2.2/web-browser, referer: Web3ModalFlutterExample}
uri https://api.web3modal.com/getWallets?page=1&entries=48&platform=platformtype.web
response Instance of 'Response'
response body Bad Request
Error: Exception: 2.718281828459045
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3       throw_
packages/web3modal_flutter/services/explorer_service/explorer_service.dart 291:3  _fetchListings
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50                <fn>
dart-sdk/lib/async/zone.dart 1661:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                                         [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                                         callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                                  _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                                   _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7                <fn>

Thx!

[redDwarf03]

i will push PR when tests are ok or perhaps you prefer to have a PR now. Tell me

[quetool]

Hello @redDwarf03! This is awesome, thanks, I'll take a look at WalletConnectFlutterV2 PR ASAP but just for you to know I have a PR for web support ready to be merged https://github.com/WalletConnect/WalletConnectFlutterV2/pull/281 I just couldn't do it yet.

Regarding your api.web3modal inquiry, indeed platformtype.web is not supported, in case of web you just don't send platform

[quetool]

i will push PR when tests are ok or perhaps you prefer to have a PR now. Tell me

Tests have been broken for a while and had not time to fix them honestly. If you want to add tests for your new code or whatever you feel relevant that would be awesome, otherwise I can try to take care of them when the time comes! 💪

[redDwarf03]

my commit is from your web_support branch for info for WalletConnectFlutterV2 project

[quetool]

Ah wonderful! Then I'll just merge it and continue my work from there. But for WalllectConnectFlutterV2 the work is almost done, only test are missing.

For Web3Modal is a bit more trickier. Thanks for the help!

[redDwarf03]

can we exchange on discord or TG to facilitate the exchange or we exchange here? my goal is to be autonomous by i need some infos first :)

[quetool]

Let's do it here, please, we like to be open by default. In any case I was planning to work on Web3Modal web support soon, so maybe you want to wait my PR and review it? As you please

[redDwarf03]

i can review it but i confess i would like to have it soon.. that's for it i'm trying to help you. Just for info too, i'm not sure to understand your issue with tests because when i launch flutter teston WalletConnectFlutterV2project, i have +225: All tests passed!

[quetool]

Oh yeah, I thought you were talking about Web3Modal tests. Sorry my confusion. Yes, WalletConnectFlutterV2 tests are fine.

i confess i would like to have it soon.. that's for it i'm trying to help you.

It's a priority for us but it's not going to be easy. We have a few dependencies on Web3Modal that are not supported on Web (like CoinbaseWalletSDK and some other more) and conditional importing these will be tricky. I honestly don't know the exact lift on this but the more I think of it the more I realize we will end up having a lightweight version of Web3Modal on web.

Also, if all you need for now is simply stuff you could try support web on https://github.com/WalletConnect/WalletConnectModalFlutter. This is a lightweight modal from us

[gvbinarybard]

@quetool @redDwarf03 - I am using the [WalletConnectModalFlutter] and so far it works well with the web , it just you need to some changes for redirecting the app to wallet in for the mobile browser Also the network change is not reliable but it is nothing to do the walletconnect but there is some issue with the Metamask @redDwarf03 -let me know if you need any help on this

[kaumudpa]

@gvbinarybard Can you explain your solution in detail here? It would be very helpful.

While usig on mobile browser - it opens a popup to redirect and open the wallet app. Once the wallet is opened and the trasaction is done - The wallet app redirects to the browser itself but on the popup tab instead of the main tab. You found any workaround to make this work perfectly?

[gvbinarybard]

@kaumudpa - Sure

In a Flutter PWA, when attempting to connect to a wallet using the connectWallet method, the app fails to navigate or deep link to the selected wallet. This issue arises due to limitations in Safari and Chrome browsers, where redirection to another app is not permitted following an asynchronous task. To overcome this obstacle, I have developed a workaround that involves creating a separate page. This page is displayed after successfully invoking the rebuildConnectionUri() method and redirecting the application to the desired wallet

Regarding your issue, yes even I faced the same issue and you can fix it by adding extra && condition !kIsWeb in url_utils.dart file line no 99 if (nativeUri != null && !kIsWeb) {

Let me know if this helps

[kaumudpa]

@gvbinarybard

Your solution for if (nativeUri != null && !kIsWeb) { works perfectly - I am still confused with the PWA workaround - Can you share some code here? Tried implementing it but may be i am missing someting as i end up without luck.

[gvbinarybard]

@kaumudpa - if (nativeUri != null && !kIsWeb) is the only change required for redirecting back to the app I am a bit confused , is it working for you or not ? as you said works perfectly but later you are saying as i end up without luck.

[kaumudpa]

@gvbinarybard Redirecting works perfectly from the browser on mobile devices with if (nativeUri != null && !kIsWeb) - (Try using the example).

But if we install this as an PWA - It stops working specially on ios.

Your implementation of this part will be really helpful.

In a Flutter PWA, when attempting to connect to a wallet using the connectWallet method, the app fails to navigate or deep link to the selected wallet. This issue arises due to limitations in Safari and Chrome browsers, where redirection to another app is not permitted following an asynchronous task. To overcome this obstacle, I have developed a workaround that involves creating a separate page. This page is displayed after successfully invoking the rebuildConnectionUri() method and redirecting the application to the desired wallet

[redDwarf03]

@gvbinarybard i will try to check https://github.com/WalletConnect/WalletConnectModalFlutter but my need is not with mobile browser. I create a DApp with flutter web and i would like to use with desktop and EVM Wallet extension chrome

[gvbinarybard]

@redDwarf03 - Ah I see , I dont think so WalletConnectModal will be able to serve the Wallet extension @kaumudpa - regarding your issue , can you post waht is the error you are getting , Also I will provide the full github link soon

[redDwarf03]

@gvbinarybard do you know a solution for that please?

[gvbinarybard]

@redDwarf03 - Well I haven't tried it but What I can think of ihacky way s to have a react app loaded inside a Flutter webview iframe Wallet connect react/ Wagmi does support the Wallet extension

[gvbinarybard]

@kaumudpa - Sorry Mate got busy with some work so forgot to post my solution , here is the branch do let me know if it works for you

[asmodeoux]

FYI you can also try using this fork for Web: https://github.com/asmodeoux/Web3ModalFlutter/tree/ptal

web3modal_flutter:
    git: 
      url: https://github.com/asmodeoux/Web3ModalFlutter.git
      ref: ptal

I made it show the mobile QR code on the Web so you can scan it with your phone and approve the transactions there. Hope it might help the official development as well 👀

[kaumudpa]

@quetool Now that walletconnect V2 is fully web supported. Can we expect this plugin to be web supported any time soon?

[redDwarf03]

hello @asmodeoux , i'm trying to execute example app in web mode with a project id filled, but i have an error when i launch the webapp

The following LateError was thrown building MyHomePage(dirty, dependencies: [Web3ModalTheme], state:
_MyHomePageState#4b739):
LateInitializationError: Field '_w3mService' has not been initialized.

Should i do anything to test the example please

[asmodeoux]

@redDwarf03 I use it this way and works pretty well:

class _SomePageState extends State<SomePage> {
  W3MService? service;

  @override
  void initState() {
    super.initState();
    initW3M();
  }

  Future<void> initW3M() async {
    final w3mService = W3MService(web3App: YOUR_WEB_APP);
    await w3mService.init();
    print('Service initialized: ${w3mService.status}');
    setState(() {
      service = w3mService;
    });
  }

  Future<void> openModal() async {
    try {
      await service?.openModal(context);
    } catch (e, st) {
      print('Failed to open W3Modal: $e');
    }
  }

  // you can call openModal() once service != null
}

Basically, you init the service once the page is opened, after that you use the initialized instance

[matteoberla]

@redDwarf03

I've tested @asmodeoux's version with this code and works fine.

import 'package:flutter/material.dart';
import 'package:web3modal_flutter/web3modal_flutter.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late W3MService _w3mService;

  @override
  void initState() {
    initializeState();
    super.initState();
  }

  void initializeState() async {
    _w3mService = W3MService(
      projectId: 'yourprojectid',
      metadata: const PairingMetadata(
        name: 'Web3Modal Flutter Example',
        description: 'Web3Modal Flutter Example',
        url: 'https://www.walletconnect.com/',
        icons: ['https://walletconnect.com/walletconnect-logo.png'],
        redirect: Redirect(
          native: 'flutterdapp://',
          universal: 'https://www.walletconnect.com',
        ),
      ),
    );

    // Register callbacks on the Web3App you'd like to use. See `Events` section.
    await _w3mService.init();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        W3MConnectWalletButton(service: _w3mService),
        W3MNetworkSelectButton(service: _w3mService),
        W3MAccountButton(service: _w3mService),
      ],
    );
  }
}

[redDwarf03]

Thank you @matteoberla and @asmodeoux . It works with your example. I need to go further into integration now. Note a few old dependencies on http and package_info_plus, but overall it's great.

@quetool , is it possible to build a version on pub.dev for web please

[kaumudpa]

The @asmodeoux solution works only to generate the QR code tested using the example provided by @asmodeoux - but it does not open the installed wallet for connection request directly which [WalletConnectModalFlutter] does.

Is there something i am missing?

[quetool]

@quetool , is it possible to build a version on pub.dev for web please

Hello guys! I would need to go through the code/changes, make lot of tests, check if anything breaks in other platforms and after that I could think about building a version but there's currently a lot in the bucket list. I assure you Web support is a priority to me (WalletConnectFlutterV2 is already done, also WalletConnectModalFlutter should be done soon enough) but right now is not possible for me to look at this for Web3Modal. Email Wallets is about to go out and there's so many other things to do.