[Flutter] WalletConnectでweb3のアプリを作る

こんにちは。いせりゅーです。
開発する中でWeb３についての記事が少なく、開発する中でとても大変だったので、記事にしようと思いました。少しでもお役に立てるような記事になれたら嬉しいです🙌

WalletConnectについて

• QRコードを利用してスマホもしくはタブレットのウォレットアプリから、パソコンのNFTマーケットプレイスやDApps（分散型アプリケーション）にウォレットを接続できる橋渡しのようなサービスです。
• 様々なウォレットに対応していますが、今回は、MetaMaskの接続をしてみようと思います。

参考文献

WalletConnectについてのPackages

WalletConnectを実装するにおいて、様々なPackagesが用意されています。

いろいろ試してみましたが、web3modal_flutterがしっくりときて、実装することができましたので、これで進めていこうと思います。

注意🚨

• 1.0系だと古いため、2.0系を使用することを推奨されているそうです。
• 2023年6月28日にWalletConnect v1.0がシャットダウンされました。そのため、WalletConnect v2.0に移行する必要があります。
• そのため、v2と書かれたものか更新頻度が近いものを使うことをオススメします。

実装する

web3modal_flutterを使用して実装を進めていきます。

１、pubspec.yamlに追加

flutter pub add web3modal_flutter

２、iOSに必要な準備をする

• /ios/Podfileに追記

platform :ios, '13.0'

• Info.plistにLSApplicationQueriesSchemesを追記する。
  必要なウォレットを記載しましょう。

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>metamask</string>
  <string>trust</string>
  <string>safe</string>
  <string>rainbow</string>
  <!-- Add other wallet schemes names here -->
</array>

３、Androidに必要な準備をする

• AndroidManifest.xmlに記載をする。
  必要なウォレットを記載しましょう。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <queries>
        <package android:name="io.metamask"/>
        <package android:name="com.wallet.crypto.trustapp"/>
        <package android:name="io.gnosis.safe"/>
        <package android:name="me.rainbow"/>
        <!-- Add other wallet schemes names here -->
    </queries>

    <application>
        ...
    </application>
</manifest>

4、wallet_connectに登録をして、projectIdを取得する。

以下のサイトからアカウントを作成して、ProjectIDを取得しましょう。

5、実装を行う

• サンプルコードを使用しています。ひとまず実装できるまでを目標にしているため、詳しい実装などは別の記事にしようと思います。

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  late W3MService _w3mService;

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

  void _initializeW3MService() async {
    // 初期設定を行う
    _w3mService = W3MService(
      //wallet_connectのプロジェクトID
      projectId: 'YOUR_PROJECT_ID',
      metadata: const PairingMetadata(
        name: 'Web3Modal Flutter Example',
        description: 'Web3Modal Flutter Example',
        url: 'https://web3modal.com/',
        icons: ['https://web3modal.com/images/rpc-illustration.png'],
        redirect: Redirect(
          native: 'web3modalflutter://',
          universal: 'https://web3modal.com',
        ),
      ),
    );

    await _w3mService.init();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: !_w3mService.isConnected
            ? [
          W3MNetworkSelectButton(service: _w3mService),
          W3MConnectWalletButton(service: _w3mService),
        ]
            : [
          W3MAccountButton(service: _w3mService),
        ],
      ),
    );
  }
}

最後に

あまりWeb3関連の記事が多くないかつ、そもそもアプリ化することが少ないと思うので、実装する人が少ないと思っています。
だからこそ、チャンスだと思っています。たくさん開発して、実装して、アウトプットするぞ🔥