dYdX v4 深掘りシリーズ 「フロントエンド」

dYdXのv4メインネットローンチの日が近づく中、dYdX Tradingが何を開発しているのかテーマごとに深掘りしてお伝えするブログ。過去には、dYdXプロトコルの概要、インデクサーについて書きました。今回は、フロントエンドがテーマです。

フロントエンドの役割は？

ウェブサイトのフロントエンドは、v4のdYdXプロトコルにプログラミング言語を使ってアクセスしたくないトレーダーに対して、直感的で使いやすいUI/UXを提供します。APIやウェブソケットを通じてインデクサーと連携し、取引板や口座残高などオンチェーン・オフチェーンの情報を表示します。取引注文は、バリデーターに対して直接出されます。

dYdXは、ウェブアプリ、iOSアプリ、Androidアプリの3つのフロントエンドを開発しています。また、TypescriptとPython SDKの開発も合わせて行なっています。このブログは主にウェブアプリに焦点を当てています。

フロントエンドを実装する

dYdXは、全てのフロントエンドのコードベースと関連スクリプトをオープンソースにします。これによって、誰でも自らのドメインを通じてdYdXのフロントエンドの実装をすることが可能になります。

ユーザーにとって必要なフロントエンドは一つで十分かもしれませんが、複数のフロントエンド実装は分散型の観点から重要です。過去のバージョンとは大きく異なる点ですが、我々はv4におけるトレード体験が複数のドメインを通じて提供できることに興奮しています。

コードベース

全てのウェブとスマホのコードベースはオープンソースであるGitHubレポにホストされます。ウェブアプリはReactを使ったTypscriptで書かれます。AndroidとiOSはそれぞれKotlinとSwiftで書かれます。ビジネスに関するロジックは全てのアプリ共通でKotlin Multiplatformが使われます。

実装のためのスクリプトと実装者の責任

フロントエンドの実装には以下の技術とサービスが必要になります。

• IPFS - 分散型ファイルの共有と保管のためのP2Pファイルシェアリングプロトコル

• web3.storage - IPF関連サービス

• Cloudflare - IPFSゲートウェイとDNSレゾリューション

フロントエンドを実装してホストする第三者パーティー（実装者）は、dYdX Githubレポに書かれているコードベースを複製し、実装に必要なスクリプトを実行します。実装のスクリプトは以下の通りです。

• web3.storageを使ってIPFSに対してファイルをピン留めする

• IPFSハッシュを取得する

• Cloudflareにおいて、ドメイン名のDNSレコードを最新のIPFSハッシュに直接更新する（IPFSからの最新コンテンツを取得するために）

IPFSに保管するコンテンツは、https://dweb.link や https://w3s.link/などIPFSゲートウェイを通じて、BraveやOperaなどIPFSサポートのあるブラウザでIPFSのハッシュを使ってアクセスすることができます。

実装のためのスクリプトは、実装者が簡単にフロントエンドをホスト・アップデートできるように作られます。実装者の責任は以下の通りです。

• ドメインを取得・管理する

• 実装のための条件を満たす

  • Node.js 16とnpmをローカルでインストール

  • web3.storageをセットアップ

  • Cloudflare口座のセットアップ

• フロントエンドの初期実装

  • フロントエンドのコードベースと実装のためのスクリプトをdYdXのGithubからダンロード

  • IPFSにファイルをピン留めしIPFSハッシュを更新するためのスクリプトを実行

• フロントエンドのアップデート

  • dYdX Githubのレポに従いコードベースのアップデートを反映

  • コードベースのアップデート時に更新済みのファイルをIPFSにピン留めしIPFSハッシュをアップデートするためのスクリプト実行

• 補助アカウントの設定

*上記はdYdX Trading社のブログ「v4 Deep Dive: Front End」を翻訳・編集したものです。