Service listener usage sample

example.dart

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  W3MService? _w3mService;

  // enable Coinbase https://docs.walletconnect.com/web3modal/flutter/installation#enable-coinbase-wallet
  bool _isConnected = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      debugPrint('[$runtimeType] builded after $timeStamp');
      _w3mService = W3MService(
        projectId: 'cad4956f31a5e40a00b62865b030c6f8',
        metadata: const PairingMetadata(
          name: 'Web3Modal Flutter Example',
          description: 'Web3Modal Flutter Example',
          url: 'https://web3modal.com/',
          icons: [
            'https://docs.walletconnect.com/assets/images/web3modalLogo-2cee77e07851ba0a710b56d03d4d09dd.png'
          ],
          redirect: Redirect(
            native: 'flutterdapp://',
            universal: 'https://web3modal.com',
          ),
        ),
      );
      _w3mService?.addListener(_isConnectedListener);
      _w3mService?.addListener(_isDisconnectedListener);
      _w3mService?.onSessionConnectEvent.subscribe(_onSessionConnect);
      _w3mService?.onCoinbaseConnect.subscribe(_onCoinbaseConnect);
      await _w3mService?.init();
    });
  }

  @override
  void dispose() {
    _w3mService?.removeListener(_isConnectedListener);
    _w3mService?.removeListener(_isDisconnectedListener);
    _w3mService?.onSessionConnectEvent.unsubscribe(_onSessionConnect);
    _w3mService?.onCoinbaseConnect.unsubscribe(_onCoinbaseConnect);
    super.dispose();
  }

  void _isConnectedListener() {
    if (!_isConnected && _w3mService?.isConnected == true) {
      _isConnected = _w3mService!.isConnected;
      // code here will be executed just once upon connection
    }
    setState(() {});
  }

  void _isDisconnectedListener() {
    if (_isConnected && _w3mService?.isConnected == false) {
      _isConnected = _w3mService!.isConnected;
      // code here will be executed just once upon disconnection
    }
    setState(() {});
  }

  void _onSessionConnect(SessionConnect? args) {
    final address = args?.session.namespaces['eip155']?.accounts.first;
    debugPrint('[$runtimeType] _onSessionConnect $address');
  }

  void _onCoinbaseConnect(CoinbaseConnectEvent? event) {
    final address = event?.data?.address;
    debugPrint('[$runtimeType] _onCoinbaseConnect $address}');
  }

  @override
  Widget build(BuildContext context) {
    final isConnected = _w3mService?.isConnected ?? false;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Connected: ${_w3mService?.session?.connectedWalletName}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 10.0),
            Visibility(
              visible: isConnected,
              child: ElevatedButton(
                onPressed: () async {
                  final cid = _w3mService?.selectedChain?.chainId ?? 1;
                  _w3mService?.launchConnectedWallet();
                  final response = await _w3mService?.request(
                    topic: _w3mService?.session?.topic ?? '',
                    chainId: 'eip155:$cid',
                    request: SessionRequestParams(
                      method: 'personal_sign',
                      params: [
                        'Hello world!',
                        _w3mService?.session?.address,
                      ],
                    ),
                  );
                  debugPrint(response);
                },
                child: const Text('personal_sign'),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _w3mService?.openModal(context);
        },
        child: const Icon(
          Icons.change_circle_rounded,
          size: 30.0,
        ),
      ),
    );
  }
}