WalletConnect QR_Scan

使用 Bloc 和 GetIt 在 Flutter 中创建的一个 walletconnect_flutter_v2 示例实现项目。QR_Scan 同时支持 Web 和移动端，请克隆下方提到的相应分支。

入门

WalletConnect QR_Scan 包含了使用 WalletConnect 的 Web3Wallet 创建配对所需的最小实现。代码支持扫描二维码或粘贴 URI 字符串来创建配对。该仓库代码预装了基本组件，例如基本应用架构、应用主题、常量以及创建新项目所需的依赖项。通过使用样板代码作为标准初始化器，我们可以为所有继承它的项目建立相同的模式。这也有助于通过使用相同的代码模式并避免从头重写来减少设置和开发时间。

如何使用

步骤 1

使用下面的链接下载或克隆此仓库

https://github.com/karankharode/qr_scan_walletconnect

步骤 2

转到项目根目录，在控制台中执行以下命令以获取所需的依赖项

flutter pub get

步骤 3

此项目使用 get_it 库，该库支持代码生成，请执行以下命令来生成文件：

flutter packages pub run build_runner build --delete-conflicting-outputs

或使用 watch 命令以自动同步源代码

flutter packages pub run build_runner watch

屏幕截图

未配对状态 已配对状态

样板项目功能

  • 启动屏
  • 扫描屏幕
  • 主屏幕
  • 路由
  • 主题
  • GetIt (用于注入依赖项和创建单例类)
  • BLoC (状态管理)
  • 代码生成
  • 依赖注入
  • Web3 配对 (walletconnect_flutter_v2)
  • 动画 (交错)

使用的库和工具

文件夹结构

这是 Flutter 提供的核心文件夹结构。

flutter-app/
|- android
|- build
|- ios
|- lib
|- test
|- apk

这是我们在此项目中使用的文件夹结构

lib/
|- bloc/
|- data/
|- di/
|- presentation/
|- router.dart
|- main.dart

现在，让我们深入 `lib` 文件夹，其中包含应用程序的主要代码。

1- bloc - Contains the data layer of your project, includes directories for models and repositories
2- data - Contains bloc(s) for state-management of your application, to connect the business logic of your application with the UI
3- di - Contains dependency injection code 
4- presentation - all the ui of your project, contains sub directory for each screen, utils and widgets
5- router.dart — This file contains all the routes for your application.
6- main.dart - This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.

BLoC

BLoC 包含您应用程序的所有业务逻辑和 Flutter 中的应用状态。BLoC 本质上是一个位于 widget 树顶端的 widget，它通过特殊方法向下传递数据。如果有多个 bloc，则为每个 store 创建一个单独的文件夹，如下例所示：

bloc/
|- pairing/
    |- pairing_bloc.dart
    |- pairing_event.dart
    |- pairing_state.dart
|- base_state.dart

数据层

您应用程序的所有业务逻辑都将放入此目录中，它代表了您应用程序的数据层。它被细分为三个目录：model、repositories。每个目录都包含特定于域的逻辑。由于每个层都独立存在，因此更容易进行单元测试。UI 和数据层之间的通信由中央存储库处理。

data/
|- local/
    |- scanned_uri.dart
    
|- repositories/
    |- wallet_repository.dart

表示层

此目录包含您应用程序的所有 UI。每个屏幕都位于一个单独的文件夹中，便于组合与特定屏幕相关的文件组。所有特定于屏幕的 widgets 都将放置在 widgets 目录中，如下例所示：

presentaion/
    |- screens
    |- utils
    |- widgets
    |- app.dart
    
screens/
   |- home/
      |- home_screen.dart
   |- intro/
      |- splash_screen.dart
   |- scan/
      |- scan_screen.dart

1- util — Contains the utilities/common functions of your application.
2- widgets — Contains the common widgets for your applications. For example, Button, TextField etc.
3- app.dart - Contains the entry point MaterialApp 
4- contains all the screens and ui code with sub directories for each screen

Utils

此目录包含所有应用程序级别的常量。如下面的示例所示，为每种类型创建一个单独的文件

constants/
|- app_colors.dart
|- app_font.dart
|- app_dimens.dart
|- app_strings.dart
|- navigator_key.dart
...

单元测试

test/ |- wc_pair_test.dart

此目录包含 WalletConnect Web3Wallet 配对方法的单元测试。它接收模拟的 URI 数据，并通过 Web3Wallet 实例创建配对。

断言检查 PairingInfo.topic 和 PairingInfo.relay.protocol 是否与 URI 的路径和 “relay-protocol” 查询参数匹配。

expect(pairingInfo.relay.protocol, scannedData.scannedRelayProtocol);
expect(pairingInfo.topic, scannedData.scannedTopic);

测试 APK

apk/
    |- QR_Scan_Test.dart

此目录包含从该仓库代码构建的示例测试 APK。

结论

我很乐意回答您对此方法的任何疑问，如果您想为该项目贡献一份力量，请随时提交 issue 和/或 pull request？

再次需要指出的是，这个示例可能看起来比实际的更复杂——但这仅仅是一个示例。如果您喜欢我的工作，请不要忘记 ⭐ 收藏仓库以表达您的支持。

GitHub

查看 Github