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

Jupiter Ultra スワップ デモ

Jupiter Ultra API を使用したトークンスワップを実演する、1 ページの Solana スワップ UI

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

概要

This Solana-based single-page application facilitates token exchanges through Jupiter Ultra API integration, paired with Quicknode RPC and Solana Wallet Adapter technologies. The application provides a seamless interface for users to swap tokens on the Solana blockchain with real-time balance updates and transaction tracking.

For a detailed walkthrough of the Jupiter Ultra API integration and implementation details, see the companion guide: How to Swap Tokens With Jupiter Ultra API.


Mainnet Only - Real Tokens & Fees

Jupiter Ultra Swap is only available on Solana mainnet-beta. This means executing swaps will trade real tokens and incur real network fees. You could lose value due to price movement, slippage, or selecting the wrong token pair. Test with small amounts first.

建築​

┌─────────────────┐
│   Next.js UI    │
│  (Client Side)  │
└────────┬────────┘
         │
         ├─ Wallet Adapter (Phantom, Backpack, Solflare)
         │
         ├─ API Routes (Server Side)
         │  ├─ /api/tokens
         │  ├─ /api/balances
         │  ├─ /api/quote
         │  ├─ /api/execute
         │  └─ /api/rpc
         │
         ├─ Jupiter Ultra API
         │  └─ Token swaps & quotes
         │
         └─ Quicknode RPC
            └─ Solana blockchain interactions

特長​


  • Multi-Wallet Support: Connect with Phantom, Backpack, or Solflare wallets
  • Token Selection: Choose from a comprehensive list of verified Solana tokens for swap
  • Real-Time Balances: View live token balances directly from the blockchain
  • Swap Quotes: Get instant swap quotes before executing transactions
  • Transaction Execution: Use Jupiter Ultra's Quote → Order → Sign → Execute → Status lifecycle
  • Transaction Tracking: Monitor swap status and view transaction details on Solana Explorer

前提条件​


  • Node.js (v18 or higher)
  • A Quicknode Solana endpoint
  • A Jupiter API key for swap functionality
  • A Solana wallet (Phantom, Backpack, or Solflare) with mainnet access
  • A small amount of mainnet-beta SOL for transaction fees
  • A small amount of tokens to swap (USDC recommended for testing)

To get your Quicknode RPC URL:

  1. Sign up at Quicknode
  2. Create a new Solana endpoint
  3. Copy the HTTP Provider URL

プロジェクトの構成​

jupiter-ultra-swap/
├── app/
│   ├── api/               # Server-side API routes
│   │   ├── balances/      # Token balance queries
│   │   ├── execute/       # Swap execution
│   │   ├── quote/         # Swap quotes
│   │   ├── rpc/           # RPC proxy
│   │   └── tokens/        # Token list
│   ├── providers/         # React context providers
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Main swap interface
├── components/            # Swap UI components
├── hooks/                 # Custom React hooks
│   ├── useWallet.ts       # Wallet connection logic
│   ├── useTokens.ts       # Token data management
│   └── useSwap.ts         # Swap orchestration
├── lib/                   # Utility libraries
│   ├── jupiter-client.ts  # Jupiter API client
│   ├── solana-kit.ts      # Solana RPC client
│   └── types.ts           # TypeScript definitions
└── .env.example           # Environment variables template

はじめに​

1. Clone the repository:

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/solana/jupiter-ultra-swap

2. Install dependencies:

npm install

3. Configure environment variables:

cp .env.example .env.local

編集 .env.local and add your Quicknode RPC URL and Jupiter API key.

# Quicknode Solana RPC endpoint
QUICKNODE_RPC_URL=your_quicknode_rpc_endpoint_here

# Jupiter API key for swap functionality
JUPITER_API_KEY=your_jupiter_api_key_here

4. Run the development server:

npm run dev

5. Open the application:

Navigate to http://localhost:3000 in your browser.

APIエンドポイント​


The application includes the following server-side API routes:

  • /api/tokens: Returns the list of available tokens for swapping
  • /api/balances: Fetches token balances for a connected wallet
  • /api/quote: Gets swap quotes from Jupiter Ultra API
  • /api/execute: Executes the swap transaction
  • /api/rpc: Proxies RPC requests to Quicknode

プレビュー

Jupiter Ultra Swap Demo Preview

投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックをお寄せいただくには、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 ウォレットエクスプローラー
このアプリケーションは、QuicknodeのSolanaエンドポイントを活用して、Solanaブロックチェーン上の指定されたウォレットのトークン残高、取引履歴、およびNFTを取得します。
Solana ウォレットエクスプローラー
ソラナ アクション・ブリンカー
このアプリケーションでは、SolanaアクションのURLを解析して対応するアクションに変換することで、Solanaアクションの作成や操作を行うことができます。有効なアクションURLを入力して詳細を確認したり、ウォレットを接続してアクションを実行したり、提供されている構造に基づいて新しいアクションを作成したりすることができます。
ソラナ アクション・ブリンカー