如何在React中构建Solana的钱包生成器

介绍

在本实用指南中，你将构建一个基本的 Wallet 应用程序，使用 React 和 Web3 与 Solana 网络进行交互。

该应用程序将执行以下操作：

连接到网络

你将使用 Connection 创建与 Solana 网络的连接，有三个选项：mainnet-beta、testnet 和 devnet。

在本示例中，我们将使用 devnet，因为它是一个为任何想要开始使用 Solana 创建的人的游乐场，代币并不是真实的。

生成一个账户

为了与 Solana 网络进行交互，你需要创建一个 Keypair，它将包含一个公钥和一个私钥。公钥将是任何想要向你发送代币的人的地址，而私钥将用于签署交易。

获取生成账户的余额

如果你知道账户的公钥，你可以随时检查该账户的余额。

请求空投

Solana devnet 允许我们请求免费的代币，以便在构建应用程序时进行测试。

这些代币并不是真实的，你只会在连接到 devnet 时看到它们。

前提条件

为了遵循本指南，你需要以下内容：

• 安装 NodeJS

• 安装 Expo

• 对 React 有一定的基础了解

设置模板

我们准备了一个小模板库，以便更轻松地构建此 Wallet 应用程序。

它包含：

• 一个基本框架，带有在教程中实现的空方法。
• 一个布局，用于显示我们将从 Solana 网络获取的数据。
• @solana/web3.js 包以与 Solana 网络进行通信。

文件结构：

• App.js 应用程序的主文件，你将在此处编写代码。
• app.json 该文件包含有关项目的信息：名称、支持的平台、图标、启动图像…
• assets 该文件夹将包含图像。
• babel.config.js 该文件用于扩展 Babel 配置。
• node_modules 该文件夹包含应用程序的所有依赖项和包。
• package.json 该文件包含依赖项列表和一些运行或构建它的脚本。
• yarn.lock 该文件将在每次添加新依赖项时自动更新。它包含每个依赖项的确切版本列表。

首先，你需要克隆 Github 存储库：

git clone https://github.com/quiknode-labs/QuickNode-solana-wallet

克隆完成后，你需要安装依赖项：

cd QuickNode-solana-wallet
yarn install

最后，运行它：

expo web

此时，你将看到以下内容：

终端

按 w 键在终端中或在浏览器中选择 在网络浏览器中运行 以打开应用程序。

现在一切都已配置好，服务器正在运行，是时候开始构建钱包应用程序了。

确保终端是打开的，并且 Expo 正在运行，同时继续跟随本指南。

连接到网络

连接到 Solana 网络非常简单，我们无需注册以获取账户或请求 API 密钥。

如果你打开 App.js，你会发现我们已经有了导入和你需要实现的空函数：

import {
Connection,
clusterApiUrl,
...
} from "@solana/web3.js";

Connection 接受一个 endpoint 参数，其中包含全节点的 URL。

在我们的示例中，我们将使用 devnet，正如我们之前提到的，它旨在作为任何想要在 Solana 网络上开始构建的人的游乐场，并且代币 并不真实。

函数已经定义，因此你只需实现它们。

所以，在你的代码中查找 createConnection 函数并将其修改为如下：

const createConnection = () => {
  return new Connection(clusterApiUrl("devnet"));
};

endpoint 参数的其他有效选项包括：

• devnet
• testnet
• mainnet-beta

最后，我们可以调用此方法并在控制台中打印以查看它是否连接到网络：

console.log(createConnection());

你应该在浏览器的控制台中看到如下内容：

Object{
   "_commitment":"undefined",
   "_confirmTransactionInitialTimeout":"undefined",
   "_rpcEndpoint":"https://api.devnet.solana.com",
   "_rpcWsEndpoint":"wss://api.devnet.solana.com/",
   "_rpcClient":{
      "…"
   },
   "_rpcRequest":"createRpcRequest(method",
   "args)",
   "_rpcBatchRequest":"createRpcBatchRequest(requests)",
   "_rpcWebSocket":{
      "…"
   },
   "_rpcWebSocketConnected":false,
   "_rpcWebSocketHeartbeat":null,
   "…"
}

生成一个账户

要创建一个账户，我们将需要生成一个包含公钥和私钥的 Keypair。

为此，我们已经有了导入：

import {
...
Keypair
...
} from "@solana/web3.js";

在代码中查找空的 createAccount 函数，并将其实现如下：

 const createAccount = () => {
   const keypair = Keypair.generate();
   const initialBalance = 0;
   setAccount({ keypair: keypair, balance: 0 });
 };

• 第 1 行：定义函数。
• 第 2 行：定义一个 keypair 变量，其值为调用函数生成随机 Keypair 的结果。
• 第 3 行：定义一个 initialBalance 变量并设置为 0。
• 第 4 行：使用两个键（keypair 和 balance）设置状态变量。

保存后，应用程序应重新加载，每次按下按钮 创建新账户 时，你将能够创建新的随机账户。

获取账户余额

要获取账户的余额，你需要在代码中查找 getBalance 函数并将其实现如下：

const getBalance = async (publicKey) => {
 const connection = createConnection();

 const lamports = await connection.getBalance(publicKey).catch((err) => {
   console.error(`Error: ${err}`);
 });

   return lamports / LAMPORTS_PER_SOL;
 };

• 第 1 行：函数接收 publicKey 作为参数。
• 第 2 行：定义一个 connection 变量，其值为调用 createConnection 函数的结果。
• 第 4 行：定义一个 lamports 变量，其值为调用我们之前定义的 connection 的 getBalance 函数的结果。
• 第 8 行：我们将返回的值从 lamports（1000000000）除以 SOL 中的 lamports 数，以返回一个更友好的值：1 SOL。

提示

一个 lamport 是 Solana 网络中的最小单位：1 SOL = 10 亿 lamports。

请求空投

如前所述，在 devnet 中代币并不真实。Solana 网络允许我们请求一些代币，以便在构建应用程序时进行测试。

Solana Web3 requestAirdrop 函数接受两个参数：

• to: 账户的 PublicKey
• lamports: lamports 的数量

为此，我们需要在代码中实现空的 requestAirdrop 函数，如下所示：

  const requestAirdrop = async (publicKey) => {
    setRequestAirdropButton({ text: BUTTON_TEXT_LOADING, loading: true });
    const connection = createConnection();

    const airdropSignature = await connection.requestAirdrop(
      publicKey,
      LAMPORTS_PER_SOL
    );

    const timeToWait = 30000;
    const startTime = Date.now();

    while (true) {
      const { value: statuses } = await connection.getSignatureStatuses([\
        airdropSignature,\
      ]);

      if (statuses[0].confirmationStatus === "confirmed") {
        break;
      }

      if (Date.now() - startTime > timeToWait) {
        throw new Error("空投交易超时");
      }
      await new Promise(resolve => setTimeout(resolve, 1000));
    }

    const newBalance = await getBalance(publicKey);

    setAccount({ ...account, balance: newBalance });
    setRequestAirdropButton({ text: BUTTON_TEXT, loading: false });
  };

• 函数接收 publicKey 作为参数。
• 将按钮设置为加载状态。
• 定义一个 connection 变量，其值为调用 createConnection 函数的结果。
• 定义一个 airdropSignature 变量，其值为调用我们之前定义的连接的 requestAirdrop 函数的结果。
• 验证交易状态，直到其被确认。
• 定义一个 newBalance 变量，其值为调用我们 getBalance 函数的结果。
• 设置状态变量，以使用 newBalance 更新 balance 键。
• 更新余额后，我们将按钮设置为初始状态。

结论

恭喜你走到最后！你已经迈出了构建与 Solana 网络交互的基本 Wallet 应用程序的第一步。你学习了如何连接到网络、生成随机账户和请求空投。此外，你还学会了如何使用 React 将所有内容结合在一起。

订阅我们的 新闻通讯，获取更多有关以太坊的文章和指南。如果你有任何反馈，欢迎通过 Twitter 与我们联系。你还可以在我们的 Discord 社区服务器上与我们聊天，那里有一些你遇到的最酷的开发者 :)

• 原文链接： quicknode.com/guides/sol...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～