Simple Web3Modal Example

w3mExample.dart

// Using web3modal_flutter: ^3.1.1

import 'package:flutter/material.dart';
import 'package:web3modal_flutter/web3modal_flutter.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @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',
          ),
        ),
      );
      await _w3mService?.init();
      _w3mService?.addListener(_update);
      _w3mService?.onSessionEventEvent.subscribe(_onSessionEvent);
      _w3mService?.onSessionUpdateEvent.subscribe(_onSessionUpdate);
      _w3mService?.onSessionConnectEvent.subscribe(_onSessionConnect);
      _w3mService?.onSessionDeleteEvent.subscribe(_onSessionDelete);
      _update();
    });
  }

  @override
  void dispose() {
    _w3mService?.onSessionEventEvent.unsubscribe(_onSessionEvent);
    _w3mService?.onSessionUpdateEvent.unsubscribe(_onSessionUpdate);
    _w3mService?.onSessionConnectEvent.unsubscribe(_onSessionConnect);
    _w3mService?.onSessionDeleteEvent.unsubscribe(_onSessionDelete);
    super.dispose();
  }

  void _update() {
    setState(() {});
  }

  void _onSessionEvent(SessionEvent? args) {
    debugPrint('[$runtimeType] _onSessionEvent $args');
  }

  void _onSessionUpdate(SessionUpdate? args) {
    debugPrint('[$runtimeType] _onSessionUpdate $args');
  }

  void _onSessionConnect(SessionConnect? args) {
    debugPrint('[$runtimeType] _onSessionConnect $args');
  }

  void _onSessionDelete(SessionDelete? args) {
    debugPrint('[$runtimeType] _onSessionDelete $args');
  }

  @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,
        ),
      ),
    );
  }
}