Web3Auth(次のjs)を使用したXRP Ledgerアカウントの作成:ステップバイステップガイド

npx create-next-app@latest my-project --typescript --eslint

cd my-project

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

yarn add @web3auth/xrpl-provider @web3auth/xrpl-provider @web3auth/openlogin-adapter @web3auth/openlogin-adapter @web3auth/modal @web3auth/base @nice-xrpl/react-xrpl

//まず、typescript用のWeb3auth/baseからプロバイダータイプをインポートすることから始めます
import { IProvider } from "@web3auth/base";

// Xrp ledgerに入力を送信するために使用する関数をインポートします
import { convertStringToHex, Payment, xrpToDrops } from "xrpl"

//私たちはすべての私たちの要求を置く私たちのクラスを定義します

export default class XrplRPC {
    // IProvider型のプライベートプロバイダ変数の宣言}
    private provider: IProvider;

     //指定された引数を使用してプロバイダー変数を初期化するコンストラクターを定義します
     constructor (provider: IProvider) {
        this.provider = provider
     }

     // プロバイダに関連付けられたアカウントを取得する方法
     getAccounts = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<never, string[]>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });
            console.log(accounts, "accounts"); // Log the accounts for debugging purposes

            if (accounts) { // アカウントが返されたかどうかを確認します
                // リスト内の最初のアカウントのアカウント情報を要求する
                const accInfo = await this.provider.request({
                    method: "account_info", // アカウント情報を取得する方法を指定します
                    params: [
                        {
                            account: accounts[0], // 最初のアカウントを使用する
                            strict: false, //非strictモードでは、より寛大なアカウント情報の取得が可能になります
                            ledger_index: "current", // 現在の元帳インデックスを使用する
                            queue: true, // キューに入れられたトランザクションを含める
                        },
                    ],
                });
                return accInfo; // アカウント情報を返す
            } else {
                return "アカウントが見つかりません、問題を報告してくださ"; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.error("Error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
     };


     // 最初のアカウントの残高を取得する方法
    getBalance = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<string[], never>({
                method: "xrpl_getAccounts", // アカウントを取得する方法を指定します
            });

            if (accounts) { // アカウントが返されたかどうかを確認します
                // リスト内の最初のアカウントのアカウント情報を要求する
                const accInfo = (await this.provider.request({
                    method: "account_info", // アカウント情報を取得する方法を指定します
                    params: [
                        {
                            account: accounts[0], // 最初のアカウントを使用する
                            strict: true, // 厳密なモードは正確な記述情報を保障します
                            ledger_index: "current", // 現在の元帳インデックスを使用する
                            queue: true, // キューに入れられたトランザクションを含める
                        },
                    ],
                })) as Record<string, Record<string, string>>;
                return accInfo.account_data?.Balance; // 口座残高を返す
            } else {
                return "No accounts found, please report this issue."; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.error("Error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    };


    // 最初のアカウントのアドレスを取得する方法
    getAccountAddress = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<string[], never>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });

            if (accounts) { // アカウントが返されたかどうかを確認します
                // リスト内の最初のアカウントのアカウント情報を要求する
                const accInfo = (await this.provider.request({
                    method: "account_info", // アカウント情報を取得する方法を指定します
                    params: [
                        {
                            account: accounts[0], // 最初のアカウントを使用する
                            strict: true, //厳密なモードは正確な記述情報を保障します
                            ledger_index: "current", // 現在の元帳インデックスを使用する
                            queue: true, // キューに入れられたトランザクションを含める
                        },
                    ],
                })) as Record<string, Record<string, string>>;
                return accInfo?.account; // アカウントアドレスを返す
            } else {
                return "No accounts found, please report this issue."; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.error("Error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    }

    // メッセージに署名する方法
    signMessage = async (): Promise<any> => {
        try {
            const msg = "こんにちはの世界をこのストリートビューをXRPLによる Amityclev"; // 署名するメッセージを定義する
            const hexMsg = convertStringToHex(msg); // メッセージを16進数の文字列に変換します
            const txSign = await this.provider.request<{ signature: string }, never>({
                method: "xrpl_signMessage", // メッセージに署名する方法を指定します
                params: {
                    signature: hexMsg, // 署名する16進メッセージを指定します
                },
            });
            return txSign; // 署名されたメッセージを返す
        } catch (error) { // 発生したエラーの処理
            console.log("error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    };

    // トランザクションに署名して送信する方法
    signAndSendTransaction = async (): Promise<any> => {
        try {
            // プロバイダを使用してアカウントを要求する
            const accounts = await this.provider.request<never, string[]>({
                method: "xrpl_getAccounts", // Specify the method to get accounts
            });

            if (accounts && accounts.length > 0) { // アカウントが返され、リストが空でないかどうかを確認します
                // 支払トランザクションオブジェクトの作成

                const tx: Payment = {
                    TransactionType: "Payment", // トランザクションタイプの指定
                    Account: accounts[0] as string, // 最初のアカウントを送信者として使用する
                    Amount: xrpToDrops(50), // 送信する金額を指定し、XRPをdropsに変換します
                    Destination: "rM9uB4xzDadhBTNG17KHmn3DLdenZmJwTy", // 宛先アドレスの指定
                };
                // 取引の提出を要求する
                const txSign = await this.provider.request({
                    method: "xrpl_submitTransaction", // トランザクションを送信する方法を指定します
                    params: {
                        transaction: tx, // Transactionオブジェクトを指定します
                    },
                });
                return txSign; // トランザクション署名を返す
            } else {
                return "failed to fetch accounts"; // アカウントが見つからない場合は、エラーメッセージを返します
            }
        } catch (error) { // 発生したエラーの処理
            console.log("error", error); // エラーをログに記録する
            return error; // エラーを返す
        }
    };

}