Flutter钱包连接插件wallet_connect_v2的使用

WalletConnect V2 for Flutter

WalletConnect V2 是一个用于Flutter的插件，它允许DApp和钱包之间建立安全的连接。这个插件适用于Flutter开发的钱包和DApp应用，并且在Avacus上得到了全面的支持，用户可以体验到主网和测试网的功能，因为它支持网络定制化。

如果您有任何问题或需要帮助，请随时使用并提出问题。

开始使用

初始化

为了方便您理解和实现，我们在示例中详细描述了每一步骤，您可以根据需要调整为钱包或DApp的具体实现。

1. 导入并创建实例

   import 'package:wallet_connect_v2/wallet_connect_v2.dart';
   
   final _client = WalletConnectV2();
   

2. 初始化WalletConnect SDK

   _client.init(projectId: projectId, appMetadata: walletMetadata);
   

3. 监听必要的事件

   • 监听连接状态变化（适用于钱包和DApp）

     _client.onConnectionStatus = (isConnected) {
       // 根据连接状态更新UI等操作
     };
     

   • 监听来自DApp的会话提案（仅限钱包）

     _client.onSessionProposal = (proposal) {
       // 处理会话提案，可以选择接受或拒绝
     };
     

   • 监听新建立的会话（适用于钱包和DApp）

     _client.onSessionSettle = (session) {
       // 获取会话详情信息
     };
     

   • 其他事件监听（如会话更新、删除、请求等）请参阅上面提供的代码片段。

4. 连接与断开连接

   • 连接到Relay服务

     _client.connect();
     

   • 断开与Relay服务的连接

     _client.disconnect();
     

5. 配对与会话管理

   • 钱包端配对DApps

     _client.pair(uri: uri);
     

   • 批准或拒绝会话

     _client.approveSession(approval: approval); // 批准
     _client.rejectSession(proposalId: proposal.id); // 拒绝
     

   • 更新或断开会话

     _client.updateSession(approval: updateApproval); // 更新
     _client.disconnectSession(topic: topic); // 断开
     

6. 处理请求

   • 批准或拒绝请求（仅限钱包）

     _client.approveRequest(topic: topic, requestId: requestId, result: result); // 批准
     _client.rejectRequest(topic: topic, requestId: requestId); // 拒绝
     

   • DApp端创建配对和发送请求

     _client.createPair(namespaces: namespaces); // 创建配对
     _client.sendRequest(request: request); // 发送请求
     

示例代码

以下是一个完整的Flutter应用程序示例，演示如何使用wallet_connect_v2插件来创建一个简单的钱包连接界面：

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

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

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeView(),
    );
  }
}

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

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> with WidgetsBindingObserver {
  static const projectId = 'YOUR_PROJECT_ID'; // 替换为您的项目ID
  final _walletConnectV2Plugin = WalletConnectV2();
  final _walletMetadata = AppMetadata(
      name: 'Flutter Wallet',
      url: 'https://yourwebsite.com',
      description: 'Your Flutter Wallet Description',
      icons: ['https://yourwebsite.com/icon.png'],
      redirect: 'wcexample');

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
    _initWalletConnect();
  }

  Future<void> _initWalletConnect() async {
    await _walletConnectV2Plugin.init(
        projectId: projectId, appMetadata: _walletMetadata);
    _walletConnectV2Plugin.connect();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wallet Connect Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              final uri = await _walletConnectV2Plugin.createPair(namespaces: {
                'eip155': ProposalNamespace(chains: [
                  'eip155:1'
                ], methods: [
                  "eth_signTransaction",
                  "eth_sendTransaction",
                  "personal_sign",
                  "eth_signTypedData"
                ], events: [])
              });
              if (uri != null) {
                print('QR Code URI: $uri');
                // 在这里可以生成二维码供扫描
              }
            } catch (e) {
              print('Error creating pair: $e');
            }
          },
          child: const Text('Create Pair'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _walletConnectV2Plugin.dispose();
    super.dispose();
  }
}

在这个示例中，我们展示了如何初始化WalletConnect V2插件，并创建一个配对URI以供扫描。实际应用中，您可能还需要处理更多的交互逻辑，比如响应不同的事件、显示二维码等。上述代码提供了一个基础框架，您可以在此基础上进行扩展以满足具体需求。