Solana DeFi：Jupiter Swap UI（2023年）
はじめに
Jupiterは、さまざまなDEXとAMMを集約し、複数の取引所から最も効率的なスワップを見つけるアグリゲーターです。他のDEXやAMMを横断して最も価格のよいスワップルートを特定し、最良の価格を確保します。ステーブルコインに交換するだけの場合でも、お気に入りのDeFiゲームのトークンを利用する場合でも、Jupiterとの連携は欠かせません。
Jupiter Swap UI：概要
この短いガイドで、Jupiterをプログラムから利用する方法を学びましょう。このガイドでは、JupiterのAPIを使用して価格見積もりを取得し、ユーザー入力に基づいてSOLからUSDCへのスワップを実行するdAppの作成方法を説明します。このアプリでは、価格見積もりのリアルタイム取得や、ユーザーが署名するスワップトランザクションなどの便利な機能を紹介します。このブログを読み進める際は、完成したコードをすべて収録した次のリポジトリを自由に参照してください。
完成したリポジトリはこちらです：GitHub - Tidelaw/jup-ui
前提条件
以下がインストールされていることを確認してください。
- Node.js
- Next.js
- Tailwind（Next.jsに含まれている場合があります）
依存関係
ユーザーがウォレットを接続してスワップトランザクションに署名できるよう、contextsフォルダーを正しく設定するには、Connect Walletブログに沿って進めることを強くおすすめします。
プロジェクトの初期作成時およびConnect Walletブログに含まれていない追加の依存関係は、@project-serum/anchorとaxiosパッケージだけです。このpackage.jsonをコピーし、npm iを実行してすべてを一度にインストールすることをおすすめします。
Swap.tsx
まず、入力されたSOLの数量に対して受け取れるUSDCの推定額を返す、価格見積もり機能を実装します。Jupiterを使えば非常に簡単です。トークンの入力ミントアドレスと出力ミントアドレス、そして交換する数量を指定するだけです。
ユーザーがスワップしたいSOLの数量を保存するため、state変数が必要です。まず入力要素を設定します。以下のコードにはDaisyUIのスライダーとテキスト入力の両方が含まれていますが（どちらも<input>タグ）、必要なのはどちらか一方だけです。inputタグにはvalueプロパティとonChangeプロパティを設定し、state変数を継続的に更新できるようにします。
次にuseEffectフックを作成します。ユーザーが交換するSOLの数量として新しい値を入力すると、Jupiterにリクエストを送信し、ユーザーが指定した数量の見積価格を取得します。
Quote.tsx
次にsrc/api/フォルダーへ移動し、quote.tsxという新しいファイルを作成します。ここからJupiterに見積額をリクエストします。内部でリクエストを受信するには、POSTリクエストのみを許可するhandler関数を設定します。ユーザーがスワップしたい数量を含むリクエストをフロントエンドから受信したら、configのURLをreq.body.amountに変更し、Jupiterへリクエストを送信するだけです。
返されるペイロードの例を示します。このオブジェクトをフロントエンドへ返し、さらに別のエンドポイントへ渡してスワップを実行します。
data.dataプロパティにアクセスする{ data }分割代入に注目してください。これにより、res.status(200).json(data)を介してdataをそのままフロントエンドへ返せます。
次にreturn関数内で、見積もり用のstate変数を更新し、内部APIから上記のデータが返された時点で値を反映します。その後、USDCの該当プロパティへアクセスできます。ただし、正しいUSD金額を表示するには、100万で割って小数点以下2桁に丸める必要があります。これは、ネイティブSOLがLamportsで表され、10億で割る必要があることと似ています。
あとはHTMLに挿入するだけで、フロントエンドに表示されます。
Jupiter UI：スワップの実行
シミュレーション済みの見積もりオブジェクトを取得できたので、スワップを実行してAPIエンドポイントへリクエストを送信する新しい関数を作成できます。
次に、このリクエストを受信するAPIエンドポイントを、ファイルパスsrc/api/swapに作成します。この例では静的に型付けされたウォレットアドレスを使用していますが、代わりにuseWalletフックを使用して、その値をエンドポイントへ渡すこともできます。見積もりオブジェクトを付けてswapエンドポイントへリクエストを送信すると、シリアライズされたトランザクションが返されます。あとはフロントエンドで署名するだけです。このオブジェクトをコンソールに出力して、自由にテストしてください。
バックエンドからシリアライズされたトランザクションを受信したら、送信の準備を始めます。まずトランザクションバッファーを取得し、署名できるようにデシリアライズします。先ほどのConnect Walletガイドに沿って設定していれば、wallet.signTransactionでこのトランザクションに署名できるはずです。署名後にトランザクションを再度シリアライズし、sendRawTransaction関数を使用して送信します。
実際のjup.agサイトのようにトランザクション署名を表示する機能も追加できます。ただし現時点ではブラウザーのコンソールに出力されるだけですが、技術知識のあるユーザーであれば確認できます。
まとめ： Heliusを使い始める
このガイドでは、JupiterのAPIを使用して価格見積もりを取得し、ユーザー入力に基づいてSOLからUSDCへのスワップを実行するdAppの作成方法を説明しました。今後もこのガイドを参考にしていただければ幸いです。ご質問があれば、いつでもHelius Discordでお尋ねください。また、無料のHelius RPCを使用して接続を確立できます。このプロジェクトをさらに拡張するためのアイデアについては、以下をご覧ください。JupiterのAPIと連携し、価格見積もりとスワップを処理するdAppの仕組みを理解したら、次はHeliusを活用したモニタリングと分析へ進みましょう。Jupiter自体がさまざまなDEXやAMMを横断して最適なスワップルートを見つけるアグリゲーターであるため、そこを流れるデータは非常に豊富で、市場動向を理解するうえで大きな価値があります。
次のステップ
- 見積もりオブジェクトをswap.tsエンドポイントへ送信する際、ペイロードに追加プロパティを含める
- トランザクション署名を表示する
- 他のトークンを追加する、またはUSDCとSOL間の交換方向を切り替える
- ウォレットが接続されていない場合のエラー処理とレスポンシブ対応
- RPCを隠すため、バックエンドでTXをデシリアライズして送信する？
使用したリソース
関連記事
Heliusを購読
Solana開発の最新情報や新しい記事の公開通知を受け取れます