XummのxAppを作ってみよう

2023/04/24に公開

Xummとは

XummはXRPL Labsによって開発されたモバイルデバイス向けのノンカルトディアルウォレットです。このウォレットはXRP Ledger向けであり、資産の管理はもちろん、トランザクションの送信や保有するNFTの閲覧、アプリ内アプリ機能などを搭載しています。

https://xumm.app/

QRコードやDeepLinkを通してデスクトップブラウザやモバイルブラウザとやり取りをすることが出来ます。

xAppとは

Xummにはアプリ内でサードパーティアプリを動作可能にするxApp機能があります。例えばDEXのUIを表示するxAppではチャートや取引履歴、注文情報を表示することができ、xAppから直接、DEXへの注文を作成するトランザクションを作成することが出来ます。

xAppとして利用するために特別なフレームワークの利用は必要なく、Webアプリをほぼそのまま利用することが出来ます。

https://xumm.readme.io/docs/what-are-xapps

xAppからはユーザの秘密鍵情報にアクセスすることはできず、Xummのネイティブなトランザクション署名機能を通してのみトランザクションへ署名することが出来ます。

xAppの例

実際に利用可能なxAppとしては次のようなアプリがあります。

AccountWorth

アカウントのXRP/発行トークンの保有量とDEXの情報からフィアット建の保有資産額を確認することが出来ます。

https://support.xumm.app/hc/en-us/articles/360022090599-How-to-use-the-Account-Worth-xApp

https://xumm.app/detect/xapp:xumm.accountworth

DEX Trade

XRPレジャーのネイティブなDEXへアクセスするUIを提供しています。指値注文や成行注文にも対応しています。

https://xumm.app/detect/xapp:xumm.dex

Vanity Address

好きな文字列を含むアカウントアドレスをXRPL Labsから購入することが出来ます。購入したアカウントのマスターキーはプロトコルの仕組みによって無効化され、レギュラーキー機能により購入者のみがアカウントへアクセス可能になります。

https://xumm.app/detect/xapp:xumm.vanity

XRPSwap

ネイティブなDEXの複数ペアの流動性を検索するPathFindの仕組みを利用したSwapアプリです。DEX TradeのxAppよりも優れた取引レートで通貨交換を行うことが出来ます(同一のレートとなる場合もあります)。

https://support.panicbot.app/xrpswap

https://xumm.app/detect/xapp:lathan.xrpswap

簡単なxAppを作ってみよう

簡単なWebアプリをReactで作成し、xAppとして利用してみまょう!

https://support.xumm.app/hc/en-us/articles/4416361592210-Guidelines-and-review-process-of-publishing-xApps-in-XUMM

事前準備

以下のページを参考に事前の準備を行なってください。

1. Xummアプリの準備

https://zenn.dev/tequ/articles/xumm-sign-transaction-backend#xummアプリの準備

2. テストネットアカウントの作成

https://zenn.dev/tequ/articles/xumm-sign-transaction-backend#テストネットアカウント

3. テストネットへの接続

https://zenn.dev/tequ/articles/xumm-sign-transaction-backend#接続先ネットワークの変更

4. Xumm Developer Consoleでのアプリケーション作成

https://zenn.dev/tequ/articles/xumm-sign-transaction-backend#xumm-api-keyの取得

コード

以下のリポジトリをcloneし、yarnコマンドでパッケージをインストールしてください。

https://github.com/develoQ/xApp-React-Demo

リポジトリにはXummへアクセスするためのSDKであるXumm-universal-SDK(xumm)が導入済みです。

https://github.com/XRPL-Labs/Xumm-Universal-SDK

src/App.js内のconst xumm = new Xumm("api-key");のうちapi-keyを事前に取得したXummのAPI Keyに置き換えましょう

その後yarn startコマンドで開発サーバを起動し、localhost:3000にアクセスしてみましょう!

次のような画面になれば成功です!

Ngrok

現在Reactはローカル環境のWebアプリケーションとしてアクセス可能な状態です。モバイルデバイスからアクセスするためにこれを一時的に外部公開しましょう。

ここではNgrokというサービスを利用します。

インストールは以下のサイトを参考にしてください。

https://www.mgo-tec.com/blog-entry-ngrok-install.html

ngrok http 3000コマンドを実行すると次のような表示になります。

この場合は次のURIが外部公開用に発行されました。(実行ごとにURLは変わります。)

https://0e26-153-232-13-35.ngrok-free.app/

試しにモバイルデバイスからこのURLにアクセスしてみると開発サーバの画面が表示されると思います!このURLはメモしておきましょう。

xAppの設定

事前準備にてアクセスしてXumm Developer Consoleにサイドアクセスし、作成したアプリケーションを選択してください。

サイドバーのxAppを選択すると次のような画面となりますので、注意事項をしっかり読んだ上でI agree, Please activete xApp featuresボタンを押下しましょう

押下後は次のような画面になります。ここで入力が必要となる項目は次の2つです。

  • WebApp URL
  • Debug Device ID

WebApp URLには先ほどNgrokで発行されたURL、Debug Device IDにはXummアプリの「設定」→「詳細設定」→「デバイスID」に表示されている値を設定してください。

それぞれ入力後にはテキストボックス右側にSaveボタンが表示されますので、忘れずに押下してください!

ここまでで準備は完了しました!

画面内のDeeplink / QR Valueに表示されているURLを開き、表示されるQRコードをモバイルデバイスで読み込むことでXummアプリ内でアプリケーションが開きます!

アドレスが正しく表示されていれば成功です!

Create Payment Transactionボタン押してみてください!署名確認画面が表示されるはずです!(メインネットでxAppを開く場合は署名には注意してください。実際の資産が送信されます。)

他にも様々な機能を呼び出したり利用することができるので、コードを追加・変更してみてください!

https://xumm.readme.io/docs/xapp-xumm-ui-interaction

まとめ

Xummアプリ内アプリであるxAppについて解説しました。この機能はXummアプリ内だけで完結するアプリを利用することができ、ユーザーにとってはXummアプリの利便性が向上します。ブラウザとアプリ間を行き来する手間が省けることは非常に大きなメリットです。
また、Xumm-Universal-SDKはxAppの開発に利用することはもちろん、フロントエンドアプリ向けにもバックエンドアプリ向けにも利用することが出来ます。

https://zenn.dev/tequ/articles/xumm-sign-transaction-backend

https://zenn.dev/tequ/articles/xumm-sign-transaction-frontend

興味を持たれた方はXRP Ledger開発者のDiscordチャンネルへ是非お越しください!
日本語チャンネルもありますので、英語ができなくても大丈夫です!
https://xrpldevs.org

Discussion