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: redDwarf03/WalletConnectFlutterV2@cc39bcf

After that, i've updated Web3ModalFlutterproject with the same updates like WalletConnectFlutterV2 about the order of the controls (kIsWebfirst)
See: redDwarf03@19830a1

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 WalletConnect/WalletConnectFlutterV2#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.

[redDwarf03]

We are working on flutter web compatibility actually.
The result of our proposals will be here: #164

[kaumudpa]

@redDwarf03 The community will owe you big one if this actually sails through! All the best. Cant wait.

[rollchad]

Devil's advocate since this is taking forever. Why remain beholden to walletconnect's technical decisions and not write our own modal? The modal connects to injected providers in browsers and uses deeplinks on mobile. Browser extension support is the most important use case, not walletconnect with QR codes. The latter can be easily supported by integrating the SDK.

[quetool]

Hello! We are prioritizing performance and reliability over Web support but that doesn't mean we are not going full cross-platform on Flutter. It is just not a priority right now for AppKit.

On the other hand, and more interestingly, as a temporary workaround, nothings stops you to use the AppKit Javascript SDK in your Flutter project, it's easy enough, here a simple example project that I just wrote: https://github.com/quetool/web3modal_flutter_web

That being said, for Flutter platform currently you have available walletconnect_flutter_v2 (that is full cross-platform) which is the fundamental and core SDK which you can use to create both Dapps and Wallets and then you also have walletconnect_modal_flutter which is the protocol-focused modal.

It is true indeed, as @rollchad mentions, that even if these SDKs that I just mentioned runs and compiles on Web platforms they don't interact with injected wallets and that is something we plan to do in the future.

Will update as soon as I have news...

[quetool]

It is true indeed, as @rollchad mentions, that even if these SDKs that I just mentioned runs and compiles on Web platforms they don't interact with injected wallets and that is something we plan to do in the future.

Just to be clear, AppKit Javascript SDK does interact with injected wallets, of course, I was referring to the Flutter SDKS that runs on web....

[redDwarf03]

Hello! We are prioritizing performance and reliability over Web support but that doesn't mean we are not going full cross-platform on Flutter. It is just not a priority right now for AppKit.

On the other hand, and more interestingly, as a temporary workaround, nothings stops you to use the AppKit Javascript SDK in your Flutter project, it's easy enough, here a simple example project that I just wrote: https://github.com/quetool/web3modal_flutter_web

That being said, for Flutter platform currently you have available walletconnect_flutter_v2 (that is full cross-platform) which is the fundamental and core SDK which you can use to create both Dapps and Wallets and then you also have walletconnect_modal_flutter which is the protocol-focused modal.

It is true indeed, as @rollchad mentions, that even if these SDKs that I just mentioned runs and compiles on Web platforms they don't interact with injected wallets and that is something we plan to do in the future.

Will update as soon as I have news...

This is a very interesting approach.
I took the liberty of making a pull request for compatibility with WebAssembly (WASM)

quetool/web3modal_flutter_web#1

[quetool]

Hello @redDwarf03! I have merged it but I hope it's clear that this is just a quick example project that I opened on my personal profile to just explain the idea, it's nothing official... However, with a bit of love it could work great.

And also, remember that this solution would cover only web platform, for mobile platforms you will need to go with the official approach, so, unless some complex interoperability is made, you will end up having two implementations of the modal.

Again, In the future we are going to explorer this and more ideas to support web platforms properly on AppKit (Web3Modal)

Thanks!

[redDwarf03]

Hehe... yes, I know, but we are trying to help you move in the right direction, step by step, even if my proposed change is just a small one

[redDwarf03]

New PR proposed quetool/web3modal_flutter_web#2
This PR is the start of the interaction between Wagmi and Flutter web. I don't know if anyone has already implemented this.

Enregistrement.de.l.ecran.2024-08-19.a.23.26.30.mov

Next step: try to call approval method from ERC20 contract

[Chralu]

Web compatibility requires a lot of debugging.
After some efforts, I still get a few blocking issues : #164

Considering this, @quetool & @redDwarf03 solution seems more straightforward.

[kaumudpa]

New PR proposed quetool/web3modal_flutter_web#2 This PR is the start of the interaction between Wagmi and Flutter web. I don't know if anyone has already implemented this.

Enregistrement.de.l.ecran.2024-08-19.a.23.26.30.mov
Next step: try to call approval method from ERC20 contract

@redDwarf03 This is a good approach - Your implementation runs seamlessly in desktop envs. Tried the same in mobile (WEB) env's but No Luck. You think we can implement it for mobile (WEB) env's as well?

[Chralu]

@kaumudpa We started a package to wrap Wagmi to Dart (Web target only) : https://github.com/archethic-foundation/wagmi_flutter_web

This is WIP for now. We will probably focus on the few features we need right now.
Nevertheless, any contribution will be welcome once the RC is released.

[redDwarf03]

🙏🏼 To the community:

If you have some idea about these 2 issues:

• [JS-interop] Extension for JSBigint dart-lang/sdk#56539
• [js-interop] Help users using JS maps dart-lang/sdk#56537

[kaumudpa]

@kaumudpa We started a package to wrap Wagmi to Dart (Web target only) : https://github.com/archethic-foundation/wagmi_flutter_web

This is WIP for now. We will probably focus on the few features we need right now. Nevertheless, any contribution will be welcome once the RC is released.

Will contribute few hours every week as soon as you release RC.

hopefully @gvbinarybard will also contribute.

[redDwarf03]

Just for info. We want to be compatible with WASM and last JS interoperability classes like described here: https://dart.dev/interop/js-interop
So no use of dart:html, dart:js etc...

[redDwarf03]

i find a solution to solve JSBigint conversion

I create this dart class based on dart test classes but i think dart core team should expose a method to manipulate Bigint and JSBigInt

import 'dart:js_interop';

@JS()
external JSBigInt bigInt;

@JS('BigInt')
external JSBigInt createBigInt(String value);

extension on JSBigInt {
  @JS('toString')
  external String toStringExternal();
}

and for example, i use gas: createBigInt('1500000'),

[redDwarf03]

Well... it's complicated... but we hope we'll get there, even if it's a long way.
The repo is here: https://github.com/archethic-foundation/wagmi_flutter_web
Under development. If you want to contribute, don't hesitate to fork the project and suggest PRs
More people will make faster progress.
There are difficulties with the interop between js and dart.

[kaumudpa]

@redDwarf03 We have successfully implemented, getBalance readContract and currently WIP on readContracts - Hoping to submit a PR tomorrow.

[redDwarf03]

@redDwarf03 We have successfully implemented, getBalance readContract and currently WIP on readContracts - Hoping to submit a PR tomorrow.

With another project or with a fork ?
If it's with wagmi_flutter_web lib, i'm interested to see how you fix the error with getBalance because i don't find why it doesn't work.
Please send me a temporary PR :))))

[kaumudpa]

@redDwarf03 We have successfully implemented, getBalance readContract and currently WIP on readContracts - Hoping to submit a PR tomorrow.

With another project or with a fork ? If it's with wagmi_flutter_web lib, i'm interested to see how you fix the error with getBalance because i don't find why it doesn't work. Please send me a temporary PR :))))

We have forked the project - Sending you a temp PR shortly.

[kaumudpa]

@redDwarf03 Opened a PR - Please feel free to run the example & do let us know .

archethic-foundation/wagmi_flutter_web#1

[kaumudpa]

@redDwarf03 Found the issue which you might be facing.

required this.decimal, should be required this.decimals,

we need to use decimals instead of decimal across the project.

[redDwarf03]

Good job from @kaumudpa
Don't hesitate to pull the last version on main branch.
Keep pushing!!

[redDwarf03]

@kaumudpa I forgot. To avoid double work, can you tell me which actions you're going to implement?
I listed the actions and the status in https://github.com/archethic-foundation/wagmi_flutter_web/blob/main/README.md

[kaumudpa]

@redDwarf03 We will be working on - readContracts, getTransactionReceipt for now, I see you are working on writeContract also please update status for getBalance from In Progress to Implemented

[redDwarf03]

Some news from wagmi_flutter_web lib to use Web3ModalFlutter with flutter_web
Thanks to @kaumudpa and his team for the work!

Here is a status

Status

🔴 Not Implemented Yet.
🟠 Work In Progress.
✅ Implemented.
🛠️ Blocking WASM Support. (Needs rework in future.)
📄 TODO to be managed

For more details, refer to the API documentation.

Action Name	Status
call	🔴
connect	🔴
deployContract	🔴
disconnect	🔴
estimateFeesPerGas	🔴
estimateGas	✅ Implemented
estimateMaxPriorityFeePerGas	🔴
getAccount	✅ Implemented
getBalance	✅ Implemented
getBlock	✅ Implemented
getBlockNumber	🟠 In progress
getBlockTransactionCount	✅ Implemented
getBytecode	🔴
getChainId	✅ Implemented
getChains	🟠 In progress
getClient	🔴
getConnections	🔴
getConnectorClient	🔴
getConnectors	🔴
getEnsAddress	🔴
getEnsAvatar	🔴
getEnsName	🔴
getEnsResolver	🔴
getEnsText	🔴
getFeeHistory	🔴
getGasPrice	✅ Implemented
getProof	🔴
getPublicClient	🔴
getStorageAt	🔴
getToken	🟠 In progress
getTransaction	✅ Implemented
getTransactionConfirmations	✅ Implemented
getTransactionCount	✅ Implemented
getTransactionReceipt	✅ Implemented
getWalletClient	🔴
multicall	🔴
prepareTransactionRequest	🔴
readContract	✅ Implemented
readContracts	✅ Implemented 🛠️
reconnect	🔴
sendTransaction	✅ Implemented
signMessage	✅ Implemented
signTypedData	🔴
simulateContract	🔴
switchAccount	🔴
switchChain	🔴
verifyMessage	🔴
verifyTypedData	🔴
waitForTransactionReceipt	🔴
watchAccount	🔴
watchAsset	🔴
watchBlockNumber	🔴
watchBlocks	🔴
watchChainId	✅ Implemented
watchClient	🔴
watchConnections	🔴
watchConnectors	🔴
watchContractEvent	🔴
watchPendingTransactions	🔴
watchPublicClient	🔴
writeContract	✅ Implemented 📄

And the error management is in progress
Don't hesitate to contribute to this lib https://github.com/archethic-foundation/wagmi_flutter_web

[redDwarf03]

Video_wagmi.mp4

Flutter web + wagmi flutter web + wallet connect :)
It's going well

[redDwarf03]

wagmi_flutter_web 1.0.0-rc.2 is available
https://pub.dev/packages/wagmi_flutter_web