ソラナアクション・ブリンカー

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

アプリをデプロイする

リポジトリを表示

フロントエンドフレームワーク／ライブラリ：

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 install
# または
yarn
# または
pnpm install
# または
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 run dev
# または
yarn dev
# または
pnpm dev
# または
bun dev

ブラウザでhttp://localhost:3000を開くと、結果を確認できます。

Dappの利用方法

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

プレビュー

Click any of the available actions to execute the action (you will need to sign the transaction when prompted by your wallet).
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