How to use in flutter web?

[matteoberla]

Hi, i've seen the video (link to doc) on your documentation and replecate the code on flutter web but this error occurs on startup:

[ExplorerService] init()
[ExplorerService] Error fetch wallets params: {page: 1, entries: 48, platform: platformtype.desktop}
Error: Exception: 2.718281828459045

How do i set the list of wallets on web? What do i have to set inside the redirect link if i'm on web?

Thank you

[quetool]

Hello @matteoberla! The documentation you are linking is about Web3Modal and this repo is about WalletConnectFlutterV2. That being said, Web3Modal does not support web platform yet, however WalletConnectFlutterV2 (this repo, which is the core SDK that allows you to connect/sign/verify etc...) it will support web soon.

[quetool]

However the error you are referencing has nothing to do with Web support. Please open an issue in the proper repository https://github.com/WalletConnect/Web3ModalFlutter and I will assist you there!

[matteoberla]

sorry for my misunderstanding. Does this package support wallet connection via Flutter web?

[quetool]

Not officially yet, a beta version is about to go out in a few days. I'll let you know here!

[matteoberla]

Thank you very much

[quetool]

Hello @matteoberla web support is out on beta https://pub.dev/packages/walletconnect_flutter_v2/versions/2.2.3-beta01

[matteoberla]

Thank you very much, i'll try it asap!

[matteoberla]

In web3modalflutter there was this simple example, don't you have something similar to test with this package? I've taken a look to the example folder but i didn't find a simple example to use it.

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

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

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

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

  void initializeState() async {
    _w3mService = W3MService(
      projectId: 'e4e3f4c8d46e893b515c543b7f754112',
      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',
        ),
      ),
    );
    await _w3mService.init();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        W3MConnectWalletButton(service: _w3mService),
        const SizedBox(
          height: 16,
        ),
        W3MNetworkSelectButton(service: _w3mService),
        const SizedBox(
          height: 16,
        ),
        W3MAccountButton(service: _w3mService),
        const SizedBox(
          height: 16,
        ),
      ],
    );
  }
}

[quetool]

Hello @matteoberla! Just to be clear once more, Web3Modal does not support web yet. If you mean about WalletConnectFlutterV2 then things are different here. You can take a look at the main example https://github.com/WalletConnect/WalletConnectFlutterV2/blob/master/example/dapp/lib/main.dart

Key points are:

1. How do I create a web3app instance?:

   _web3App = await Web3App.createInstance(
   projectId: DartDefines.projectId,
   logLevel: LogLevel.info,
   metadata: const PairingMetadata(
   name: 'Sample dApp Flutter',
   description: 'WalletConnect\'s sample dapp with Flutter',
   url: 'https://walletconnect.com/',
   icons: [
     'https://images.prismic.io/wallet-connect/65785a56531ac2845a260732_WalletConnect-App-Logo-1024X1024.png'
   ],
   redirect: Redirect(
     native: 'wcflutterdapp://',
     universal: 'https://walletconnect.com',
   ),
   ),
   );

2. How do I subscribe to events?:

   
   _web3App!.onSessionConnect.subscribe(_onSessionConnect);
   _web3App!.onSessionPing.subscribe(_onSessionPing);
   _web3App!.onSessionEvent.subscribe(_onSessionEvent);
   _web3App!.onSessionUpdate.subscribe(_onSessionUpdate);

_web3App!.core.relayClient.onRelayClientConnect.subscribe(_setState); _web3App!.core.relayClient.onRelayClientDisconnect.subscribe(_setState); _web3App!.core.relayClient.onRelayClientMessage.subscribe(_onRelayMessage);

_web3App!.signEngine.onSessionEvent.subscribe(_onSessionEvent); _web3App!.signEngine.onSessionUpdate.subscribe(_onSessionUpdate);

3. How do I connect with a Wallet?:
```dart
final response = await _web3App!.connect(
  optionalNamespaces: {
    'eip155': RequiredNamespace(
      chains: ['eip155:1,eip155:10,eip155:137,.......'],
      methods: [
        'eth_sendTransaction',
        'personal_sign',
      ],
      events: [
        'chainChanged',
        'accountsChanged',
      ],
    ),
  },
);

final encodedUri = Uri.encodeComponent(response.uri.toString());
final uri = 'wcflutterwallet://wc?uri=$encodedUri';
launchUrlString(uri, mode: LaunchMode.externalApplication);
// You can also show a QR code with of uri

4. How do I trigger a request?:

   return await _web3App!.request(
   topic: topic,
   chainId: 'eip155:1',
   request: SessionRequestParams(
   method: 'personal_sign',
   params: [encodedMessage, '0xaddress'],
   ),
   );

[matteoberla]

Yeah it's clear that these are two different packages, i was just asking if there was something similar to the code i've attached. I'm mainly referring to the widgets for the connection and account balance retrieving

[quetool]

The most similar to that code is the sample dapp in this repo but also the documentation. https://docs.walletconnect.com/web3wallet/about

Don't hesitate to ask for any concerns anyway!

EDIT: Sorry, the documentation is about Web3Wallet and I realize you are developing a Dapp. I'll try to write up (time allowing) a simple dapp to showcase the code.