Web3Auth(次のjs)を使用したXRP Ledgerアカウントの作成:ステップバイステップガイド
Tags: web3, web3auth, javascript, authjs
Published: 2024-06-23 14:19:20

##はじめに

**XRP ledger**は、国境を越えた支払いに焦点を当てた分散型ブロックチェーンであり、金融取引を文書化するために使用され、高速で低コストで効果的です。 XRP Ledgerは、Rippleの共同創設者兼CEOであるChris Larsenによって作成されました。 XRP Ledeは、そのネイティブ暗号通貨としてXRPを利用しました。

このチュートリアルでは、新しいアカウントを生成するweb3認証を使用してXRP Ledgerを実装しています。 このアカウントは、取引を実行するために使用できます。 これは、xrp ledgerの任意のアドレスにトークンを送信するために使用できます。 ユーザーがXRBアカウントを取得するには、ユーザーはGoogle discordまたはweb3authに関連付けられた他の認証を承認する必要があります。 


###プロジェクトを開始するには. Nextjs、Tailwind CSS、およびその他のweb3認証ライブラリを利用します。

**あなたのターミナルを開けて下さい**

コードを配置するディレクトリに移動します 

新しいnextjsプロジェクトを作成する

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

あなたの端末には次のようなものがあるはずです

![XRP ledger web3auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htop7gligejjszbitv2b.png)

それを正常に実装したら、my-projectに移動します

```javascript
cd my-project

```
My-projectをcdすると、tailwind cssがインストールされます

```javascript
npm install -D tailwindcss postcss autoprefixer
```

![XRP ledger web3auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpv1v49o8pb93mirksgc.png)

### それが成功した後、あなたはこれを実行します


```javascript
npx tailwindcss init -p
```


![XRP ledger web3auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuuvadeuw5m5x5k3b2di.png)

プロジェクトに利用するいくつかの依存関係をインストールする必要があります

Yarnをパッケージインストーラとして使用したり、npmなどの知っているパッケージインストーラとして使用したりします。

```javascript
yarn add @web3auth/xrpl-provider @web3auth/xrpl-provider @web3auth/openlogin-adapter @web3auth/openlogin-adapter @web3auth/modal @web3auth/base @nice-xrpl/react-xrpl
```
インストール後、vs codeでファイルディレクトリを開くことができます 

私達の開発プロセスを始めることができます 

プロジェクトディレクトリにutilsフォルダとcomponentsフォルダを作成し、xrpプロバイダクライアントでweb3authログインによって生成されたアカウントを取得するなど、プロバイダーと呼び出そうとしているその他の関数を定義する必要があります。


> ルートプロジェクトディレクトリでプロジェクト構造でsrcを使用している場合は、アプリまたはページフォルダー内ではなく、ルートディレクトリに作成しない場合は、utilsフォルダーを作成します。

という名前の新しいフォルダを作成します xrpLRPC.ts



```javascript

//まず、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; // エラーを返す
        }
    };

}
```