Flutter钱包连接插件walletconnect_dart的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter钱包连接插件walletconnect_dart的使用

简介

WalletConnect 是一个开源协议,用于通过扫描二维码或深度链接将去中心化应用程序(Dapps)连接到移动钱包。用户可以通过手机安全地与任何 Dapp 互动,使 WalletConnect 钱包比桌面或浏览器扩展钱包更安全。

WalletConnect

WalletConnect-Dart-SDK 是官方 WalletConnect-monorepo 的社区 SDK 和移植版本。目前支持以下网络:

  • Algorand
  • Ethereum

你可以通过扩展 WalletConnectProvider 并实现所需的方法来轻松添加自己的网络。有关实现的更多信息,请参阅 EthereumWalletConnectProviderAlgorandWalletConnectProvider

使用方法

安装

你可以在 pubspec.yaml 文件中添加 walletconnect_dart 包:

dependencies:
  walletconnect_dart: ^latest-version

注意: walletconnect_dart 要求 Dart >= 2.14.0 并且支持空安全。请查看 pub.dev 获取最新版本。

示例代码

创建连接

import 'package:walletconnect_dart/walletconnect_dart.dart';

void main() async {
  // 创建连接器
  final connector = WalletConnect(
    bridge: 'https://bridge.walletconnect.org',
    clientMeta: PeerMeta(
      name: 'WalletConnect',
      description: 'WalletConnect Developer App',
      url: 'https://walletconnect.org',
      icons: [
        'https://gblobscdn.gitbook.com/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media'
      ],
    ),
  );

  // 订阅事件
  connector.on('connect', (session) => print(session));
  connector.on('session_update', (payload) => print(payload));
  connector.on('disconnect', (session) => print(session));

  // 创建新会话
  if (!connector.connected) {
    final session = await connector.createSession(
      chainId: 4160,
      onDisplayUri: (uri) => print(uri),
    );
  }
}

签名交易

import 'package:walletconnect_dart/walletconnect_dart.dart';
import 'package:algorand_dart/algorand_dart.dart';

void main() async {
  // 创建连接器
  final connector = WalletConnect(
    bridge: 'https://bridge.walletconnect.org',
    clientMeta: PeerMeta(
      name: 'WalletConnect',
      description: 'WalletConnect Developer App',
      url: 'https://walletconnect.org',
      icons: [
        'https://gblobscdn.gitbook.com/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media'
      ],
    ),
  );

  // 设置默认的 WalletConnect 提供者
  connector.setDefaultProvider(AlgorandWCProvider(connector));

  // 检查连接是否已建立
  final session = await connector.createSession(
    chainId: 4160,
    onDisplayUri: (uri) => print(uri),
  );

  final sender = Address.fromAlgorandAddress(address: session.accounts[0]);

  // 获取建议的交易参数
  final params = await algorand.getSuggestedTransactionParams();

  // 构建交易
  final transaction = await (PaymentTransactionBuilder()
    ..sender = sender
    ..noteText = 'Signed with WalletConnect'
    ..amount = Algo.toMicroAlgos(0.0001)
    ..receiver = sender
    ..suggestedParams = params)
    .build();

  // 签名交易
  final txBytes = Encoder.encodeMessagePack(transaction.toMessagePack());
  final signedBytes = await connector.signTransaction(
    txBytes,
    params: {
      'message': 'Optional description message',
    },
  );

  // 广播交易
  final txId = await algorand.sendRawTransactions(
    signedBytes,
    waitForConfirmation: true,
  );
  print(txId);

  // 结束会话
  connector.killSession();
}

Algorand 测试网

在测试网中进行测试通常更经济实惠。要切换到 Algorand 测试网,只需更新 AlgodClient 以使用测试网 URL:

final algorand = Algorand(
  algodClient: AlgodClient(apiUrl: AlgoExplorer.TESTNET_ALGOD_API_URL),
);

如果你需要测试网上的 Algos,可以使用水龙头:https://bank.testnet.algorand.network/

更多信息

  • 变更日志: 请参阅 CHANGELOG 了解最近的更改。
  • 贡献和拉取请求: 欢迎发送拉取请求。详情请参阅 CONTRIBUTING
  • 许可证: 本项目采用 MIT 许可证。详情请参阅 LICENSE

希望这些信息对你有帮助!如果有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter钱包连接插件walletconnect_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter钱包连接插件walletconnect_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用walletconnect_dart插件来连接钱包的示例代码。walletconnect_dart是一个Flutter插件,用于与WalletConnect协议进行交互,允许你的应用与用户的移动钱包进行连接和通信。

首先,确保你的Flutter项目中已经添加了walletconnect_dart依赖。你可以在pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  walletconnect_dart: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter应用中使用walletconnect_dart插件。以下是一个基本的示例,展示如何初始化WalletConnect客户端,并尝试连接到用户的钱包。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late WalletConnectClient client;
  late String uri;

  @override
  void initState() {
    super.initState();
    // 初始化WalletConnect客户端
    client = WalletConnectClient(
      bridge: 'https://bridge.walletconnect.org', // 可以使用你自己的bridge URL
      clientMeta: ClientMeta(
        name: 'My Flutter App',
        description: 'A Flutter app using WalletConnect',
        url: 'https://example.com',
        icons: ['https://example.com/icon.png'],
      ),
    );

    // 生成一个连接URI
    uri = client.session.uri;

    // 监听连接事件
    client.on('session_request', (session) async {
      // 用户批准连接后处理
      if (await showDialog(
            context: context,
            builder: (context) => AlertDialog(
              title: Text('Connect Wallet'),
              content: Text('Do you want to connect this wallet?'),
              actions: <Widget>[
                TextButton(
                  onPressed: () => Navigator.of(context).pop(false),
                  child: Text('Cancel'),
                ),
                TextButton(
                  onPressed: () async {
                    Navigator.of(context).pop(true);
                    await client.approveSession(session.id);
                    // 连接成功后可以在这里处理逻辑
                  },
                  child: Text('Approve'),
                ),
              ],
            ),
          ) ??
          false) {
        // 处理连接成功的逻辑
      } else {
        // 处理用户拒绝连接的逻辑
        await client.rejectSession(session.id);
      }
    });

    // 监听断开连接事件
    client.on('disconnect', (details) {
      // 处理断开连接的逻辑
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WalletConnect Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Scan the QR code below to connect your wallet:'),
              SizedBox(height: 20),
              QrCodeWidget(
                data: uri,
                size: 200,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 这是一个简单的QrCodeWidget实现,用于显示二维码
class QrCodeWidget extends StatelessWidget {
  final String data;
  final double size;

  QrCodeWidget({required this.data, required this.size});

  @override
  Widget build(BuildContext context) {
    return qrcode.toImage(data: data).image
      .resize(size, size)
      .toWidget();
  }
}

注意:

  1. 上面的代码示例使用了qrcode库来生成和显示二维码。你需要在pubspec.yaml中添加qrcode依赖。
  2. 替换bridge.walletconnect.org为你的自定义bridge URL(如果你有自己的bridge)。
  3. 在实际应用中,你可能需要处理更多的错误和状态管理。

这个示例代码展示了如何初始化WalletConnectClient,生成连接URI,并显示一个二维码供用户扫描以连接钱包。同时,它还展示了如何监听连接和断开连接的事件,并在用户批准连接时处理逻辑。希望这个示例能帮助你更好地理解和使用walletconnect_dart插件。

回到顶部