WalletConnect's WalletConnectModal Example on personal_sign

walletconnect_modal_example.dart

import 'package:flutter/material.dart';
import 'package:walletconnect_flutter_v2/walletconnect_flutter_v2.dart';
import 'package:walletconnect_modal_flutter/walletconnect_modal_flutter.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  late WalletConnectModalService _w3mService;

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

  void _initializeW3MService() async {
    _w3mService = WalletConnectModalService(
      projectId: '**********',
      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',
        ),
      ),
      recommendedWalletIds: {
        'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
        'ecc4036f814562b41a5268adc86270fba1365471402006302e70169465b7ac18',
        '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0',
        '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
        '38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662',
        'ef333840daf915aafdc4a004525502d6d49d77bd9c65e0642dbaefb3c2893bef',
        'afbd95522f4041c71dd4f1a065f971fd32372865b416f95a0b1db759ae33f2a7',
      },
      requiredNamespaces: NamespaceConstants.polygon,
    );

    _w3mService.addListener(_onWalletUpdated);

    await _w3mService.init();
  }

  void _onWalletUpdated() {
    debugPrint('_w3mService.address: ${_w3mService.address}');
    debugPrint('_w3mService.isConnected: ${_w3mService.isConnected}');
    setState(() {});
  }

  @override
  void dispose() {
    _w3mService.removeListener(_onWalletUpdated);
    super.dispose();
  }

  Future<dynamic> signMessage({required String message}) async {
    final web3App = _w3mService.web3App;
    final sessionData = web3App?.sessions.getAll().first;

    if (sessionData != null) {
      _w3mService.launchCurrentWallet();
      return await web3App!.request(
        topic: sessionData.topic,
        chainId: 'eip155:137',
        request: SessionRequestParams(
          method: 'personal_sign',
          params: [
            message,
            _w3mService.address?.toLowerCase() ?? '',
          ],
        ),
      );
    }

    return null;
  }

  String result = '';
  void _signMessage() async {
    setState(() => result = '');
    signMessage(
      message: 'Hello world!',
    ).then((value) => setState(() => result = value));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WalletConnectModal Demo',
      home: Builder(
        builder: (context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('WalletConnectModal Demo'),
            ),
            body: Container(
              constraints: const BoxConstraints.expand(),
              padding: const EdgeInsets.all(12.0),
              child: Column(
                children: !_w3mService.isConnected
                    ? [
                        WalletConnectModalConnect(service: _w3mService),
                      ]
                    : [
                        WalletConnectModalConnect(service: _w3mService),
                        const SizedBox.square(dimension: 8.0),
                        ElevatedButton(
                          onPressed: _signMessage,
                          child: const Text('Sign message'),
                        ),
                        const SizedBox.square(dimension: 8.0),
                        if (result.isNotEmpty)
                          Text(
                            result,
                            style: const TextStyle(color: Colors.grey),
                          ),
                      ],
              ),
            ),
          );
        },
      ),
    );
  }
}