跳转至主要内容
返回示例应用

Solana 动作转向灯

The Solana Action Blinker app allows you to create Solana Actions and parse Solana Action URLs into their corresponding actions.

部署图标
部署应用
GitHub 图标
查看代码库
前端框架/库：
React/Next.js
语言：
TypeScript
构建工具/开发服务器：
Next.js
示例应用预览

概述

The Solana Action Blinker application allows you to create and interact with Solana Actions by parsing Solana Action URLs into their corresponding actions. With this tool, you can input a valid Action URL to view its details, connect your wallet to execute available actions, and create new actions following the provided structure. Whether you're parsing existing actions or building new ones, this app simplifies the process of interacting with Solana Action URLs.

It uses a Next.js 14 该项目通过以下方式启动： create-next-app.

Background​

Solana Actions provide a standardized way to deliver signable transactions or messages from an application directly to a user. Blinks are client apps that convert Solana Actions into shareable, metadata-rich UIs for interacting with and executing Actions. For more information, check out our Guide on Solana Actions.

入门指南

安装依赖项​

Open the project directory:

cd sample-dapps/solana-action-blinker

Then, install the dependencies:

npm 安装
# 或
yarn
# 或
pnpm 安装
# 或
bun install

设置环境变量​

请确保手头有一个 Quicknode 端点——您可以在这里免费获取一个。


  • 重命名 .env.example 到 .env.local and update with your Quicknode Solana Node Endpoint.
  • Make sure to update the cluster to ensure your transaction URLs point to the correct explorer (use only of the enum values provided in the .env.example file).
QN_ENDPOINT=https://example.solana-mainnet.quiknode.pro/123456
NEXT_PUBLIC_CLUSTER=mainnet-beta # mainnet-beta | devnet | testnet | local

首先，运行开发服务器：

npm 运行 dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev

请使用浏览器打开http://localhost:3000以查看结果。

使用 Dapp


  1. Enter a valid Solana Action URL in the input field. You may copy and paste one of the example links on the homepage.
  2. Click "Parse Action" to see the parsed action details.
  3. You will see the parsed details of the action URL. To see and execute available actions, connect a wallet.

预览

  1. Click any of the available actions to execute the action (you will need to sign the transaction when prompted by your wallet).
  2. You may create additional actions by following the structure in solana-action-blinker/app/api/actions

建筑​

src/
├── app/
│   ├── page.tsx # Main page for Blink
│   └── layout.tsx # layout for the page
│   └── api/
│       └── solana/
│           └── sendAndConfirm/route.ts # Send and Confirm Transaction
│       └── actions/
│           └── memo/route.ts  # Creates a Memo Solana Action
│           └── donate/route.ts  # Creates a Donate Solana Action
└── components/
│   ├── ActionComponents/     # includes components for parsing and executing Solana Actions
│   ├── Blink.tsx        # Main component
│   ├── SolanaProviders.tsx     # Wallet Adapter Context providers
│   └── [supporting components]
└── hooks/
│   ├── useActionFetch.ts  # Fetches and parses Solana Actions from URLs
│   └── useTransactionProcessor.ts  # Executes Solana Transactions
└── utils/ # includes various utility functions and constants

部署到 Vercel

使用 Vercel 进行部署

Next.js 文档

如需进一步了解 Next.js，请参考以下资源：


您可以查看Next.js 的 GitHub 仓库——欢迎大家提出反馈和贡献！

投稿与反馈
我们非常希望听到您的反馈，并欢迎大家为这个示例应用做出任何贡献！
如需报告问题或提供反馈，请在 qn-guide-示例 存储库。
如需贡献，请按照以下步骤操作：
  1. 分叉该仓库
  2. 创建一个功能分支：
    git checkout -b feature/amazing-feature
  3. 提交您的更改：
    git commit -m "添加超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。
探索更多示例应用
Titan 元聚合交换
一个基于Titan Gateway元聚合API构建的单页Solana交易界面，通过Quicknode提供服务。该界面展示各提供商的报价、交易路径所经过的链上交易场所，以及一个自主托管式的“构建→签名→发送”流程，相关交易通过Quicknode RPC进行确认。
Titan 元聚合交换
Solana 钱包浏览器
This application leverages a Quicknode Solana Endpoint to retrieve token balances, transaction history, and NFTs for a specified wallet on the Solana blockchain.
Solana 钱包浏览器
Solana 动作转向灯
该应用程序允许您通过将 Solana 操作 URL 解析为相应的操作，来创建和交互 Solana 操作。输入一个有效的操作 URL 以查看其详细信息，连接您的钱包以执行操作，或使用提供的结构创建新操作。
Solana 动作转向灯