メインコンテンツへスキップ
サンプルアプリに戻る

Solana ・ブリンカー

「Solana Blinker」アプリを使用すると、Solana を作成したり、Solana URLを解析して対応するアクションを取得したりすることができます。

アイコンの展開
アプリをデプロイする
GitHubのアイコン
リポジトリを表示
フロントエンドフレームワーク／ライブラリ：
React/Next.js
言語：
TypeScript
ビルドツール／開発サーバー：
Next.js
サンプルアプリのプレビュー

概要

「Solana Blinker」アプリケーションを使用すると、Solana 解析して対応するアクションに変換し、Solana や操作を行うことができます。このツールを使えば、有効なAction URLを入力して詳細を確認したり、ウォレットを接続して利用可能なアクションを実行したり、指定された構造に従って新しいアクションを作成したりすることができます。既存のアクションを解析する場合でも、新しいアクションを構築する場合でも、このアプリSolana URLとのやり取りが簡単になります。

これには Next.js 14 以下のツールを使用して立ち上げられたプロジェクト create-next-app.

背景​

Solana 、アプリケーションからユーザーに直接、署名可能なトランザクションやメッセージを配信するための標準化された方法を提供します。 Blinks は、Solana 、アクションとのやり取りや実行を行うための、共有可能でメタデータが豊富な UI に変換するクライアントアプリです。 詳細については、 Solana に関するガイドをご覧ください。

はじめに

依存関係をインストールする​

プロジェクトディレクトリを開きます：

cdsolana

次に、依存関係をインストールします：

npm install
# または
yarn
# または
pnpm install
# または
bun install

環境変数の設定​

endpoint 必ず手元に用意しておいてくださいendpoint こちらから無料で取得できます。


  • 名前を変更する .env.example ～へ .env.local そして、Quicknode のSolana Endpointに更新してください。
  • トランザクションのURLが正しいエクスプローラーを指すように、必ずクラスターを更新してください（ .env.example ファイル）。
QN_ENDPOINT=mainnet
mainnet#mainnet| devnet |testnet  local

まず、開発サーバーを起動します：

npm run dev
# または
yarn dev
# または
pnpm dev
# または
bun dev

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

Dappの利用方法


  1. 入力欄に有効なSolana を入力してください。ホームページに掲載されているサンプルリンクのいずれかをコピーして貼り付けることもできます。
  2. 「アクションの解析」をクリックすると、解析されたアクションの詳細が表示されます。
  3. アクションURLの解析結果が表示されます。利用可能なアクションを確認・実行するには、ウォレットを接続してください。

プレビュー

  1. 利用可能なアクションのいずれかをクリックして、そのアクションを実行してください（ウォレットからプロンプトが表示されたら、トランザクションに署名する必要があります）。
  2. 以下の構造に従って、追加のアクションを作成することができます。 solana

建築​

src/
├── app/
│   ├── page.tsx # Blinkのメインページ
│   └── layout.tsx # ページのレイアウト
│   └── api/
│       └──solana
│           └── sendAndConfirm/route.ts # トランザクションの送信と確認
│       └── actions/
│           └── memo/route.ts  #Solana MemoSolana を作成する
│           └── donate/route.ts  #Solana DonateSolana を作成
└── components/
│   ├── ActionComponents/     #Solana 解析および実行を行うコンポーネントを含みます
│   ├── Blink.tsx        # メインコンポーネント
│   ├── SolanaProviders.tsx     # ウォレットアダプターのコンテキストプロバイダー
│   └── [サポートコンポーネント]
└── hooks/
│   ├── useActionFetch.ts  #Solana を取得・解析する
│   └── useTransactionProcessor.ts  #Solana を実行する
└── utils/ # 各種ユーティリティ関数や定数を定義

Vercelへのデプロイ

Vercel でのデプロイ

Next.js ドキュメント

Next.js についてさらに詳しく知りたい場合は、以下のリソースをご覧ください：


Next.jsのGitHubリポジトリをご覧ください。皆様からのフィードバックや貢献を歓迎します！

投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックの共有を行うには、GitHubのイシューを qn-ガイド-例 リポジトリ。
投稿するには、以下の手順に従ってください：
  1. リポジトリをフォークする
  2. フィーチャーブランチを作成する：
    git checkout -b feature/amazing-feature
  3. 変更をコミットします：
    git commit -m "素晴らしい機能を追加"
  4. ブランチをプッシュしてください：
    git push origin feature/amazing-feature
  5. プルリクエストを作成してください。
その他のサンプルアプリを見る
タイタン・メタアグリゲーション・スワップ
Titan GatewayのMeta-Aggregation APIを基盤として構築され、Quicknodeを通じて提供される、1ページ構成Solana UIです。競合するプロバイダーの相場、ルートが経由するオンチェーン取引所、Quicknode 介してトランザクションflow 確認flow 自己管理型の「作成→署名→送信」flow を表示します。
タイタン・メタアグリゲーション・スワップ
Solana エクスプローラー
このアプリケーションは、Quicknode Solana Endpoint を活用してEndpoint Solana 上の指定されたウォレットのトークン残高、取引履歴、およびNFTEndpoint 。
Solana エクスプローラー
Solana ・ブリンカー
このアプリケーションでは、Solana 解析して対応するアクションに変換し、Solana の作成や操作を行うことができます。有効なアクションURLを入力して詳細を確認したり、ウォレットを接続してアクションを実行したり、提供されている構造に基づいて新しいアクションを作成したりすることができます。
Solana ・ブリンカー