实时追踪 cNFT 市场事件

状态压缩和压缩 NFT 作为非同质化资产是下一个大事件，并且在 Solana 上变得越来越流行。在本文中，我们将看到如何实时追踪 cNFT 市场事件。

探索 Solana 区块链上的压缩 NFT？ 寻求关于新铸造、转移、销毁以及上市、出价和销售等市场行为的即时提醒？ 你的解决方案就在这里！在本指南中，我们将教你创建一个简单的网站，使用 Shyft API。 该网站将使你实时了解最新的压缩 NFT 事件。 不需要专业知识 —— 我们将全程与你同在。 准备好一起进入 NFT 领域了吗？

在此阅读 SHYFT API 文档 here .

开始之前

要开始，我们需要准备一些东西。

注册你的 Shyft 帐户并获取你自己的 Shyft API 密钥。

x-api-key 是一个身份验证参数，它使你有权访问 Shyft APIs。 你可以从 Shyft 网站获取你自己的 API 密钥。 只需在此处注册你的电子邮件 ID 即可免费获得。 如果你已经拥有 Shyft API 密钥，请跳过此步骤。

创建 Supabase 帐户

我们需要一个地方来存储我们的回调数据，前端可以随后查询并在网站上展示这些数据。 在本教程中，我们将使用 Supabase 来实现此目的，尽管你可以自由选择任何你喜欢的数据库。 如果你有兴趣通过 Next.js 项目设置 Supabase，你可以在此 链接 中找到详细说明。

我们的教程将分为三个步骤：

• 创建一个 API，使前端能够调用和注册回调。 在此过程中，我们将使用 Shyft JS SDK 为用户输入的 Merkle 树注册回调。
• 建立一个 API 以侦听来自 Shyft 的回调。 此 API 将负责接收来自 Shyft 的回调数据，并在收到后将其存储在 Supabase 中。
• 从数据库检索数据并在前端呈现它。 对于实时数据更新，你可以选择在前端和后端之间设置 WebSocket 连接，或者不断地从前端获取数据。 在我们的示例中，为简单起见，我们将使用 Supabase 的实时 功能，该功能使我们能够轻松地从 Supabase 接收实时数据。

你可以从此 repo 克隆本文的完整源代码。

此视频是我们网站的演示。

注册回调 API

Shyft 使我们能够为特定地址注册回调。 这意味着，每当这些地址发生任何链上事件时，Shyft 会立即通知我们相关的事件数据。 在我们的例子中，我们将为我们的 Merkle 树 地址注册回调。 这样，如果发生诸如铸造新的压缩 NFT 或出售压缩 NFT 之类的事件，Shyft 会立即通知我们。

要注册回调，你可以选择手动调用 Shyft API，或者通过提供必要的数据来使用 Shyft JS SDK。 在我们的教程中，我们将选择 Shyft JS SDK 以增加便利性。 有关回调 API 的更多详细信息，你可以在以下 link 中找到更多信息。

// setup Shyft client
import { Network, ShyftSdk } from "@shyft-to/js"

const shyftClient = new ShyftSdk({ apiKey: process.env.NEXT_PUBLIC_SHYFT_API_KEY, network: Network.Devnet })
.
.
.
export default async function handler(req: ExtendedNextApiRequest, res: NextApiResponse<BaseResponse>)
  if (req.method === "POST") {
    try {
      const treeAddress = req.body.tree
      const network = req.body.network
      if (!treeAddress) return res.status(400).json({ success: false, error: "Missing tree address" })
      if (!network) return res.status(400).json({ success: false, error: "Missing network" })
      await shyftClient.callback.register({
        network: network as Network,
        addresses: [treeAddress],
        // The URL of your API that listens for the callback event. We will be set up in the next step.
        // 你的 API 的 URL，用于侦听回调事件。我们将在下一步中设置它。
        callbackUrl: `${process.env.NEXT_PUBLIC_CALLBACK_BASE_URL!}/api/callback`,
      })
      return res.status(200).json({ success: true, message: "Registered successfuly" })
    } catch (err: any) {
      res.status(500).json({ success: false, error: err?.message })
      return
    }
  } else {
    return res.status(405).json({ success: false, error: "Method not allowed" })
  }
}

设置 API 以接收回调

此 API 是一个标准的 POST API。 在上一步中，我们向 Shyft 提供了此 API 的 URL。 当事件发生时，Shyft 将调用此 API 并将数据发送给我们。 我们的职责包括检查数据并将其存储在数据库中。 你可以自由选择要存储的数据部分； 此决定取决于你的应用程序的逻辑。 在我们的教程中，我们存储某些数据，例如 merkle_tree、nft_address、type 和一个名为 info 的原始对象，该对象包含有关事件的各种详细信息。 为了更深入地了解回调数据的结构，你可以参考此 link。

export default async function handler(req: ExtendedNextApiRequest, res: NextApiResponse<BaseResponse>) {
  if (req.method === "POST") {
    try {
      const callbackData = req.body
      const type = callbackData.type
      const action = callbackData.actions.find((action) => action.type === type)
      if (!action) {
        return res.status(400).json({ success: false, error: "Invalid callback data" })
      }
      await supabase
        .from("tbl_transactions")
        .insert({
          merkle_tree: action.info.merkle_tree,
          tree_authority: action.info.tree_authority,
          update_authority: action.info.update_authority,
          nft_address: action.info.nft_address,
          info: action.info,
          type,
        });

      return res.status(200).json({ success: true, message: "Success" })
    } catch (err: any) {
      console.error(err)
      res.status(500).json({ success: false, error: err?.message })
      return
    }
  } else {
    return res.status(405).json({ success: false, error: "Method not allowed" })
  }
}

在前端显示实时数据。

到目前为止，一切顺利 —— 我们已经完成了后端部分。 如本文开头所述，为了简单起见，我们将使用 Supabase 的实时功能来获得前端的实时数据。 当插入新记录时，Supabase 会立即通知我们。

useEffect(() => {
    supabase
      .channel("any")
       // Register the schema and table we want to monitor
       // 注册我们要监视的 schema 和表
      .on("postgres_changes", { event: "*", schema: "public", table: "tbl_transactions" }, (payload) => {
        // received data
        // 接收到的数据
        setEvents((events: TransactionType[]) => [payload.new as TransactionType, ...(events ?? [])])
      })
      .subscribe()
  }, [setEvents])

从 Supabase 接收数据后，我们可以根据数据的 type 字段确定如何在网站上呈现数据。 在我们的文章中，我们专注于与市场相关的操作，例如列表、投标或购买，但你可以自由使用任何你喜欢的操作。

COMPRESSED_NFT_LIST action

COMPRESSED_NFT_SALE action

此外，如果你是 Discord 机器人的粉丝，并且希望在你的 Discord 服务器中接收回调数据，则无需设置 Supabase 数据。 你只需要修改注册回调函数。 将 callbackUrl 替换为你的 Discord webhook URL，并指定 type: DISCORD。 我们写了一篇关于如何使用 Shyft API 创建 Discord 机器人的文章。 你可以通过以下 link 阅读它。

结论

在这篇博客文章中，我们演示了如何构建一个基本网站，该网站将使用 Shyft API 为你提供有关最新压缩 NFT 事件的实时更新。 我们相信你已经发现本指南很有价值！

这是一个快速概述和一些关键点：

• 使用 Shyft API，你可以建立一个回调机制，该机制会在 NFT 上市、收到出价或售出时通知你的服务器。
• 欢迎你复制存储库并将其免费部署在 Vercel 上.

我们衷心希望你喜欢阅读这篇博客文章！ 如果你有任何疑问或想法，请随时访问我们的 Discord 社区。

非常感谢你抽出时间阅读！

资源

• SHYFT API 文档
• Shyft 网站
• 获取 API 密钥
• GitHub
• 加入我们的 Discord
• Javascript SDK
• 在 Swagger UI 上试用我们的 API

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