Zenn
✅

Reactを使ってトランザクションをXummで署名してみよう！

2023/04/17に公開
React
ブロックチェーン
XRP Ledger
Xumm
ウォレット
tech

Xummとは

Ethereumで開発を行う際はメタマスクを使うのと同じように、XRP LedgerではXummというウォレットがデファクトスタンダードとなっています。
Xummはモバイル向けのウォレットであり、iOSやAndroidで利用することができます。

https://xaman.app

本記事ではReactからXummへアクセスし、トランザクションへ署名する方法について説明します。

準備

テストネットアカウントの作成、ネットワークの切り替え、API Keyの取得については以下のページを参照してください

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

Xumm API Key / API Secretの取扱いについて

Xumm Developer Consoleで取得できるAPI KeyとAPI Secretは、XummのAPIを利用する際に使用します。

フロントエンドではXumm Developer ConsoleのAPI Keyのみを利用し、API Secretは使用しません。

コード

今回はReactを利用しXummでトランザクションへ署名するアプリケーションを作成します。

Reactのインストール

  • npm
npx create-react-app sample-app
cd sample-app
  • yarn
yarn create react-app sample-app
cd sample-app

Xumm SDKのインストール

Xummと接続するためのライブラリとしてXumm Universal SDKを利用します。

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

https://www.npmjs.com/package/xumm

  • npm
npm install xumm
  • yarn
yarn add xumm

コード例

src/App.jsx
import { useState } from "react";

const { Xumm } = require("xumm");

const xumm = new Xumm("api-key");

const App = () => {
  const [account, setAccount] = useState(undefined);

  xumm.user.account.then((account) => setAccount(account));

  const connect = async () => {
    // Xummでサインイン
    await xumm.authorize();
  };

  const disconnect = async () => {
    // Xummからサインアウト
    await xumm.logout();
    // アカウント情報を削除
    setAccount(undefined);
  };

  const createTransaction = async () => {
    const payload = await xumm.payload?.create({
      TransactionType: "Payment",
      Destination: "rQQQrUdN1cLdNmxH4dHfKgmX5P4kf3ZrM",
      Amount: "100", // 100 drops (=0.000100XRP)
    });
    if(!payload?.pushed){
      // Xummへプッシュ通知が届かない場合
      // payload?.refs.qr_png を利用してQRコードを表示することで署名画面を表示することも可能
    }
  };

  return (
    <div>
      {account && (
        <>
          <div>{account}</div>
          <button onClick={disconnect}>Disonnect</button>

          <button onClick={createTransaction}>Payment</button>
        </>
      )}
      {!account && <button onClick={connect}>Connect</button>}
    </div>
  );
};

export default App;

Connectボタンを押すとXummのサインイン画面が表示されます。
Xummでサインイン画面のQRコードを読み込みサインインすると、Webアプリにアカウントアドレスが表示されます！

その後Paymentボタンを押すと、XummへPaymentトランザクションのプッシュ通知が届きますので、それを開くと署名画面が表示されます。

xumm.payload?.createの返り値は以下のようなオブジェクトです。
Xummの設定によってはプッシュ通知が届かない場合があります。
その場合はpushedがfalseであるため、refs.qr_pngなどを利用してQRコードを表示することで署名を行うことができます。

{
  uuid: string;
  next: {
      always: string;
      no_push_msg_received?: string;
  };
  refs: {
      qr_png: string;
      qr_matrix: string;
      qr_uri_quality_opts: XummQrQuality[];
      websocket_status: string;
  };
  pushed: boolean;
}

もっと試してみましょう

XRP Ledgerは支払いのためのPaymentトランザクション以外にも様々なトランザクションが存在します。

たとえば次のようなトランザクションがあります。

  • AccountSet: アカウントの状態などのプロパティを変更する
  • NFTokenMint: NFTを発行する
  • OfferCreate: DEXへの注文を作成する
  • SignerListSet: マルチシグを設定する

https://xrpl.org/ja/docs/references/protocol/transactions/types/

これらを参考に、先ほどのコードを修正し、他のトランザクションを試してみましょう！

まとめ

React+Xummを利用したトランザクションへの署名方法について解説しました。
今回のコードを少し修正するだけでXumm内アプリのxAppとして利用することも可能です。
XRP LedgerではSolidityなどのスマートコントラクトコードなしに、フロントエンドのコードだけでXRP Ledgerで利用可能なトランザクション全てでウォレットを介した署名が可能になります。

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

Discussion