はじめに
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プロジェクトを作成する
npx create-next-app@latest my-project --typescript --eslint
あなたの端末には次のようなものがあるはずです
それを正常に実装したら、my-projectに移動します
cd my-project
My-projectをcdすると、tailwind cssがインストールされます
npm install -D tailwindcss postcss autoprefixer
それが成功した後、あなたはこれを実行します
npx tailwindcss init -p
プロジェクトに利用するいくつかの依存関係をインストールする必要があります
Yarnをパッケージインストーラとして使用したり、npmなどの知っているパッケージインストーラとして使用したりします。
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
//まず、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; // エラーを返す
}
};
}
Top comments (0)