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