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

Solana ウォレットエクスプローラー

Solanaウォレットエクスプローラーは、QuicknodeのSolanaエンドポイントを活用して、Solanaブロックチェーン上の指定されたウォレットのトークン残高、取引履歴、およびNFTを取得します。

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

概要

Solanaウォレットエクスプローラーは、QuicknodeのSolanaエンドポイントを活用して、Solanaブロックチェーン上の指定されたウォレットのトークン残高、取引履歴、およびNFTを取得します。これは、 Next.js 14 以下のツールを使って立ち上げたプロジェクト create-next-app.

はじめに

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

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

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

環境変数の設定​

Quicknodeのエンドポイントを必ず手元に用意しておいてください。こちらから無料で取得できます。

名前を変更 .env.example ～へ .env.local そして、Quicknode Solana ノードエンドポイントを指定して更新してください。Quicknode Solana ノードエンドポイントで DAS アドオンを有効にしている場合のみ、DAS API を有効にしてください。

SOLANA_RPC_URL=https://example.solana-mainnet.quiknode.pro/123456/
DAS_API_ENABLED=true
NEXT_PUBLIC_FETCH_JUPLIST=true

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

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

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

Dappの利用方法

Solanaウォレットのアドレスを検索して、Enterキーを押してください。 Dappは自動的に以下のページにリダイレクトされます。 /wallet/[アドレス] そして、Solanaブロックチェーンに対して、そのウォレットのトークン残高、取引履歴、NFTについてクエリを実行します。結果はそれぞれのカードに表示されます。

建築​

src/
├── app/
│   └── api/
│       └── wallet/
├── components/
    ├── explorer/
    └── header/
  • API - Solana RPC 呼び出し用の API ルートが含まれています。これらは、クライアント側から以下を通じてアクセスできます。 /api/wallet/[method]?walletAddress=[address]. これらのGETリクエストでは、 @solana/web3.js クエリを処理するためのライブラリおよびMetaplex Digital Asset Standardフレームワーク。
  • コンポーネント - Dapp用のReactコンポーネントが含まれています。
    • その エクスプローラー このコンポーネントには、APIルート呼び出しを行い、その結果をレンダリングするクライアントサイドコンポーネントが含まれています。
    • その ヘッダー このコンポーネントには、Dapp用の検索バーが含まれています。

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 RPCを介してトランザクションが確認される自己管理型の「作成→署名→送信」フローを表示します。
タイタン・メタアグリゲーション・スワップ
ソラナ アクション・ブリンカー
このアプリケーションでは、SolanaアクションのURLを解析して対応するアクションに変換することで、Solanaアクションの作成や操作を行うことができます。有効なアクションURLを入力して詳細を確認したり、ウォレットを接続してアクションを実行したり、提供されている構造に基づいて新しいアクションを作成したりすることができます。
ソラナ アクション・ブリンカー
Solana トークン・ミンター
このアプリケーションを使用すると、QuicknodeのIPFS APIを利用したIPFS画像アップロード機能を標準で搭載し、Solanaブロックチェーン上で代替可能トークンを作成することができます。
Solana トークン・ミンター