WalletConnect 2.0 Manual Configuration

[Previous << Signing and Verifying Arbitrary Data](https://qiita.com/flowcadence/items/81b6d0b7dfce0ad452ff)
[Next >> Flow Go SDK](https://qiita.com/flowcadence/items/3616deed7fbb2d69f91e)

https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a#reference-2020832ebee1810a325a

:::note warn
WARNING
このガイドは、WalletConnect 2.0 を FCL-JS に手作業で設定したい上級ユーザーを対象としています。`@onflow/fcl@1.11.0` 以降、FCL-JS は WalletConnect 2.0 をそのままの状態でサポートしています。ほとんどのユーザーには、このビルトインの WalletConnect 2.0 サポートを使用することをお勧めします（[FCL-JSの設定方法についてはこちら](https://qiita.com/flowcadence/items/b85a6df60a980c8e1dc1)）。
:::
開発者のエクスペリエンスを向上させ、**WalletConnect 2.0 **ウォレットとの**Flow** dApp 統合を合理化するために、**FCL** `^1.3.0`は`discovery-service`プラグインのサポートを導入しました。これら`ServicePlugin`は、クライアントで設定された**サービス**、サービスの**メソッド**、それらとのやり取りに必要な実行上の**戦略**を注入することができます。FCL dApps は、[fcl-wc](https://www.npmjs.com/package/@onflow/fcl-wc) パッケージと**FCL Plugin Registry** を使用することでオプトイン(参加)できます。

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

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

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

<h3>Requirements</h3>

* `fcl` version >= `1.3.0`
* `fcl-wc` version >= `1.0.0`

<h3>Implementation path</h3>

|  |  |  |
|:-:|:-:|:-:|
| [1](#1-add-required-packages) | Add required packages | Install and import minimum `fcl` and `fcl-wc` [versions](#requirements) |
| [2](#2-obtain-a-walletconnect-projectid) | Obtain a WalletConnect `projectID` | Visit [WalletConnect Cloud Registry](https://cloud.reown.com/sign-in) and register for public relay server access and an application `projectId` |
| [3](#3-initialize-walletconnect-signclient-and-fclwcserviceplugin) | Initialize WalletConnect `SignClient` and `FclWcServicePlugin` | Initialize WalletConnect `SignClient` and `FclWcServicePlugin` with [configuration options](#3-initialize-walletconnect-signclient-and-fclwcserviceplugin) |
| [4](#4-add-fclwcserviceplugin-to-fcl-plugin-registry) | Add `FclWcServicePlugin` to FCL Plugin Registry | Inject `FclWcServicePlugin` via `fcl.pluginRegistry.add(FclWcServicePlugin)` |

<h3>1. Add required packages</h3>

`fcl`と`fcl-wc`パッケージをインストールします。
```ruby
npm install @onflow/fcl@ @onflow/fcl-wc
```

<h3>2. Obtain a WalletConnect projectID</h3>

[WalletConnect Cloud Registry](https://cloud.reown.com/sign-in) にアクセスし、public relay serverへのアクセスとアプリケーション`projectId`を登録します。

<h3>3. Initialize WalletConnect SignClient and FclWcServicePlugin</h3>

WalletConnectの`SignClient`に加えて、`fcl-wc`の`init`メソッドが、[ServicePlugin](#serviceplugin-spec)オブジェクトを返します。このオブジェクトは、[FCL Plugin Registry](#4-add-fclwcserviceplugin-to-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](https://cloud.reown.com/sign-in)から取得できます。 |
| `metadata` | object | `{ }` | あなたのアプリケーションを説明し、ウェブブラウザでの表示を定義したオプションのdAppメタデータです。詳細は[WalletConnectのこちら](https://docs.reown.com/swift/sign/dapp-usage)をご覧ください。 |
| `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）に含めるオプションのWalletConnect`authn`servicesのリストです。　❗ `testnet`でのみ使用可能です。これらのサービスは、WalletConnect cloud registry API から返されたウォレットと結合されて、Discoveryに対してUIでの表示とAPIレスポンスに組み込むために送信されます。 |
| `disableNotifications` | boolean | false | これはオプションのフラグで、アプリケーションの UI 内で保留されている WalletConnect request notificationsを無効にします。 |

**Returns**
| Name | Type | Description |
|:-:|:-:|:-:|
| [FclWcServicePlugin](#serviceplugin-spec) | `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`. |

```ruby
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"`サービス戦略が可能になります。
```ruby
import {config} from '@onflow/config'

config({
    "flow.network": "mainnet"
})
```
See [FCL Configuration](https://qiita.com/flowcadence/items/b85a6df60a980c8e1dc1) for more information.
<h3>4. Add FclWcServicePlugin to FCL Plugin Registry</h3>

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

**Usage**
```ruby
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);
```

<h3>ServicePlugin Spec</h3>

| 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. |

<h1>Integrating With Wallet Discovery</h1>

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

アプリが[ウォレットディスカバリー](https://qiita.com/flowcadence/items/01a1580cb15a359a59ce)を使用する方法は2つあります。
1. UI版は、iFrame、ポップアップ、またはタブ経由で表示するように設定できます。
1. 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`します。

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

1. FCLウォレットディスカバリー`services.json`にウォレットを追加するには、[PRを出して](https://github.com/onflow/fcl-discovery/blob/master/data/services.json)ください。
1. FCL対応ウォレットを[WalletConnect Cloud Registry](https://cloud.reown.com/sign-in)に届け出てください。
1. ウォレットサービスを`fcl-wc` initオプションに追加します。 (❗ testnetのみ必要)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/8e38a9a1-ab59-21d1-e2e8-62b31b1713fa.png)


<h1>Wallet Provider Spec</h1>

<h3>Implementation path</h3>

|  |  |  |
|:-:|:-:|:-:|
| **1** | Obtain a WalletConnect `projectId` | Register to receive a `projectId` from the [WalletConnect Cloud Registry](https://cloud.reown.com/sign-in). |
| **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](https://walletguide.walletconnect.network/) |
| **4** | Responses | All responses need to be wrapped in a `PollingResponse` |

**Metadata requirements**

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

```ruby
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'],
    },
  });
}
```
<h3>Next steps</h3>

1. Read the [FCL Wallet Provider Spec](https://qiita.com/flowcadence/items/caa67ecf27a07dc2ee29).
2. Check out the a WalletConnect 2.0 [React POC Wallet](https://github.com/gregsantos/flow-walletconnect-v2-react-wallet) and [FCL Flow dApp](https://github.com/gregsantos/flow-walletconnect-v2-react-dapp) with support for WalletConnect v2.0.
3. Read and review the [WalletConnect 2.0 Docs](https://docs.reown.com/), examples and resources.

*Last updated on **Dec 3, 2024** by **Jordan Ribbink***

翻訳元

https://developers.flow.com/tools/clients/fcl-js/wallet-connect

***
<b>[Previous << Signing and Verifying Arbitrary Data](https://qiita.com/flowcadence/items/81b6d0b7dfce0ad452ff)
</b>

[Flow blockchain / Cadence version1.0ドキュメント](https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a) (WalletConnect 2.0 Manual Configuration)

<b>[Next >> Flow Go SDK](https://qiita.com/flowcadence/items/3616deed7fbb2d69f91e)</b>