{"author":{"address":null,"user":"https://learnblockchain.cn/people/26079"},"content":{"body":"继 Pump.fun 取得成功之后，一个名为 [Four Meme](https://four.meme)的迷因币创建和交易平台正在 BNB 网络 上快速发展。该平台具备一系列核心特点，例如：轻松创建迷因币、支持用多种稳定币（而不仅仅是 BNB）进行交易、与 PancakeSwap 等去中心化交易所（DEX）合作，以及直观的用户界面（UI），使其成为寻找下一个爆火迷因币的交易者们的热门选择。\r\n\r\n为了充分利用这个生态系统的潜力，我们开发了 **Four Meme 仪表盘**（Four Meme Dashboard），这是一个基于 Next.js 的应用程序，利用 [Bitquery 的 API](https://docs.bitquery.io/) 提供实时数据 和市场洞察。\r\n\r\n**Four Meme 仪表盘的实际应用场景**\r\n\r\n在快节奏的迷因币市场中，及时、准确的信息 对于做出明智的交易决策至关重要。Four Meme 仪表盘 通过提供 Four Meme 平台上交易活动的全面视图 来满足这一需求。其主要功能包括：\r\n\r\n- **[实时交易数据流](https://ide.bitquery.io/subscribe-to-latest-trades-on-four-meme?_gl=1*15smps2*_ga*MTEwMTAyNDIzNi4xNzI0NjkwNTE5*_ga_ZWB80TDH9J*MTc0MTUwNjQyNS4xMzguMS4xNzQxNTA3MTIyLjAuMC4w#)**： 用户可以实时监控最新交易，深入了解市场趋势和热门代币。\r\n\r\n- **[交易者账户](https://ide.bitquery.io/trades-by-an-user-on-Four-Meme_1?_gl=1*1kfyq71*_ga*MTEwMTAyNDIzNi4xNzI0NjkwNTE5*_ga_ZWB80TDH9J*MTc0MTU5NTQ0NS4xMzkuMC4xNzQxNTk1NDQ1LjAuMC4w)**： 仪表盘允许用户查看特定交易者的交易活动，提升透明度并促进社区互动。\r\n\r\n- **[代币交易详情](https://ide.bitquery.io/Trades-of-a-four-meme-token-historical?_gl=1*19fuyw6*_ga*MTEwMTAyNDIzNi4xNzI0NjkwNTE5*_ga_ZWB80TDH9J*MTc0MTU5NTQ0NS4xMzkuMS4xNzQxNTk1NDkxLjAuMC4w)**： 提供特定代币的详细交易信息，包括交易者、交易成本（以 BNB 计）和交易数量，帮助用户做出基于数据的决策。\r\n\r\n 查看该项目的完整[代码库](https://github.com/Kshitij0O7/four-meme-dashboard)，并尝试根据 Bitquery 的 [Four Meme ](https://docs.bitquery.io/docs/examples/BSC/four-meme-api/)文档 示例更改展示的数据。\r\n \r\n**最终输出**\r\n![image.png](https://img.learnblockchain.cn/attachments/2025/03/jPhPDud067cee23ce69bf.png)\r\n Four Meme 交易所最新交易\r\n    \r\n![1741611876113.jpg](https://img.learnblockchain.cn/attachments/2025/03/GNihAraO67cee36c2388f.jpg)\r\n    某交易者在 Four Meme 交易所的最新交易\r\n\r\n![1741612106562.jpg](https://img.learnblockchain.cn/attachments/2025/03/ulKdWp5G67cee44ccfa06.jpg)\r\n某个 Four Meme 代币的最新交易\r\n\r\n**技术概述**\r\n\r\n**Four Meme Dashboard** 基于 Next.js 构建，**Next.js**  是一个 React 框架，支持服务器端渲染（SSR）和静态站点生成（SSG），可确保最佳性能和 SEO 优势。该仪表盘的核心功能依赖于 **Bitquery API**，该 API 提供一整套工具，可访问多个区块链网络（包括 [BSC](https://docs.bitquery.io/docs/category/bsc/)）的实时和历史数据。\r\n\r\n**调用 Bitquery API**\r\n\r\n以下代码示例展示了如何调用 Bitquery API，以获取 Four Meme 相关的链上数据，包括[平台上的最新交易](https://docs.bitquery.io/docs/examples/BSC/four-meme-api/#track-four-meme-trades-in-realtime)、某个[交易者的交易记录](https://docs.bitquery.io/docs/examples/BSC/four-meme-api/#track-trades-by-a-four-meme-user)，以及某个[代币的最新交易信息](https://docs.bitquery.io/docs/examples/BSC/four-meme-api/#get-latest-trades-of-a-four-meme-token)。\r\n\r\n```\r\nconst axios = require('axios');\r\nrequire('dotenv').config();\r\nconst {tradesData} = require(\"@/query/trades\");\r\nconst {traderData} = require(\"@/query/traders\");\r\nconst {tokenData} = require(\"@/query/tokens\");\r\n\r\nlet config = {\r\n  method: 'post',\r\n  maxBodyLength: Infinity,\r\n  url: 'https://streaming.bitquery.io/graphql',\r\n  headers: {\r\n     'Content-Type': 'application/json',\r\n     'Authorization': `Bearer ${process.env.NEXT_PUBLIC_AUTH_TOKEN}`\r\n  },\r\n  data : \"\"\r\n};\r\n\r\nconst getLatestTrades = async () =\u003e {\r\n   config.data = tradesData;\r\n   const response = await axios.request(config);\r\n   const latestTrades = response.data.data.EVM.Events;\r\n   return latestTrades;\r\n}\r\nconst getUserTrades = async () =\u003e {\r\n config.data = traderData;\r\n const response = await axios.request(config);\r\n const latestUserTrades = response.data.data.EVM;\r\n return latestUserTrades;\r\n}\r\n\r\nconst getTokenTrades = async () =\u003e {\r\n config.data = tokenData;\r\n const response = await axios.request(config);\r\n const latestTokenTrades = response.data.data.EVM.Events;\r\n return latestTokenTrades;\r\n}\r\n\r\nmodule.exports = {getLatestTrades, getUserTrades, getTokenTrades};\r\n```\r\n在根目录下创建了一个名为 query 的文件夹，其中定义并导出了变量 tradesData、traderData 和 tokenData，如下所示。\r\n\r\n```\r\nconst tradesData = JSON.stringify({\r\n   query: `{\r\n      EVM(network: bsc) {\r\n        Events(\r\n          where: {\r\n            Log: { Signature: { Name: { is: \"TokenSale\" } } },\r\n            Transaction: { To: { is: \"0x5c952063c7fc8610ffdb798152d69f0b9550762b\" } }\r\n          }\r\n          orderBy: { descending: Block_Time }\r\n        ) {\r\n          Log {\r\n            Signature {\r\n              Name\r\n            }\r\n          }\r\n          Transaction {\r\n            From\r\n            To\r\n            Value\r\n            Type\r\n            Hash\r\n          }\r\n          Arguments {\r\n            Type\r\n            Value {\r\n              ... on EVM_ABI_Boolean_Value_Arg {\r\n                bool\r\n              }\r\n              ... on EVM_ABI_Bytes_Value_Arg {\r\n                hex\r\n              }\r\n              ... on EVM_ABI_BigInt_Value_Arg {\r\n                bigInteger\r\n              }\r\n              ... on EVM_ABI_String_Value_Arg {\r\n                string\r\n              }\r\n              ... on EVM_ABI_Integer_Value_Arg {\r\n                integer\r\n              }\r\n              ... on EVM_ABI_Address_Value_Arg {\r\n                address\r\n              }\r\n            }\r\n            Name\r\n          }\r\n        }\r\n      }\r\n   }`,\r\n   variables: \"{}\"\r\n });\r\n\r\nmodule.exports = {tradesData}\r\n```\r\n**- 在前端渲染数据**\r\n\r\n现在让我们了解 Bitquery API 返回的数据是如何在 Web 应用程序上渲染的。以下是仪表板上 最新交易 页面代码片段的示例。\r\n\r\n1.**导入语句**：\"use client\" 将组件指定为客户端渲染组件，使其具备客户端 JavaScript 功能，例如状态管理和事件处理。\r\n\r\n```\r\n\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { getLatestTrades} from \"../api/four-meme-api\";\r\nimport Link from \"next/link\"\r\n```\r\n2.**组件声明与状态管理**：\r\n\r\n```\r\nexport default function MemeDexDashboard() {\r\n const [trades, setTrades] = useState([]); // trades field defined\r\n const [loading, setLoading] = useState(true); // parameter for conditional rendering\r\n\r\n\r\n /* For every 10 second this useEffect hits the Bitquery API and modifies trades state variable in case of no error and set loading parameter as false */\r\n\r\n\r\n useEffect(() =\u003e {\r\n   async function fetchTrades() {\r\n     try {\r\n       const data = await getLatestTrades();\r\n       setTrades(data);\r\n     } catch (error) {\r\n       console.error(\"Error fetching trades:\", error);\r\n     } finally {\r\n       setLoading(false);\r\n     }\r\n   }\r\n\r\n\r\n   fetchTrades();\r\n   const interval = setInterval(fetchTrades, 10000); // Refresh every 10 sec\r\n   return () =\u003e clearInterval(interval);\r\n }, []);\r\n\r\n\r\n//rendering part\r\n}\r\n```\r\n3.**仪表板页面渲染**：在这一部分，使用了条件渲染来增强用户体验。此外，在表格中，货币地址和交易者地址是可点击的链接，分别将我们带到货币交易页面和用户交易页面。\r\n\r\n```\r\nreturn (\r\n   \u003cdiv className=\"min-h-screen bg-gray-900 text-white p-6\"\u003e\r\n     \u003ch1 className=\"text-3xl font-bold mb-4 text-center\"\u003eFour Meme DEX Dashboard\u003c/h1\u003e\r\n     \u003cdiv className=\"bg-gray-800 rounded-lg shadow-lg p-4\"\u003e\r\n\t\r\n{/*\r\n         Conditional rendering based on loading variable.\r\n         If true -\u003e First one is rendered else second one is\r\n       */}\r\n\r\n\r\n       {loading ? (\r\n         \u003cp className=\"text-center\"\u003eLoading trades...\u003c/p\u003e\r\n       ) : (\r\n         \u003c\u003e\r\n         \u003ctable className=\"w-full border-collapse\"\u003e\r\n           \u003cthead\u003e\r\n             \u003ctr className=\"bg-gray-700\"\u003e\r\n               \u003cth className=\"p-3 text-left\"\u003eCurrency Address\u003c/th\u003e\r\n               \u003cth className=\"p-3 text-left\"\u003eTrader Address\u003c/th\u003e\r\n               \u003cth className=\"p-3 text-left\"\u003eCost\u003c/th\u003e\r\n               \u003cth className=\"p-3 text-left\"\u003eAmount\u003c/th\u003e\r\n             \u003c/tr\u003e\r\n           \u003c/thead\u003e\r\n           \u003ctbody\u003e\r\n             {trades.map((trade, index) =\u003e (\r\n               \u003ctr key={index} className=\"border-b border-gray-700\"\u003e\r\n {/* Currency Address and User Address are made hyperLink using \u003cLink\u003e tag*/}\r\n                 \u003ctd className=\"p-3\"\u003e\u003cLink href={`./trades/tokens/${trade.Arguments[0].Value.address}`}\u003e{trade.Arguments[0].Value.address}\u003c/Link\u003e\u003c/td\u003e\r\n                 \u003ctd className=\"p-3\"\u003e\u003cLink href={`./trades/trader/${trade.Arguments[1].Value.address}`}\u003e{trade.Arguments[1].Value.address}\u003c/Link\u003e\u003c/td\u003e\r\n                 \u003ctd className=\"p-3\"\u003e{(parseFloat(trade.Arguments[2].Value.bigInteger)/10e18).toFixed(12)} BNB\u003c/td\u003e {/* Conversion from BigNumber to Decimals */}\r\n                 \u003ctd className=\"p-3\"\u003e{(parseFloat(trade.Arguments[3].Value.bigInteger)/10e18).toFixed(2)}\u003c/td\u003e\r\n               \u003c/tr\u003e\r\n             ))}\r\n           \u003c/tbody\u003e\r\n         \u003c/table\u003e\r\n         \u003c/\u003e\r\n       )}\r\n     \u003c/div\u003e\r\n   \u003c/div\u003e\r\n );\r\n```\r\n为了更好地理解项目，以下是根目录下的文件结构说明：\r\n```\r\n/api\r\n├── latest-trades          → Bitquery API Logic for Fetching Trades\r\n/app\r\n├── /trades/trader/[id]    → Trader Trades Page\r\n├── /trades/tokens/[id]    → Currency Trades Page\r\n├── layout.js              → Root Layout\r\n├── page.js                → Home Page\r\n/public                     → Static Assets\r\n/query                      → GraphQL Queries to send to Bitquery API\r\n```\r\n\r\n**为何Bitquery成为最优之选**\r\n\r\n在开发需要区块链数据的应用程序时，选择合适的数据提供商至关重要。Bitquery之所以脱颖而出，成为最优选择，原因如下：\r\n\r\n1. **灵活的数据覆盖**：得益于其庞大的数据模式，Bitquery的GraphQL API提供了广泛的数据范围与灵活性，这是许多REST API所无法企及的。\r\n\r\n2. **实时数据访问**：对于像Four.Meme这样的平台，市场状况瞬息万变，Bitquery的实时数据能力确保了用户能够获取最新的信息。\r\n\r\n3. **可扩展性**：**Bitquery**的基础架构设计能够处理大量数据，确保应用程序即使在高峰使用期间也能保持响应速度。\r\n\r\n**结论**\r\n\r\n模因币（Meme coins）及**Four Meme**等平台的兴起，凸显了加密货币市场不断演变的景观。在这一生态系统中，像**Four Meme仪表板**这样的工具发挥着至关重要的作用，它们为交易者提供了有效导航市场所需的数据和洞察力。","title":"Four Meme 仪表盘"},"history":null,"timestamp":1741613176,"version":1}