XummのxAppを作ってみよう
Xummとは
XummはXRPL Labsによって開発されたモバイルデバイス向けのノンカルトディアルウォレットです。このウォレットはXRP Ledger向けであり、資産の管理はもちろん、トランザクションの送信や保有するNFTの閲覧、アプリ内アプリ機能などを搭載しています。
QRコードやDeepLinkを通してデスクトップブラウザやモバイルブラウザとやり取りをすることが出来ます。
xAppとは
Xummにはアプリ内でサードパーティアプリを動作可能にするxApp機能があります。例えばDEXのUIを表示するxAppではチャートや取引履歴、注文情報を表示することができ、xAppから直接、DEXへの注文を作成するトランザクションを作成することが出来ます。
xAppとして利用するために特別なフレームワークの利用は必要なく、Webアプリをほぼそのまま利用することが出来ます。
xAppからはユーザの秘密鍵情報にアクセスすることはできず、Xummのネイティブなトランザクション署名機能を通してのみトランザクションへ署名することが出来ます。
xAppの例
実際に利用可能なxAppとしては次のようなアプリがあります。
AccountWorth
アカウントのXRP/発行トークンの保有量とDEXの情報からフィアット建の保有資産額を確認することが出来ます。
DEX Trade
XRPレジャーのネイティブなDEXへアクセスするUIを提供しています。指値注文や成行注文にも対応しています。
Vanity Address
好きな文字列を含むアカウントアドレスをXRPL Labsから購入することが出来ます。購入したアカウントのマスターキーはプロトコルの仕組みによって無効化され、レギュラーキー機能により購入者のみがアカウントへアクセス可能になります。
XRPSwap
ネイティブなDEXの複数ペアの流動性を検索するPathFindの仕組みを利用したSwapアプリです。DEX TradeのxAppよりも優れた取引レートで通貨交換を行うことが出来ます(同一のレートとなる場合もあります)。
簡単なxAppを作ってみよう
簡単なWebアプリをReactで作成し、xAppとして利用してみまょう！
事前準備
以下のページを参考に事前の準備を行なってください。
1. Xummアプリの準備
2. テストネットアカウントの作成
3. テストネットへの接続
4. Xumm Developer Consoleでのアプリケーション作成
コード
以下のリポジトリをcloneし、yarnコマンドでパッケージをインストールしてください。
リポジトリにはXummへアクセスするためのSDKであるXumm-universal-SDK(xumm)が導入済みです。
src/App.js内のconst xumm = new Xumm("api-key");のうちapi-keyを事前に取得したXummのAPI Keyに置き換えましょう
その後yarn startコマンドで開発サーバを起動し、localhost:3000にアクセスしてみましょう！
次のような画面になれば成功です！
Ngrok
現在Reactはローカル環境のWebアプリケーションとしてアクセス可能な状態です。モバイルデバイスからアクセスするためにこれを一時的に外部公開しましょう。
ここではNgrokというサービスを利用します。
インストールは以下のサイトを参考にしてください。
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を開く場合は署名には注意してください。実際の資産が送信されます。)
他にも様々な機能を呼び出したり利用することができるので、コードを追加・変更してみてください！
まとめ
Xummアプリ内アプリであるxAppについて解説しました。この機能はXummアプリ内だけで完結するアプリを利用することができ、ユーザーにとってはXummアプリの利便性が向上します。ブラウザとアプリ間を行き来する手間が省けることは非常に大きなメリットです。
また、Xumm-Universal-SDKはxAppの開発に利用することはもちろん、フロントエンドアプリ向けにもバックエンドアプリ向けにも利用することが出来ます。
興味を持たれた方はXRP Ledger開発者のDiscordチャンネルへ是非お越しください！
日本語チャンネルもありますので、英語ができなくても大丈夫です！
Discussion