WalletConnect's Web3Modal Example on personal_sign

web3modal_example.dart

import 'package:flutter/material.dart';
import 'package:web3modal_flutter/web3modal_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 W3MService _w3mService;
  final polygonChain = W3MChainPresets.chains['137']!;

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

  void _initializeW3MService() async {
    _w3mService = W3MService(
      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',
        ),
      ),
      featuredWalletIds: {
        'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
        'ecc4036f814562b41a5268adc86270fba1365471402006302e70169465b7ac18',
        '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0',
        '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
        '38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662',
        'ef333840daf915aafdc4a004525502d6d49d77bd9c65e0642dbaefb3c2893bef',
        'afbd95522f4041c71dd4f1a065f971fd32372865b416f95a0b1db759ae33f2a7',
      },
    );

    _w3mService.addListener(_onWalletUpdated);

    await _w3mService.init();

    _w3mService.selectChain(polygonChain);
  }

  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.launchConnectedWallet();
      return await web3App!.request(
        topic: sessionData.topic,
        chainId: polygonChain.namespace,
        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 Web3ModalTheme(
      isDarkMode: true,
      child: MaterialApp(
        title: 'Web3Modal Demo',
        home: Builder(
          builder: (context) {
            return Scaffold(
              appBar: AppBar(
                title: const Text('Web3Modal Demo'),
                backgroundColor: Web3ModalTheme.colorsOf(context).background100,
                foregroundColor: Web3ModalTheme.colorsOf(context).foreground100,
              ),
              backgroundColor: Web3ModalTheme.colorsOf(context).background300,
              body: Container(
                constraints: const BoxConstraints.expand(),
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  children: !_w3mService.isConnected
                      ? [
                          W3MConnectWalletButton(service: _w3mService),
                        ]
                      : [
                          W3MAccountButton(service: _w3mService),
                          ElevatedButton(
                            onPressed: _signMessage,
                            child: const Text('Sign message'),
                          ),
                          if (result.isNotEmpty)
                            Text(
                              result,
                              style: const TextStyle(color: Colors.white),
                            ),
                        ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}