LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@flowcadence

WalletConnect 2.0 Manual Configuration

Last updated at Posted at 2024-12-08

Previous << Signing and Verifying Arbitrary Data
Next >> Flow Go SDK

WARNING
このガイドは、WalletConnect 2.0 を FCL-JS に手作業で設定したい上級ユーザーを対象としています。@onflow/fcl@1.11.0 以降、FCL-JS は WalletConnect 2.0 をそのままの状態でサポートしています。ほとんどのユーザーには、このビルトインの WalletConnect 2.0 サポートを使用することをお勧めします（FCL-JSの設定方法についてはこちら）。

開発者のエクスペリエンスを向上させ、WalletConnect 2.0 ウォレットとのFlow dApp 統合を合理化するために、FCL ^1.3.0はdiscovery-serviceプラグインのサポートを導入しました。これらServicePluginは、クライアントで設定されたサービス、サービスのメソッド、それらとのやり取りに必要な実行上の戦略を注入することができます。FCL dApps は、fcl-wc パッケージとFCL Plugin Registry を使用することでオプトイン(参加)できます。

FCL Discoveryを認証に使用する場合、dAppsは、Flow上のほとんどのFCL対応ウォレットとそのユーザーを、カスタムな統合やdAppコードの変更を必要とせずに、サポートすることができます。

これらの手順は、どうやってdAppsがWalletConnect 2.0プロトコルを使用したウォレットのサポートも追加するかについて説明しています。

How does it work?

  • fcl-wcパッケージは、WalletConnect 2.0SignClientインスタンスを初期化し、discovery-serviceのServicePluginをdAppが指定したオプションに基づき構築するために使用されます。
  • discovery-serviceプラグインは、オプトインウォレットやその他のサービスをFCL Wallet Discovery（UI/API）に追加するのに使用されます。
  • FCL Plugin Registryにより、dAppsは新しいサービスやメソッド、それらとやりとりするために必要な実行戦略を追加することが出来ます。

Requirements

  • fcl version >= 1.3.0
  • fcl-wc version >= 1.0.0

Implementation path
1 Add required packages Install and import minimum fcl and fcl-wc versions
2 Obtain a WalletConnect projectID Visit WalletConnect Cloud Registry and register for public relay server access and an application projectId
3 Initialize WalletConnect SignClient and FclWcServicePlugin Initialize WalletConnect SignClient and FclWcServicePlugin with configuration options
4 Add FclWcServicePlugin to FCL Plugin Registry Inject FclWcServicePlugin via fcl.pluginRegistry.add(FclWcServicePlugin)

1. Add required packages

fclとfcl-wcパッケージをインストールします。

npm install @onflow/fcl@ @onflow/fcl-wc

2. Obtain a WalletConnect projectID

WalletConnect Cloud Registry にアクセスし、public relay serverへのアクセスとアプリケーションprojectIdを登録します。

3. Initialize WalletConnect SignClient and FclWcServicePlugin

WalletConnectのSignClientに加えて、fcl-wcのinitメソッドが、ServicePluginオブジェクトを返します。このオブジェクトは、FCL Plugin Registryを使用して注入されることで、新しいサービスのメソッドや、それに対応する（WalletConnectのWC/RPCのような）実行戦略のサポートを追加することができます。discovery-serviceのServicePluginはFCL Wallet Discoveryを通じて(ユーザーに使用してもらう)追加のウォレットを含めることができます。

Configuration options
以下の設定オプションでWalletConnect SignClientと、FclWcServicePluginを初期化します。

Name Type Default Description
projectId boolean (required) null public relay serverへのアクセス用の WalletConnect projectId。projectIdは、WalletConnect Cloud Dashboardから取得できます。
metadata object { } あなたのアプリケーションを説明し、ウェブブラウザでの表示を定義したオプションのdAppメタデータです。詳細はWalletConnectのこちらをご覧ください。
includeBaseWC boolean false オプション設定により、FCL Discovery（UI/API）に汎用WalletConnectサービスを含めることができます。 ❗ BaseWCサービスは、モバイル向けのdeeplinkサポートを提供していません。
wcRequestHook function null オプションのこの関数は、すべてのデスクトップ版WalletConnectクライアントセッション提案および署名リクエストに対して呼び出されます。この関数を使用して、承認に対してウォレットを確認するようにユーザーにアラート画面を出してください。
pairingModalOverride function null オプションのこの関数は、含まれるQRCodeModalをオーバーライドできるようにします。この関数は2つの引数を受け取ります。1.QRコードを表示したり、ペアリングを作成の為ウォレットに送信する用の接続uri。2. 手動でリクエストをキャンセルするためのコールバック関数。
wallets array [ ] FCL Wallet Discovery（UI/API）に含めるオプションのWalletConnectauthnservicesのリストです。　❗ testnetでのみ使用可能です。これらのサービスは、WalletConnect cloud registry API から返されたウォレットと結合されて、Discoveryに対してUIでの表示とAPIレスポンスに組み込むために送信されます。
disableNotifications boolean false これはオプションのフラグで、アプリケーションの UI 内で保留されている WalletConnect request notificationsを無効にします。

Returns

Name Type Description
FclWcServicePlugin ServicePlugin A ServicePlugin of type discovery-service. May also include optional authn services to offer through FCL Wallet Discovery (UI/API).
client SignClient An initialized WalletConnect SignClient. 
const FclWcServicePlugin = {
  name: "fcl-plugin-service-walletconnect",
  f_type: "ServicePlugin",   /* the type of FCL plugin */
  type: "discovery-service", /* the is a service sent to Discovery */
  services: [Service],       /* (optional) Generic, Cloud Registry and client injected WalletConnect services */
  serviceStrategy: {method: "WC/RPC", exec: execStrategy, /* the method name and execution strategy for WalletConnect services */
}

❗ fcl-wc を使用するには、FCL config flow.network をtestnetまたはmainnetに設定する必要があります。これにより、正しいチェーン権限をリクエストする"WC/RPC"サービス戦略が可能になります。

import {config} from '@onflow/config'

config({
    "flow.network": "mainnet"
})

See FCL Configuration for more information.

4. Add FclWcServicePlugin to FCL Plugin Registry

WalletConnectのSignClientに加えて、fcl-wcのinitメソッドは、ServicePluginオブジェクトを返します。このオブジェクトをFCL Plugin Registryにインジェクションすることで、FCLのサポートを、（WalletConnectのWC/RPCのような）新しいサービスメソッドとそれに対応する実行戦略に追加することができます。

Usage

import * as fcl from '@onflow/fcl';
import { init } from 'fcl-wc';

const { FclWcServicePlugin, client } = await init({
  projectId: WC_PROJECT_ID, /* required */
  metadata: WC_APP_METADATA, /* optional */
  includeBaseWC: false, /* optional, default: false */
  wallets: [], /* optional, default: [] */
  wcRequestHook: (wcRequestData) => {
    /* optional,default: null */
    handlePendingRequest(data);
  },
  pairingModalOverride: (uri, rejectPairingRequest) => {
    /* optional,default: null */
    handlePendingPairingRequest(data);
  },
});

fcl.pluginRegistry.add(FclWcServicePlugin);

ServicePlugin Spec

Key Value Type Description
name string The name of the plugin.
f_type string The type of plugin (currently only supports ServicePlugin type).
type string The plugin subtype (currently only supports discovery-service type).
services array A list of services to add to FCL.
serviceStrategy { method: string, exec: function } The method and corresponding strategy FCL uses to interact with the service. A service with the service.method property set to "WC/RPC" tells FCL to use the corresponding service strategy if it is supported by the dApp.

Integrating With Wallet Discovery

ブロックチェーン上でユーザーが利用できるすべてのウォレットを把握することは困難です。FCLのディスカバリーメカニズムは、Flow対応ウォレットとの統合の負担を大幅に軽減し、開発者がdAppの開発に集中し、ユーザーにできるだけ多くのオプションを提供できるようにします。

アプリがウォレットディスカバリーを使用する方法は2つあります。

  1. UI版は、iFrame、ポップアップ、またはタブ経由で表示するように設定できます。
  2. API版は、fcl.discovery.authnメソッドを使用して、コード内で直接authentication serviceにアクセスできます。このメソッドについては、後ほど説明します。

FCLウォレットディスカバリーを認証に使用する場合、dAppはカスタム統合やdAppコードの変更を必要とせずに、Flow上でFCL対応のウォレットをサポートすることができます。

discovery-service ServicePlugin

FclWcServicePluginは、discovery-service型のServicePluginです。discovery-serviceプラグインは、FCLウォレットディスカバリーを通じて提供する追加の認証サービスを含めることができます。

有効なdiscovery-serviceプラグインが登録されると、FCLはクライアントがDiscoveryでサポートしたサービスを、登録およびインジェクトでウォレットを追加するために、UIとAPIに対して共有します。

WalletConnect 2.0 を使用して Flow 対応ウォレットに接続するには、dApp のユーザーは認証プロセスを経て、好みのウォレットを選択するオプションが提供されます。

❗ WalletConnect セッションが確立され、currentUserが認証されると、FCL は FCL authn 実行中のクライアントのペアリングとセッションを処理し、authz の一部として、fcl.mutate を使用して署名リクエストを開始します。同時にfcl.signUserMessage を使用してuser-signします。

How to add your FCL compatible WalletConnect wallet to Discovery (UI/API)

  1. FCLウォレットディスカバリーservices.jsonにウォレットを追加するには、PRを出してください。
  2. FCL対応ウォレットをWalletConnect Cloud Registryに届け出てください。
  3. ウォレットサービスをfcl-wc initオプションに追加します。 (❗ testnetのみ必要)

FCLは、Wallet Discoveryに、クライアント（インストール済みの拡張機能およびdiscovery-service ServicePlugins）によってサポートされているサービスを通知します。そのため、サポートされているサービスのみがDiscovery UIに表示されたり、Discovery API経由で返されたり、します。

image.png

Wallet Provider Spec

Implementation path
1 Obtain a WalletConnect projectId Register to receive a projectId from the WalletConnect Cloud Registry.
2 Conform to FCL Wallet Provider Spec Compatible wallets must support flow_authn, flow_authz, and flow_user_sign methods and wrap data in the appropriate FCL Response type. Services returned with the AuthnResponse of flow_authn should set service.endpoint to corresponding methods. (ServiceType authz は flow_authz, ServiceType user-signature は flow_user_sign)
3 Add wallet to WalletConnect Cloud Registry API (optional) Submit your wallet to be included in the WalletConnect Cloud Registry API and Explorer
4 Responses All responses need to be wrapped in a PollingResponse

Metadata requirements

❗ 正しく識別し、ペアリングを改善し、モバイルのディープリンクサポートを含めるには、WC/RPC メソッドを使用したサービスは、Wallet メタデータ内のuidおよびurlと同じユニバーサルリンクを使用する必要があります。WalletConnect Cloud Registry から取得した Wallet は、データから自動的にサービスを構築し、service.uid をユニバーサルリンクに設定します。

import SignClient from '@walletconnect/sign-client';

export let signClient: SignClient;

export async function createSignClient() {
  signClient = await SignClient.init({
    projectId: PROJECT_ID,
    relayUrl: 'wss://relay.walletconnect.com',
    metadata: {
      name: 'Awesome Wallet',
      description: 'Awesome Wallet with FCL Support for WalletConnect',
      url: 'https://deeplink.awesome-wallet.com/',
      icons: ['https://avatars.githubusercontent.com/u/37784886'],
    },
  });
}

Next steps

  1. Read the FCL Wallet Provider Spec.
  2. Check out the a WalletConnect 2.0 React POC Wallet and FCL Flow dApp with support for WalletConnect v2.0.
  3. Read and review the WalletConnect 2.0 Docs, examples and resources.

Last updated on Dec 3, 2024 by Jordan Ribbink

翻訳元

Previous << Signing and Verifying Arbitrary Data

Flow BlockchainのCadence version1.0ドキュメント (WalletConnect 2.0 Manual Configuration)

Next >> Flow Go SDK

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?