Zenn
👛

XRPLのアプリケーションで複数のウォレットをサポートする

2024/09/13に公開
ブロックチェーン
XRP Ledger
ウォレット
tech

XRP Ledger とは

XRP LedgerはBitcoinやEthereumなどと同じ分散型のパブリックブロックチェーンです。PoWやPoSとは異なる独自のコンセンサスアルゴリズムが用いられています。
トークン機能やDEX機能をプロトコルネイティブに搭載しており、強力な決済機能があります。決済機能だけでなくNFTやAMM、Hooks(スマコン/開発中)など様々な機能を搭載しています。

XRP Ledgerエコシステムのウォレット

XRP Ledgerに対応したウォレットとして、次のようなものがあります。

Wallet Standard

現在、XRP LedgerエコシステムのWallet向けの規格の議論が進められています。

https://github.com/XRPLF/XRPL-Standards/discussions/206

Wallet Standardを利用したReactライブラリ

StandardをベースとしたJavaScript実装および、Reactライブラリを公開しています
https://github.com/tequdev/xrpl-wallet-standard

本記事ではこのライブラリを利用した複数ウォレット対応のXRPLアプリケーションの作成方法を説明します。

サンプルアプリケーションの作成

1. Reactプロジェクトの作成

Viteを利用してReactプロジェクトを作成します。

npm create vite@latest xrpl-wallet-example -- --template react-ts

プロジェクトルートに移動し、依存関係をインストールしておきます。

cd xrpl-wallet-example
npm i

2. ライブラリのインストール

React向けのXRPLウォレット接続ライブラリをインストールします。

npm i @xrpl-wallet-standard/react

ウォレットのアダプタをインストールします。
ここではXamanとCrossmarkの2つを利用します。

npm i @xrpl-wallet-adapters/xaman @xrpl-wallet-adapters/crossmark

3. コードの変更(src/main.ts)

registerWalletsに配列型式で追加したいウォレットのアダプタを追加することで任意のウォレットを追加することが可能です。

src/main.ts
  import { StrictMode } from 'react'
  import { createRoot } from 'react-dom/client'
  import App from './App.tsx'
  import './index.css'
+ import { CrossmarkWallet } from '@xrpl-wallet-adapter/crossmark'
+ import { XamanWallet } from '@xrpl-wallet-adapter/xaman'
+ import { WalletProvider } from '@xrpl-wallet-standard/react'

+ const additionalWallets = [
+   new XamanWallet('8f1280ed-****-****-****-************'),
+   new CrossmarkWallet(),
+ ]

  createRoot(document.getElementById('root')!).render(
    <StrictMode>
+     <WalletProvider registerWallets={additionalWallets}>
        <App />
+     </WalletProvider>
    </StrictMode>,
  )

4. コードの変更(src/App.tsx)

src/App.tsx
import './App.css'
import {
  ConnectButton,
  useAccount,
  useConnectionStatus,
  useDisconnect,
  useSignAndSubmitTransaction,
} from '@xrpl-wallet-standard/react'

function App() {
  const account = useAccount()
  const status = useConnectionStatus()
  const disconnect = useDisconnect()
  const signAndSubmitTransaction = useSignAndSubmitTransaction()

  const handleSignAndSubmitTransaction = async () => {
    const submittedTransaction = await signAndSubmitTransaction(
      {
        TransactionType: 'AccountSet',
        Account: account!.address,
      },
      'xrpl:1', // XRPL Testnet
    )
    console.log(submittedTransaction)
  }

  return (
    <>
      <h1>Example</h1>
      <ConnectButton />
      {status === 'connected' && (
        <div>
          <button type="button" onClick={() => handleSignAndSubmitTransaction()}>
            SignAndSubmitTransaction
          </button>
          <button type="button" onClick={() => disconnect()}>
            Disconnect
          </button>
        </div>
      )}
    </>
  )
}

export default App

5. 開発サーバの起動

次のコマンドを実行することで開発サーバが起動します。

npm run dev

http://localhost:5173/にアクセスすることでアプリケーションが確認できます。

Connect Walletボタンを押すと、事前にsrc/main.tsxファイルで設定していたXamanとCrossmarkのウォレットが表示されます。

クリックするとウォレット接続処理が行われます。

接続が成功すると、SignAndSubmitTransactionボタンとDisconnectボタンが表示されます。

SignAndSubmitTransactionボタンを押下することでテストネットでのトランザクション送信を行うことができ、Disconnectボタンを押下することでウォレット接続を切断することができます。

Discussion