跳至主要內容
返回範例應用程式

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.

開始使用

安裝依賴項​

開啟專案目錄：

cd sample-dapps/solana-action-blinker

接著，安裝依賴項：

npm 安裝
# 或
yarn
# 或
pnpm 安裝
# 或
bun 安裝

設定環境變數​

Make sure you have a Quicknode endpoint handy--you can get one free here.


  • 重新命名 .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-examples 儲存庫。
若要貢獻，請依照以下步驟操作：
  1. 分叉此儲存庫
  2. 建立功能分支：
    git checkout -b feature/amazing-feature
  3. 將您的變更提交：
    git commit -m "新增超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 開啟一個 Pull Request。
探索更多範例應用程式
Titan 元聚合交換
一個基於 Titan Gateway Meta-Aggregation API 建構、透過Quicknode 提供的單頁Solana 使用者介面。該介面會顯示各家服務商的報價、交易路徑所經過的鏈上交易場所，以及一套「建構 → 簽署 → 發送」flow 自主託管flow 交易flow 透過Quicknode 進行確認。
Titan 元聚合交換
Solana 瀏覽器
此應用程式利用Quicknode Solana Endpoint Solana 上擷取指定錢包的代幣餘額、交易紀錄及 NFT。
Solana 瀏覽器
Solana 方向燈
此應用程式可讓您透過將Solana URL 解析為對應的動作，來建立及操作Solana 。請輸入有效的動作 URL 以查看其詳細資訊、連接您的錢包以執行動作，或根據提供的結構建立新的動作。
Solana 方向燈