当前位置：首页 >> solana教程 >> 如何构建 Solana 代币仪表板

如何构建 Solana 代币仪表板

admin 2025-02-21 16:41:25 solana教程 65

为什么要在 Solana 上构建？

说到区块链开发和 Web3，我们基本上才刚刚起步。因此，新的可编程链经常出现。当然，以太坊仍然是庞然大物。然而，这个声誉良好的网络收费高昂。因此，开发人员渴望探索通常被称为“以太坊杀手”的替代方案。Solana 是那些提供高性能、问题相对较少且 gas 费用极低的链之一。不过，你应该轻视“杀手”这个词。根据我们的专业知识，未来将提供几条声誉良好的链，而以太坊很可能会继续存在。因此，跨链互操作性将成为游戏的名称。

幸运的是，这就是 Moralis 在其基础上构建的。本质上，您可以使用相同的代码（进行一些小调整）在未来将 Solana dapp 部署到其他链上。这样，您就可以确保自己的工作面向未来。但是，当您开始构建 Solana 代币仪表板时，我们始终建议开始使用 Solana 的测试网（在 Solana 的情况下为 devnet）为您的区块链开发壮举创建一个无压力的环境。

使用 Moralis 构建 Solana 代币仪表板 – 示例项目

如上所述，我们将在此向您展示如何轻松创建 Solana 代币仪表板。通过使用 Moralis 和样板模板，您将能够在 15 分钟内完成此示例项目。简而言之，这些是您将在此过程中完成的步骤：

完成初始 Moralis 设置。
克隆“ solana-defi-dashboard ”代码。
通过在 Visual Studio Code (VSC) 中输入“yarn install”命令安装所有依赖项。
使用您的 Moralis 服务器 URL 和应用程序 ID 填充“.env”文件。
通过在 VSC 中输入“yarn start”命令来运行应用程序。
使用 Phantom Web3 钱包实现 Web3 身份验证。
确保正确获取用户的投资组合数据。

但是，在引导您完成上述操作之前，让我们确保您清楚了解我们将要构建的内容。因此，让我们快速演示一下我们的示例 Solana 代币仪表板。

我们的 Solana 代币仪表板示例

以下是用户进入我们的 Solana 代币仪表板时看到的内容：

与所有 Web3 应用程序一样，用户需要先进行身份验证。但是，由于 Solana 不是与 EVM 兼容的链，因此我们不使用 MetaMask 进行身份验证。相反，我们使用 Phantom 钱包，它会在用户单击“连接钱包”按钮后提示用户输入密码和批准：

经过身份验证后，我们的 Solana 令牌仪表板如下所示：

如您所见，它显示了用户的地址，为用户提供了断开钱包连接的方法，以及在主网和开发网之间切换的方法。尽管如此，它还显示了原生代币和其他 Solana 代币余额。上面的截图清楚地显示了连接的钱包中有 0.5 SOL，这是链上数据。

您可以查看上图以查看数据确实是从区块链获得的。这包括示例用户的钱包地址和该地址的代币余额。但是，由于此钱包仅包含原生代币（SOL），因此让我们转到开发网络。在那里，这个示例钱包还包含其他 Solana 代币：

上面的截图清楚地表明了所有代币，包括 SPL 标准 NFT。

逐步构建 Solana 代币仪表板

看过上述演示后，您可能已经决定采取行动并构建自己的 Solana 代币仪表板。幸运的是，这并不需要辛苦工作。毕竟，您将使用我们的样板和 Moralis 的 SDK 以创纪录的时间到达终点线。

最初的道德设置

无论您是在其他受支持的链上构建 Solana 代币仪表板还是 Web3 应用程序，您都必须首先完成以下步骤才能使用 Moralis：

创建您的 Moralis 帐户–在 Moralis 的注册页面创建您的帐户。您必须在此处输入您的电子邮件地址并创建密码。然后您还应该单击电子邮件收件箱中的确认链接。但是，如果这不是您第一次使用 Moralis，只需登录即可。

创建 Moralis 服务器– 登录后，您需要创建 Moralis 服务器。为此，请转到 Moralis 管理区域的“服务器”选项卡，然后单击“+ 创建新服务器”。新用户还可以通过页面教程进行指导：

然后，您需要选择适合您项目的网络类型（见下面的屏幕截图）。由于这是一个示例项目，因此“Testnet Server”将是最合适的：

接下来，您必须输入服务器详细信息。因此，首先输入服务器的名称，可以是任何您想要的名称。之后，选择您的区域、网络类型和链。然后单击“添加实例”按钮启动您的服务器：

查看和复制服务器的详细信息– 现在您的服务器正在运行，您可以查看其详细信息。为此，请单击“查看详细信息”按钮：

这将打开一个新窗口，其中包含所有必要的详细信息。只需使用服务器 URL 和应用程序 ID 旁边的复制图标即可：

稍后您将使用这些详细信息来填充其中一个样板文件。但是，您必须先克隆我们的代码。

克隆“solana-defi-dashboard”代码

首先使用上面概述列表中提供的“solana-defi-dashboard”链接。进入我们的 GitHub 页面后，复制代码的地址：

然后，打开您最喜欢的代码编辑器（我们更喜欢使用 Visual Studio Code [VSC]）来克隆代码。在 VSC 中，您需要打开终端，然后输入“git clone”命令，然后输入上面复制的地址来克隆代码：

克隆代码后，您将能够看到与我们的示例项目相关的以下文件夹和文件：

安装所有依赖项

您还需要安装所有依赖项。因此，您需要再次使用 VSC 终端。首先，“cd”进入正确的文件夹。如果您使用与我们相同的名称，那么这是您需要使用的命令行：

cd moralis-可升级智能合约

然后输入“yarn install”，安装完成后会得到“yarn.lock”文件：

注意：您也可以使用 npm。在这种情况下，您将获得“package-lock.json”而不是“yarn.lock”。

填充“.env”文件

如上图所示，有一个“.env.example”文件，你可以将其复制并重命名为“.env”。当然，你也可以直接重命名。然后，打开“.env”文件并粘贴在“初始 Moralis 设置”部分第三步中获得的详细信息：

注意：请勿使用上述服务器 URL 和应用程序 ID。相反，请确保粘贴服务器的详细信息。

运行应用程序

现在，您已准备好通过在终端的命令行中输入“yarn start”来运行应用程序。如果您已正确完成上述所有步骤，您应该会看到以下屏幕：

您应该已经熟悉上面的屏幕截图，因为我们在本文前面的演示中使用过它。此外，您知道用户验证身份后 Solana 代币仪表板界面是什么样子。但是，您还不知道 Web3 身份验证过程是如何执行的，以及它是如何获取用户的投资组合数据的。因此，接下来让我们关注这两个方面。

注意：由于您已克隆我们的代码，因此 Web3 身份验证和用户数据组合获取均已实现。因此，以下部分只是代码演练。

Web3 身份验证和用户投资组合数据获取

我们的 dapp 的核心逻辑（也包括这两个基本但强大的功能）包含在“ App.js ”文件中。就 Solana 网络上的身份验证而言，Moralis 实现了 Phantom 钱包。首先，您需要从“react-moralis”导入 Moralis SDK 和 Solana API：

进口{ 
  使用道德，
  使用MoralisSolanaApi，
  使用MoralisSolana调用，
}来自“react-moralis” ；

以上内容可让您访问一些非常强大的钩子。因此，您可以使用“ authenticate ”来创建“onConnectPhantomWallet”函数：

  const onConnectPhantomWallet =异步( ) => {   
    等待验证（{ 
      输入：“sol” ，
    } ）；
  } ；

上述代码行处理使用 Phantom 钱包的Web3 登录。这意味着我们的 dapp 的“连接钱包”按钮将调用此函数。

就获取用户的投资组合数据而言，上述“导入”已确保我们拥有完全控制权。因此，我们可以使用这些钩子来定义必要的常量：

  const {帐户} = useMoralisSolanaApi ( ) ; 
  const { fetch , data, isLoading } = useMoralisSolanaCall ( account.getPortfolio ) ; 

此外，“ getPortfolio ” 完成了所有繁重的工作。我们还使用“ fetch ”函数，该函数获取主网或开发网上用户（已登录）的地址：

  使用效果( ( ) => {  
    如果（isAuthenticated &&用户。获取（“solAddress” ））{  
      // 仅在经过身份验证时获取
      拿来（{
        参数：{
          地址：用户.get ( “ solAddress” ) ，
          网络，
        } ，
      } ）；
    }
  } , [获取, isAuthenticated, 用户, 网络] ) ;