Basic WalletConnect's AppKit Implementation

basic_appkit_example.dart

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 const Web3ModalTheme(
      isDarkMode: false,
      child: MaterialApp(
        title: 'Flutter Demo',
        home: HomeScreen(),
      ),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late W3MService _w3mService;

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

  void _initializeW3MService() async {
    W3MChainPresets.chains.addAll(W3MChainPresets.extraChains);
    W3MChainPresets.chains.addAll(W3MChainPresets.testChains);

    _w3mService = W3MService(
      // context: context,
      projectId: 'cad4..........',
      metadata: const PairingMetadata(
        name: 'Demo 1',
        description: 'Demo 1',
        url: 'https://walletconnect.com/',
        icons: [
          'https://docs.walletconnect.com/assets/images/web3modalLogo-2cee77e07851ba0a710b56d03d4d09dd.png',
        ],
        redirect: Redirect(
          native: 'demo1://',
          universal: 'https://walletconnect.com',
        ),
      ),
    );

    _w3mService.onModalConnect.subscribe(_updateState);
    _w3mService.onModalNetworkChange.subscribe(_updateState);
    _w3mService.onModalUpdate.subscribe(_updateState);
    _w3mService.onModalDisconnect.subscribe(_updateState);

    await _w3mService.init();
    setState(() {});
  }

  void _updateState(dynamic event) {
    debugPrint('event $event');
    setState(() {});
  }

  @override
  void dispose() {
    _w3mService.onModalConnect.unsubscribe(_updateState);
    _w3mService.onModalNetworkChange.unsubscribe(_updateState);
    _w3mService.onModalUpdate.unsubscribe(_updateState);
    _w3mService.onModalDisconnect.unsubscribe(_updateState);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AppKit Example')),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Visibility(
                visible: !_w3mService.isConnected,
                child: W3MConnectWalletButton(service: _w3mService),
              ),
              Visibility(
                visible: _w3mService.isConnected,
                child: Column(
                  children: [
                    Text(
                      _w3mService.session?.peer?.metadata.name ?? '',
                      style: const TextStyle(
                        color: Colors.black,
                      ),
                    ),
                    const SizedBox(height: 16),
                    W3MNetworkSelectButton(service: _w3mService),
                    const SizedBox(height: 16),
                    W3MConnectWalletButton(service: _w3mService),
                    const SizedBox(height: 16),
                    W3MAccountButton(service: _w3mService),
                    const SizedBox(height: 16),
                    ElevatedButton(
                      onPressed: _sendTransaction,
                      child: const Text('TEST SEND'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _sendTransaction() async {
    try {
      _w3mService.launchConnectedWallet();
      final response = await _w3mService.request(
        chainId: _w3mService.selectedChain!.namespace,
        topic: _w3mService.session?.topic ?? '',
        request: SessionRequestParams(
          method: 'eth_sendTransaction',
          params: [
            Transaction(
              from: EthereumAddress.fromHex(_w3mService.session!.address!),
              to: EthereumAddress.fromHex(
                '0x59e2f66C0E96803206B6486cDb39029abAE834c0',
              ),
              value: EtherAmount.fromInt(EtherUnit.finney, 11), // == 0.011
              data: hexToBytes('0x'),
            ).toJson(),
          ],
        ),
      );
      debugPrint(response.toString());
    } catch (e) {
      debugPrint(e.toString());
    }
  }
}