修改 Solana dApp 以支持 Sonic：“SVM Greetings”

介绍

在本教程中，我们将把现有的 Solana dApp 部署到 Sonic 测试网。具体来说，我们将使用 SVM-Greet Solana 程序和 SVM-Greeting dApp 作为示例。本指南适用于已经了解如何构建 Solana dApp 的开发者，并描述了将 Solana dApp 部署到 Sonic SVM 测试网 RPC 时所需的核心修改。

你可以看看已部署的 SVM-greeting 前端。

总的来说，开发者应该采取以下步骤：

1. 获得 Solana dApp 的概述
2. 设置开发环境
3. 获取 Sonic 测试网 Token
4. 使用 Sonic 测试网 RPC 部署 Solana 程序
5. 修改前端
6. 测试并部署

Solana dApp 概述

Solana DApp 可以使用各种技术栈和环境构建，具体取决于开发者的需求。然而，每个 Solana DApp 都遵循一个由多个层组成的基本架构，每一层都有不同的用途。

此图表示定义 Solana DApp 架构的基本层。

让我们深入了解每一层并探索它的用途。

用户层：

在这一层，我们专注于用户——与 Solana DApp 交互的个体。这一层的目的是授权用户连接、签署交易以及与 Solana 程序交互。

用户可以使用任何兼容的 Solana 钱包连接到 DApp 并根据需要签署交易。

开发者可以使用 Solana Wallet Adapter 将 Solana 钱包集成到 DApp 中，以启用用户交互。

在此处查找参考实现：钱包集成

客户端层：

在这一层，我们专注于构建 UI 并集成兼容 Solana 的库，例如 Solana Web3.js 和 Anchor 的 coral。这些库使用户能够将数据提交到程序并以兼容的格式检索数据。

在此处查找参考实现：

• 提交数据
• 检索数据

通信层：

在这一层，我们专注于设置 Solana 程序并将其与 UI 集成。我们使用 程序 IDL 和 provider（通过钱包和集群连接创建）来实现程序 API。

此设置提供了一个接口，允许用户通过前端 UI 直接与 Solana 程序交互，向 RPC 集群发送请求并接收响应。

在此处查找参考实现：

• 网络 Provider
• 程序 IDL
• 程序类型
• 程序 API 实现
• 调用程序方法

区块链层：

在这一层，我们专注于构建 Solana 程序。在本示例中，我们使用 Anchor 框架创建一个 Solana 程序，该程序初始化一个 Solana 账户 并存储用户从 UI 发送的问候消息。

一个 Anchor Solana 程序由 三个主要部分 组成：程序 ID，程序模块，以及账户创建和验证部分。

在此处查找参考实现：

• Greet anchor 程序
• Greet 程序的测试
• Anchor 程序结构

在一个 Anchor 项目中，我们可以构建一个程序来生成程序 IDL 和程序类型，这些将在客户端使用。然后，我们可以将其部署到首选的网络集群并进行测试，以确保程序按预期工作。

在此处查找参考实现：

• 创建、构建、部署和测试 anchor 程序

将 Solana 程序部署到 Sonic SVM 集群

Solana 程序可以很容易地部署到 Sonic SVM 集群。有各种各样的 Solana 程序可用，例如用 Rust 原生编写的程序，或使用 Anchor、Steel 或 Seahorse 等框架构建的程序。为简单起见，我们将使用 Anchor Solana 程序来部署到 Sonic 测试网 RPC 端点。

我假设你已经为 Solana 开发设置了你的开发环境。如果还没有，首先请阅读 为 Sonic SVM 设置本地开发环境 并进行设置。

第一步是克隆 solana-greet 仓库：

git clone git@github.com:shivamSspirit/solana-greet.git

现在，转到项目的根目录并配置你的 Sonic 集群。

solana config set --url https://api.testnet.sonic.game

验证你的配置。

solana config get

它将输出如下内容：

Config File: /Users/shivamsoni/.config/solana/cli/config.yml
RPC URL: https://api.testnet.sonic.game ## 这里已经设置好了
WebSocket URL: wss://api.testnet.sonic.game/ (computed)
Keypair Path: ~/.config/solana/id.json
Commitment: confirmed

现在检查你的钱包地址和账户余额。（我假设你已经使用 Solana-keygen 命令创建了一个 CLI 钱包。）

solana address
solana balance

如果它显示 0 或没有 SOL 数量，请转到 Sonic 水龙头 并获取一些测试网 SOL 以进行部署。

你拥有测试网 SOL，并且你的 RPC 端点已配置。现在，转到项目文件夹，打开 Anchor.toml 文件并将集群 URL 更新为：

[provider]
cluster = "https://api.testnet.sonic.game" ## sonic 测试网 RPC 端点
wallet = "~/.config/solana/id.json" ## 你的钱包路径

在此阶段，我们已准备好将我们的程序部署到 Sonic 测试网。

转到终端并构建你的程序：

anchor build

部署你的程序：

anchor deploy --provider.cluster https://api.testnet.sonic.game

为了简单起见，这里我们覆盖了我们的集群，将其部署到正确的端点。

成功部署后，输出将如下所示：

Deploying cluster: https://api.testnet.sonic.game
Upgrade authority: ~/.config/solana/id.json
Deploying program "svm_greet"...
Program path: /Users/shivamsoni/Desktop/svm-sonic/svm-greet/target/deploy/svm_greet.so...
Program Id: 97uCKFPMDU4S4DQmNwu7BQAYCCFM5fMBms7zk71uJeib

Signature: 65MAiMNGH3BhE41dSXssNUQgxLEmCqDXg3cVj3zJ7GzDkDcbP6CiU6AbzQ965w1aGdCMGivFoLLKNEHzYyDV9Wbz

Deploy success

哇，恭喜！现在你的 Solana 程序已部署到 Sonic 测试网。

从终端获取你的 program ID，并从由 anchor build 命令生成的 target 文件夹中获取 IDL 和 节目类型，因为我们将在前端程序中使用它们。

测试你的程序：

在转移到前端之前，请确保你的程序按预期工作。

anchor test

成功测试后，你的所有测试都应该通过。

  svm-greet
Transaction Signature: CSL7JmirqfRmbUPnYYamSmtE9y6L9SnDiCKDvGkhCmEg98Tqpj9RbCRosi8ydChjQU5NT77xBypPDawHYZMzQXX
    ✔ 已初始化！ (4261ms)
{
  "user": "LVw9ncQJe9aRMj4YZcSNgS82bfEKu1rrNJXv6WY1QPs",
  "greet": "Hello, Svm maxim!",
  "bump": ##### 你的账户 bump
}
    ✔ 获取账户 (799ms)

  2 个通过 (5s)

✨  在 7.49s 内完成。

修改前端

为此，我们不会创建一个完整的前端 dApp。相反，我们将使用 Solana SVM-Greeting dApp 并进行一些调整，使其可以在 Sonic SVM 测试网上运行。

首先，将 SVM-Greeting 存储库克隆到你的系统上：

git clone git@github.com:shivamSspirit/svm-greet-dapp.git

转到 svm-greet-dapp 目录并运行 npm install

npm install

更新 IDL，程序类型和 ProgramID

首先，我们必须设置我们的程序与客户端的交互。为此，我们需要更新我们的 IDL 文件，程序类型和程序 ID。

在项目根目录中，转到 src/app/idl.json 和 src/app/programtypes.ts 文件，删除它们的内容，并添加你从 Sonic SVM 程序中获取的 IDL 和程序类型。

在 src/app/programsetup.ts 中，使用你部署 Sonic 程序时获取的程序 ID 更新你的程序 ID。

export const greetSvmProgramId = new PublicKey(
  "97uCKFPMDU4S4DQmNwu7BQAYCCFM5fMBms7zk71uJeib"
);

更新 RPC 端点和支持的钱包

在 src/app/context/NetworkContext.tsx 中，将网络端点更新为：

export const NETWORKS = {
  MAINNET: {
    name: "mainnet",
    endpoint: "https://rpc.mainnet-alpha.sonic.game",
    label: "Sonic Mainnet",
  },
  TESTNET: {
    name: "testnet",
    endpoint: "https://api.testnet.sonic.game",
    label: "Sonic Testnet",
  },
} as const;

将 Sonic 测试网更新为默认网络

 const [network, setNetwork] = useState<Network>(NETWORKS.TESTNET);

在 src/app/components/WalletProvider.tsx 中，将 WalletAdapterNetwork 更新为：

const walletAdapterNetwork = useMemo(() => {
    switch (network.name) {
      case "mainnet":
        return WalletAdapterNetwork.Mainnet;
      case "testnet":
        return WalletAdapterNetwork.Testnet;
      default:
        return WalletAdapterNetwork.Testnet;
    }
  }, [network.name]);

添加 Sonic SVM 支持的钱包的配置。

  const wallets = useMemo(() => [new NightlyWalletAdapter()], [walletAdapterNetwork]);

  const supportedWalletNames = ["Backpack", "Nightly"];

  const filteredWallets = wallets.filter(
    (wallet:any) =>
      supportedWalletNames.includes(wallet.adapter?.name) &&
      wallet.readyState === WalletReadyState.Installed
  );

  return (
    <ConnectionProvider endpoint={endpoint}>
      <SolanaWalletProvider wallets={filteredWallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </SolanaWalletProvider>
    </ConnectionProvider>
  );

在 src/app/programsetup.ts 中，将 getGreetSvmProgramId 函数更新为：

export function getGreetSvmProgramId(cluster: Cluster): PublicKey {
  switch (cluster) {
    case "testnet":
      return greetSvmProgramId;
    case "devnet":
    default:
      return greetSvmProgramId;
  }
}

更新 provider 以使用 Sonic SVM 网络端点。

export function useAnchorProvider(): AnchorProvider {
  const { network } = useNetwork();
  const testConnection = new Connection(network.endpoint)
  const wallet = useWallet();
  return new AnchorProvider(testConnection, wallet as AnchorWallet, {
    commitment: "confirmed",
  });
}

在 src/app/components/CustomWalletButton.tsx 和 src/app/components/CustomWalletModal.tsx 中，我们添加了 Sonic SVM 支持的钱包的配置，以确保仅显示受支持的钱包。如果用户的系统上未安装任何受支持的钱包，它将建议下载受支持的钱包。

const supportedWalletNames = ["Backpack", "Nightly"];
  const filteredWallets = wallets.filter(
    (wallet) =>
      supportedWalletNames.includes(wallet.adapter.name) &&
      wallet.readyState === WalletReadyState.Installed
  );

在 src/app/components/CreateGreet 中，我们将事务资源管理器链接更新为 Sonic Explorer。

          <Link
            href={`https://explorer.sonic.game/tx/${tx}?cluster=${network.name}`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm text-green-400 hover:underline"
          >

当我们发送第一个事务以初始化 Sonic 测试网上的 greet 帐户并检索 greet 数据时，我们也更改了一些刷新逻辑。你可以在资源部分提供的 GitHub 存储库中查看这些更改。

最后，我们运行前端并对其进行测试，以确保事务正在进行，并且可以在区块资源管理器中观察到。

我们使用 npm run dev 运行了这个修改后的 dApp，以确保它按预期工作，是的，它正在运行！恭喜，我们的 dApp 现在已在 sonic testent 上线。

Sonic SVM 上支持的钱包

在这个简单的例子中，我们使用 Backpack 钱包，因为它可以在 Sonic 上工作。你可以根据你的要求使用其他钱包。以下是一些本机支持 Sonic 网络的钱包。

Sonic 支持的钱包

另外，请注意，我们在初始化 greet 帐户时更新了 Sonic Explorer 链接以弹出。

在这里，我们使用 Solana Explorer 链接结构来为集群和事务签名提供动态值，但它可能无法按预期工作。有关 Sonic Explorer 的更多信息，请访问 Sonic Explorer。

资源

• 在 sonic SVM 上构建和部署你的程序
• 使用 Solana Anchor 为 Solana Devnet 构建的问候程序
• Solana 程序的问候 dApp
• Sonic SVM 测试网的修改程序
• Sonic SVM 测试网的修改 dApp
• Sonic 钱包适配器

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